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

Voici un guide facile à comprendre sur la façon de créer un site d'annuaire avec le plugin Breakdance Website Builder :

1. Installer le plugin Breakdance
2. Installer et configurer GeoDirectory
3. Concevoir le site d'annuaire avec le Breakdance plugin

Le Breakdance Plugin, utilisé conjointement avec le plugin GeoDirectory, est un excellent moyen de créer un annuaire en ligne flexible. Grâce à cette combinaison, vous pouvez facilement ajouter des fonctionnalités basées sur la localisation, personnaliser la mise en page et intégrer du contenu dynamique pour une expérience conviviale.

Ce système permet aux développeurs et designers web de créer un site d'annuaire de haute qualité adapté à des secteurs spécifiques ou à des besoins communautaires plus larges.
Voyons en détail comment procéder.

Dans ce tutoriel, nous allons :

• Installer et configurer les plugins
  1. Installer le Breakdance Plugin
  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 Breakdance site d'annuaire
  1. Concevoir le logo du site
  2. La conception de la page d'accueil
     • Le menu de navigation
     • La typographie
     • Le contenu
  3. La conception des annonces et de la page de recherche
  4. La conception de la page de fiche unique

Installation et configuration des plugins.

1. Installez le Breakdance Plugin

Vous pouvez acheter le plugin Breakdance sur le site breakdance.com. Vous recevrez un fichier zip du plugin. Pour l'installer, rendez-vous sur  Extensions >> Ajouter >> Cliquez sur Téléverser le plugin

Maintenant, après l'installation, nous allons désactiver le thème WordPress depuis les Breakdance >> paramètres >> Thème >> Désactiver le thème

2. Installer GeoDirectory

Enfin, vous devez installer GeoDirectory.

Accédez à Extensions >> Ajouter, recherchez GeoDirectory. Veuillez l'installer et l'activer. Nous avons terminé l'installation des plugins.

3. Assistant d'installation de GeoDirectory

Pour le plugin GeoDirectory, vous devez compléter l'assistant de configuration afin de paramétrer la clé API Google Maps et d'importer quelques fiches de démonstration.

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

Vous pouvez choisir entre deux systèmes de cartographie à la première étape de l'assistant : Google Maps et OpenStreetMaps (qui ne nécessite pas de clé API).

Dans ce tutoriel, nous sélectionnons OpenStreetMaps.

Si vous souhaitez sélectionner Google Maps, suivez les étapes supplémentaires ci-dessous.

Cliquez sur le bouton Générer une clé et suivez les étapes de ce doc pour générer une clé API valide.

Les étapes essentielles sont :

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 de gestion des utilisateurs qui permet aux utilisateurs de s'inscrire et de se connecter à votre site web.

Cela est nécessaire pour permettre aux utilisateurs d'ajouter et de modifier leurs annonces. Cela créera également des profils utilisateurs où ils pourront retrouver leurs annonces, avis, et bien plus encore.

Nous allons également installer Ninja Forms afin que toutes les annonces disposent d'un formulaire de contact qui envoie des e-mails directement aux propriétaires des annonces.

AyeCode Connect n'est pas obligatoire pour ce tutoriel. Il est principalement nécessaire si vous souhaitez ajouter des extensions premium GeoDirectory et les installer directement depuis le tableau de bord WordPress.

Ajouter des données factices

La dernière étape pour terminer l'assistant d'installation consiste à ajouter quelques annonces factices. Cela ajoutera également des catégories d'annonces que vous pourrez modifier ultérieurement selon vos besoins.

Vous n'ajouterez pas les widgets de la barre latérale ni les éléments de menu maintenant ; nous le ferons plus tard.

Concevoir le Breakdance site d'annuaire

Maintenant que nous avons installé les plugins et effectué la configuration préliminaire de GeoDirectory, nous pouvons commencer à concevoir notre site web d'annuaires avec Breakdance la suite d'outils.

1. Concevoir le logo du site web

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

Vous n'avez pas besoin de faire appel à un designer pour esquisser la première version de votre logo.

L'une des plus grandes erreurs que vous puissiez commettre en lançant un nouvel annuaire est d'investir trop de temps et d'argent avant de tester l'adéquation produit-marché.

Vous pouvez concevoir un logo en cinq minutes avec une application comme Canva, qui est abordable et étonnamment efficace.

Pour un MVP (produit minimum viable), un logo conçu avec Canva sera largement suffisant.

Il existe plusieurs modèles de logo parmi lesquels choisir, et peu importe si votre logo initial n'est pas aussi parfait et original que vous le souhaiteriez.

Si votre projet prend de l'élan, vous pourrez toujours investir pour l'améliorer ou le modifier radicalement plus tard.

Un logo ordinaire n'est jamais la principale cause de l'échec d'un projet.

2. Breakdance Design de la page d'accueil de l'annuaire

Vous pouvez créer une nouvelle page ou en utiliser une que WordPress crée par défaut, comme la Page d'exemple.

Allez dans Pages, modifiez la Page exemple et renommez-la Accueil, ou créez une nouvelle page à cet effet.

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

Le menu de navigation

Après avoir créé et ajouté le logo, rendez-vous dans Appearance >> Menus et créez votre menu.

Ajoutez les liens nécessaires (de la colonne de gauche vers la colonne de droite) et enregistrez.

Dans le Menu Settings > section Emplacement d'affichage, vous pouvez cocher l'optionPrincipal».

Si vous le souhaitez, vous pouvez faire apparaître le même menu dans le pied de page ou en créer un autre à cet endroit.

Dans cet exemple, nous n'aurons que le menu de navigation de l'en-tête.

Nous avons ajouté sept liens de navigation principaux et quelques liens de sous-navigation :

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.

La typographie

Définissons les paramètres de typographie globaux depuis Breakdance >> paramètres >> Styles globaux >> Lancer Breakdance

voici les paramètres de typographie
Police des titres : Poppins
Police du corps : Poppins
Taille de base : 16px
Ratio : 1.2

Configurer l'en-tête

Définissons l'en-tête du site, pour cela rendons-nous dans Breakdance >> Header et cliquez sur Ajouter un en-tête.

ici nous allons donner un titre à l'en-tête et nous allons sélectionner
Emplacement : Partout
Priorité : 1

Cliquez maintenant sur Add New en haut à gauche. Vous pouvez créer un en-tête en utilisant ces éléments de bloc disponibles, ou vous pouvez cliquer sur Library et utiliser des modèles d'en-tête déjà créés.

J'utilise l'un des modèles d'en-tête existants de la bibliothèque et j'ai importé le Logo et sélectionné un menu ici.

Maintenant que notre en-tête est prêt, nous allons passer au contenu de la page d'accueil.

Le contenu

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

Nous avons besoin d'un hero header sur la page d'accueil pour cela.

Commençons par modifier la page d'accueil dans Breakdance en cliquant sur Edit in Breakdance bouton.

nous allons faire glisser une section vide en cliquant sur le Ajouter bouton en haut à gauche.

Depuis l'onglet de style de section, définir
Alignement : Center
Type d'arrière-plan : Image
Taille de l'image : Pleine
Taille : Couverture
Répétition : no-repeat
Position : Center
Attachement : Défilement
Supprimer l'image à : Bureau
Hauteur : Personnalisée
Hauteur personnalisée : 400px

Faisons maintenant glisser un élément Titre avec les paramètres suivants.

Texte : Trouvez le meilleur restaurant à Philadelphie
Couleur : #FFFFFFFF
Taille de police : 48
Graisse de police : 600

nous allons ajouter un bloc shortcode avec le [gd_search] shortcode ci-dessous.

Ajoutons maintenant un autre conteneur vide en dessous avec le shortcode suivant pour afficher la liste des catégories.

[gd_categories post_type="0" max_level="1" max_count="all" max_count_child="all" sort_by="az" design_type="image" row_items="4" card_shadow="small" use_image="1" image_size="large" cat_text_color_custom="#000000" cat_font_size="0" badge_text_color_custom="#000000" badge_color="light" badge_font_size="0" title_tag="h4" mb="3" rounded="rounded"]

nous allons appliquer un padding de 50px en haut et en bas.

Nous avons maintenant besoin d'une section pour les annonces récentes. nous allons ajouter un élément shortcode avec le shortcode suivant.

[gd_listings post_type="gd_place" post_limit="6" add_location_filter="1" sort_by="latest" title_tag="h3" layout="3" view_all_link="1" bottom_pagination="1" slide_interval="5" mb="3" rounded="rounded"]

Ajoutons maintenant un shortcode supplémentaire pour afficher la carte des annonces.

[gd_map map_type="auto" post_settings="1" 
width="100%" height="425px" 
maptype="ROADMAP" zoom="0"]

Pour finir, nous avons besoin d'un CTA pour cela, j'utilise un modèle CTA existant.

Configurer le pied de page

Maintenant, pour terminer, configurons le pied de page du site et rendons-nous dans Breakdance >> Footer et cliquez sur Ajouter Pied de page.

nous pouvons créer un pied de page de zéro ou utiliser l'un de ceux déjà disponibles. J'utilise un modèle de pied de page existant. nous pouvons facilement personnaliser ces menus de pied de page selon nos besoins.
Pour l'instant, je le laisse tel quel.

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

2. Breakdance Conception des pages de listings et de recherche d'un site d'annuaires

Page de listings

Vous devez maintenant concevoir deux pages essentielles pour tout annuaire.

La page des annonces (archive générale, catégories, étiquettes) et la page des résultats de recherche.

GeoDirectory les crée par défaut avec une mise en page générale. Dans ce tutoriel, nous allons créer et personnaliser la mise en page de ces pages à l'aide de Breakdance Builder.

Rendons-nous dans les Breakdance >> Templates >> Add Template

Dans l'option suivante, nous sélectionnerons les paramètres ci-dessous et cliquerons sur Add Template bouton.
Emplacement : Archive/Post Type Archive
Condition : Post Type = Places

