Comment créer un site annuaire avec Bricks Builder ?
🚨 Nouveau template Bricks disponible ! 🚨
Nous venons de publier un superbe template Bricks Builder pour rendre la création de votre site annuaire propulsé par GeoDirectory 100x plus facile et plus rapide !
🎯 Démo en direct : Découvrez-le ici
📥 Téléchargement & Tutoriel : Récupérez le template Bricks Directory
💬 Rejoignez la conversation : Participez à la discussion sur notre forum communautaire
Essayez-le et dites-nous ce que vous en pensez !
Si vous préférez concevoir votre propre template, voici un guide de démarrage pour créer un site annuaire avec le constructeur Bricks et le plugin GeoDirectory :
- Installer le thème Bricks
- Installer et configurer GeoDirectory
- Concevoir le site de répertoire avec Bricks Builder
L'utilisation de Bricks Builder avec le plugin GeoDirectory vous permet de créer un répertoire en ligne d'une sophistication exceptionnelle.
Cette combinaison permet une intégration sans effort des fonctionnalités basées sur la localisation, la personnalisation de l'esthétique et l'incorporation de blocs de contenu dynamiques, offrant ainsi une expérience de site web conviviale et engageante.
Cependant, dans ce tutoriel, nous allons nous concentrer sur la simplicité et la facilité d'utilisation.
Nous utiliserons principalement Bricks Builder avec les shortcodes GeoDirectory.
Dans les prochaines semaines, nous approfondirons le sujet et publierons des tutoriels détaillés sur la façon de concevoir chaque template GD principalement avec les éléments Bricks et les boucles de requêtes (données dynamiques).
Dans ce tutoriel, nous allons :
Installation du thème et des plugins.
1. Installez le Bricks Thème
Tout d'abord, téléchargez le thème et le thème enfant depuis le Bricks site web.
Installez le thème sur votre site WordPress depuis WP-Admin >> Appearance >> Thèmes
Activez la licence du thème.
2. Installer GeoDirectory
Enfin, vous devez installer GeoDirectory.
Accédez à Extensions >> Ajouter, recherchez GeoDirectory. Veuillez l'installer et l'activer, et nous avons terminé l'installation des plugins.
3. Assistant d'installation de GeoDirectory
Pour GeoDirectory, vous devrez compléter l'assistant de configuration pour configurer la clé API Google Maps et importer quelques annonces fictives.
Choisir le système de cartographie (Google Maps ou OpenStreetMap)
Lors de la première étape de l'assistant, vous pouvez choisir entre deux systèmes de cartographie : Google Maps et OpenStreetMaps.
Pour ce guide, nous choisissons OpenStreetMaps.
Si vous souhaitez utiliser Google Maps à la place, vous devrez effectuer quelques étapes supplémentaires :
- Cliquez sur le bouton « Generate Key » et suivez les instructions de ce guide pour créer une clé API valide.
- Voici les étapes importantes :
- Activez les clés.
- Créez un nouveau projet ou choisissez-en un que vous avez déjà.
- Obtenir la clé.
- Configurer un compte de facturation.
- Restreignez la clé API (pour qu'elle ne fonctionne que depuis l'URL de votre site web).
Le quatrième point est indispensable, mais vous ne payez que si vous dépassez 200 $ par mois.
Ce crédit gratuit est bien plus que suffisant pour 99 % des annuaires.
Définir la ville par défaut
Ensuite, vous choisirez l'emplacement par défaut, c'est-à-dire la ville autour de laquelle s'articule l'annuaire.
Nous utilisons Philadelphia comme ville par défaut, mais vous pouvez choisir n'importe quel endroit.
Si vous créez un annuaire pour 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 d'inscription 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.
Vous n'êtes pas obligé d'utiliser AyeCode Connect pour ce tutoriel. C'est uniquement nécessaire si vous souhaitez ajouter des extensions premium GeoDirectory et les installer directement depuis votre tableau de bord WordPress.
Ajouter des données factices
La dernière étape de l'assistant d'installation consiste à ajouter quelques annonces fictives. Cela configure également les catégories d'annonces, que vous pourrez modifier ultérieurement selon vos besoins.
Pour l'instant, nous n'ajouterons ni widgets de barre latérale ni éléments de menu. Nous nous en occuperons plus tard.
Concevoir le Bricks site d'annuaire
Maintenant que nous avons installé le thème et les plugins et effectué la configuration préliminaire de GeoDirectory, nous pouvons commencer à concevoir notre site d'annuaire.
1. Le logo
Commençons par l'essentiel : nous avons besoin d'un logo pour notre site web.
Vous n'avez pas besoin de faire appel à un designer pour créer la première version de votre logo.
L'une des plus grandes erreurs que vous puissiez commettre en démarrant un nouvel annuaire est de consacrer trop de temps et d'argent avant de vérifier si les gens en ont besoin.
Vous pouvez créer un logo en seulement cinq minutes avec une application comme Canva, qui est peu coûteuse et vraiment performante.
Pour une version de base de votre produit (appelée MVP, ou produit minimum viable), un logo réalisé avec Canva fera parfaitement l'affaire.
Il existe de nombreux modèles de logos parmi lesquels choisir, et ce n'est pas grave si votre premier logo n'est pas parfait ou vraiment unique.
Si votre projet commence à bien fonctionner, vous pourrez toujours travailler à améliorer ou à changer complètement le logo par la suite.
Un logo ordinaire n'est généralement pas la raison pour laquelle un projet échoue. Nous utiliserons ce logo lorsque nous créerons l'en-tête du site.
1. Bricks Design de la page d'accueil de l'annuaire
Vous pouvez créer une nouvelle page ou utiliser l'une de celles que WordPress crée par défaut, comme la Page exemple.
Allez dans Pages, modifiez la Page exemple et renommez-la Accueil, ou créez une nouvelle page à cet effet.
Vous devrez définir cette page comme page d'accueil du site. Pour cela, rendez-vous dans wp-admin >> Réglages >> Lecture
Commençons par configurer le menu de navigation du site.
Le menu de navigation
Accédez à 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 les Menu Settings > section Emplacement d'affichage, vous pouvez cocher l'optionMenu d'en-tête – Utilisateur connecté et Menu d'en-tête – Utilisateur déconnecté" options.
Si vous le souhaitez, vous pouvez faire apparaître le même menu sur mobile ou en créer un autre à cet effet.
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
- Lieux et ajouter des lieux
- Rechercher
- Blog
- Comptabilité
- Pages d'inscription et de connexion
L'en-tête
Pour définir l'en-tête du site, allez dans wp-admin >> Bricks >> Templates >> Add New
Créez un modèle Bricks pour l'en-tête.
nous allons sélectionner une mise en page à deux colonnes avec un ratio 30::70.
Dans la colonne de gauche, faites glisser le bloc Logo et téléchargez-y le logo du site.
Définissons la largeur : 200px
Dans la colonne de droite, faites glisser le Menu de navigation dans la colonne de droite.
avec des paramètres tels que
Aligner l'axe principal: centrer
Aligner l'axe secondaire : Droite
Typographie
Transformation du texte : Poppins 500
Le contenu
Maintenant, pour concevoir la page d'accueil, nous allons modifier la page d'accueil en cliquant sur le bouton Modifier avec Bricks.
Nous allons ajouter un conteneur vide avec les paramètres suivants
Alignement automatique : Center
Aligner les axes principaux : Center
Aligner l'axe secondaire : Center
Dans le Style onglet de section
Rembourrage : 50px (Haut) 50px (Bas)
Hauteur minimale : 500
Télécharger l'image d'arrière-plan
Position de l'arrière-plan : Centre Centre
Répétition de l'arrière-plan : Répéter
Ajoutons maintenant une balise de titre sur ce conteneur.
Texte : Trouvez le meilleur restaurant à Philadelphie
Maintenant, dans l'onglet style de la balise de titre, ajoutez les paramètres suivants.
Typographie :
Taille de la police : 48px
Alignement du texte : Center
Transformation du texte : Capitaliser
Police : Poppins
Ajoutez maintenant un bloc de shortcode en dessous et ajoutez le [gd_search mb=”3″] shortcode à l'intérieur.
Ajoutons maintenant un autre conteneur vide et insérons-y un bloc de shortcode avec le shortcode suivant.
[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"]
Dans l'onglet style du conteneur de catégorie. Allez dans Disposition > Marge
Rembourrage haut : 50px
Rembourrage bas : 50px
Rembourrage gauche : 50px
Marge droite : 50px
Nous allons maintenant ajouter une section pour afficher les entreprises récentes.
ajoutons une autre section vide avec une balise d'en-tête et
Texte : Annonces récentes
avec la typographie suivante comme
Taille de police : 32px
Maintenant, ajoutons le shortcode suivant en dessous
[gd_listings post_type="gd_place" post_limit="8" add_location_filter="1" sort_by="latest" title_tag="h3" layout="4" view_all_link="1" bottom_pagination="1" slide_interval="5" mb="3"]
En dessous, nous souhaitons ajouter une carte listant toutes les entreprises.
Pour cela, nous allons ajouter un conteneur vide et un bloc shortcode à l'intérieur avec le shortcode suivant.
avec le style suivant pour le conteneur.
Marge haute : 50px
Marge basse : 50px
[gd_map map_type="auto" post_settings="1" width="100%" height="425px" maptype="ROADMAP" zoom="0"]
Nous souhaitons maintenant ajouter un CTA, pour lequel nous utiliserons une mise en page à deux colonnes.
Avec les paramètres suivants
Direction : Horizontal (ligne)
Alignement automatique : Center
Aligner l'axe secondaire : Center
Espacement des colonnes: 20
Espacement des lignes : 20
Dans la colonne de gauche, nous ferons glisser une image et dans la colonne de droite, nous ajouterons du texte ainsi qu'un bouton pour accéder à la page d'ajout d'annonce.
Le Pied de page
Pour concevoir et créer un pied de page, rendez-vous dans wp-admin >> Bricks >> Templates >> Add New
et sélectionnez le template tag en tant que Pied de page et modifiez le modèle avec Bricks.
Ajoutons maintenant un conteneur vide avec le Couleur d'arrière-plan : #072027
Ajoutez le bloc de texte de base avec du texte et un style Alignement du texte : Center
Après cela, notre page d'accueil est prête.
2. Bricks Conception des pages de listings et de recherche d'un site d'annuaires
Vous devez créer deux pages importantes pour un annuaire : une pour les annonces (comprenant une archive, des catégories et des étiquettes) et une autre pour les résultats de recherche.
GeoDirectory les configure automatiquement avec un design de base. Ce guide vous aidera à peaufiner l'apparence de ces pages.
Étant donné que les pages d'annonces et de recherche sont très similaires, nous les concevrons une seule fois, puis utiliserons la même mise en page pour les deux.
Notre choix pour la conception de la page des annonces est d'avoir les annonces à gauche et une carte fixe à droite, indiquant l'emplacement de chaque annonce.
C'est très simple.
Allez dans Geodirectory > Paramètres > Général > Pages > Cliquez sur Modifier le modèle de page GD Archive
Supprimez tout le contenu de ce GD Archive modèle de page et modifiez-le avec Bricks Builder.
Nous allons maintenant ajouter une section vide et y glisser le Post Title bloc.
Dans les paramètres de style de la section, définissez
Couleur d'arrière-plan : #072027
Rembourrage : 30px 10px 30px 10px
Pour le bloc post-title, définissez le paramètre Typographie sur
Police : Poppins
Couleur : #fffff
Ajoutons maintenant une section vide et un conteneur à deux colonnes ( 50::50 ) à l'intérieur.
Ensuite, dans le conteneur de gauche, nous ajouterons des blocs de shortcode avec les shortcodes liés à la page d'archive GD, tels que GD > Loop Action, GD > Loop, GD > Loop Pagination et GD > Search en haut, afin que l'utilisateur puisse effectuer une recherche depuis la page d'archive.
[gd_search bg='' mt='' mr='' mb='3' ml='' pt='' pr='' pb='' pl='' border='' rounded='' rounded_size='' shadow='' ] [gd_loop_actions bg='' mt='' mr='' mb='3' ml='' pt='' pr='' pb='' pl='' border='' rounded='' rounded_size='' shadow='' ] [gd_loop layout='2' row_gap='' column_gap='' card_border='' card_shadow='' bg='' mt='' mr='' mb='' ml='' pt='' pr='' pb='' pl='' border='' rounded='' rounded_size='' shadow='' ] [gd_loop_paging show_advanced='' bg='' mt='' mr='' mb='3' ml='' pt='' pr='' pb='' pl='' border='' rounded='' rounded_size='' shadow='' ]
Nous ajouterons un bloc Shortcode avec le shortcode GD > Map dans la colonne de droite avec le paramètre suivant.
[gd_map map_type="auto" post_settings="1" width="100%" height="100vh" maptype="ROADMAP" zoom="0"]
Nous ajouterons également une classe scrolling-gd-loop à la colonne de gauche pour le défilement tactile. Vous pouvez cocher l'option indiquée dans la capture d'écran ci-dessous.
Ajoutons le style suivant au personnalisateur de thème.
.scrolling-gd-loop{ overflow-y: scroll !important; max-height: 1000px; }
Désormais, notre page Archive est prête.
Pour créer la mise en page de la page de recherche.
Nous allons créer le GD Search modèle de page à partir de Bricks >> Templates >> Add New. Assurez-vous de sélectionner Sélectionner le type de modèle : GD Search Results
Copiez tout le contenu du GD Archive modèle Bricks et collez-le dans le GD Search modèle Bricks de la page.
Pour ce faire, sur la page Archive GD, cliquez sur l'icône Copier (tout) dans la colonne de droite du Bricks Builder (Structure)
Naviguez jusqu'à la page de recherche. Vous pouvez trouver la page de recherche depuis Geodirectory > Settings > General > Pages.
Modifiez-la avec Bricks. Cliquez sur l'icône Supprimer (tout) dans la colonne de droite du Bricks Builder :
Enfin, cliquez sur l'icône Coller (tout) dans la colonne de droite du Bricks Builder :
Cela rendra la page de recherche et la page Archive identiques, en pleine largeur, avec les résultats dans la colonne de gauche et la carte fixe dans la colonne de droite.
Pour la page de recherche, nous devons également indiquer à Bricks d'afficher ce modèle sur la page individuelle.
Pour ce faire, nous devons cliquer sur l' icône d'engrenage > Paramètres du modèle > Conditions > Individuel > Page de recherche (Titre de votre page de recherche).
3. Conception de la page de liste unique d'un site d'annuaires Bricks
Il est temps de créer le modèle de page de détail. Nous allons modifier le GD Detail modèle de page dans Bricks.
Vous pouvez vous rendre sur Geodirectory > Réglages > Général > Pages > Cliquez sur Modifier le modèle de page GD Detail.
Dans ce modèle, vous trouverez déjà le contenu par défaut généré par Geodirectory.
nous allons supprimer tout ce contenu par défaut et le modifier avec Bricks.
Ajoutons une section vide et insérons-y un bloc shortcode.
Utilisons le shortcode suivant pour afficher le diaporama d'images.
[gd_post_images ajax_load="1" limit="10" limit_show="3" type="slider" slideshow="1" controlnav="1" animation="slide" image_size="large"]
Maintenant, dans une section vide, ajoutons un conteneur à deux colonnes.
Dans le conteneur de gauche, nous ajouterons les shortcodes suivants.
Ce qui inclut GD > Post Title, GD > Single Taxonomies, et GD > Single Tabs.
[gd_page_title tag='h1' no_wrap='false' title_container='1' strip_html='] [gd_single_taxonomies taxonomy='' prefix='' link_style='' link_color='' link_color_custom='' link_icon='false'] [gd_single_tabs heading_font_size="0" heading_text_color_custom="#000000" mt_lg="3" border_type="border"]
Dans la colonne de droite, nous ajouterons le
GD > Author Action, et GD > Output Location bloc.
[gd_author_actions hide_edit='false' hide_delete='false' author_page_only='false'] [gd_output_location location="detail" list_style="wrap"]
Une fois cela fait, notre page de détail de l'annonce est complète.
Ajout de fonctionnalités premium à votre Bricks 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 add-on, Vous pouvez décider du coût d'ajout d'une annonce. Pour différents niveaux de prix, vous pouvez choisir les fonctionnalités incluses ou non. Par exemple, vous pouvez autoriser plus de photos pour les annonces payantes et les limiter pour les annonces gratuites. Vous pouvez également décider si certains champs personnalisés sont disponibles ou non, et si les descriptions peuvent être plus longues ou plus courtes.
- Claim Listings: Cette fonctionnalité est vraiment importante pour un annuaire. Voici comment elle fonctionne : l'administrateur configure la base de données, puis invite les propriétaires d'entreprises à gérer leurs annonces gratuites. Lorsqu'un propriétaire d'entreprise souhaite prendre le contrôle d'une annonce, il peut d'abord être amené à passer à une annonce payante.
- Publicité: la vente d'annonces publicitaires est une autre façon de monétiser un annuaire en ligne. Si votre site reçoit beaucoup de visiteurs, vous pouvez utiliser des réseaux publicitaires. Sinon, vous pouvez vendre des publicités directement. Cela signifie que les entreprises peuvent payer pour afficher des bannières dans certaines parties de votre site, ou que leurs annonces peuvent apparaître comme des publicités, par exemple en haut des résultats de recherche.
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.
Pour ceux qui se lancent dans leur premier projet, voici votre guide : Créer votre propre site d'annuaires.
Ce tutoriel générique peut être adapté à n'importe quel thème ou constructeur de pages.
Les possibilités sont infinies.