Le plugin de répertoire WordPress le plus avancé et le plus évolutif au monde

Récemment, nous avons créé Blockstrap, à la fois une extension (fournissant les blocs de construction de pages) et un thème de blocs (FSE – Full Site Editing) qui combine la puissance du nouvel éditeur de site de WordPress et Bootstrap 5.

Nous avons conçu Blockstrap comme la base de notre nouvelle génération de thèmes annuaires, qui comprendra bientôt un annuaire d'entreprises générique avec un thème Événements, un thème Immobilier, un thème Offres d'emploi, un thème Petites annonces, et bien d'autres modèles d'annuaires pour WordPress,

Tous ces thèmes sont spécifiquement conçus pour créer un site annuaire pixel-perfect avec GeoDirectory.

Dans ce tutoriel, vous trouverez un guide étape par étape pour créer un site annuaire en utilisant le thème Blockstrap, le thème enfant Directory et notre extension GeoDirectory :

1. Installer le thème Blockstrap/Directory
2. Installer et configurer GeoDirectory
3. Concevoir le site annuaire à l'aide du constructeur de thème de blocs

Dans ce guide, nous vous montrerons comment créer un annuaire en ligne moderne en utilisant le thème Directory et l'extension GeoDirectory.

Avec cette configuration, vous pouvez facilement ajouter des fonctionnalités basées sur la localisation, donner un aspect attrayant à votre site et ajouter différents types de contenu qui change de façon dynamique.

Mais pour l'instant, nous allons rester simples et faciles à comprendre.

Dans ce tutoriel, nous aborderons :

• Installer et configurer le thème et les plugins
  1. Installer le thème Blockstrap/Directory
  2. Installer GeoDirectory
  3. Assistant d'installation GeoDirectory
     • Choisir le système de cartographie
     • Définir la ville par défaut
     • Ajouter des fonctionnalités supplémentaires
     • Ajouter des données factices
• Concevoir le site annuaire Blockstrap/Directory
  1. Le logo
  2. La conception de la page d'accueil
     • L'en-tête
     • Le contenu
  3. La conception des annonces et de la page de recherche
  4. La conception de la page de fiche unique

Installation du thème et des plugins.

1. Installer le thème Blockstrap et son Directory Child Theme

Commençons par installer le Directory thème. Comme il s'agit d'un thème enfant de Blockstrap il installera automatiquement le thème principal également.

L'installation du thème Blockstrap vous invitera également à installer le plugin Blockstrap.

le plugin Blockstrap est notre constructeur de pages, nécessaire pour ajouter la collection de blocs Blockstrap et enrichir le design de votre site d'annuaires.

Si vous vous interrogez sur les trois avis 1 étoile concernant ce thème, sachez qu'ils portent en réalité sur une très ancienne version de ce thème créée par d'autres développeurs, et non sur la version actuelle. Nous avons acquis le thème « Directory » original ainsi que son URL (wordpress.org/themes/directory/) parce que nous en appréciions le concept et souhaitions l'intégrer à notre nouveau produit. Malheureusement, cela impliquait d'hériter de ses anciens avis négatifs.

Rendez-vous sur votre site WordPress et depuis 

WP-Admin >> Appearance >> Thèmes >> Add New: recherchez Directory et installez la première option de thème.

2. Installer GeoDirectory

Voici comment procéder :

1. Allez dans « Extensions » puis « Ajouter une extension ».
2. Recherchez GeoDirectory.
3. Installez-le et activez-le.

C'est tout ! Les plugins sont maintenant entièrement configurés.

3. Assistant d'installation de GeoDirectory

Pour GeoDirectory, vous devez terminer l'assistant de configuration afin de paramétrer la clé API Google Maps et d'importer quelques annonces fictives.

Choisir le système de cartographie (Google Maps ou OpenStreetMap)

À la première étape de la configuration, vous choisissez entre deux systèmes de cartographie : Google Maps et OpenStreetMaps. Dans ce guide, nous utilisons OpenStreetMaps.

Si vous préférez Google Maps, quelques étapes supplémentaires sont nécessaires :

1. Cliquez sur le bouton « Générer une clé » et suivez les instructions fournies ici pour créer une clé API valide.
2. Voici les étapes importantes :
   • Activer les clés.
   • Créer un nouveau projet ou en sélectionner un existant.
   • Obtenir la clé.
   • Configurer un compte de facturation.
   • Limiter la clé API (afin qu'elle ne fonctionne que depuis l'URL de votre site).

La quatrième étape est essentielle, mais vous ne payez que si vous dépassez 200 $ par mois. Cependant, le crédit gratuit couvre généralement les besoins de la plupart des annuaires.

Passons maintenant à la configuration de la ville par défaut.

Définir la ville par défaut

Ensuite, vous sélectionnerez l'emplacement par défaut, c'est-à-dire la ville principale mise en avant dans l'annuaire.

Nous avons choisi Philadelphia comme ville par défaut, mais vous êtes libre de choisir n'importe quel emplacement.

Si vous créez un annuaire couvrant plusieurs villes, vous aurez besoin de l'extension Location Manager.

Ajouter des fonctionnalités supplémentaires

Dans cette étape, nous allons configurer UsersWP, une extension pour la inscription des utilisateurs. Cela permet aux utilisateurs de s'inscrire et de se connecter à votre site.

UsersWP est indispensable pour que les utilisateurs puissent gérer leurs annonces, créer des profils et accéder à des fonctionnalités telles que les avis.