Dans le template, nous allons ajouter une section vide et appliquer les paramètres suivants au bloc de section.
Layout
Align : Center
Vertical Align : Center
Background :
Color : F5F8FFFF
Type : Gradient

Ajoutons maintenant le bloc Archive Title à l'intérieur.

Vous avez maintenant deux options et nous vous montrerons les deux :

La façon la plus simple de le faire est d'utiliser une seule colonne et le shortcode suivant : [gd_simple_archive layout=

2) Si vous souhaitez avoir un contrôle total sur le design, nous devrons ajouter un bloc colonne avec une mise en page à deux colonnes à la place.

Dans les paramètres, nous utiliserons Largeur : Pleine

Nous allons maintenant faire glisser le conteneur de shortcode et utiliser le shortcode requis à l'intérieur.

Dans le conteneur de gauche, nous utiliserons les widgets GD relatifs à la page Archive, comme GD > Loop Action, GD > Loop, GD > Loop Pagination, et GD > Search en haut afin que l'utilisateur puisse effectuer une recherche depuis la page Archive.

[gd_search mb="3"]
[gd_loop_actions]
[gd_loop layout='2']
[gd_loop_paging]

Dans la colonne de droite, utilisez le bloc GD > Carte, et nous laisserons tous les paramètres à leurs valeurs par défaut. Cependant, nous définirons la hauteur du bloc GD > Carte à 100vh.

[gd_map map_type="auto" post_settings="1" scrollwheel="1"  width="100%" height="100vh" maptype="ROADMAP" zoom="0"]

Nous allons maintenant ajouter ce qui suit gd-archive-left-container comme classe à la section de gauche.

Dans la colonne de gauche, nous ajouterons la classe suivante gd-archive-left-column.

Pour la touche finale, nous ajouterons le CSS suivant dans le personnalisateur de thème depuis Appearance => Personnaliser => Ajouter du CSS

.geodir-archive .gd-archive-left-container{
    overflow-Y: scroll;
    max-height: 100%;
    height:100vh;
    padding-right:15px;
}

.gd-archive-left-column{
	overflow:hidden;
}

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

Page de recherche

Nous allons maintenant créer un modèle pour la page de recherche GeoDirectory, alors rendons-nous dans Breakdance >> Templates >> Add Template >> Résultats de recherche

Nous allons maintenant copier tout le contenu du GD Archive modèle vers le GD Search modèle.

Nos modèles de pages GD Search et Archive sont maintenant prêts.

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

Rendons-nous dans les Breakdance >> Templates >> Add Template

Dans l'option suivante, nous sélectionnerons les paramètres ci-dessous et cliquerons sur Add Template bouton.
Emplacement : Single/Places
Condition : Post Type = Places

Nous allons ajouter une section vide avec un rembourrage de 0 de tous les côtés.

nous allons ajouter le shortcode suivant pour afficher un diaporama d'images.

[gd_post_images ajax_load="1" limit="10" limit_show="3" type="slider" slideshow="1" controlnav="1" animation="slide"]

Ajoutons maintenant une section supplémentaire avec une disposition en deux colonnes à l'intérieur.

Ajoutons maintenant tous les GD Detail shortcodes de page requis dans la colonne de gauche, un par un.

Ce qui inclut GD > Post Title, GD > Single Taxonomies, et GD > Single Tabs.

[gd_single_taxonomies taxonomy=''  prefix=''  link_style=''  link_color=''  link_color_custom=''  link_icon='false'  mt=''  mr=''  mb='2'  ml=''  pt=''  pr=''  pb=''  pl='' ]
[gd_single_tabs heading_font_size="0" heading_text_color="primary" heading_text_color_custom="#000000" mt_lg="3" border_type="border"]
[gd_single_next_prev bg=''  mt='4'  mr=''  mb='3'  ml=''  pt=''  pr=''  pb=''  pl=''  border=''  rounded=''  rounded_size=''  shadow='' ]

Dans la colonne de droite, nous allons ajouter GD > Author Action et GD > Output Location bloc.

[gd_author_actions hide_edit='false'  hide_delete='false'  author_page_only='false'  display=''  size=''  alignment=''  color='primary'  text_color='white'  btn_mt='1'  btn_mr=''  btn_mb='1'  btn_ml=''  bg=''  mt=''  mr=''  mb=''  ml=''  pt=''  pr=''  pb=''  pl=''  border=''  rounded=''  rounded_size=''  shadow='' ]
[gd_output_location location="detail" list_style="wrap"]

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

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

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.

Vous pouvez créer une marketplace mondiale d'articles artisanaux, vendre des billets d'événements ou des bons de réduction.

Apprenez les aspects fondamentaux grâce à ce guide essentiel : Les bases de la création d'un site d'annuaires.

Les possibilités sont infinies.

Voici un guide facile à comprendre sur la façon de créer un site d'annuaire avec le thème Beaver Builder et le plugin Beaver Builder :

1. Installer le thème Beaver Builder
2. Installer et configurer GeoDirectory
3. Installer le plugin Beaver Builder & Beaver Themer
4. Concevoir le site d'annuaire avec le Beaver Builder plugin

Le Beaver Builder Le thème, utilisé avec le plugin GeoDirectory et le plugin Beaver Builder, est un excellent moyen de créer un annuaire en ligne flexible. Grâce à cette combinaison, vous pouvez facilement ajouter des fonctionnalités basées sur la localisation, personnaliser la mise en page et intégrer du contenu dynamique pour une expérience conviviale.

Ce système permet aux développeurs et designers web de créer un site d'annuaire de haute qualité adapté à des secteurs spécifiques ou à des besoins communautaires plus larges.
Voyons en détail comment procéder.

Dans ce tutoriel, nous allons :

• Installer et configurer le thème et les plugins
  1. Installer le Beaver Builder 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 Beaver Builder site d'annuaire
  1. Concevoir le logo du site
  2. La conception de la page d'accueil
     • Le menu de navigation
     • La typographie
     • 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 Beaver Builder

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

Rendez-vous sur https://www.wpbeaverbuilder.com et achetez le Beaver Builder Pro Plugin, incluant les thèmes Beaver & Beaver Themer plugin.

Téléchargez ces produits depuis la page Mon compte page.

Accédez à Appearance >> Thèmes.

Sélectionnez Ajouter, installez le thème Beaver et le thème enfant, puis activez le enfant Beaver Thème.

2. Installer le Beaver Builder Pro & Beaver Themer plugin

Beaver Builder Pro et Beaver Themer sont de puissants plugins WordPress conçus pour améliorer l'expérience de création et de personnalisation de sites web.

Accédez à Extensions >> Ajouter >> Cliquez sur Téléverser le plugin

Téléversez le fichier zip du plugin et activez les deux plugins l'un après l'autre.

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. Nous avons terminé l'installation des plugins.

4. 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 Beaver Builder 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 Beaver Builder 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. Beaver Builder 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.

Définissez maintenant le logo depuis Apparence >> Personnaliser >> En-tête >> Logo de l'en-tête
défini. Type de logo : En-tête et téléverser l'image du logo.

Le menu de navigation

Après avoir créé et ajouté le logo, rendez-vous dans Appearance > Menus et créez votre menu.

Ajoutez les liens nécessaires (de la colonne de gauche vers la colonne de droite) et enregistrez.

Dans le Menu Settings > section Emplacement d'affichage, vous pouvez cocher l'optionPrincipal».

Si vous le souhaitez, vous pouvez faire apparaître le même menu dans le pied de page ou en créer un autre à cet endroit.

Dans cet exemple, nous n'aurons que le menu de navigation de l'en-tête.

Nous avons ajouté sept liens de navigation principaux et quelques liens de sous-navigation :

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.

La typographie

Définissons maintenant la typographie pour la police et la taille du texte du site. Je configure une famille de polices, une graisse et une taille de police globales qui seront appliquées à tout le texte du site.

nous allons aller dans Apparence > Customiser > Général > Mise en page. Nous allons définir les paramètres suivants
Largeur : Pleine largeur
Largeur du contenu : 1200

nous allons aller dans Apparence > Customiser > Général > Texte.

Famille de polices : Outfit
Graisse de police : Light
Taille de police : 18
Hauteur de ligne: 1.45

Le contenu

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

Nous avons besoin d'un hero header sur la page d'accueil pour cela.

Commençons par modifier la page d'accueil dans Beaver Builder en cliquant sur Lancer Beaver Builder.

Faites maintenant glisser un conteneur de ligne en cliquant sur l'icône plus en haut à droite.

Depuis l'onglet Style de ligne, définissez
Largeur : Pleine largeur
Largeur du contenu : Fixe
Hauteur minimale : 600px
Type d'arrière-plan : Photo
Source de la photo d'arrière-plan : Bibliothèque de médias
Position : Center
Échelle : Remplir

Faisons maintenant glisser un en-tête et le GD > Seach Bloc au-dessus de cette ligne.

Ajoutons maintenant un conteneur de ligne vide, et nous allons ajouter un GD > Categories bloc à l'intérieur.

Définissez le GD > Categories paramètres du bloc comme suit
Type de design : Image Background
Éléments par ligne : 4
Activer 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 une ligne vide avec une mise en page à 1 colonne.

avec les paramètres suivants
Couleur : rgba(234,240,255,0.64)
Largeur : Pleine largeur
Largeur du contenu : Fixe

Maintenant, nous allons ajouter un élément d'en-tête
Texte : Annonces récentes
Taille : 42
Alignement : Center

Ensuite, nous allons modifier certains paramètres dans ce bloc GD > Listings.

Nous allons définir : Tri : récent
Grille : 4

Nous allons ajouter un conteneur de ligne avec les paramètres suivants.
Largeur : Pleine largeur
Largeur du contenu : Pleine largeur

