Comment créer un site de répertoire avec le thème Blocksy et le plugin Stackable Gutenberg Blocks

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

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

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

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

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

Voyons en détail comment y parvenir.

Dans ce tutoriel, nous allons :

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

Installation du thème et des plugins.

1. Installez le Blocksy Thème

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

Accédez à Appearance >> Thèmes

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

2. Installer le Stackable – Page Builder Gutenberg Blocks plugin

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

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

Accédez à Extensions >> Ajouter.

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

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

3. Installer GeoDirectory

Enfin, vous devez installer GeoDirectory.

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

4. Assistant d'installation de GeoDirectory

Pour GeoDirectory, vous devrez compléter l'assistant de configuration pour configurer la clé API Google Maps et importer quelques annonces fictives.

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

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

Dans ce tutoriel, nous sélectionnons OpenStreetMaps.

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

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

Les étapes essentielles sont :

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

Concernant le point quatre : c'est une obligation. Cependant, vous n'êtes facturé que si vous dépassez le seuil, qui est de 200 $/mois.

Ce crédit gratuit est bien plus que suffisant pour 99 % des annuaires.

Définir la ville par défaut

Ensuite, vous définirez l'emplacement par défaut. Il s'agit de la ville pour laquelle l'annuaire est créé.

Nous définirons Philadelphia comme ville par défaut.

Vous pouvez utiliser n'importe quel emplacement selon vos besoins.

Si vous devez ajouter des annonces dans plusieurs villes, vous aurez besoin du module complémentaire Location Manager.

Ajouter des fonctionnalités supplémentaires

Dans cette étape, nous allons installer UsersWP, un plugin d'inscription des utilisateurs qui permet aux utilisateurs de s'inscrire et de se connecter à votre site web.

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

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

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

Ajouter des données factices

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

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

Concevoir le Blocksy site d'annuaire

Maintenant que nous avons installé les plugins et effectué la configuration préliminaire de GeoDirectory, nous pouvons commencer à concevoir notre site web d'annuaires avec Blocksy thème et plugin Stackable – Page Builder Gutenberg Blocks.

1. Concevoir le logo du site web

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

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

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

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

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

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

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

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

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

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

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

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

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

Le menu de navigation

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

Ajoutez les liens nécessaires (de la colonne de gauche vers la colonne de droite) et enregistrez. Dans les Menu Settings > section Emplacement d'affichage, vous pouvez cocher l'optionPrincipal».

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

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

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

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

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

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

Le contenu

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Assurez-vous d'utiliser les paramètres suivants

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

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

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

Page de listings

Vous devez maintenant concevoir deux pages essentielles pour tout annuaire.

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

GeoDirectory les crée par défaut avec une mise en page générale. Dans ce tutoriel, nous allons personnaliser un peu la mise en page de ces pages.

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

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

C'est très simple.

Allez dans Geodirectory > Paramètres > Général > Pages > Cliquez sur Modifier le modèle de page GD Archive

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

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

Ajoutons le GD > post title shortcode dedans.

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

Maintenant, dans le conteneur de gauche, nous allons faire glisser des widgets liés à la page d'archive GD comme GD > Loop Action, GD > Loop, GD > Loop Pagination, et GD > Search en haut afin que l'utilisateur puisse effectuer une recherche depuis la page Archive.

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

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

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

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

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

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

Page de recherche

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

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

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

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

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

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

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

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

Pour modifier et personnaliser la page GD Detail, vous pouvez aller dans Geodirectory > Réglages > Général > Pages > Cliquez sur Modifier le modèle de page GD Detail.

Dans ce modèle, vous trouverez déjà le contenu par défaut généré par Geodirectory.
nous allons supprimer tout ce contenu par défaut et ajouter un nouveau bloc de colonnes.

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

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

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

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

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

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

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

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

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

1. Annonces payantes: avec le module complémentaire GeoDirectory Listing Price Manager , vous pouvez définir des tarifs pour la soumission d'annonces. Pour chaque niveau de prix, vous pouvez activer/désactiver des fonctionnalités telles que : restreindre le nombre de photos pour les annonces gratuites tout en en autorisant davantage pour les annonces payantes, autoriser plus ou moins de tags et de catégories, activer ou désactiver des champs personnalisés spécifiques, soumettre des descriptions plus longues ou plus courtes.
2. Claim Listings: Il s'agit d'une fonctionnalité fondamentale pour un annuaire où l'administrateur crée la base de données et invite les propriétaires d'entreprises à prendre en charge leurs annonces gratuites. Le processus de réclamation d'une annonce peut inclure le passage obligatoire à une annonce payante pour en reprendre la propriété.
3. Publicité: la vente d'annonces publicitaires est une autre façon de monétiser un annuaire en ligne. Si vous avez beaucoup de trafic, vous pouvez utiliser des réseaux publicitaires. Sinon, vous pouvez vendre des annonces directement, en permettant aux entreprises d'ajouter des bannières dans des zones spécifiques de votre site web, ou en permettant à des annonces d'apparaître en tant que publicités, par exemple, en haut des résultats de recherche organiques.

Ce ne sont là que trois exemples. Cependant, un site d'annuaire offre de nombreuses façons de gagner de l'argent en ligne.

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

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