De plus, nous allons installer Ninja Forms, qui ajoute des formulaires de contact à toutes les annonces. Ces formulaires envoient des e-mails directement aux propriétaires des annonces. (REMARQUE : BlockStrap dispose d'un formulaire de contact simple qui peut être utilisé à cet effet ; Ninja Forms est utile pour des formulaires plus avancés)

Notez que AyeCode Connect n'est pas requis pour ce tutoriel, sauf si vous souhaitez ajouter des extensions premium GeoDirectory directement depuis votre tableau de bord WordPress.

Ajouter des données factices

La dernière chose à faire dans l'assistant d'installation est d'ajouter quelques annonces exemples. Cela crée également des catégories pour les annonces, mais vous pouvez toujours les modifier ultérieurement si vous le souhaitez.

Concevoir le Blockstrap/Directory Theme site d'annuaire

Maintenant que nous avons installé le thème et les plugins, et complété la configuration préliminaire de GeoDirectory, nous pouvons commencer à concevoir notre site web d'annuaires.

Notre Blockstrap's thème enfant appelé Directory thème, fournit déjà un modèle de bloc prédéfini pour les pages GeoDirectory.

Dans cet article, nous allons personnaliser ces modèles prédéfinis directement.

1. Blockstrap/Directory Design de la page d'accueil

Pour personnaliser le design de la page d'accueil.
Accédez à Appearance >> Gutenberg >> Cliquez sur Templates

Sélectionnez maintenant le modèle Front page et cliquez sur l'icône de modification.

avant de modifier le modèle de la page d'accueil, créons d'abord un logo pour le site web.

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 lançant un nouveau répertoire est de consacrer trop de temps et d'argent avant de tester si les gens ont besoin de ce que vous envisagez de créer.

Vous pouvez créer un logo en seulement cinq minutes à l'aide d'une application comme Canva, qui est fantastique et gratuite (ou peu coûteuse au regard de ce qu'elle propose si vous optez pour un plan premium).

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 web.

L'en-tête

Ajoutons maintenant cette image de logo en sélectionnant le bloc approprié dans la partie gauche, comme indiqué dans la capture d'écran ci-dessous.

Ajoutons maintenant quelques éléments de menu requis. Comme Accueil, Lieux, et Blogs, Contact et À propos dans notre cas.

Vous pouvez utiliser le BS > Nav item bloc pour ajouter le nouvel élément de menu.

CONSEIL PRO : Si vous décidez d'utiliser l'en-tête transparent pour la page d'accueil, vous devrez ajouter le logo à la fois dans l'en-tête standard et dans l'en-tête transparent.

Le contenu

Voici à quoi ressemble la page d'accueil par défaut avec le Blockstrap's Directory Child Theme.

Elle semble déjà complète en elle-même, mais nous allons y apporter quelques modifications mineures.

Le gd_location les shortcodes appartiennent à l'extension Geodirectory Location Manager . Comme nous n'utilisons pas cette extension pour le moment, je supprime ces shortcodes que vous voyez dans la capture d'écran ci-dessous.

Voici maintenant à quoi ressemble notre page d'accueil.

Si vous souhaitez ajouter une nouvelle section ou apporter des modifications au contenu d'une page, vous pouvez utiliser le Blockstrap theme blocs intégrés qui commencent par BS >

2. Blockstrap/Directory Design de la page des annonces et de la recherche du site

Comme mentionné précédemment, les thèmes Blockstrap et Directory disposent déjà de modèles prédéfinis pour les pages GD.

Tous ces modèles sont complets en eux-mêmes, nous n'avons donc pas besoin d'y apporter des modifications.

Étant donné que les pages internes utilisent un en-tête hero, nous devons personnaliser la section d'en-tête de la page Archive et la mettre à jour avec le nouveau logo et les éléments de menu.

Allons dans Appearance >> Gutenberg >> Cliquez sur Templates >> Sélectionnez GD Archive pour la mise en page de la page Archive.

Comme pour la page d'accueil, nous allons télécharger le nouveau logo et les éléments de menu ici sur l'en-tête de la page GD Archive.

Voici à quoi ressemble la page GD Archive avec le design par défaut.

de même, pour la GD Search page, sélectionnez le GD Search Archive modèle et effectuez les modifications nécessaires.

Je conserve la mise en page par défaut pour cet article.

3. Blockstrap/Directory Design de la page d'annonce individuelle du site

Pour personnaliser le GD Detail page, sélectionnez le GD Single modèle de page et effectuez les modifications nécessaires.

Voici à quoi ressemble le modèle par défaut de la page GD Details, qui semble complet et contient tous les éléments requis. Je ne vais donc pas le modifier.

Ajout de fonctionnalités premium à votre Blockstrap/Directory Site web

Si vous le souhaitez, vous pouvez maintenant ajouter des fonctionnalités premium à votre annuaire, telles que :

1. Annonces payantes: avec le module complémentaire GeoDirectory Listing Price Manager add-on, Vous choisissez le prix à payer pour ajouter une annonce. Vous pouvez définir des tarifs différents selon les options. Par exemple, vous pouvez proposer plus de fonctionnalités pour les annonces payantes, comme la possibilité d'ajouter plus de photos, tout en limitant les fonctionnalités pour les annonces gratuites. Vous pouvez également décider quels champs spéciaux sont disponibles et quelle est la longueur maximale des descriptions.
2. Claim Listings: Cette fonctionnalité est essentielle pour un annuaire. Voici comment elle fonctionne : d'abord, l'administrateur configure la base de données. Ensuite, il invite les propriétaires d'entreprises à gérer leurs annonces gratuites. Si un propriétaire souhaite un contrôle total, il devra peut-être d'abord passer à une annonce payante.
3. 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 des zones spécifiques 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 un marché mondial pour les articles faits main, vendre des billets pour des événements ou proposer des bons de réduction.

Si vous souhaitez vous lancer, consultez cette ressource : Comment créer un site d'annuaire de zéro.

Ce tutoriel est polyvalent et peut être adapté pour fonctionner avec n'importe quel thème ou constructeur de pages.

Les possibilités offertes par votre site sont infinies.

Conclusion

Nous avons publié un grand nombre de tutoriels sur la création d'un annuaire avec les thèmes et constructeurs de pages les plus populaires.

Si vous en avez lu certains, vous remarquerez que la création avec le framework Blockstrap et son thème enfant pour annuaire est plus simple.

Le résultat est bien plus beau.

Et enfin, si vous testez un site d'annuaire Blockstrap, vous remarquerez également qu'il est bien plus rapide que tous ceux pour lesquels nous avons créé des tutoriels jusqu'à présent.

Le meilleur dans tout ça, c'est que le thème et plugin Blockstrap ainsi que le thème enfant pour annuaire sont 100 % gratuits !

Alors, qu'attendez-vous ? Lancez votre site d'annuaire avec Blockstrap et le plugin GeoDirectory et commencez à gagner de l'argent en ligne dès maintenant !

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 :

1. Installer le thème Bricks
2. Installer et configurer GeoDirectory
3. 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 :

• Installer et configurer le thème et les plugins
  1. Installer le thème Bricks
  2. Installer GeoDirectory
  3. Assistant d'installation GeoDirectory
     • Choisir le système de cartographie
     • Définir la ville par défaut
     • Ajouter des fonctionnalités supplémentaires
     • Ajouter des données factices

• Concevoir le site de répertoire avec Bricks
  1. Le logo
  2. La conception de la page d'accueil
     • Le menu de navigation
     • L'en-tête
     • Le contenu
     • Le Pied de page
  3. La conception des annonces et de la page de recherche
  4. La conception de la page de fiche unique

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 :
  1. Activez les clés.
  2. Créez un nouveau projet ou choisissez-en un que vous avez déjà.
  3. Obtenir la clé.
  4. Configurer un compte de facturation.
  5. 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 :

1. Accueil
2. Lieux et ajouter des lieux
3. Rechercher
4. Blog
5. Comptabilité
6. 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 :

1. 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.

1. 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.

1. 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.

Suivez ces étapes pour créer un site d'annuaires avec BuddyBoss et le plugin GeoDirectory :

1. Installez le thème BuddyBoss et la BuddyBoss Platform.
2. Configurez GeoDirectory.
3. Installez le plugin Elementor.
4. Concevez votre site d'annuaires en utilisant le thème BuddyBoss et Elementor.

En combinant BuddyBoss avec le plugin GeoDirectory et le plugin Elementor, vous disposerez d'une plateforme polyvalente pour créer un annuaire en ligne soigné, enrichi de fonctionnalités de réseautage social.

En utilisant cette combinaison et en suivant les étapes mentionnées dans cet article, il est facile de créer un site d'annuaires convivial avec des fonctionnalités de réseautage social.

Découvrons en détail comment y parvenir.

Dans ce tutoriel, nous allons :

• Installer et configurer le thème et les plugins
  1. Installez le thème BuddyBoss et la BuddyBoss Platform
  2. Installez le plugin Elementor
  3. Installer GeoDirectory
  4. Assistant d'installation GeoDirectory
     • Choisir le système de cartographie
     • Définir la ville par défaut
     • Ajouter des fonctionnalités supplémentaires
     • Ajouter des données factices
  5. Intégration GeoDirectory BuddyBoss
• Concevez le site d'annuaires BuddyBoss
  1. La conception de la page d'accueil
     • Le logo
     • Le menu de navigation
     • Le contenu
  2. La conception des annonces et de la page de recherche
  3. La conception de la page de fiche unique

Installation du thème et des plugins.

1. Installez le BuddyBoss Thème et la BuddyBoss Platform

Nous devons installer un thème, et pour ce tutoriel, vous allez installer le BuddyBoss Thème.

Accédez à buddyboss.com, achetez et téléchargez le thème BuddyBoss et la plateforme BuddyBoss.

Accédez à Appearance >> Thèmes

Sélectionnez Ajouter, Installer, et Activer le BuddyBoss Thème.

Accédez à Extensions >> Add New

Sélectionnez Téléverser, Installer, et Activer le BuddyBoss platform plugin.

Configurons maintenant BuddyBoss.

Accédez à BuddyBoss >> Composants

J'active tous les composants, vous pouvez choisir en fonction de vos besoins.

Configurons maintenant quelques pages requises pour BuddyBoss depuis le BuddyBoss >> Pages

Je laisserai tous les paramètres par défaut, mais vous pouvez les vérifier et apporter les modifications nécessaires si vous le souhaitez.
Notre site est maintenant prêt avec toutes les fonctionnalités de réseautage social et l'apparence de BuddyBoss.

2. Installer le Elementor plugin

Pour styliser les modèles, nous allons installer le Elementor plugin.

Le Elementor plugin offre de nombreuses fonctionnalités de personnalisation supérieures aux options par défaut et vous aidera à concevoir les modèles de pages.

Il existe une version pro d'Elementor qui offre de nombreuses fonctionnalités, et GeoDirectory est compatible avec les deux.

Nous utiliserons la Elementor version gratuite pour cet article.

Accédez à Extensions >> Ajouter.

Rechercher Elementor. Installez-le et activez-le.

3. 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.

4. 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)

Vous pouvez choisir entre deux systèmes de cartographie à la première étape de l'assistant. Google Maps et Open Street Maps (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 :

1. Activer les clés.
2. Créer ou sélectionner un projet existant.
3. Obtenir la clé.
4. Activer un compte de facturation.
5. Restreindre la clé API (afin qu'elle ne puisse être utilisée qu'à partir de l'URL de votre site)

Concernant le point quatre : c'est une obligation. Cependant, vous n'êtes facturé que si vous dépassez le seuil, qui est 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 devez ajouter des annonces dans plusieurs villes, vous aurez besoin du module complémentaire 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.

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 barre latérale ni les éléments de menu maintenant, car nous le ferons plus tard.

5. Intégration GeoDirectory BuddyBoss

Pour connecter BuddyBoss à GeoDirectory, nous avons besoin du Intégration GeoDirectory BuddyBoss qui fonctionne pour les deux BuddyBoss et BuddyPress intégration.

Téléchargez cette extension depuis le Geodirectory tableau de bord, importez et installez ce plugin.

depuis le GeoDirectory >> Réglages >> BuddyPress onglet, activez tous les paramètres mentionnés dans la capture d'écran ci-dessous.

Ce plugin permettra aux utilisateurs de gérer leurs annonces depuis la page de profil BuddyBoss.

Concevoir le BuddyBoss 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. BuddyBoss 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.

Ensuite, allez dans Appearance > Personnaliser > Réglages de la page d'accueil et sélectionnez votre page d'accueil.

Le logo

Commençons par le commencement : nous aurons besoin d'un logo pour notre site.

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.

Après avoir conçu votre logo, rendez-vous dans BuddyBoss > Theme Options > Logo, et importez votre fichier PNG.

Ignorez le recadrage (ou recadrez l'image selon vos besoins), dans la mise en page du logo et cliquez sur Enregistrer les modifications.

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 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é».

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 :

1. Accueil
2. Lieux et ajouter des lieux
3. Membres
4. Blog
5. Contactez-nous

Le contenu

Je vais commencer à construire cette page from scratch en utilisant le Elementor plugin.

Nous avons déjà un article sur Comment créer un site d'annuaire avec Elementor.

Dans cet article, nous allons ajouter BuddyBoss à la liste.

Nous avons besoin d'un en-tête héros sur la page d'accueil pour cela. Pour ce faire, allez dans Pages > Accueil et cliquez sur Modifier avec Elementor.

Ajoutez une section. (Cliquez sur le bouton plus du constructeur de page où il est indiqué Faites glisser le widget ici.)

Vous avez maintenant une page vierge avec une seule section d'une colonne.

Téléchargeons une image d'arrière-plan depuis la section de style du conteneur, ainsi que quelques paramètres comme
Position : Centre Centre
Répétition : Pas de répétition
Taille d'affichage : Couverture
Superposition d'arrière-plan : #000000
Opacité : 0.51

Dans la section mise en page du conteneur, nous aurons les paramètres suivants
Hauteur minimale : 500
Direction : Colonne verticale
Justifier au centre : centre
Aligner l'élément : Center

Ajoutons ensuite une balise d'en-tête au-dessus avec le texte : Find The Best Restaurant In Philadelphia​ et les paramètres suivants
Balise HTML : H1
Alignement : Center
Couleur du texte : #ffffff
Typographie Size: 48px

Ensuite, créons le GD > Search bloc et déployez-le avec les paramètres par défaut. Dans l'onglet Avancé, définissez largeur : Pleine largeur (100%)

Ajoutons un autre conteneur vide en dessous et faites glisser le GD > Categories bloc pour afficher les listes de catégories.
Définissez les paramètres du bloc GD > Categories comme suit
Type de design : Image de fond
Éléments par ligne : 4
Activez le Utiliser l'image de catégorie option

Vous pouvez associer une image à une catégorie en modifiant la catégorie depuis wp-admin -> places -> Place Categories.

Chaque catégorie dispose d'une option pour définir une image par défaut

Maintenant, nous allons ajouter un conteneur vide avec une balise Titre et
Texte : Annonces récentes
Alignement : Center
Typographie Size: 38px

Ajoutons le bloc GD > Listings en dessous avec les paramètres suivants
Tri : récent
Grille : 4

En dessous, dans un conteneur vide, faites glisser le GD > Map shortcode.

Avec les paramètres suivants dans le conteneur Elementor
Contenu largeur : pleine largeur
Espacement : 0
Marge : Haut bas 50px
Rembourrage : 0px

Enfin, nous allons ajouter un CTA pour rediriger les utilisateurs vers la page d'ajout d'annonce.

Ajoutez un conteneur vide avec une mise en page à deux colonnes.

Dans le conteneur de gauche, ajoutez une boîte d'image.

Dans le conteneur de droite, nous allons faire glisser le titre, le texte et le bouton pour obtenir un résultat similaire à celui ci-dessous

Après cela, notre page d'accueil est prête.

2. Design de la page des annonces et de la recherche du site BuddyBoss Directory

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 Elementor.

Dans les paramètres de la page, définissez la mise en page sur Pleine largeur Elementor.

Ajoutons maintenant un conteneur vide avec les paramètres suivants

Direction : Colonne verticale
Justifier au centre : centre
Aligner l'élément : Center
Couleur d'arrière-plan : #2143D3

Faisons maintenant glisser le GD > page titre bloc par-dessus.

Ajoutons maintenant une mise en page à deux colonnes avec les paramètres suivants.
Contenu largeur : pleine largeur
Espacement : 0

Ensuite, dans le conteneur de gauche, nous allons ajouter des blocs liés à la page d'archive GD 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.

Nous ajouterons également une classe scrolling-gd-loop à cette colonne pour le défilement tactile.

Dans la colonne de droite, nous allons faire glisser le GD > Map bloc avec le paramètre suivant.
Paramètre de colonne
Rembourrage : 0px
Marge : 0px

les paramètres du shortcode GD > Map aux valeurs par défaut et
Hauteur : 100%
Largeur : 100vh

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.

Copiez tout le contenu du GD Archive modèle Elementor et collez-le dans le GD Search modèle Elementor de la page.

Vous pouvez trouver la page de recherche depuis Geodirectory > Settings > General > Pages.

3. Conception de la page de liste unique du site de répertoire BuddyBoss

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 Elementor.

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 Elementor.

Ajoutons un conteneur vide
Largeur du contenu : pleine largeur
Espacement : 0
Marge : Haut bas 50px
Rembourrage : 0px
Direction : Alignement vertical de la colonne
Justifier au centre : centre
Aligner l'élément : Center

Faisons maintenant glisser le Gd > Post Images shortcode à l'intérieur avec les paramètres suivants.
Limite d'images : 10
Limite d'affichage : 3
Type de sortie : Slider
Démarrage automatique : Activer

Assurez-vous que le conteneur est en largeur : pleine largeur (100%)

Ajoutons une mise en page à deux colonnes.

Dans la colonne de gauche, l'un après l'autre.

Ce qui inclut GD > Post Title, GD > Single Taxonomies, et GD > Single Tabs.
Dans la colonne de droite, nous allons ajouter le (BB) Post Author, GD > Author Action, et GD > Output Location bloc.

Une fois cela fait, notre page de détail de l'annonce est complète.

Ajout de fonctionnalités premium à votre BuddyBoss site d'annuaire

Si vous le souhaitez, vous pouvez maintenant ajouter des fonctionnalités premium à votre annuaire, telles que :

1. Annonces payantes: avec le module complémentaire GeoDirectory Listing Price Manager add-on, 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 la restriction du nombre de photos pour les annonces gratuites tout en autorisant davantage d'images pour les annonces payantes, ainsi qu'un nombre de tags et de catégories plus ou moins important. Activation ou désactivation de champs personnalisés spécifiques. Soumission de descriptions plus longues ou plus courtes.
2. 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é.
3. 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.

Découvrez ici les étapes nécessaires pour votre prochain projet en ligne : Étapes pour créer un site d'annuaires réussi.

Ce tutoriel générique peut être adapté à n'importe quel thème ou constructeur de pages.

Les possibilités sont infinies.

Voici un guide étape par étape pour créer un site d'annuaire avec le Blocksy thème et le plugin Stackable – Page Builder Gutenberg Blocks :

1. Installer le thème Blocksy
2. Installer le plugin Stackable – Page Builder Gutenberg Blocks
3. Installer et configurer GeoDirectory
4. Concevoir le site d'annuaire avec le Blocksy thème et le Stackable – Page Builder Gutenberg Blocks plugin

Le thème Blocksy, combiné au plugin GeoDirectory et au plugin Stackable – Page Builder Gutenberg Blocks, crée une plateforme polyvalente et avancée pour construire un annuaire en ligne sophistiqué.

Cette intégration permet aux utilisateurs d'incorporer facilement des fonctionnalités basées sur la localisation, de personnaliser les options de mise en page et d'introduire des blocs de contenu dynamiques, garantissant une interface conviviale et engageante.

Ce système intégré permet aux développeurs et concepteurs web de créer un site d'annuaire de premier plan adapté aux besoins d'un secteur spécifique ou aux exigences d'une communauté plus large.

Voyons en détail comment y parvenir.

Dans ce tutoriel, nous allons :

• Installer et configurer le thème et les plugins
  1. Installer le thème Blocksy
  2. Installer le plugin Stackable – Page Builder Gutenberg Blocks
  3. Installer GeoDirectory
  4. Assistant d'installation GeoDirectory
     • Choisir le système de cartographie
     • Définir la ville par défaut
     • Ajouter des fonctionnalités supplémentaires
     • Ajouter des données factices
• Concevoir le site d'annuaire Blocksy
  1. Le logo
  2. La conception de la page d'accueil
     • Le menu de navigation
     • Le contenu
  3. La conception des annonces et de la page de recherche
  4. La conception de la page de fiche unique

Installation du thème et des plugins.

1. Installez le Blocksy Thème

Nous devons installer un thème, et pour ce tutoriel, vous allez installer le Blocksy Thème.

Accédez à Appearance >> Thèmes

Sélectionnez Ajouter, Installer, et Activer le Blocksy Thème.

2. Installer le Stackable – Page Builder Gutenberg Blocks plugin

Le plugin Gutenberg par défaut n'est pas suffisant pour styliser un modèle, nous allons donc installer le Stackable – Page Builder Gutenberg Blocks plugin.

Ce plugin fournit des blocs personnalisés plus performants que ceux par défaut et vous aidera à concevoir les modèles de page.

Accédez à Extensions >> Ajouter.

Rechercher Stackable – Page Builder Gutenberg Blocks. Installez-le et activez-le.

Vous pouvez ignorer toutes les étapes de l'assistant de configuration.

3. 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.

4. 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)

Vous pouvez choisir entre deux systèmes de cartographie à la première étape de l'assistant. Google Maps et Open Street Maps (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 :

1. Activer les clés.
2. Créer ou sélectionner un projet existant.
3. Obtenir la clé.
4. Activer un compte de facturation.
5. Restreindre la clé API (afin qu'elle ne puisse être utilisée qu'à partir de l'URL de votre site)

Concernant le point quatre : c'est une obligation. Cependant, vous n'êtes facturé que si vous dépassez le seuil, qui est 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 devez ajouter des annonces dans plusieurs villes, vous aurez besoin du module complémentaire 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.

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 barre latérale ni les éléments de menu maintenant, car nous le ferons plus tard.

Concevoir le Blocksy 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 Blocksy thème et plugin Stackable – Page Builder Gutenberg Blocks.

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.

Après avoir conçu votre logo, rendez-vous dans Appearance > Personnaliser > En-tête, cliquez sur Changer le logo lien, et téléchargez votre fichier PNG. Ignorez le recadrage (ou recadrez l'image selon vos besoins), dans Disposition du logo, sélectionnez l'option Logo et cliquez sur publier.

2. Blocksy 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 les 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 :

1. Accueil
2. À propos
3. Blog
4. Lieux et ajouter des lieux
5. Profil
6. Connexion
7. 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.

Définissez les paramètres du menu sur Police : Police par défaut / 14px / Gras 700

Le contenu

Je vais commencer à construire cette page from scratch en utilisant le Stackable – Page Builder Gutenberg Blocks plugin.

Nous avons besoin d'un en-tête hero sur la page d'accueil pour cela, ajoutons un bloc de colonnes fourni par le Stackable – Page Builder Gutenberg Blocks plugin.

Dans le paramètre de mise en page en colonnes
Largeur du bloc : Aligner pleine largeur
Largeur du contenu : Aligner pleine largeur
Largeur maximale du contenu : 1200px

Ensuite, vérifiez le paramètre du bloc et définissez l'image d'arrière-plan.

Pour la section Hero, nous aurons besoin d'une image, que nous téléchargerons gratuitement depuis Pexels.com (Merci, @rachel-claire).

Ajoutons maintenant un bloc de titre sur l'image avec
Contenu : Trouvez le meilleur restaurant à Philadelphia
Balise HTML du titre : H1
Taille : 48
Couleur du texte : #000000

Nous allons également ajouter le GD > Search bloc en dessous.

Ajoutons maintenant une colonne vide supplémentaire avec un rembourrage de 50px en haut et en bas.

nous allons faire glisser le GD > Categories bloc à l'intérieur pour afficher la liste des catégories.

Ajoutons maintenant un autre conteneur vide avec les paramètres suivants.

Largeur du bloc : Aligner pleine largeur
Largeur du contenu : Aligner pleine largeur
Largeur maximale du contenu : 1200px
Couleur : #00000

Maintenant, passons à l'ajout de la troisième section de notre site web. Nous l'appellerons « bsp;Annonces récentes“.

Ajoutez un GD > Listing bloc en cliquant sur l'icône plus, puis accédez aux paramètres du bloc. Assurez-vous d' activer le Afficher les paramètres avancés option.
Dans l'onglet Style du bloc, veuillez mettre à jour le Mise en page : Vue en grille (quatre colonnes).

Modifiez le nombre d' articles à afficher bsp;: 8 et assurez-vous de cocher l'option Activer le filtre de localisation et définissez le Trier parbsp;: Plus récent.

Ajoutons maintenant un autre conteneur vide avec les paramètres suivants.

Largeur du bloc : Aligner pleine largeur
Largeur du contenu : Aligner pleine largeur

Ajoutez l' GD > Map bloc à celui-ci et conserver les paramètres à
Largeur : 100%
Hauteur : 450px

Enfin, nous allons ajouter un CTA. Nous utiliserons l'un des modèles prédéfinis

Assurez-vous d'utiliser les paramètres suivants

Largeur du bloc : Aligner pleine largeur
Largeur du contenu : Aligner pleine largeur

Félicitations ! Votre page d'accueil est terminée.

3. Blocksy 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 personnaliser un peu la mise en page de ces pages.

Les pages de listings et de recherche étant quasiment identiques, nous la créons une seule fois et copions simplement la mise en page sur l'autre page.

Nous avons décidé que la mise en page de la page des annonces serait les annonces à gauche, et à droite, une carte fixe affichant l'emplacement précis des annonces.

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.

Ajoutons une colonne vide avec les paramètres suivants
Largeur du bloc : Aligner pleine largeur
Largeur du contenu : Aligner pleine largeur
Largeur maximale du contenu : 1200px
Couleur : #00000
Rembourrage : 30px

Ajoutons le GD > post title shortcode dedans.

Maintenant, ajoutez un Colonne bloc avec une mise en page 50:50.

Maintenant, dans le conteneur de gauche, nous allons faire glisser des widgets liés à la page d'archive GD 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.

Dans la colonne de droite, faites glisser 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.

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;
}

.breakdance .bde-column-111-108.bde-column{
	overflow:hidden;
}

Après cela, la page Archive des annonces est maintenant prête.

Pour la page de recherche, nous répétons le même processus.

Page de recherche

Accédez à GeoDirectory > Paramètres > Général > Pages > Cliquez sur Modifier le modèle de page GD Search

Supprimez tout le contenu de ce GD Search modèle de page.

Copiez tout le contenu de la page GD Archive et collez-le dans la page GD Search.

Enfin, vous aurez besoin de ce CSS pour afficher la page de recherche en pleine largeur.

.geodir-page-search #main article {
max-width: 100%;
}

Nos pages GD Search et Archive sont maintenant prêtes.

4. Blocksy Conception de la page de fiche individuelle d'un site d'annuaires

Tout d'abord, nous allons désactiver le titre par défaut depuis Apparence > Personnaliser > Lieux > Lieu unique et désactiver le titre comme indiqué ci-dessous.

Pour modifier et personnaliser la page GD Detail, vous pouvez aller dans 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 ajouter un nouveau bloc de colonnes.

Commençons par ajouter un diaporama d'images en haut de la page Détails de l'annonce.

nous allons faire glisser le GD > Post Image bloc dans ce conteneur avec les paramètres suivants

Limite d'images : 10
Limite d'affichage : 3
Type de sortie : Slider
Démarrage automatique : Activer

Nous allons maintenant ajouter un autre bloc Section en dessous avec une Mise en page 70/20.

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.
Dans la colonne de droite, nous allons ajouter GD > Author Action et GD > Output Location bloc.

Après cela, notre page Détails de l'annonce est terminée.

Ajout de fonctionnalités premium à votre Blocksysite d'annuaire

Si vous le souhaitez, vous pouvez maintenant ajouter des fonctionnalités premium à votre annuaire, telles que :

1. 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.
2. 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é.
3. 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.

Si vous envisagez de lancer une activité en ligne, créer un site annuaire pourrait être la façon la plus simple de commencer.

Découvrez les secrets d'un annuaire en ligne grâce à ce guide : Guide pour créer un site annuaire.

Voici un guide facile à comprendre sur la façon de développer un site d'annuaire en utilisant le thème Avada et le Avada Builder plugin :

1. Installez le thème Avada
2. Installer et configurer GeoDirectory
3. Concevez le site d'annuaire avec Avada Builder

Le thème Avada, utilisé conjointement avec le plugin GeoDirectory et le plugin Avada Builder, est une excellente façon de créer un annuaire en ligne flexible.

Cette combinaison permet d'ajouter facilement des fonctionnalités basées sur la localisation, de personnaliser la mise en page et d'intégrer du contenu dynamique pour une expérience conviviale.

Elle permet aux développeurs et aux designers web de créer un site d'annuaire de haute qualité adapté à des secteurs spécifiques ou aux besoins d'une communauté plus large.

Voyons en détail comment y parvenir.

Dans ce tutoriel, nous allons :

• Installer et configurer le thème et les plugins
  1. Installer le Avada Thème
  2. Installer GeoDirectory
  3. Assistant d'installation GeoDirectory
     • Définir la ville par défaut
     • Ajouter des fonctionnalités supplémentaires
     • Ajouter des données factices
• Concevoir le Avada site d'annuaire
  1. Concevoir le logo du site
  2. La page d' accueil design
     • Le menu de navigation
     • L'en-tête
     • Le contenu
     • Le Pied de page
  3. La conception de la page d'archive des annonces et de recherche
  4. La conception de la page de fiche unique

Installation du thème et des plugins.

1. Installer le thème Avada

Avada est un thème WordPress polyvalent et populaire, reconnu pour sa flexibilité et ses fonctionnalités puissantes.

C'est un thème multifonction qui peut être personnalisé pour créer une large gamme de sites web grâce à un constructeur glisser-déposer convivial, permettant aux utilisateurs de concevoir et de personnaliser facilement leurs sites web sans avoir besoin de coder.

Pour acheter le thème Avada et explorer ses nombreuses fonctionnalités, vous pouvez visiter la marketplace officielle ThemeForest : Lien d'achat du thème Avada.

Vous pouvez suivre cette vidéo pour configurer le thème Avada.

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 :

1. Activer les clés.
2. Créer ou sélectionner un projet existant.
3. Obtenir la clé.
4. Activer un compte de facturation.
5. 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 d'inscription et de connexion 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 Avada 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 avec le Avada 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. Avada 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 > Afficher la localisation section, vous pouvez cocher « nbsp;Principal Navigation».

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 :

1. Accueil
2. À propos
3. Blog
4. Lieux et ajouter des lieux
5. Profil
6. Connexion
7. 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.

Créer une mise en page d'en-tête

Créons maintenant une mise en page d'en-tête de site à l'aide du constructeur Avada.
Nous allons donc aller dans Avada > Layout et sélectionner l'en-tête depuis Mise en page globale.

Cliquez sur Create New Layout bouton.

Maintenant, cliquons sur le bouton Live Builder.

Cela ouvrira la Avada Builder Library devant nous.

Vous verrez de nombreux modèles prédéfinis pour différentes sections.

Dans cet exemple, nous allons sélectionner une mise en page d'en-tête prédéfinie depuis la section studio .

Nous allons maintenant remplacer notre logo en cliquant sur la section logo de l'en-tête prédéfini.
Nous allons définir la Image Max Width à 150px depuis les paramètres du logo.

Depuis le menu de l'en-tête, nous allons sélectionner ou modifier le menu que nous souhaitons afficher dans l'en-tête du site.

nous allons apporter quelques modifications de style et d'alignement comme indiqué dans la capture d'écran ci-dessous.

L'en-tête de notre site est maintenant prêt. Concentrons-nous maintenant sur le contenu de la page d'accueil.

Le contenu

Nous allons modifier la Accueil page dans Live Builder.

Ajoutons-y un conteneur vide avec les paramètres suivants
Largeur du contenu intérieur : 100%
Hauteur : Hauteur minimale
Hauteur minimale : 500
Alignement des lignes : Étirer
Alignement des colonnes : Center
Justification des colonnes : Center

Depuis le paramètre Arrière-plan, nous allons ajouter une image.
Position de l'arrière-plan : Centre Centre
Répétition de l'arrière-plan : Pas de répétition
Taille de l'arrière-plan : Center
Motif : Point
Couleur du motif : rgba(0,0,0,0.41)

Ajoutons maintenant une balise de titre En-tête au-dessus de l'image avec
Texte : Trouvez le meilleur restaurant à Philadelphie
Typographie :
Famille de polices : Inter
Variante : Bolt 700
Taille de police : 42px
Couleur de la police : #ffffff

Maintenant, ajoutons le GD > Search bloc et conservez les paramètres par défaut.

Ajoutons maintenant un conteneur vide avec le GD > Category bloc à l'intérieur.

Type de design : Icône à gauche
Éléments par ligne : 4

Ajoutons maintenant un autre conteneur vide avec le GD > Listing bloc à l'intérieur avec les paramètres suivants.
Tri : récent
Grille : 4
Articles à afficher : 8

Maintenant, ajoutez un conteneur vide avec les paramètres suivants.
Largeur du contenu intérieur : Largeur 100%
Hauteur : Auto

Espacement du contenu : Gauche, Droite 0px

Nous allons maintenant ajouter un GD > Map à l'intérieur.

Enfin, il est temps d'ajouter une section CTA. Nous allons ajouter un conteneur vide.
nous allons y ajouter une balise Heading.

Avec les paramètres suivants
Alignement : Gauche
Balise HTML Heading : H3

Ajoutons maintenant un bloc bouton avec un lien vers la page Ajouter une annonce page.

Créer la mise en page du pied de page

Enfin, nous allons créer une mise en page de pied de page globale, de la même manière que nous l'avons fait pour la section d'en-tête.

Dans cet exemple, nous utiliserons une mise en page de pied de page prédéfinie.

Vous pouvez apporter des modifications à cette mise en page de pied de page. Pour l'instant, je la laisse par défaut.

Après cette dernière étape, notre page d'accueil est prête.

3. Avada Conception des pages de listings et de recherche d'un site d'annuaires

Vous devez maintenant concevoir deux pages essentielles pour tout annuaire.

La page des listings (archive générale, catégories, tags) 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 d'Avada Builder.

Les pages de listings et de recherche étant quasiment identiques, nous la créons une seule fois et copions simplement la mise en page sur l'autre page.

Nous avons décidé que la mise en page de la page des annonces serait les annonces à gauche, et à droite, une carte fixe affichant l'emplacement précis des annonces.

C'est très simple.

Page de listings

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.

Modifiez maintenant la page à l'aide du Live builder.

Nous allons ajouter un conteneur vide avec un rembourrage de contenu de 0 en haut et en bas.

Ajoutons maintenant une colonne à l'intérieur et nous ferons glisser GD > Page title dedans.

Définissons
couleur d'arrière-plan : #f6f6f9
Rembourrage : 50px 0px 50px 0px
Couleur du lien du conteneur : #efefef

Ajoutons maintenant un conteneur à deux colonnes.

Ensuite, dans le conteneur de gauche, nous allons ajouter des blocs liés à la page d'archive GD 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.

Dans la colonne de droite, nous allons faire glisser le GD > Map bloc.

Définissons la carte
Hauteur : 150vh
Rembourrage : 30px 0px 30px 0px
et laissons les paramètres par défaut.

nous allons ajouter le gd-loop-column classe à la colonne de gauche.

nous allons ajouter le snippet CSS suivant dans le personnalisateur de thème.

.gd-loop-column .fusion-column-wrapper{
    overflow-y: scroll;
    padding-right: 17px;
    max-height: 960px;
}

Notre page Archive est prête.

Pour créer la mise en page de la page de recherche.
Nous allons assigner l'en-tête et le pied de page globaux à cette mise en page.

nous allons dans Avada > Layouts
nous allons ajouter ceci et assigner cette mise en page à la page de recherche.

Sur la page de recherche, créez maintenant un modèle de contenu de recherche

et copiez toutes les sections depuis la GD > Archive page vers cette page de recherche.
Après cela, notre modèle de page de recherche est prêt.

4. Conception de la page de listing unique d'un site d'annuaires avec Avada

Il est maintenant temps de créer le modèle de page de détail. Nous allons modifier le GD Detail modèle de page dans Avada Builder.

Nous allons ajouter un conteneur vide avec
Largeur du contenu intérieur : Largeur 100%

Nous allons y ajouter le bloc GD > Images de publication avec les paramètres suivants.
Limite d'images : 10
Limite d'affichage : 3
Type de sortie : Slider
Démarrage automatique : Activer

Dans le GD Details page assurez-vous de désactiver Afficher la première image mise en avant.

Nous allons à nouveau ajouter un conteneur avec une mise en page en deux colonnes comme ci-dessous.

Maintenant, ajoutons individuellement tous les blocs GD Detail page requis dans la colonne de gauche.

Ce qui inclut GD > post Title, GD > Single Taxonomies, GD > Single Tabs, et GD > Single Next Prev.

Nous allons ajouter le GD > Author Action et GD > Output Location bloc dans la colonne de droite.

Une fois cela fait, notre page de détail de l'annonce est complète.

Ajout de fonctionnalités premium à votre Avada site d'annuaire

Si vous le souhaitez, vous pouvez maintenant ajouter des fonctionnalités premium à votre annuaire, telles que :

1. Annonces payantes: avec le module complémentaire GeoDirectory Listing Price Manager add-on, 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 la restriction du nombre de photos pour les annonces gratuites tout en autorisant davantage d'images pour les annonces payantes, ainsi qu'un nombre de tags et de catégories plus ou moins important. Activation ou désactivation de champs personnalisés spécifiques. Soumission de descriptions plus longues ou plus courtes.
2. 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é.
3. 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.

Nouveaux venus, commencez votre aventure ici : Lancer un site d'annuaire : le guide du débutant.

Ce tutoriel générique peut être adapté à n'importe quel thème ou constructeur de pages.

Les possibilités sont infinies.