Ajoutez l' GD > Map bloc à l'intérieur et conserver les paramètres par défaut.

Maintenant, pour finir, nous avons besoin d'un CTA en bas de page.

Nous allons ajouter une ligne vide avec une mise en page à deux colonnes et les paramètres suivants.
Largeur : Pleine largeur
Largeur du contenu : Fixe

Ajoutons maintenant un titre et du contenu dans la colonne de gauche, et dans la colonne de droite, nous allons ajouter un bouton pour rediriger les utilisateurs vers la page d'ajout d'annonce.

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

3. Beaver Builder 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 personnaliser un peu le design de ces pages.

Les pages de listings et de recherche sont pratiquement identiques, nous allons donc en créer une seule et copier 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 Beaver Builder > Themer Layout > Ajouter nouveau et sélectionnez
Titre : GD Archive
Type : Themer Layout
Mise en page : Archive
Cliquez sur Ajouter une mise en page de thème bouton

Sur la page suivante, sélectionnez Emplacement : Place Archive.

Après avoir enregistré ces paramètres, cliquez sur Launch Beaver Builder. Nous allons ajouter une ligne vide avec une mise en page à 1 colonne.
Largeur : Pleine largeur
Couleur d'arrière-plan : #577196

Nous allons y ajouter un titre d'archive.

Maintenant, ajoutons une ligne avec une mise en page à deux colonnes.
Largeur : Pleine largeur
Largeur du contenu : Pleine largeur

Ensuite, 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, nous allons faire glisser le GD > Map bloc.

Nous conserverons tous les paramètres par défaut pour GD > Map. Donnons-lui une certaine hauteur ; j'ai décidé de lui attribuer une hauteur de 100vh.

Ajoutez le style suivant dans le personnalisateur de thème depuis  Appearance => Personnaliser => Ajouter du CSS.

.geodir-archive .geodir-listings .geodir_location_listing{
    overflow-y: scroll;
    max-height: 100vh;
    padding-right: 15px;
}

Après cela, la page d'archive des annonces est prête.

Une autre option consiste à utiliser le bloc GD > Simple Archive, comme expliqué dans ce tutoriel sur la création d'une Site d'annuaires avec Elementor.

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

Page de recherche

Accédez à Beaver Builder > Themer Layout > Ajouter nouveau et sélectionner
Titre : GD Search
Type : Themer Layout
Cliquez sur Ajouter Theme Layout bouton

Copiez tout le contenu du GD Archive modèle Themer Layout et collez-le dans le GD Search modèle Themer Layout.

Allez maintenant dans Geodirectory > Settings > General > Pages et dans le Search Page Themer Layout sélectionnez GD Search

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

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

Allez dans Beaver Builder > Themer Layout > Ajouter nouveau et sélectionnez
Titre : GD Details
Type : Themer Layout
Mise en page : Singulier
Cliquez sur Ajouter un Themer Layout bouton.

Sur la page suivante, sélectionnez Emplacement : Tous les emplacements

Après avoir enregistré ces paramètres, cliquez sur Launch Beaver Builder. Nous allons ajouter une ligne vide avec une mise en page à 1 colonne.
Largeur : Pleine largeur
Largeur du contenu : Pleine largeur
Rembourrage : 0

Tout d'abord, ajoutez un slider d'images en haut de la page de détail 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

Ajoutons maintenant une ligne avec une mise en page à deux colonnes.

Ajoutons maintenant individuellement tous les shortcodes GD requis pour la page de détail 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 GD > Author Action et GD > Output Location bloc dans la colonne de droite.

Après cela, notre page de détail d'annonce est complète.

Ajout de fonctionnalités premium à votre Beaver Builder 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.

Suivez ce tutoriel pour une approche étape par étape : Tutoriel : Comment créer un site annuaire.

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 web d'annuaires en utilisant le thème Neve et le plugin Otter blocks :

1. Installer le Neve thème
2. Installer et configurer GeoDirectory
3. Installer le plugin Otter
4. Concevoir le site web d'annuaires avec le thème Neve et Gutenberg Gutenberg

Le thème Neve, utilisé conjointement avec le plugin GeoDirectory et le plugin Otter, offre une plateforme complète et adaptable pour développer un annuaire en ligne sophistiqué.

Grâce à cette combinaison, les utilisateurs peuvent intégrer sans effort des fonctionnalités géolocalisées, affiner les configurations de mise en page et ajouter des blocs de contenu dynamiques, garantissant ainsi une interface conviviale et immersive.

Ce système cohérent permet aux développeurs et concepteurs web de créer un site d'annuaires de premier ordre, répondant aux exigences d'un secteur spécifique 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 thème Neve
  2. Installer le plugin Otter
  3. Installer GeoDirectory
  4. Assistant d'installation GeoDirectory
     • Choisir le système de carte
     • Définir la ville par défaut
     • Ajouter des fonctionnalités supplémentaires
     • Ajouter des données factices
• Concevoir le site d'annuaires avec Neve
  1. La conception de la page d'accueil
     • Le logo
     • Le menu de navigation
     • La typographie
     • 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 Neve Thème

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

Accédez à Appearance >> Thèmes

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

2. Installer le Otter plugin

Le plugin Gutenberg par défaut n'est pas suffisant pour styliser un modèle, nous allons donc installer le Otter 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 Otter. 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 Neve 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'annuaires avec le Neve la suite d'outils.

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

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.

La typographie

Définissons maintenant la typographie pour la police et la taille du texte du site. Je configure une famille de polices, une graisse et une taille de police globales qui seront appliquées à tout le texte du site.

nous allons dans Apparence > Personnaliseur > Typographie > Général > Corps. Nous définirons la 
Famille de polices : Inter 
Police supplémentaire Variantes : Regular 400, Medium 500, Semi-Bold 600, Bold 700, Extra Bold 800, Black 900
Transformation : Aucun
Graisse : 400
Taille de police : 16
Hauteur de ligne : 1.7
Famille de polices : Arial, Helvetica, sans-serif

Depuis Apparence > Mise en page > Pages, définissez le Mise en page de l'en-tête : Couverture

Le contenu

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

Nous avons besoin d'un en-tête hero sur la page d'accueil pour cela, ajoutons un bloc Ligne fourni par WordPress.

Nous allons ajouter un bloc Section avec une mise en page plein format.

