Comment créer un site de répertoire avec le thème Avada
Voici un guide facile à comprendre sur la façon de développer un site d'annuaire en utilisant le thème Avada et le Avada Builder plugin :
- Installez le thème Avada
- Installer et configurer GeoDirectory
- Concevez le site d'annuaire avec Avada Builder
Le thème Avada, utilisé conjointement avec le plugin GeoDirectory et le plugin Avada Builder, est une excellente façon de créer un annuaire en ligne flexible.
Cette combinaison permet d'ajouter facilement des fonctionnalités basées sur la localisation, de personnaliser la mise en page et d'intégrer du contenu dynamique pour une expérience conviviale.
Elle permet aux développeurs et aux designers web de créer un site d'annuaire de haute qualité adapté à des secteurs spécifiques ou aux besoins d'une communauté plus large.
Voyons en détail comment y parvenir.
Dans ce tutoriel, nous allons :
Installation du thème et des plugins.
1. Installer le thème Avada
Avada est un thème WordPress polyvalent et populaire, reconnu pour sa flexibilité et ses fonctionnalités puissantes.
C'est un thème multifonction qui peut être personnalisé pour créer une large gamme de sites web grâce à un constructeur glisser-déposer convivial, permettant aux utilisateurs de concevoir et de personnaliser facilement leurs sites web sans avoir besoin de coder.
Pour acheter le thème Avada et explorer ses nombreuses fonctionnalités, vous pouvez visiter la marketplace officielle ThemeForest : Lien d'achat du thème Avada.
Vous pouvez suivre cette vidéo pour configurer le thème Avada.
2. Installer GeoDirectory
Enfin, vous devez installer GeoDirectory.
Accédez à Extensions >> Ajouter, recherchez GeoDirectory. Veuillez l'installer et l'activer. Nous avons terminé l'installation des plugins.
3. Assistant d'installation de GeoDirectory
Pour le plugin GeoDirectory, vous devez compléter l'assistant de configuration afin de paramétrer la clé API Google Maps et d'importer quelques fiches de démonstration.
Choisir le système de cartographie (Google Maps ou OpenStreetMap)
Vous pouvez choisir entre deux systèmes de cartographie à la première étape de l'assistant : Google Maps et OpenStreetMaps (qui ne nécessite pas de clé API).
Dans ce tutoriel, nous sélectionnons OpenStreetMaps.
Si vous souhaitez sélectionner Google Maps, suivez les étapes supplémentaires ci-dessous.
Cliquez sur le bouton Générer une clé et suivez les étapes de ce doc pour générer une clé API valide.
Les étapes essentielles sont :
- 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 Avada site d'annuaire
Maintenant que nous avons installé le thème et les plugins et effectué la configuration préliminaire de GeoDirectory, nous pouvons commencer à concevoir notre site d'annuaire avec le Avada la suite d'outils.
1. Concevoir le logo du site web
Commençons par le commencement : nous aurons besoin d'un logo pour notre site web.
Vous n'avez pas besoin de faire appel à un designer pour esquisser la première version de votre logo.
L'une des plus grandes erreurs que vous puissiez commettre en lançant un nouvel annuaire est d'investir trop de temps et d'argent avant de tester l'adéquation produit-marché.
Vous pouvez concevoir un logo en cinq minutes avec une application comme Canva, qui est abordable et étonnamment efficace.
Pour un MVP (produit minimum viable), un logo conçu avec Canva sera largement suffisant.
Il existe plusieurs modèles de logo parmi lesquels choisir, et peu importe si votre logo initial n'est pas aussi parfait et original que vous le souhaiteriez.
Si votre projet prend de l'élan, vous pourrez toujours investir pour l'améliorer ou le modifier radicalement plus tard.
Un logo ordinaire n'est jamais la principale cause de l'échec d'un projet.
2. Avada Design de la page d'accueil de l'annuaire
Vous pouvez créer une nouvelle page ou en utiliser une que WordPress crée par défaut, comme la Page d'exemple.
Allez dans Pages, modifiez la Page exemple et renommez-la Accueil, ou créez une nouvelle page à cet effet.
Ensuite, allez dans Appearance > Personnaliser > Réglages de la page d'accueil et sélectionnez votre page d'accueil.
Le menu de navigation
Après avoir créé et ajouté le logo, rendez-vous dans Appearance > Menus et créez votre menu.
Ajoutez les liens nécessaires (de la colonne de gauche vers la colonne de droite) et enregistrez.
Dans le Menu Settings > Afficher la localisation section, vous pouvez cocher « nbsp;Principal Navigation».
Si vous le souhaitez, vous pouvez faire apparaître le même menu dans le pied de page ou en créer un autre à cet endroit.
Dans cet exemple, nous n'aurons que le menu de navigation de l'en-tête.
Nous avons ajouté sept liens de navigation principaux et quelques liens de sous-navigation :
- 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.
Créer une mise en page d'en-tête
Créons maintenant une mise en page d'en-tête de site à l'aide du constructeur Avada.
Nous allons donc aller dans Avada > Layout et sélectionner l'en-tête depuis Mise en page globale.
Cliquez sur Create New Layout bouton.
Maintenant, cliquons sur le bouton Live Builder.
Cela ouvrira la Avada Builder Library devant nous.
Vous verrez de nombreux modèles prédéfinis pour différentes sections.
Dans cet exemple, nous allons sélectionner une mise en page d'en-tête prédéfinie depuis la section studio .
Nous allons maintenant remplacer notre logo en cliquant sur la section logo de l'en-tête prédéfini.
Nous allons définir la Image Max Width à 150px depuis les paramètres du logo.
Depuis le menu de l'en-tête, nous allons sélectionner ou modifier le menu que nous souhaitons afficher dans l'en-tête du site.
nous allons apporter quelques modifications de style et d'alignement comme indiqué dans la capture d'écran ci-dessous.
L'en-tête de notre site est maintenant prêt. Concentrons-nous maintenant sur le contenu de la page d'accueil.
Le contenu
Nous allons modifier la Accueil page dans Live Builder.
Ajoutons-y un conteneur vide avec les paramètres suivants
Largeur du contenu intérieur : 100%
Hauteur : Hauteur minimale
Hauteur minimale : 500
Alignement des lignes : Étirer
Alignement des colonnes : Center
Justification des colonnes : Center
Depuis le paramètre Arrière-plan, nous allons ajouter une image.
Position de l'arrière-plan : Centre Centre
Répétition de l'arrière-plan : Pas de répétition
Taille de l'arrière-plan : Center
Motif : Point
Couleur du motif : rgba(0,0,0,0.41)
Ajoutons maintenant une balise de titre En-tête au-dessus de l'image avec
Texte : Trouvez le meilleur restaurant à Philadelphie
Typographie :
Famille de polices : Inter
Variante : Bolt 700
Taille de police : 42px
Couleur de la police : #ffffff
Maintenant, ajoutons le GD > Search bloc et conservez les paramètres par défaut.
Ajoutons maintenant un conteneur vide avec le GD > Category bloc à l'intérieur.
Type de design : Icône à gauche
Éléments par ligne : 4
Ajoutons maintenant un autre conteneur vide avec le GD > Listing bloc à l'intérieur avec les paramètres suivants.
Tri : récent
Grille : 4
Articles à afficher : 8
Maintenant, ajoutez un conteneur vide avec les paramètres suivants.
Largeur du contenu intérieur : Largeur 100%
Hauteur : Auto
Espacement du contenu : Gauche, Droite 0px
Nous allons maintenant ajouter un GD > Map à l'intérieur.
Enfin, il est temps d'ajouter une section CTA. Nous allons ajouter un conteneur vide.
nous allons y ajouter une balise Heading.
Avec les paramètres suivants
Alignement : Gauche
Balise HTML Heading : H3
Ajoutons maintenant un bloc bouton avec un lien vers la page Ajouter une annonce page.
Créer la mise en page du pied de page
Enfin, nous allons créer une mise en page de pied de page globale, de la même manière que nous l'avons fait pour la section d'en-tête.
Dans cet exemple, nous utiliserons une mise en page de pied de page prédéfinie.
Vous pouvez apporter des modifications à cette mise en page de pied de page. Pour l'instant, je la laisse par défaut.
Après cette dernière étape, notre page d'accueil est prête.
3. Avada Conception des pages de listings et de recherche d'un site d'annuaires
Vous devez maintenant concevoir deux pages essentielles pour tout annuaire.
La page des listings (archive générale, catégories, tags) et la page des résultats de recherche.
GeoDirectory les crée par défaut avec une mise en page générale. Dans ce tutoriel, nous allons créer et personnaliser la mise en page de ces pages à l'aide d'Avada Builder.
Les pages de listings et de recherche étant quasiment identiques, nous la créons une seule fois et copions simplement la mise en page sur l'autre page.
Nous avons décidé que la mise en page de la page des annonces serait les annonces à gauche, et à droite, une carte fixe affichant l'emplacement précis des annonces.
C'est très simple.
Page de listings
Allez dans Geodirectory > Paramètres > Général > Pages > Cliquez sur Modifier le modèle de page GD Archive
Supprimez tout le contenu de ce GD Archive modèle de page.
Modifiez maintenant la page à l'aide du Live builder.
Nous allons ajouter un conteneur vide avec un rembourrage de contenu de 0 en haut et en bas.
Ajoutons maintenant une colonne à l'intérieur et nous ferons glisser GD > Page title dedans.
Définissons
couleur d'arrière-plan : #f6f6f9
Rembourrage : 50px 0px 50px 0px
Couleur du lien du conteneur : #efefef
Ajoutons maintenant un conteneur à deux colonnes.
Ensuite, dans le conteneur de gauche, nous allons ajouter des blocs liés à la page d'archive GD comme GD > Loop Action, GD > Loop, GD > Loop Pagination, et GD > Search en haut afin que l'utilisateur puisse effectuer une recherche depuis la page Archive.
Dans la colonne de droite, nous allons faire glisser le GD > Map bloc.
Définissons la carte
Hauteur : 150vh
Rembourrage : 30px 0px 30px 0px
et laissons les paramètres par défaut.
nous allons ajouter le gd-loop-column classe à la colonne de gauche.
nous allons ajouter le snippet CSS suivant dans le personnalisateur de thème.
.gd-loop-column .fusion-column-wrapper{ overflow-y: scroll; padding-right: 17px; max-height: 960px; }
Notre page Archive est prête.
Pour créer la mise en page de la page de recherche.
Nous allons assigner l'en-tête et le pied de page globaux à cette mise en page.
nous allons dans Avada > Layouts
nous allons ajouter ceci et assigner cette mise en page à la page de recherche.
Sur la page de recherche, créez maintenant un modèle de contenu de recherche
et copiez toutes les sections depuis la GD > Archive page vers cette page de recherche.
Après cela, notre modèle de page de recherche est prêt.
4. Conception de la page de listing unique d'un site d'annuaires avec Avada
Il est maintenant temps de créer le modèle de page de détail. Nous allons modifier le GD Detail modèle de page dans Avada Builder.
Nous allons ajouter un conteneur vide avec
Largeur du contenu intérieur : Largeur 100%
Nous allons y ajouter le bloc GD > Images de publication avec les paramètres suivants.
Limite d'images : 10
Limite d'affichage : 3
Type de sortie : Slider
Démarrage automatique : Activer
Dans le GD Details page assurez-vous de désactiver Afficher la première image mise en avant.
Nous allons à nouveau ajouter un conteneur avec une mise en page en deux colonnes comme ci-dessous.
Maintenant, ajoutons individuellement tous les blocs GD Detail page requis dans la colonne de gauche.
Ce qui inclut GD > post Title, GD > Single Taxonomies, GD > Single Tabs, et GD > Single Next Prev.
Nous allons ajouter le GD > Author Action et GD > Output Location bloc dans la colonne de droite.
Une fois cela fait, notre page de détail de l'annonce est complète.
Ajout de fonctionnalités premium à votre Avada site d'annuaire
Si vous le souhaitez, vous pouvez maintenant ajouter des fonctionnalités premium à votre annuaire, telles que :
- 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.
Nouveaux venus, commencez votre aventure ici : Lancer un site d'annuaire : le guide du débutant.
Ce tutoriel générique peut être adapté à n'importe quel thème ou constructeur de pages.
Les possibilités sont infinies.
Libérez la puissance de GeoDirectory !
Lancez votre activité en ligne dès maintenant
Rejoignez-nous dès aujourd'hui !Newsletter - Restez informé !
Recevez les dernières actualités, conseils et contenus exclusifs directement dans votre boîte de réception.