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 :
- Installer le thème Beaver Builder
- Installer et configurer GeoDirectory
- Installer le plugin Beaver Builder & Beaver Themer
- 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 :
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 :
- Activer les clés.
- Créer ou sélectionner un projet existant.
- Obtenir la clé.
- Activer un compte de facturation.
- Restreindre la clé API (afin qu'elle ne puisse être utilisée qu'à partir de l'URL de votre site)
Concernant le point quatre : il s'agit d'une obligation. Cependant, vous n'êtes facturé que si vous dépassez le seuil de 200 $/mois.
Ce crédit gratuit est bien plus que suffisant pour 99 % des annuaires.
Définir la ville par défaut
Ensuite, vous définirez l'emplacement par défaut. Il s'agit de la ville pour laquelle l'annuaire est créé.
Nous définirons Philadelphia comme ville par défaut.
Vous pouvez utiliser n'importe quel emplacement selon vos besoins.
Si vous souhaitez ajouter des fiches dans plusieurs villes, vous aurez besoin de l'extension Location Manager.
Ajouter des fonctionnalités supplémentaires
Dans cette étape, nous allons installer UsersWP, un plugin 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 :
- Accueil
- À propos
- Blog
- Lieux et ajouter des lieux
- Profil
- Connexion
- Déconnexion
Le lien de connexion (depuis les points de terminaison UsersWP) n'apparaîtra que pour les utilisateurs déconnectés, tandis que les liens de déconnexion, de compte et de profil n'apparaîtront que pour les utilisateurs connectés.
La typographie
Définissons 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 :
- 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.
- Claim Listings: Il s'agit d'une fonctionnalité fondamentale pour un annuaire où l'administrateur crée la base de données et invite les propriétaires d'entreprises à prendre en charge leurs annonces gratuites. Le processus de réclamation d'une annonce peut inclure le passage obligatoire à une annonce payante pour en reprendre la propriété.
- Publicité: la vente d'annonces publicitaires est une autre façon de monétiser un annuaire en ligne. Si vous avez beaucoup de trafic, vous pouvez utiliser des réseaux publicitaires. Sinon, vous pouvez vendre des annonces directement, en permettant aux entreprises d'ajouter des bannières dans des zones spécifiques de votre site web, ou en permettant à des annonces d'apparaître en tant que publicités, par exemple, en haut des résultats de recherche organiques.
Ce ne sont là que trois exemples. Cependant, un site d'annuaire offre de nombreuses façons de gagner de l'argent en ligne.
Vous pouvez créer une marketplace mondiale d'articles artisanaux, vendre des billets d'événements ou des bons de réduction.
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.