Créer un site d'annuaires avec le thème Kadence
Quelle est la meilleure façon de créer un site d'annuaire avec Kadence ?
La création d'un site d'annuaire Kadence implique l'utilisation du thème Kadence, de Kadence Blocks et du meilleur plugin d'annuaire Kadence.
Le thème Kadence est un thème WordPress polyvalent et hautement personnalisable qui offre une base solide pour votre site d'annuaire.
Kadence Blocks, quant à lui, est une bibliothèque de blocs Gutenberg qui vous permet de créer des mises en page personnalisées et d'ajouter diverses fonctionnalités à votre site web.
Enfin, le plugin GeoDirectory est de loin le meilleur plugin d'annuaire pour le thème Kadence — un outil puissant qui vous permet d'ajouter des fonctionnalités d'annuaire à votre site web, telles que des listes d'entreprises, des avis d'utilisateurs et des capacités de recherche avancée.
Ensemble, ces outils offrent une solution complète pour créer un site web d'annuaire robuste et riche en fonctionnalités.
Site web d'annuaire Kadence en utilisant uniquement un thème gratuit et des plugins gratuits
Dans ce tutoriel, nous vous guiderons tout au long du processus de création d'un site web d'annuaire complet à l'aide de ressources WordPress gratuites, notamment le thème Kadence gratuit, le plugin Kadence Blocks et le plugin GeoDirectory gratuit.
Le site web d'annuaire comprendra :
- Des annonces illimitées avec des champs personnalisés illimités.
- Une fonctionnalité de recherche de proximité.
- Des avis d'utilisateurs.
- Un formulaire de soumission en front-end, permettant aux utilisateurs de soumettre, modifier et/ou supprimer leurs annonces.
Nous supposons que vous disposez déjà d'une installation WordPress chez un hébergeur. Pour ce tutoriel, nous allons créer un annuaire d'entreprises pour la ville de Philadelphie.
Voici ce que nous allons aborder dans ce tutoriel :
- Installer et configurer le thème et les plugins
- Assistant d'installation GeoDirectory
- Concevoir le site web d'annuaire Kadence
- La conception de la page des annonces et de la recherche
- La conception de la page d'annonce individuelle
- Ajouter des fonctionnalités premium à votre site de répertoire Kadence
- Modèles de site de répertoire Kadence Blocks
À la fin de ce tutoriel, vous aurez un site de répertoire entièrement fonctionnel et prêt à être mis en ligne. C'est parti !
Installer et configurer le thème et les plugins Kadence
1. Installer le thème Kadence
Pour commencer, nous allons installer un thème. Dans le cadre de ce tutoriel, nous utiliserons le thème Kadence.
Accédez à Appearance >> Thèmes
Sélectionnez Ajouter, Installer, et Activer le thème Hello.
2. Installer le plugin Kadence Blocks
Vous devez maintenant installer le plugin Kadence Blocksì.
Accédez à Extensions >> Ajouter.
Recherchez Kadence. Installez-le et activez-le.
3. Installer GeoDirectory
Enfin et surtout, vous devez installer GeoDirectory.
Accédez à Extensions >> Ajouter, recherchez GeoDirectory. Veuillez l'installer et l'activer, et nous avons terminé l'installation des plugins pour l'instant.
- Créer ou sélectionner un projet existant.
- Activer les clés.
- 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)
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 Google Maps.
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 :
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 le répertoire est créé. Nous laisserons la ville par défaut inchangée.
GeoDirectory utilise 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 notre plugin 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 site web d'annuaire Kadence
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 la suite d'outils Kadence.
1. Conception de la page d'accueil de l'annuaire Kadence
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.
Cliquez maintenant sur l'icône des paramètres de page en haut à droite de l'écran.
Appliquez les modifications suivantes :
- Titre de la page : Désactiver
- Mise en page : Pleine largeur
- Style de contenu : Non encadré
Laissez le reste tel quel. Ensuite, accédez à Appearance > Personnaliser > Réglages de la page d'accueil et sélectionnez la page ci-dessus comme page d'accueil.
Nous sélectionnerons la page des articles plus tard.
Avant de créer le contenu de la page d'accueil, nous devons travailler sur l'en-tête.
Nous reviendrons ensuite pour concevoir le contenu de la 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'option « Principale ».
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é huit liens :
- Accueil
- À propos
- Blog
- Lieux
- 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 et de profil n'apparaîtront que pour les utilisateurs connectés.
Le contenu
Vous pouvez maintenant commencer à concevoir la page d'accueil. Tout d'abord, vous devrez ajouter une image hero sous l'en-tête.
Pour ce faire, allez dans Pages > Accueil et cliquez sur Modifier.
Si vous avez utilisé l'exemple de page, supprimez le texte. Si vous avez créé une nouvelle page, ajoutez un nouveau bloc Row Layout.
Tapez /Row là où il est indiqué Tapez / pour choisir un bloc et sélectionnez un Kadence Row Layout Block. Ensuite, sélectionnez la rangée simple (1ère option)
Dans l'option Largeur maximale du contenu, ajoutez 800.
Ensuite, cliquez sur Style dans les onglets supérieurs du bloc. Cliquez sur Sélectionner une image dans l'option Image d'arrière-plan
Pour la section Hero, nous utiliserons cette image gratuite de Philadelphie provenant de Pexels.com (Merci, @Kelly).
Téléchargez votre image et sélectionnez l'option Fixe pour l'attachement de l'image d'arrière-plan, puis enregistrez.
Vous pouvez désormais voir seulement une bande de notre image, mais les étapes suivantes permettront de l'afficher comme souhaité.
L'image nécessite une superposition, sinon tout texte placé par-dessus ne présentera pas un contraste suffisant et sera difficile à lire.
Sélectionnez les paramètres de superposition d'arrière-plan (Background overlay settings), réglez Overlay Opacity sur 45 et Overlay Color sur 000000 (Noir).
Cliquez maintenant sur l'onglet Advanced et ajoutons du rembourrage. Très précisément, 4 em de rembourrage en haut et en bas. Pour ce faire, cliquez sur l'icône Set Custom Size, saisissez 4 dans les champs supérieur et inférieur, puis sélectionnez EM comme unité.
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 bloc Text (Adv).
dans le bloc Text, ajoutez quelque chose comme : « My Philadelphia Directory ».
Dans la section General du bloc, sélectionnez H1 comme balise HTML. Alignement du texte : Centré.
Cliquez sur l'onglet Style et sélectionnez la couleur FFFFFF (blanc).
Ensuite, dans la section FONT SIZE, cliquez sur l'icône de taille personnalisée et définissez 40 comme taille de police.
Enfin, dans Advanced Typography Settings > FONT WEIGHT, sélectionnez Bold 700.
À ce stade, nous pouvons ajouter le formulaire de recherche à la section hero de notre site de répertoire Kadence.
Cliquez sur le bouton + dans le coin inférieur droit de la section Titre pour ajouter une nouvelle section.
Recherchez et sélectionnez un autre bloc Section, cliquez sur le bouton plus au centre de la nouvelle section, puis ajoutez un bloc GD > Search.
À ce stade, nous avons terminé la section Hero de la page d'accueil et voici à quoi elle ressemble.
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 Hero, ajoutez un Row Layout bloc en cliquant sur l'icône plus et ajoutez un Section bloc à l'intérieur.
Nous allons maintenant ajouter un bloc de titre et définir la Typographie sur
Taille : Grand
Casse : Ab
Texte : Annonces récentes d'entreprises
Pour afficher les dernières annonces, ajoutons le GD > Listings bloc en dessous avec les paramètres suivants.
Trier par : Dernières
Mise en page : Vue en grille ( 4 colonnes )
Ajoutons maintenant un Row Layout bloc en cliquant sur l'icône plus et en ajoutant un Section bloc à l'intérieur.
Dans le Typographie paramètre du bloc de titre
Taille : Grand
Casse : Ab
Texte : Parcourir les plus populaires dans votre ville
Ajoutez maintenant le GD>Category bloc à l'intérieur pour afficher toutes les catégories.
Dans le style, ajoutez les paramètres suivants
Éléments par ligne : 4
Type de conception : Image Background
Nous allons maintenant ajouter une section supplémentaire pour Comment ça fonctionne. ajoutons un Row Layout bloc en cliquant sur l'icône plus et en sélectionnant la mise en page à 4 colonnes.
Ajoutez maintenant le Info box bloc dans tous les conteneurs.
Dans le contenu largeur maximale : Hériter la largeur maximale du thème.
Nous allons maintenant définir l'icône pour chaque conteneur. Cliquez sur n'importe quel Info Box et dans les paramètres du bloc Style > Paramètres médias
Type de média : Icône
Définissons maintenant la couleur des icônes
Couleur de l'icône : #FFFFFF
Arrière-plan de l'icône : #FF6616
Rembourrage du média: 20px
Rayon de bordure de l'icône : 15px
Ajoutons maintenant un autre Row Layout
nous y ajouterons un CTA.
Ajoutez un titre et dans le Typographie paramètre du bloc de titre
Taille : Grand
Casse : Ab
nous ajouterons le bloc bouton unique et dans les paramètres de style de ce bloc, définissez
Couleur : #FFFFF
Couleur d'arrière-plan : #FF6A00
Rayon de bordure : 10px
Nous allons maintenant configurer le pied de page.
Allez dans Apparence > Personnaliser > Pied de page
Nous allons ajouter quelques widgets de menu de pied de page et Kadence fournit un bloc Social. Vous pouvez l'ajouter en haut de la section Pied de page.
Lorsque vous cliquez sur les icônes de paramètres du widget social, une fenêtre de configuration s'ouvre dans laquelle vous pouvez définir les options sociales.
Félicitations, votre page d'accueil est maintenant prête.
Design des pages de listings et de recherche du site d'annuaires Kadence
Nous devons maintenant concevoir deux pages indispensables à 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.
J'ai décidé que la mise en page de la page de listings afficherait les annonces sur la gauche, et sur la droite, une carte fixe indiquant 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 une mise en page en rangée avec
Définissez un ratio de 60 – 40 en faisant glisser le point indiqué dans l'image ci-dessous.
Maintenant, dans la section de gauche, nous allons ajouter tous les blocs nécessaires pour la GD Archive page. Par exemple GD > Loop Action, GD > Loop, GD > Loop Pagination, et GD > Search
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.
Dans le conteneur de ligne parent du bloc de carte, nous allons ajouter une classe CSS kt-inside-inner-col
et nous allons ajouter le CSS suivant dans le personnalisateur de thème via Apparence > Personnaliser > CSS supplémentaire
body.archive .kt-inside-inner-col { position: sticky; top: 0; }
Enfin, nous allons rendre la page en Pleine Largeur en cliquant sur l'icône Kadence en haut à droite et en définissant la Mise en page sur Pleine Largeur.
et nous allons également définir le style suivant pour la mise en page principale de la ligne.
Largeur max : 100%
Gouttière de colonne : SW
Gouttière de ligne : Aucun
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.
Une autre option pour créer facilement ce modèle est d'utiliser un modèle de page en pleine largeur et le GD > Simple Archive bloc.
Conception de la page de listing unique du site annuaire Kadence
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 Row Layout avec : Largeur du contenu : 100%
Ajoutez une classe (single-header-image) à cette mise en page de ligne depuis Avancé > Classe CSS supplémentaire
Nous allons maintenant ajouter un Row Layout conteneur à deux colonnes.
Dans le conteneur de gauche, nous allons ajouter le bloc GD > Post Badge pour définir des badges et dans le conteneur de droite, nous allons ajouter le GD > Post Favorite bloc.
Dans la mise en page Row parente de ce conteneur, nous ajouterons une classe personnalisée (header-position-feature).
En dessous, nous ajouterons un slider d'images et pour cela, nous ferons glisser le bloc GD > Post Image bloc.
nous sélectionnerons les paramètres suivants
Type de sortie : Slider
Démarrage automatique : Activer
Animation : Slide
Nous allons maintenant ajouter un Row Layout Conteneur.
Dans le conteneur de gauche, nous ajouterons les blocs nécessaires pour la page de détail GD, notamment GD > Single Taxonomies, GD > Single Tabs, GD > Single Next Prev.
Avec les paramètres suivants
Largeur max : 1200px
Gouttière de colonne : SW
Gouttière de ligne : Aucun
Dans le conteneur de droite, nous utiliserons le GD > Output Location et GD > Author Actions bloc.
nous ajouterons quelques éléments de design supplémentaires à la mise en page de la page de détail GD avec le CSS ci-dessous.
Ajoutez le CSS suivant dans le Apparence > Personnaliser > CSS supplémentaire
.single-header-image { max-height: 400px !important; overflow: hidden; } .geodir-page-single .entry-header { display: none; } .geodir-page-single .content-area { margin: 0px; } .geodir-page-single .content-container { padding: 0px; max-width: 100%; } @media (min-width: 576px) { .bsui .row.row-cols-md-0 .card .embed-responsive { max-width: 100% !important; display: inline-block; } } .geodir-page-single .entry-content-wrap { padding: 0px !important; } .geodir-page-single .entry-content { margin-top: 0px; } .single-header-image { max-height: 400px !important; overflow: hidden; } .single-feature { padding: 10px !important; } .header-position-feature { position: absolute !important; width: 100%; } .kb-row-layout-id15_c06314-2b > .kt-row-column-wrap { z-index: 1; position: relative; padding:0px !important; }
Notre page de détail GD est maintenant prête.
Ajouter des fonctionnalités premium à votre site de répertoire Kadence
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 , 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.
- 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.
Naviguez facilement dans le processus de création grâce à ce guide : Un guide étape par étape pour créer un site d'annuaire.
Les possibilités sont illimitées.
Créer un site d'annuaire avec Kadence Blocks
Le thème Kadence propose de nombreux blocs étendus. Vous pouvez trouver ces blocs dans la liste Kadence Blocks et vous pouvez également les retrouver dans les listes de blocs Gutenberg pour les utiliser.
À l'intérieur de chaque page, vous disposez d'un bouton Bibliothèque de designs en haut. Vous pouvez cliquer dessus et utiliser toutes les mises en page de blocs prédéfinies à partir de là.
Modèles de site de répertoire Kadence Blocks
GeoDirectory propose de nombreuses démos prédéfinies disponibles avec le thème Kadence. Vous pouvez retrouver toutes ces magnifiques démos ici.
Vous pouvez importer ces modèles dans votre site web. Vous avez besoin du Ayecode connecte plugin, Téléchargez et activez ce plugin s'il n'est pas déjà installé.
Après avoir activé ce plugin, vous devez connecter votre abonnement.
Vous pouvez importer la démo en cliquant sur le bouton d'aperçu situé à côté de la démo Kadence.
Les exemples sont les Real Estate Directory Theme, The Restaurant Directory Theme, le Job Board Theme et le Yoga Salon Directory Theme designs pour le thème Kadence.
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.