Alignement vertical: Aligner au centre (comme indiqué dans la capture d'écran) dans les bloc Section paramètres et définissez le Structure de la section paramètres sur.
Hauteur minimale : Personnalisée
Hauteur personnalisée : 600

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

Sélectionnez les paramètres de superposition d'arrière-plan, définissez
Superposition Opacité : 50
Couleur de superposition de l'arrière-plan : #000000 (Noir)

Paramètres de couleur de superposition de l'image hero

Maintenant que nous avons assombri l'image hero, nous pouvons ajouter du texte.

Cliquez au centre de l'image (un bouton « + » est à peine visible). Cela vous permettra de sélectionner un nouveau bloc. Ajoutez un bloc Section.
Cliquez à nouveau au centre de l'image et ajoutez un « hinspTitre avancé » bloc.
Dans le bloc Texte, ajoutez un texte tel que : « hinspTrouvez le meilleur restaurant à Philadelphie”.

Sélection de bloc H1 comme Balise HTML. Alignement du texte Center. (illustré dans la capture d'écran.)

Dans le Style de bloc Advanced Heading paramètres
Taille de police : 48
Transformation de la police : Majuscules
Couleur du texte : #FFFFFF

À ce stade, nous pouvons ajouter le formulaire de recherche à la section hero de notre site d'annuaires Neve.
Cliquez sur le bouton + dans le coin inférieur droit de la section Titre pour ajouter une nouvelle section.
Pour ajouter une recherche GD dans l'en-tête de la page d'accueil, faites glisser le bloc GD > Search à l'intérieur du conteneur hero.

Ajoutons maintenant les paramètres suivants au bloc parent Section bloc.
Dans le Paramètres de structure définir
Largeur maximale du contenu: 1170
Alignement horizontal: Centre

Nous allons maintenant ajouter un espace sous la section hero. Utilisons un bloc d'espacement et définissons la hauteur = 40.

Il est temps d'ajouter quelques sections supplémentaires requises à la page d'accueil, cliquez sur l'icône plus et ajoutez un bloc Section avec une mise en page plein format.

Modifiez les bloc Section paramètres et mettez à jour les Structure de la section paramètres sur
Largeur maximale du contenu : 1170 et Alignement horizontal : Centre.

Nous allons maintenant ajouter une section vide sous l'en-tête héros et ajouter le GD > Categories bloc dans cette grille.

Définissez les options du bloc comme suit
Type de design : Image Background
Éléments par ligne : 4
Activer l'utilisation de l'image de catégorie

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, passons à l'ajout de la troisième section de notre site web. Nous l'appellerons « bsp;Annonces récentes“.
Cliquez sur l'icône plus et recherchez 'Advanced Heading' et une fois ajouté, configurez les paramètres de texte comme suit : Définissez la balise HTML sur H3 et alignez-le sur le centre.

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 par: Récent.

Ajoutons maintenant une Colonne vide avec Contenu et Largeur à 100.

Ajoutez l' GD > Map bloc et conservez les paramètres par défaut.

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

2. Conception des pages Listings et Recherche du site annuaire Neve

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.

nous allons définir les paramètres de la page comme suit
Mise en page de la barre latérale : Aucune barre latérale
Widget de pied de page : Par défaut
Conteneur de contenu : Pleine largeur

Maintenant, ajoutez un Section bloc avec une Mise en page 1:1.

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 .container.grid-container{
      max-width:100%;
}
.geodir-archive .wp-block-geodirectory-geodir-widget-loop .geodir-loop-container .geodir-listing-posts{
    overflow-y: scroll;
    max-height: 100vh;
}

Étant donné que le thème Neve présente un problème de compatibilité mineur avec la page d'archive GD > titre de page, nous allons créer un conteneur de titre en haut de cette page.

nous allons faire glisser une section vide et définir le paramètre de bloc sur
Background : #444444
Rembourrage : 50 px, 20 px, 50 px, 20 px
nous allons faire glisser le Titre de l'archive bloc à l'intérieur.

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

Une autre option consiste à utiliser le bloc GD > Simple Archive comme expliqué dans ce tutoriel sur la façon de Créer un site d'annuaire avec Elementor.

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.

Notre page GD Search et Archive est maintenant prête.

3. Conception de la page de fiche unique du site annuaire Neve

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

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

Nous allons modifier le bloc Section paramètres et mettez à jour les Structure de la section paramètres sur Largeur maximale du contenu : 1170 et Alignement horizontal : Center

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.

Ajoutons maintenant une classe ( single-gd-section ) à l'ensemble de cette section parente pour lui donner une touche finale.

Enfin, ajoutez le CSS suivant dans le personnalisateur de thème depuis Appearance => Personnaliser => Ajouter du CSS

.single-gd-section{
	max-width:1170px;
	margin:auto;
}

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

Ajouter des fonctionnalités Premium à votre site annuaire Neve

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.

Vous pouvez créer une marketplace mondiale d'articles artisanaux, vendre des billets d'événements ou des bons de réduction.

Commencez à créer votre site dès aujourd'hui grâce à ce guide détaillé : Votre guide pour créer un site annuaire. Il s'agit d'un tutoriel générique qui 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 web d'annuaires en utilisant le thème Ollie pour WordPress :

1. Installer le thème Ollie
2. Installer et configurer GeoDirectory
3. Concevoir le site web d'annuaires avec le thème OllieWP et l'éditeur Gutenberg

GeoDirectory est entièrement compatible avec les thèmes de blocs FSE comme Ollie, nous n'aurons donc pas besoin d'un constructeur de pages ou d'un plugin de blocs supplémentaire dans ce cas.

GeoDirectory offre une solution robuste et flexible pour créer un annuaire en ligne dynamique avec n'importe quel thème ou constructeur de pages.

Dans ce tutoriel, nous allons montrer comment créer un site web d'annuaires avec le OllieWP Thème en combinaison avec le plugin GeoDirectory.

Ce duo permet aux utilisateurs d'intégrer facilement des fonctionnalités basées sur la localisation, de personnaliser les mises en page et d'incorporer des blocs de contenu interactifs, garantissant une expérience utilisateur intuitive et engageante.

Grâce à cette approche intégrée, les développeurs et concepteurs web peuvent facilement créer un site d'annuaires de qualité professionnelle, adapté à des marchés de niche spécifiques ou à des besoins communautaires plus larges.

Voyons comment procéder en détail.

Dans ce tutoriel, nous allons :

• Installer et configurer le thème et les plugins
  1. Installer le thème OllieWP
  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 site web d'annuaires OllieWP
  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. Installer le thème OllieWP

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

Accédez à Appearance >> Thèmes

Sélectionnez Ajouter, Installer, et Activer le OllieWP 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)

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 de connexion utilisateur 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 OllieWP 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'annuaires avec le OllieWP la suite d'outils.

1. OllieWP 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 > Gutenberg > Pages > Accueil et cliquez sur le bouton de modification.

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.

Le menu de navigation

Après avoir créé et ajouté le logo, rendez-vous dans Appearance > Éditeur, et créez votre menu.

Cliquez sur les menus en haut et supprimez tous ceux qui existent déjà.

Ajoutons maintenant un bloc de colonnes avec une disposition en deux colonnes.

Dans la colonne de gauche, ajoutez le bloc logo du site.

Cliquez sur le conteneur d'en-tête principal et depuis les paramètres du bloc, définissez le Background : #FFFFF

Dans la colonne de droite, ajoutez le menu de navigation.

Nous avons ajouté les liens de navigation principaux suivants ainsi que quelques liens de sous-navigation :

1. Accueil
2. À propos
3. Blog
4. Lieux et ajouter des lieux
5. Profil
6. Connexion/Déconnexion

Le bloc Connexion/Déconnexion affichera uniquement les liens de connexion et de déconnexion selon le statut de connexion de l'utilisateur.

Le contenu

Je vais commencer à construire cette page from scratch en utilisant le OllieWP et les blocs Gutenberg.

Accédez à Appearance > Gutenberg > Design > Pages et cliquez sur le bouton Modifier la page d'accueil.

nous avons besoin d'un en-tête héro sur la page d'accueil ; pour cela, supprimons tout le contenu de cette page et ajoutons un Couverture bloc.

Ensuite, vérifiez les paramètres du bloc et définissez l'URL de l'image d'arrière-plan.

Pour la section Héro, nous avons besoin d'une image que nous allons télécharger gratuitement depuis Pexels.com (Merci, @rachel-claire).

nous allons ajouter les paramètres suivants dans ce bloc de couverture

Contenu : 1200
Large : 100
Opacité : 50
Espacement et marges: 0
Hauteur minimale de la couverture : 600

Ajoutons maintenant une balise d'en-tête à l'intérieur de ce bloc de couverture avec le
Texte : Trouvez le meilleur restaurant à Philadelphia

nous allons également attribuer à la balise d'en-tête une classe supplémentaire ( heading-text-center ) pour lui ajouter un peu de style.

Maintenant, ajoutons le style suivant dans le personnalisateur de thème.

.heading-text-center{
    text-align:center;
}

Maintenant, ajoutons le GD > search bloc sous ce titre.

en dessous, ajoutons un peu d'espace à l'aide d'un bloc espaceur avec une hauteur de : 60

Maintenant, ajoutons une colonne vide et plaçons-y le GD > Categories bloc à l'intérieur.

Définissez les options du bloc comme suit
Type de design : Image Background
Éléments par ligne : 3
Activer l'utilisation de l'image de catégorie

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

Sous la section héro, ajoutez une autre Colonne en cliquant sur l'icône plus et ajoutez les GD > Listings blocs à cet endroit.

Nous allons maintenant effectuer quelques réglages nécessaires dans ce GD > Listings bloc. Nous allons définir le tri : récent

Ajoutons maintenant une Colonne vide avec Contenu et Largeur à 100.

Ajoutez l' GD > Map bloc à l'intérieur et conserver les paramètres par défaut.

Cliquez sur le Pied de page et OllieWP propose déjà quelques modèles de pied de page préconstruits. J'en sélectionne un.

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

2. OllieWP Conception des pages de listings et de recherche d'un site d'annuaires

Vous devez maintenant concevoir deux pages essentielles pour tout annuaire.

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.

Page de listings

Allez dans Apparence > Éditeur > Design > Modèles et cliquez sur Modifier GD Archive modèle de page

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

Maintenant, ajoutons une ligne vide.

À l'intérieur, ajoutez une mise en page à deux colonnes

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, nous allons faire glisser le GD > Map bloc.

nous conserverons tous les paramètres par défaut pour le GD > Map. donnons-lui une certaine hauteur et j'ai décidé de lui attribuer la hauteur de 100vh.

Ajoutez le style suivant dans le personnalisateur de thème depuis  Appearance => Personnaliser => Ajouter du CSS

.geodir-archive .geodir-listings .geodir_location_listing{
    overflow-y: scroll;
    max-height: 100vh;
    padding-right: 15px;
}

Après cela, la page d'archive des annonces est prête.

Une autre option consiste à utiliser le bloc GD > Simple Archive comme expliqué dans ce tutoriel sur la façon de Créer un site d'annuaire avec Elementor.

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.

Notre page GD Search et Archive est maintenant prête.

3. OllieWP Conception de la page de fiche individuelle d'un site d'annuaires

Pour modifier et personnaliser la page GD Detail, vous pouvez aller dans Apparence > Éditeur > Design > Modèles et cliquez sur Modifier GD Single modèle de page.

Ajouter une colonne vide

Commençons par ajouter un slider d'images en haut de la page Détail 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

Maintenant, ajoutons une ligne vide avec
Contenu : 1200
Large : 100

ajouter deux colonnes à l'intérieur.

Ajoutons maintenant tous les shortcodes requis pour la page Détail GD dans la colonne de gauche, un par un.

Cela inclut GD > Taxonomies individuelles, GD > Onglets individuels et GD > Suivant/Précédent individuel.

Dans la colonne de droite, nous allons ajouter GD > Author Action et GD > Output Location bloc.

Après cette étape, notre page Détail de l'annonce est terminée.

Ajout de fonctionnalités premium à votre OllieWP 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 , 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.

Vous pouvez créer une marketplace mondiale d'articles artisanaux, vendre des billets d'événements ou des bons de réduction.

Lancez votre projet de site d'annuaire avec ces conseils : Créez un site d'annuaire dès aujourd'hui.

Les possibilités sont infinies.

Voici un guide étape par étape pour créer un site d'annuaire avec le thème Generatepress et le plugin Generatepress blocks :

1. Installer le thème Generatepress
2. Installer et configurer GeoDirectory
3. Installer le GenerateBlocks plugin
4. Concevoir le site d'annuaire avec le Generatepress thème et le Gutenberg

Generatepress Thème en combinaison avec le plugin GeoDirectory et un GenerateBlocks Plugin, offre une solution robuste et flexible pour créer un annuaire en ligne dynamique.

Ce trio permet aux utilisateurs d'intégrer facilement des fonctionnalités basées sur la localisation, de personnaliser les mises en page et d'incorporer des blocs de contenu interactifs, garantissant une expérience utilisateur intuitive et engageante.

Grâce à cette approche intégrée, les développeurs et concepteurs web peuvent facilement créer un site d'annuaires de qualité professionnelle, adapté à des marchés de niche spécifiques ou à des besoins communautaires plus larges.

Voyons comment procéder en détail.

Dans ce tutoriel, nous allons :

• Installer et configurer le thème et les plugins
  1. Installer le thème Generatepress
  2. Installer le plugin GenerateBlocks
  3. Installer GeoDirectory
  4. Assistant d'installation GeoDirectory
     • Définir la ville par défaut
     • Ajouter des fonctionnalités supplémentaires
     • Ajouter des données factices
• Concevoir le site d'annuaire Generatepress
  1. La conception de la page d'accueil
     • Le logo
     • Le menu de navigation
     • La typographie
     • 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. Installer le thème Generatepress

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

Accédez à Appearance >> Thèmes

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

2. Installer GenerateBlocks plugin

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

Ce plugin fournit des GenerateBlocks personnalisés, qui sont meilleurs que les blocs par défaut et vous aideront à concevoir les modèles de page.

Accédez à Extensions >> Ajouter.

Rechercher GenerateBlocks. 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 New York 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 de connexion utilisateur 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 Generatepress 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'annuaires avec le Generatepress la suite d'outils.

1. Generatepress 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 Appearance > Personnaliser > En-tête, cliquez Logo > Sélectionner le logo, et téléversez 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.

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.

La typographie

Définissons maintenant la typographie pour la police et la taille du texte du site. Je configure une famille de polices, une graisse et une taille de police globales qui seront appliquées à tout le texte du site.

nous allons dans Apparence > Personnalisateur > Typographie > Corps. Nous définirons le Famille de polices : Poppines Catégorie : sans-serif et Variante : 100, 100italic, 200, 200italic, 300, 300italic, regular, italic, 500, 500italic, 600, 600italic, 700, 700italic, 800, 800italic, 900, 900italic

Le contenu

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

nous avons besoin d'un en-tête hero sur la page d'accueil, pour cela ajoutons un bloc Grille fourni par le GenerateBlocks plugin.

nous allons définir l'alignement du bloc sur large.

Dans les paramètres de la Grille, définissez le paramètre Mise en page sur
Mise en page de la barre latérale : Aucune barre latérale
Widget de pied de page : Par défaut
Conteneur de contenu : Pleine largeur
Désactiver l'élément : Titre du contenu
Largeur de l'élément de grille : 100

Ensuite, vérifiez les paramètres du bloc et définissez l'URL de l'image d'arrière-plan.

Pour la section Héro, nous avons besoin d'une image que nous allons télécharger gratuitement depuis Pexels.com (Merci, @rachel-claire).

Dans le paramètre d'espacement, le rembourrage 100px sur les marges Haut et Bas.

Ajoutons maintenant une balise d'en-tête pour ajouter du texte.

Texte :: Trouvez les meilleurs restaurants à Philadelphie
Taille : Petite
Apparence : Petite Gras
Couleur du texte : #FFFFFF

Dans la même grille, nous allons ajouter le GD > Search bloc avec un rembourrage de 200 px en haut et en bas.

Nous allons maintenant ajouter une grille vide sous l'en-tête hero et y ajouter le GD > Categories bloc dans cette grille.

Définissez les options du bloc comme suit
Type de design : Image Background
Éléments par ligne : 3
Activer l'utilisation de l'image de catégorie

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

Je n'ai trouvé aucun paramètre fonctionnel dans Generateblocks pour transformer la grille en mise en page de contenu. Nous allons ajouter le home-container classe à la grille parente de la catégorie.

Sous la section héro, ajoutez une autre Grille en cliquant sur l'icône plus et ajoutez les GD > Listings blocs à cet endroit.

Nous allons maintenant effectuer quelques réglages nécessaires dans ce GD > Listings bloc. Nous allons définir le tri : récent

De même, comme pour le bloc de catégorie, nous allons ajouter le home-container classe à la grille parente des annonces récentes.

Ajoutons maintenant une grille vide et insérons le bloc GD > Map à l'intérieur, en conservant les paramètres par défaut.

De même, comme les autres, nous allons ajouter la home-container classe à la grille parente GD > map.

Enfin, ajoutez le CSS suivant dans le personnalisateur de thème depuis Appearance => Personnaliser => Ajouter du CSS

.home-container{
	max-width:1200px;
	margin:auto;
}

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

2. Generatepress 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 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.

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.

nous allons définir le paramètre de page sur
Mise en page de la barre latérale : Aucune barre latérale
Widget de pied de page : Par défaut
Conteneur de contenu : Pleine largeur

Ajoutez maintenant une grille vide avec deux colonnes.

Maintenant, dans le conteneur de gauche, nous allons faire glisser les widgets 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 des recherches depuis la page d'archive.

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

nous conserverons tous les paramètres par défaut pour le GD > Map. donnons-lui une certaine hauteur et j'ai décidé de lui attribuer la hauteur de 150vh.

Afin de rendre la mise en page de la page d'archive en pleine largeur, nous allons ajouter le CSS suivant dans le personnalisateur de thème depuis Appearance => Personnaliser => Ajouter du CSS

.geodir-archive .container.grid-container{
      max-width:100%;
}
.geodir-archive .wp-block-geodirectory-geodir-widget-loop .geodir-loop-container .geodir-listing-posts{
    overflow-y: scroll;
    max-height: 100vh;
}

Après cela, la page d'archive des annonces est prête.

Une autre option consiste à utiliser le bloc GD > Simple Archive comme expliqué dans ce tutoriel sur la façon de Créer un site d'annuaire avec Elementor.

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.

Notre page GD Search et Archive est maintenant prête.

3. Generatepress Conception de la page de fiche individuelle d'un site d'annuaires

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 une nouvelle grille.

Commençons par ajouter un slider d'images en haut de la page Détail 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 de grille vide en dessous avec une mise en page à deux colonnes.

nous allons ajouter une classe (single-details-container ) à cette grille depuis les paramètres du bloc.

Ajoutons maintenant tous les shortcodes requis pour la page Détail GD dans la colonne de gauche, un par un.

Cela inclut GD > Taxonomies individuelles, GD > Onglets individuels et GD > Suivant/Précédent individuel.

Dans la colonne de droite, nous allons ajouter GD > Author Action et GD > Output Location bloc.

Enfin, ajoutez le CSS suivant dans le personnalisateur de thème depuis Appearance => Personnaliser => Ajouter du CSS

.single-details-container {
    max-width: 1200px;
    margin: auto !important;
}
.single-gd_place .entry-content{
    margin:0px;
}

Après cette étape, notre page Détail de l'annonce est terminée.

Ajout de fonctionnalités premium à votre Generatepress 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 , 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.

Vous pouvez créer une marketplace mondiale d'articles artisanaux, vendre des billets d'événements ou des bons de réduction.

Améliorez votre site web grâce à ces stratégies clés : Stratégies clés pour créer un site annuaire.

Les possibilités sont infinies.

Comment créer un site d'annuaires avec le thème Divi ?

La façon la plus simple de créer un site d'annuaires avec le thème WordPress Divi est de suivre les 3 étapes suivantes :

1. Installer le thème Divi
2. Installer et configurer GeoDirectory
3. Concevoir le site d'annuaires avec le thème Divi

Avant de décrire en détail comment créer un annuaire d'entreprises étape par étape, je souhaite citer un article publié le 11 septembre 2023 sur le blog officiel d'Elegantthemes, les développeurs du thème Divi.

GeoDirectory est-il le meilleur plugin WordPress pour créer un site d'annuaires d'entreprises avec le thème Divi ?

Sur le blog d'Elegant Themes, un article intitulé « 7 Best WordPress Directory Plugins in 2023 (Ranked) » a été publié.

Le plugin GeoDirectory a décroché la première place du classement. Dans le contenu de l'article, l'auteur explique pourquoi GeoDirectory est le meilleur plugin WordPress pour créer un site d'annuaires.

Je vous encourage à lire cet article. Voici ci-dessous une citation extraite de la section FAQ dudit article.

Quel est le meilleur plugin d'annuaires pour WordPress ?
GeoDirectory est le meilleur plugin d'annuaires WordPress. Il offre des annonces personnalisables, une recherche avancée, des avis d'utilisateurs, l'intégration de Google Maps, des options de monétisation et une excellente compatibilité avec les thèmes et plugins. Vous pouvez créer facilement des sites d'annuaires riches en fonctionnalités avec GeoDirectory.

Citation extraite de la section FAQ de l'article : 7 Best WordPress Directory Plugins in 2023 (Ranked).

Mon premier site WordPress, créé en 2013, était un annuaire d'entreprises sans aucun plugin dédié.

Je me souviens quand les créateurs de WP GeoDirectory, Paolo Tajani et Stiofan O'Connor, ont forké le thème « GeoPlaces » de Templatic et corrigé tous ses problèmes.

Ils ont amélioré ses performances et ont ensuite lancé GeoTheme il y a plus de 10 ans.

Plus tard, s'adaptant à l'évolution de l'écosystème WordPress et forts de leurs expériences, ils ont abandonné le développement de thèmes.

En s'appuyant sur ces bases, ils ont conçu le plugin GeoDirectory, qui facilite la création de sites d'annuaires de presque tout type.

J'ai testé la plupart des plugins et thèmes WordPress permettant de créer un site annuaire.

L'entrée mentionnée ci-dessus ainsi que mes 11 ans d'expérience confirment que WP GeoDirectory est le meilleur plugin à cet effet.

Guide étape par étape pour créer un site annuaire avec le thème Divi et le plugin GeoDirectory

Voyons en détail comment créer un site annuaire avec GeoDirectory et le thème Divi.

Dans ce tutoriel, nous allons :

Table des matières

• Comment créer un site d'annuaires avec le thème Divi ?
  • GeoDirectory est-il le meilleur plugin WordPress pour créer un site d'annuaires d'entreprises avec le thème Divi ?
  • Guide étape par étape pour créer un site annuaire avec le thème Divi et le plugin GeoDirectory
• Installation du thème et des plugins.
  • 1. Installer le thème Divi
  • 2. Installer GeoDirectory
  • 3. Assistant d'installation de GeoDirectory
    • Choisir le système de cartographie (Google Maps ou OpenStreetMap)
    • Définir la ville par défaut
    • Ajouter des fonctionnalités supplémentaires
    • Ajouter des données factices
• Concevoir le site annuaire Divi
  • 1. Conception de la page d'accueil du site annuaire Divi
    • Le logo
    • Le menu de navigation
    • Le contenu
    • Créer un pied de page global
  • Conception des pages de liste d'annuaires et de recherche pour un site Divi
    • Page de recherche
    • Page d'annonce individuelle
  • Peaufiner votre site d'annuaire Divi
  • Couleurs et typographie
• Maximisez le potentiel de votre annuaire Divi avec DiviGeo
• Ajouter des fonctionnalités premium à votre site d'annuaire Divi

Installation du thème et des plugins.

1. Installer le thème Divi

Vous devez d'abord installer un thème Divi

Accédez à Apparence >> Thèmes >>

Sélectionnez Ajouter, Téléverser le thème, Installer et Activer le thème Divi.

2. Installer GeoDirectory

Vous devez maintenant installer le plugin GeoDirectory.

Accédez à Extensions >> Ajouter, recherchez GeoDirectory. Veuillez l'installer et l'activer.

C'est fait ! Une fois le thème Divi et le plugin GeoDirectory activés, nous pouvons passer à l'étape suivante.

3. Assistant d'installation de GeoDirectory

Si vous appréciez Divi Builder pour sa simplicité, vous apprécierez assurément l'assistant de configuration intégré au plugin GeoDirectory.

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

Vous devez maintenant compléter l'assistant de configuration. 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.

Sélectionnez OpenStreetMap et cliquez sur Continuer.

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 dans 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éé. GeoDirectory utilise Philadelphia comme ville par défaut.

Compte tenu de la niche que j'ai choisie pour ce tutoriel, nous allons définir la ville par défaut sur Split, en Croatie.

Vous pouvez faire glisser le marqueur sur la carte pour utiliser l'emplacement de votre choix, ou utiliser les paramètres avancés en cliquant sur « Afficher les options avancées ».

Si vous avez besoin d'ajouter des annonces dans plus d'une ville, vous aurez besoin de Extension Location Manager.

Ajouter des fonctionnalités supplémentaires

Dans cette étape, nous allons installer UsersWP, un plugin de connexion utilisateur 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 site annuaire Divi

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 web d'annuaire avec le thème Divi.

1. Conception de la page d'accueil du site annuaire Divi

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 Réglages > Lecture > Réglages de la page d'accueil et sélectionnez votre page d'accueil.

Nous sélectionnerons la page des articles plus tard.

Le logo

Évitez de dépenser pour un designer pour votre logo initial.

Beaucoup font l'erreur d'investir massivement avant d'évaluer l'adéquation avec le marché.

Utilisez des applications comme Canva pour des designs rapides, abordables et de qualité.

Pour un MVP, un logo conçu avec Canva est suffisant.

Bien que la perfection initiale ne soit pas cruciale, vous pourrez améliorer le logo si votre projet est une réussite.

Rappelez-vous, un logo ordinaire n'est pas la cause des échecs de projet.

Après avoir conçu votre logo, rendez-vous dans Divi > Theme Options, cliquez sur Télécharger et sélectionnez le logo que vous avez créé avec Canva.com.

Ignorez le recadrage (ou recadrez l'image selon vos besoins) et cliquez sur Enregistrer les modifications dans le coin supérieur gauche de l'écran.

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'option « Menu principal ».

Dans cet exemple, nous n'aurons que le menu de navigation de l'en-tête.

Nous avons ajouté douze liens :

1. Accueil
2. À propos
3. Blog
4. Comptabilité
5. Profil (Visible pour les utilisateurs connectés )
6. Changer le mot de passe (Visible pour les connectés )
7. Se déconnecter (Visible pour les connectés utilisateurs.)
8. S'inscrire (Visible pour les non connectés)
9. Connexion (Visible pour les utilisateurs non connectés)
10. Mot de passe oublié ? (Visible pour non connectés)
11. Page de recherche
12. Ajouter une annonce

Les liens des points de terminaison UsersWP sont dynamiques, voir les parenthèses ci-dessus.

Le contenu

Le thème Divi propose plus de 330 packs de mises en page prédéfinies.

Pour les besoins de ce tutoriel, je vais choisir une mise en page prête à l'emploi qui permet de créer un répertoire d'entreprises attrayant sans la fastidieuse tâche de styliser les modules Divi.

Pour ce tutoriel, j'ai choisi le pack de mise en page Divi prédéfini Charter.

Accédez à votre page d'accueil, cliquez sur « Activer le constructeur visuel », puis sur « Parcourir les mises en page ».

Dans la bibliothèque de mises en page prédéfinies, sélectionnez « Charter Boat Landing Page » et cliquez sur « Utiliser cette mise en page ».

Après le deuxième module de texte, ajoutez le module de code et cliquez sur Ajouter un shortcode.

Divi ne permet pas l'utilisation des blocs Gutenberg, mais les créateurs du plug-in GeoDirectory ont mis en place un générateur de shortcodes.

Grâce à cela, vous pouvez facilement ajouter des widgets dynamiques à l'aide du module Code de Divi.

Ainsi, la fonctionnalité de générateur de shortcodes est votre meilleure alliée pour créer un site d'annuaire avec Divi.

Sélectionnez « gd_search » (GD > Recherche) dans la liste déroulante et cliquez sur Copier le shortcode.

Le shortcode copié se trouve dans le presse-papiers. Collez le code copié dans le module de code. Puis cliquez sur l'icône de la coche.

Remplacez le contenu du premier module texte par « Search for ».

Modifiez le contenu de l'en-tête dans l'onglet Contenu en Yacht Delivery. Dans l'onglet Conception, changez la taille de police de l'en-tête h1 à 70px et cliquez sur la coche.

Supprimez le module bouton « Book a Trip ».

Notre section Héros est maintenant terminée.

Dans la section suivante, à partir du modèle de page d'atterrissage Divi prédéfini, modifiez le contenu de l'en-tête H2 en « Listings Categories ».

Supprimez le module texte sous le titre (police dorée) ou remplacez le contenu par le vôtre ; je laisserai les fragments Lorem Ipsum pour rendre le design du site plus intéressant.

Supprimez la rangée à deux colonnes avec photos et texte, puis ajoutez une nouvelle rangée avec un module de code. Lors de l'ajout, cliquez sur « Add Shortcode » de la même manière que vous l'avez fait pour le formulaire de recherche.

Sélectionnez « gd_categories » (GD > Categories) dans la liste déroulante.

Les options que j'ai modifiées dans le générateur de shortcode pour obtenir l'apparence des colonnes de catégories telle qu'illustrée ci-dessous :

Onglet Filtres :
Nombre max. de catégories à afficher par CPT : 3
Cocher : Hide Empty
Onglet Conception de la carte :
Type de conception : Image Background
Positionnement des rangées : Center
Ombre de la carte : Grand
Onglet Icône / Image :
Marque : Utiliser l'image de la catégorie
Taille de l'image : Grand

Vous pouvez également copier le shortcode ci-dessous et le coller dans le module de code.

Shortcode généré :

[gd_categories post_type="0" hide_empty="1" max_level="1" max_count="3" max_count_child="all" sort_by="count" design_type="image" row_positioning="center" card_shadow="large" 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"]

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.

J'ai également modifié les noms des catégories pour qu'ils correspondent à la niche que j'ai choisie pour ce tutoriel.

Nous utiliserons la section suivante pour afficher les dernières entrées.

Remplacez le titre Our boats par Latest Yacht providers. Supprimez la ligne après le titre et ajoutez une nouvelle section avec le module de code Divi.

De même que pour le formulaire de recherche et les catégories, nous devons générer un shortcode qui affichera les dernières annonces.

Sélectionnez « gd_listings » (GD > Listings) » dans la liste déroulante.

Les options que j'ai modifiées dans le générateur de shortcode pour obtenir l'apparence illustrée ci-dessous :

Onglet Filtres :
Publications à afficher : 3
Onglet Design :
Mise en page : Vue en grille (trois colonnes)

Vous pouvez également copier le shortcode ci-dessous et le coller dans le module de code.

Shortcode généré :[gd_listings post_type=

Cette section ne sera pas nécessaire, supprimez-la.

La section suivante servira de section CTA. Remplacez le texte par « Do you provide Yacht Delivery services? » Dans l'onglet design du module texte, modifiez la taille de l'en-tête h2 à 60px.

Modifiez le texte du module bouton pour ajouter une annonce et définissez le lien sur « /add-listing/places/ ».

Vous pouvez supprimer la prochaine section « FAQ », mais je ne le ferai pas, afin de rendre le projet plus intéressant.

Je vous recommande de remplir la section FAQ avec du contenu lié à la niche pour laquelle vous créez un annuaire d'entreprises.

Plus le contenu est thématique, mieux c'est pour optimiser votre site web dans les moteurs de recherche.

De même pour la section suivante, je la supprimerai dans ce guide, mais vous pouvez l'utiliser pour optimiser votre site web pour les moteurs de recherche.

Je ne supprimerai pas la section des avis pour un meilleur design de la page d'accueil. Faites comme bon vous semble.

Créer un pied de page global

La page d'accueil du site Divi Directory est terminée. Maintenant, créons un pied de page global pour notre site.

Cliquez sur l'icône Enregistrer la section dans la bibliothèque, dans le champ du nom de section, écrivez « global-footer » et cliquez sur Enregistrer dans la bibliothèque. Ensuite, enregistrez la mise en page de votre page d'accueil avec le bouton Enregistrer dans le coin inférieur droit de l'écran.

Supprimez la section que nous avons enregistrée dans la bibliothèque Divi et enregistrez à nouveau le projet.

Accédez au tableau de bord WordPress, puis cliquez sur Divi > Theme Builder, cliquez sur Add Global Footer et sélectionnez Build Global Footer.

Insérez une nouvelle section, cliquez sur Add From Library, choisissez la section que nous avons créée précédemment et cliquez sur Use This Section.

La section de pied de page global est construite avec une photo, quatre modules de texte et des modules d'icônes sociales.

Modifiez le contenu et les liens des modules de texte. J'utiliserai des modules de texte pour représenter à nouveau les catégories de mon annuaire d'entreprises sur le site web afin de faciliter la navigation.

Saisissez les liens appropriés dans le module Suivi des réseaux sociaux.

Supprimez la section vide et enregistrez le pied de page global, puis cliquez sur Fermer dans le coin supérieur droit de l'écran. 

Très important : lorsque vous revenez au Divi theme Builder, cliquez sur le bouton Enregistrer les modifications.

La page d'accueil et le pied de page global du site d'annuaire sont terminés.

Conception des pages de liste d'annuaires et de recherche pour un site Divi

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, mais dans ce tutoriel, nous apporterons des modifications mineures aux pages par défaut.

Nous devons ajouter une carte ainsi qu'un module de texte avec un titre dynamique.

Accédez à l'onglet « Toutes les pages » dans le tableau de bord WordPress, trouvez la page « GD Archive », cliquez sur « Modifier avec Divi », puis modifiez le contenu existant.

Supprimez le module de texte et ajoutez les deux modules de code.

Utilisez maintenant le générateur de shortcodes de la même manière que vous l'avez fait pour générer des shortcodes pour les catégories ou les annonces récentes.

Dans la liste déroulante, sélectionnez, copiez et collez les shortcodes suivants dans l'ordre :

GD > Map

GD > Notifications

GD > Search

GD > Loop Action

GD > Loop

GD > Loop paging

Vous pouvez également coller les shortcodes suivants dans le module de code.

Dans le premier module de code, nous devons ajouter le shortcode responsable de la carte :

[gd_map map_type="auto" post_settings="1" width="100%" height="425px" maptype="ROADMAP" zoom="0"]

Deuxième module de code :

[gd_map map_type="auto" post_settings="1" width="100%" height="425px" maptype="ROADMAP" zoom="0"] <br>

[gd_notifications]

[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=”]

Maintenant, au-dessus de la section des modules de code Divi, nous devons ajouter une nouvelle section avec un module Heading Divi.

Pour afficher le titre des pages d'archive, nous utiliserons l'option intégrée de Divi pour afficher du contenu dynamique.

Dans l'onglet contenu, survolez le champ de titre et cliquez sur Utiliser le contenu dynamique à droite. Sélectionnez Titre de la page/archive dans la liste déroulante.

Cliquez sur la coche et enregistrez votre mise en page GD Archive Divi.

Page de recherche

Pour la page de recherche, nous répétons un processus similaire, mais comme pour la création du pied de page, nous utiliserons le Divi Theme Builder.

Depuis le tableau de bord WordPress, accédez à Divi > Theme Builder. Cliquez sur Ajouter un nouveau modèle puis sur Créer un nouveau modèle.

Vous verrez les paramètres du modèle. Sous l'onglet Utiliser sur, trouvez la section Autre et sélectionnez GD Search Results Page, puis cliquez sur Créer un modèle.

Vous verrez un nouveau modèle responsable de la page de recherche GD.

Ajoutez un corps personnalisé, cliquez sur Ajouter depuis la bibliothèque dans l'onglet Votre page existante, cliquez sur GD Archive Layout puis utilisez cette mise en page.

Cliquez sur l'icône crayon et modifiez le corps personnalisé. Vous n'avez rien à faire, enregistrez simplement la mise en page et sauvegardez les modifications dans le Divi Builder Theme.

Plus qu'une étape et votre site d'annuaires créé avec Divi sera entièrement fonctionnel.

Page d'annonce individuelle

Une page de fiche individuelle est responsable de l'affichage d'une entrée unique dans votre site d'annuaires.

Similaire à la page d'archive GD et à la page de recherche Gd, le modèle de page a été créé par l'assistant d'installation GD.

Accédez aux pages dans votre tableau de bord WordPress et modifiez la page Divi GD Details.

Supprimez le contenu et ajoutez une ligne à deux colonnes comme indiqué dans l'image ci-dessous.

Dans le module de code de gauche, nous allons ajouter les shortcodes responsables du contenu de la publication et de la galerie.

Dans le module de code de droite, nous allons ajouter les shortcodes qui seront responsables de l'affichage des détails de la publication, tels que le numéro de téléphone, l'adresse, les liens vers les réseaux sociaux, et autres.

Vous savez comment utiliser le générateur de shortcodes, alors générez, copiez et collez les shortcodes suivants. J'ai également préparé des shortcodes prêts à copier ci-dessous.

Module de code à gauche

[gd_post_images title='' types='' fallback_types='' ajax_load='true' limit='' limit_show='' css_class='' type='slider' slideshow='true' controlnav='1' animation='slide' show_title='true' show_caption='true' image_size='' aspect='' cover='' link_to='' link_screenshot_to='' bg='' mt='' mr='' mb='' ml='' pt='' pr='' pb='' pl='' border='' rounded='' rounded_size='' shadow='' ]

[gd_single_taxonomies taxonomy=” prefix=” link_style=” link_color=” link_color_custom=” link_icon=’false’ mt=” mr=” mb=’2′ ml=” pt=” pr=” pb=” pl=” ]

[gd_single_tabs show_as_list=’false’ output=” tab_style=” disable_greedy=’false’ ]

[gd_single_next_prev bg=” mt=’4′ mr=” mb=’3′ ml=” pt=” pr=” pb=” pl=” border=” rounded=” rounded_size=” shadow=” ]

Module de code à droite

[gd_output_location location="detail" list_style="wrap"]

Presque terminé !

Maintenant, comme lors de la création du modèle de page d'archive GD, nous devons ajouter un module Titre qui sera responsable de l'affichage du titre dynamique de la fiche.

Ajoutez un nouveau module Titre Divi dans la première colonne au-dessus du module de code et définissez le titre dynamique sur Page/Archive Title.

Cliquez sur la coche et enregistrez votre mise en page. La page de publication unique ressemblera à ce qui suit.

Peaufiner votre site d'annuaire Divi

Votre site de répertoire Divi est presque prêt ; nous devons maintenant définir quelques options pour peaufiner votre site.

Couleurs et typographie

La couleur principale que j'ai choisie pour ce site est un ton de bleu marine. Code hexadécimal : #1e2d44.

Accédez à Theme Customizer > General Settings > Layout settings et changez la couleur d'accentuation du thème Divi en : #1e2d44.

Nous devons maintenant modifier la couleur principale du plugin GeoDirectory.

Dans le personnalisateur de thème, cliquez sur AyeCode UI et définissez la couleur principale sur : #1e2d44.

Nous devons maintenant définir la police globale. Allez dans Personnalisateur de thème > Paramètres généraux > Typographie et changez la police des en-têtes en Cinzel.

Comme vous pouvez le constater, la police des en-têtes générés par WpGeodirectory n'a pas changé pour la police Cinzel.

Allez dans l'onglet CSS supplémentaire du Personnalisateur de thème et collez le code CSS suivant.

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: 'Cinzel', Georgia, "Times New Roman", serif!important;
}

Changer la version de BootStrap

Dans le tableau de bord WordPress, cliquez sur Réglages puis sur AyeCode UI, changez la Version en BootStrap V5 et enregistrez.

Votre site de répertoire Divi est terminé.

Maximisez le potentiel de votre annuaire Divi avec DiviGeo

Il s'agit d'une méthode simple pour créer un annuaire avec GeoDirectory et Divi.

Si vous préférez ne pas vous attaquer à ce projet seul, ou si vous avez besoin de quelque chose de plus sophistiqué, n'hésitez pas à me contacter.

Visitez mon site web, envisagez d'acheter l'un de mes thèmes enfants GeoDirectory Divi Business DiviGeo, ou engagez-moi pour créer un site web unique fait sur mesure selon vos besoins.

Ajouter des fonctionnalités premium à votre site d'annuaire Divi

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'annonce peut inclure l'obligation de passer à 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 coupons de réduction.

Découvrez des conseils sur le processus de création : Créer un site d'annuaire : conseils et astuces.

Les possibilités sont immenses.

Comment créer un site annuaire avec OceanWP ?

Voici un guide étape par étape pour créer un site annuaire avec le thème OceanWP :

1. Installer le thème OceanWP
2. Installer et configurer GeoDirectory
3. Installer le plugin Spectra Gutenberg Blocks
4. Concevoir le site d'annuaires avec le thème OceanWP et Gutenberg Gutenberg

Le thème OceanWP, combiné au plugin GeoDirectory et à un plugin de blocs Gutenberg, offre une solution robuste et flexible pour créer un annuaire en ligne dynamique.

Ce trio permet aux utilisateurs d'intégrer facilement des fonctionnalités basées sur la localisation, de personnaliser les mises en page et d'incorporer des blocs de contenu interactifs, garantissant une expérience utilisateur intuitive et engageante.

Grâce à cette approche intégrée, les développeurs et concepteurs web peuvent facilement créer un site d'annuaires de qualité professionnelle, adapté à des marchés de niche spécifiques ou à des besoins communautaires plus larges.

Voyons comment procéder en détail.

Dans ce tutoriel, nous allons :

• Installer et configurer le thème et les plugins
  1. Installer le thème OceanWP
  2. Installer Spectra Blocks
  3. Installer GeoDirectory
  4. Assistant d'installation GeoDirectory
     • Choisir le système de cartographie (Google Maps ou OpenStreetMap)
     • Définir la ville par défaut
     • Ajouter des fonctionnalités supplémentaires
     • Ajouter des données factices
• Concevoir le site d'annuaires OceanWP
  1. La conception de la page d'accueil
     • Le logo
     • Le menu de navigation
     • La typographie
     • 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. Installer le thème OceanWP

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

Accédez à Appearance >> Thèmes

Sélectionnez Ajouter, Installer, et Activer le thème OceanWP.

2. Installer le plugin Spectra Blocks

Le plugin Gutenberg par défaut n'est pas suffisant pour styliser un modèle, nous allons donc installer le plugin Spectra Blocks. (consultez ce tutoriel si vous souhaitez créer un site d'annuaires avec le thème Astra et le plugin Spectra à la place)

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

Accédez à Extensions >> Ajouter.

Recherchez Spectra 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 New York 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 de connexion utilisateur 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 site d'annuaires OceanWP

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'annuaires avec le thème OceanWP.

1. Conception de la page d'accueil du site d'annuaires OceanWP

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) initial, un logo créé avec Canva est tout à fait suffisant.

Canva propose une multitude de modèles de logos, et il n'y a pas de problème si votre premier logo n'est pas parfait ou totalement original.

Au fur et à mesure que votre projet prend de l'ampleur, vous avez toujours la possibilité d'affiner ou de revoir entièrement votre logo.

N'oubliez pas que le succès d'un projet ne dépend pas de la perfection de son logo.

Allez maintenant dans Appearance > Personnaliser > En-tête > Logo, cliquez sur Sélectionner le logo et téléchargez votre fichier PNG. Ignorez le recadrage (ou recadrez l'image si nécessaire) et cliquez sur publier. Vous pouvez également définir la hauteur et la largeur maximales du logo si celui-ci est de grande taille.

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. Page de recherche
6. Connexion
7. Compte > Profil > Mot de passe oublié > Déconnexion

Le lien de connexion (depuis les points de terminaison UsersWP) n'apparaîtra que pour les utilisateurs déconnectés, tandis que les liens de déconnexion, de compte et de profil n'apparaîtront que pour les utilisateurs connectés.

La typographie

Définissons maintenant la typographie pour la police et la taille du texte du site. Je configure une famille de polices, une graisse et une taille de police globales qui seront appliquées à tout le texte du site.

nous allons dans Apparence > Personnalisateur > Typographie > Corps. Nous définirons le Famille de polices : Red Hat Text et Graisse de police : Normal : 400

et dans les paramètres Apparence > Personnaliser > Typographie > menu principal. Nous allons définir Graisse de police : Moyen 500, Taille de police : 13px

Nous allons maintenant accéder à Apparence > Personnaliser > Options générales > Style général Couleur principale : #ff914d et Couleur principale au survol : #ff731c

Le contenu

Je vais commencer à construire cette page de zéro en utilisant le plugin Spactra Blocks.

nous avons besoin d'un en-tête hero sur la page d'accueil, pour cela ajoutons un bloc conteneur fourni par le plugin spectra blocks.

Ensuite, cliquez sur Style dans les onglets supérieurs. Sélectionnez > Images de type comme Type d'arrière-plan.

Pour la section Héro, nous avons besoin d'une image que nous allons télécharger gratuitement depuis Pexels.com (Merci, @Kelly).

Cliquez sur la section ajoutée et sélectionnez Pleine largeur dans l'option Largeur du contenu, comme indiqué dans la capture d'écran ci-dessous.

Depuis l'onglet Style des paramètres du bloc conteneur, sélectionnez Répéter à Pas de répétition et Taille à Couverture.

Faites glisser et déposez un élément Titre à l'intérieur de l'image héros.

Il est temps de donner un titre à l'image héros de notre page d'accueil.

Depuis l'onglet Style, changez la couleur du texte en blanc (#FFFFFF) pour améliorer le contraste et la lisibilité.

Dans ce tutoriel, j'utiliserai quelque chose de simple comme « Trouvez le Meilleur Restaurants à New York » Vous pouvez ajouter le slogan de votre choix ici.

N'oubliez pas de centrer le texte à l'aide de l'option d'alignement.

Pour ajouter une recherche GD dans l'en-tête de la page d'accueil, faites glisser le bloc GD > Search à l'intérieur du conteneur hero.

Ensuite, ajoutez une hauteur minimale à ce conteneur hero. Je vais la définir à 650 x 600 px en largeur et hauteur, et définissez également la largeur du conteneur : Encadré et la largeur du contenu : Encadré.

il est temps de supprimer le titre de cette page et l'espace supplémentaire dans la section d'en-tête.

Cliquez sur l'icône O en haut à droite de la page, cliquez simplement dessus. À l'intérieur, dans la section Général, définissez padding : désactivé et dans la sélection Titre Titre : désactivé

Il est temps d'ajouter quelques sections supplémentaires requises sur la page d'accueil ; je vais maintenant ajouter une section des dernières annonces.

Sous la section héro, ajoutez une autre conteneur en cliquant sur l'icône plus et ajoutez les GD > Listings blocs à cet endroit.

Nous allons maintenant effectuer quelques réglages nécessaires dans ce GD > Listings bloc. Nous allons définir le tri : récent

Nous allons maintenant ajouter un CTA pour inciter les propriétaires d'entreprise à référencer leur établissement. Nous allons ajouter un conteneur vide et, dans les paramètres de style,
définir un arrière-plan.

Ajoutons maintenant les styles du conteneur :

Type de superposition : Couleur
Couleur de superposition de l'image : #FF6900
Opacité de la superposition : 0.3
Largeur du conteneur : Pleine largeur
Largeur du contenu : Encadré

Nous allons également ajouter un Appel à l'action bloc fourni par Spectra à l'intérieur de ce conteneur.

Typographie pour la section CTA.
Couleur : #fffff
Taille de police : 32px

ajoutons un peu de style au bouton.
Couleur du texte : #000000
Couleur d'arrière-plan : #FFFFFF
Rayon : 30px tous les côtés
Rembourrage : 10px, 30px, 10px, 30px

Changeons le texte du bouton en Ajouter une annonce et le lien vers la page Ajouter une annonce.

Notre section CTA est maintenant terminée. Nous allons ajouter une autre section : GD > Categories la section en dessous.

Les paramètres seront les suivants
Type de design : Image Background
Éléments par ligne : 3
Activer l'utilisation de l'image de catégorie

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

Et voilà, ajoutons maintenant la dernière section pour l'affichage des liens de réseaux sociaux. Nous l'appellerons RESTEZ EN CONTACT.

Ajoutez un nouveau conteneur vide avec un arrière-plan #000000.

Nous allons maintenant ajouter un titre dans ce conteneur avec Alignement : Centré et Titre : H3

Je vais ajouter le texte « Restez en Contact »
Couleur : #ffffff
Taille de police : 24px

Ajoutons maintenant un paragraphe en dessous pour y ajouter du texte.

Ajouter du style
Couleur du texte : #ffffff
Taille : Petit

Nous allons maintenant ajouter le bloc d'icônes sociales en dessous.

Dans ce bloc d'icônes sociales, ajoutez le style suivant
Taille : 15px
Taille de l'arrière-plan : 10px
Rayon de bordure : 100
Couleur : #ffffff

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

2. Conception de la page Annonces et Recherche du site répertoire OceanWP

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.

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.

Ajoutez maintenant un conteneur à deux colonnes.

Maintenant, dans le conteneur de gauche, nous allons faire glisser les widgets 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 des recherches depuis la page d'archive.

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

nous conserverons tous les paramètres par défaut pour le GD > Map. donnons-lui une certaine hauteur et j'ai décidé de lui attribuer la hauteur de 100vh.

Définissez maintenant le conteneur principal en pleine largeur en suivant les instructions ci-dessous indiquées dans l'image.

Nous allons maintenant définir le modèle de page Archive en Pleine largeur

nous allons également ajuster la section de style d'en-tête pour toutes les pages depuis le Personnalisateur de thème > Options générales > Paramètres généraux.
avec le style
Style de titre : Centré
Rembourrage : 20px
Couleur d'arrière-plan : #1e73be
Couleur du texte : #ffffff

Après cela, la page d'archive des annonces est prête.

Une autre option consiste à utiliser le bloc GD > Simple Archive comme expliqué dans ce tutoriel sur la façon de Créer un site d'annuaire avec Elementor.

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.

Notre page GD Search et Archive est maintenant prête.

3. Conception de la page de liste unique du site annuaire OceanWP

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

Commençons par ajouter un slider d'images en haut de la page Détail de l'annonce. Nous allons faire glisser le GD > Post Image bloc dans ce conteneur.

Dans ce bloc GD > Image, ajustez les paramètres suivants.

Limite d'images : 50

Limite d'affichage : 2

Ajoutons maintenant un autre conteneur en dessous de celui-ci, dans lequel nous ajouterons les autres blocs requis de la page de détail GeoDirectory.

Ajoutons maintenant tous les shortcodes requis de la page GD Detail un par un. Ce qui inclut GD > Single Taxonomies, GD > Single Tabs, GD > Single Next Prev.

Il est maintenant temps d'ajouter des widgets à la barre latérale. Nous allons donc aller dans wp-admin > Apparence > Widgets.

Ajoutez le widget GD > Author Action dans la barre latérale principale. Ce widget fournira un Modifier, Supprimer l'annonce à l'auteur de l'annonce.

Ajouter un autre widget GD > Output Location. Ce widget affichera tous les principaux détails de l'annonce qui ont été marqués comme visibles sur la page de détail.

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

Ajouter des fonctionnalités premium à votre site de répertoire OceanWP

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.

Vous pouvez créer une marketplace mondiale d'articles artisanaux, vendre des billets d'événements ou des bons de réduction.

Démarquez votre site de répertoire en suivant ce guide : Créer un site de répertoire professionnel.

Les possibilités sont infinies.