Créer un site de répertoire avec Breakdance – Website Builder for WordPress
Voici un guide facile à comprendre sur la façon de créer un site d'annuaire avec le plugin Breakdance Website Builder :
- Installer le plugin Breakdance
- Installer et configurer GeoDirectory
- Concevoir le site d'annuaire avec le Breakdance plugin
Le Breakdance Plugin, utilisé conjointement avec le plugin GeoDirectory, est un excellent moyen de créer un annuaire en ligne flexible. Grâce à cette combinaison, vous pouvez facilement ajouter des fonctionnalités basées sur la localisation, personnaliser la mise en page et intégrer du contenu dynamique pour une expérience conviviale.
Ce système permet aux développeurs et designers web de créer un site d'annuaire de haute qualité adapté à des secteurs spécifiques ou à des besoins communautaires plus larges.
Voyons en détail comment procéder.
Dans ce tutoriel, nous allons :
Installation et configuration des plugins.
1. Installez le Breakdance Plugin
Vous pouvez acheter le plugin Breakdance sur le site breakdance.com. Vous recevrez un fichier zip du plugin. Pour l'installer, rendez-vous sur Extensions >> Ajouter >> Cliquez sur Téléverser le plugin
Maintenant, après l'installation, nous allons désactiver le thème WordPress depuis les Breakdance >> paramètres >> Thème >> Désactiver le thème
2. Installer GeoDirectory
Enfin, vous devez installer GeoDirectory.
Accédez à Extensions >> Ajouter, recherchez GeoDirectory. Veuillez l'installer et l'activer. Nous avons terminé l'installation des plugins.
3. Assistant d'installation de GeoDirectory
Pour le plugin GeoDirectory, vous devez compléter l'assistant de configuration afin de paramétrer la clé API Google Maps et d'importer quelques fiches de démonstration.
Choisir le système de cartographie (Google Maps ou OpenStreetMap)
Vous pouvez choisir entre deux systèmes de cartographie à la première étape de l'assistant : Google Maps et OpenStreetMaps (qui ne nécessite pas de clé API).
Dans ce tutoriel, nous sélectionnons OpenStreetMaps.
Si vous souhaitez sélectionner Google Maps, suivez les étapes supplémentaires ci-dessous.
Cliquez sur le bouton Générer une clé et suivez les étapes de ce doc pour générer une clé API valide.
Les étapes essentielles sont :
- Activer les clés.
- Créer ou sélectionner un projet existant.
- Obtenir la clé.
- Activer un compte de facturation.
- Restreindre la clé API (afin qu'elle ne puisse être utilisée qu'à partir de l'URL de votre site)
Concernant le point quatre : il s'agit d'une obligation. Cependant, vous n'êtes facturé que si vous dépassez le seuil de 200 $/mois.
Ce crédit gratuit est bien plus que suffisant pour 99 % des annuaires.
Définir la ville par défaut
Ensuite, vous définirez l'emplacement par défaut. Il s'agit de la ville pour laquelle l'annuaire est créé.
Nous définirons Philadelphia comme ville par défaut.
Vous pouvez utiliser n'importe quel emplacement selon vos besoins.
Si vous souhaitez ajouter des fiches dans plusieurs villes, vous aurez besoin de l'extension Location Manager.
Ajouter des fonctionnalités supplémentaires
Dans cette étape, nous allons installer UsersWP, un plugin de gestion des utilisateurs qui permet aux utilisateurs de s'inscrire et de se connecter à votre site web.
Cela est nécessaire pour permettre aux utilisateurs d'ajouter et de modifier leurs annonces. Cela créera également des profils utilisateurs où ils pourront retrouver leurs annonces, avis, et bien plus encore.
Nous allons également installer Ninja Forms afin que toutes les annonces disposent d'un formulaire de contact qui envoie des e-mails directement aux propriétaires des annonces.
AyeCode Connect n'est pas obligatoire pour ce tutoriel. Il est principalement nécessaire si vous souhaitez ajouter des extensions premium GeoDirectory et les installer directement depuis le tableau de bord WordPress.
Ajouter des données factices
La dernière étape pour terminer l'assistant d'installation consiste à ajouter quelques annonces factices. Cela ajoutera également des catégories d'annonces que vous pourrez modifier ultérieurement selon vos besoins.
Vous n'ajouterez pas les widgets de la barre latérale ni les éléments de menu maintenant ; nous le ferons plus tard.
Concevoir le Breakdance site d'annuaire
Maintenant que nous avons installé les plugins et effectué la configuration préliminaire de GeoDirectory, nous pouvons commencer à concevoir notre site web d'annuaires avec Breakdance la suite d'outils.
1. Concevoir le logo du site web
Commençons par le commencement : nous aurons besoin d'un logo pour notre site web.
Vous n'avez pas besoin de faire appel à un designer pour esquisser la première version de votre logo.
L'une des plus grandes erreurs que vous puissiez commettre en lançant un nouvel annuaire est d'investir trop de temps et d'argent avant de tester l'adéquation produit-marché.
Vous pouvez concevoir un logo en cinq minutes avec une application comme Canva, qui est abordable et étonnamment efficace.
Pour un MVP (produit minimum viable), un logo conçu avec Canva sera largement suffisant.
Il existe plusieurs modèles de logo parmi lesquels choisir, et peu importe si votre logo initial n'est pas aussi parfait et original que vous le souhaiteriez.
Si votre projet prend de l'élan, vous pourrez toujours investir pour l'améliorer ou le modifier radicalement plus tard.
Un logo ordinaire n'est jamais la principale cause de l'échec d'un projet.
2. Breakdance Design de la page d'accueil de l'annuaire
Vous pouvez créer une nouvelle page ou en utiliser une que WordPress crée par défaut, comme la Page d'exemple.
Allez dans Pages, modifiez la Page exemple et renommez-la Accueil, ou créez une nouvelle page à cet effet.
Ensuite, allez dans Appearance > Personnaliser > Réglages de la page d'accueil et sélectionnez votre page d'accueil.
Le menu de navigation
Après avoir créé et ajouté le logo, rendez-vous dans Appearance >> Menus et créez votre menu.
Ajoutez les liens nécessaires (de la colonne de gauche vers la colonne de droite) et enregistrez.
Dans le Menu Settings > section Emplacement d'affichage, vous pouvez cocher l'optionPrincipal».
Si vous le souhaitez, vous pouvez faire apparaître le même menu dans le pied de page ou en créer un autre à cet endroit.
Dans cet exemple, nous n'aurons que le menu de navigation de l'en-tête.
Nous avons ajouté sept liens de navigation principaux et quelques liens de sous-navigation :
- Accueil
- À propos
- Blog
- Lieux et ajouter des lieux
- Profil
- Connexion
- Déconnexion
Le lien de connexion (depuis les points de terminaison UsersWP) n'apparaîtra que pour les utilisateurs déconnectés, tandis que les liens de déconnexion, de compte et de profil n'apparaîtront que pour les utilisateurs connectés.
La typographie
Définissons les paramètres de typographie globaux depuis Breakdance >> paramètres >> Styles globaux >> Lancer Breakdance
voici les paramètres de typographie
Police des titres : Poppins
Police du corps : Poppins
Taille de base : 16px
Ratio : 1.2
Configurer l'en-tête
Définissons l'en-tête du site, pour cela rendons-nous dans Breakdance >> Header et cliquez sur Ajouter un en-tête.
ici nous allons donner un titre à l'en-tête et nous allons sélectionner
Emplacement : Partout
Priorité : 1
Cliquez maintenant sur Add New en haut à gauche. Vous pouvez créer un en-tête en utilisant ces éléments de bloc disponibles, ou vous pouvez cliquer sur Library et utiliser des modèles d'en-tête déjà créés.
J'utilise l'un des modèles d'en-tête existants de la bibliothèque et j'ai importé le Logo et sélectionné un menu ici.
Maintenant que notre en-tête est prêt, nous allons passer au contenu de la page d'accueil.
Le contenu
Je vais commencer à construire cette page from scratch en utilisant le Breakdance plugin.
Nous avons besoin d'un hero header sur la page d'accueil pour cela.
Commençons par modifier la page d'accueil dans Breakdance en cliquant sur Edit in Breakdance bouton.
nous allons faire glisser une section vide en cliquant sur le Ajouter bouton en haut à gauche.
Depuis l'onglet de style de section, définir
Alignement : Center
Type d'arrière-plan : Image
Taille de l'image : Pleine
Taille : Couverture
Répétition : no-repeat
Position : Center
Attachement : Défilement
Supprimer l'image à : Bureau
Hauteur : Personnalisée
Hauteur personnalisée : 400px
Faisons maintenant glisser un élément Titre avec les paramètres suivants.
Texte : Trouvez le meilleur restaurant à Philadelphie
Couleur : #FFFFFFFF
Taille de police : 48
Graisse de police : 600
nous allons ajouter un bloc shortcode avec le [gd_search] shortcode ci-dessous.
Ajoutons maintenant un autre conteneur vide en dessous avec le shortcode suivant pour afficher la liste des catégories.
[gd_categories post_type="0" max_level="1" max_count="all" max_count_child="all" sort_by="az" design_type="image" row_items="4" card_shadow="small" use_image="1" image_size="large" cat_text_color_custom="#000000" cat_font_size="0" badge_text_color_custom="#000000" badge_color="light" badge_font_size="0" title_tag="h4" mb="3" rounded="rounded"]
nous allons appliquer un padding de 50px en haut et en bas.
Nous avons maintenant besoin d'une section pour les annonces récentes. nous allons ajouter un élément shortcode avec le shortcode suivant.
[gd_listings post_type="gd_place" post_limit="6" add_location_filter="1" sort_by="latest" title_tag="h3" layout="3" view_all_link="1" bottom_pagination="1" slide_interval="5" mb="3" rounded="rounded"]
Ajoutons maintenant un shortcode supplémentaire pour afficher la carte des annonces.
[gd_map map_type="auto" post_settings="1" width="100%" height="425px" maptype="ROADMAP" zoom="0"]
Pour finir, nous avons besoin d'un CTA pour cela, j'utilise un modèle CTA existant.
Configurer le pied de page
Maintenant, pour terminer, configurons le pied de page du site et rendons-nous dans Breakdance >> Footer et cliquez sur Ajouter Pied de page.
nous pouvons créer un pied de page de zéro ou utiliser l'un de ceux déjà disponibles. J'utilise un modèle de pied de page existant. nous pouvons facilement personnaliser ces menus de pied de page selon nos besoins.
Pour l'instant, je le laisse tel quel.
Félicitations ! Votre page d'accueil est terminée.
2. Breakdance Conception des pages de listings et de recherche d'un site d'annuaires
Page de listings
Vous devez maintenant concevoir deux pages essentielles pour tout annuaire.
La page des annonces (archive générale, catégories, étiquettes) et la page des résultats de recherche.
GeoDirectory les crée par défaut avec une mise en page générale. Dans ce tutoriel, nous allons créer et personnaliser la mise en page de ces pages à l'aide de Breakdance Builder.
Rendons-nous dans les Breakdance >> Templates >> Add Template
Dans l'option suivante, nous sélectionnerons les paramètres ci-dessous et cliquerons sur Add Template bouton.
Emplacement : Archive/Post Type Archive
Condition : Post Type = Places
Dans le template, nous allons ajouter une section vide et appliquer les paramètres suivants au bloc de section.
Layout
Align : Center
Vertical Align : Center
Background :
Color : F5F8FFFF
Type : Gradient
Ajoutons maintenant le bloc Archive Title à l'intérieur.
Vous avez maintenant deux options et nous vous montrerons les deux :
La façon la plus simple de le faire est d'utiliser une seule colonne et le shortcode suivant : [gd_simple_archive layout=
2) Si vous souhaitez avoir un contrôle total sur le design, nous devrons ajouter un bloc colonne avec une mise en page à deux colonnes à la place.
Dans les paramètres, nous utiliserons Largeur : Pleine
Nous allons maintenant faire glisser le conteneur de shortcode et utiliser le shortcode requis à l'intérieur.
Dans le conteneur de gauche, nous utiliserons les widgets GD relatifs à la page Archive, comme GD > Loop Action, GD > Loop, GD > Loop Pagination, et GD > Search en haut afin que l'utilisateur puisse effectuer une recherche depuis la page Archive.
[gd_search mb="3"] [gd_loop_actions] [gd_loop layout='2'] [gd_loop_paging]
Dans la colonne de droite, utilisez le bloc GD > Carte, et nous laisserons tous les paramètres à leurs valeurs par défaut. Cependant, nous définirons la hauteur du bloc GD > Carte à 100vh.
[gd_map map_type="auto" post_settings="1" scrollwheel="1" width="100%" height="100vh" maptype="ROADMAP" zoom="0"]
Nous allons maintenant ajouter ce qui suit gd-archive-left-container comme classe à la section de gauche.
Dans la colonne de gauche, nous ajouterons la classe suivante gd-archive-left-column.
Pour la touche finale, nous ajouterons le CSS suivant dans le personnalisateur de thème depuis Appearance => Personnaliser => Ajouter du CSS
.geodir-archive .gd-archive-left-container{ overflow-Y: scroll; max-height: 100%; height:100vh; padding-right:15px; } .gd-archive-left-column{ overflow:hidden; }
Après cela, la page Archive des annonces est maintenant prête.
Page de recherche
Nous allons maintenant créer un modèle pour la page de recherche GeoDirectory, alors rendons-nous dans Breakdance >> Templates >> Add Template >> Résultats de recherche
Nous allons maintenant copier tout le contenu du GD Archive modèle vers le GD Search modèle.
Nos modèles de pages GD Search et Archive sont maintenant prêts.
4. Breakdance Conception de la page de fiche individuelle d'un site d'annuaires
Rendons-nous dans les Breakdance >> Templates >> Add Template
Dans l'option suivante, nous sélectionnerons les paramètres ci-dessous et cliquerons sur Add Template bouton.
Emplacement : Single/Places
Condition : Post Type = Places
Nous allons ajouter une section vide avec un rembourrage de 0 de tous les côtés.
nous allons ajouter le shortcode suivant pour afficher un diaporama d'images.
[gd_post_images ajax_load="1" limit="10" limit_show="3" type="slider" slideshow="1" controlnav="1" animation="slide"]
Ajoutons maintenant une section supplémentaire avec une disposition en deux colonnes à l'intérieur.
Ajoutons maintenant tous les GD Detail shortcodes de page requis dans la colonne de gauche, un par un.
Ce qui inclut GD > Post Title, GD > Single Taxonomies, et GD > Single Tabs.
[gd_single_taxonomies taxonomy='' prefix='' link_style='' link_color='' link_color_custom='' link_icon='false' mt='' mr='' mb='2' ml='' pt='' pr='' pb='' pl='' ] [gd_single_tabs heading_font_size="0" heading_text_color="primary" heading_text_color_custom="#000000" mt_lg="3" border_type="border"] [gd_single_next_prev bg='' mt='4' mr='' mb='3' ml='' pt='' pr='' pb='' pl='' border='' rounded='' rounded_size='' shadow='' ]
Dans la colonne de droite, nous allons ajouter GD > Author Action et GD > Output Location bloc.
[gd_author_actions hide_edit='false' hide_delete='false' author_page_only='false' display='' size='' alignment='' color='primary' text_color='white' btn_mt='1' btn_mr='' btn_mb='1' btn_ml='' bg='' mt='' mr='' mb='' ml='' pt='' pr='' pb='' pl='' border='' rounded='' rounded_size='' shadow='' ] [gd_output_location location="detail" list_style="wrap"]
Ajout de fonctionnalités premium à votre Breakdance site d'annuaire
Si vous le souhaitez, vous pouvez maintenant ajouter des fonctionnalités premium à votre annuaire, telles que :
- Annonces payantes: avec le module complémentaire GeoDirectory Listing Price Manager , vous pouvez définir des tarifs pour la soumission d'annonces. Pour chaque niveau de prix, vous pouvez activer/désactiver des fonctionnalités telles que : restreindre le nombre de photos pour les annonces gratuites tout en en autorisant davantage pour les annonces payantes, autoriser plus ou moins de tags et de catégories, activer ou désactiver des champs personnalisés spécifiques, soumettre des descriptions plus longues ou plus courtes.
- Claim Listings: Il s'agit d'une fonctionnalité fondamentale pour un annuaire où l'administrateur crée la base de données et invite les propriétaires d'entreprises à prendre en charge leurs annonces gratuites. Le processus de réclamation d'une annonce peut inclure le passage obligatoire à une annonce payante pour en reprendre la propriété.
- Publicité: la vente d'annonces publicitaires est une autre façon de monétiser un annuaire en ligne. Si vous avez beaucoup de trafic, vous pouvez utiliser des réseaux publicitaires. Sinon, vous pouvez vendre des annonces directement, en permettant aux entreprises d'ajouter des bannières dans des zones spécifiques de votre site web, ou en permettant à des annonces d'apparaître en tant que publicités, par exemple, en haut des résultats de recherche organiques.
Ce ne sont là que trois exemples. Cependant, un site d'annuaire offre de nombreuses façons de gagner de l'argent en ligne.
Vous pouvez créer une marketplace mondiale d'articles artisanaux, vendre des billets d'événements ou des bons de réduction.
Apprenez les aspects fondamentaux grâce à ce guide essentiel : Les bases de la création d'un site d'annuaires.
Les possibilités sont infinies.
Libérez la puissance de GeoDirectory !
Lancez votre activité en ligne dès maintenant
Rejoignez-nous dès aujourd'hui !Newsletter - Restez informé !
Recevez les dernières actualités, conseils et contenus exclusifs directement dans votre boîte de réception.