GeoDirectory

Créez une page d'annonces style Airbnb avec GeoDirectory et Avada

Paolo

il y a environ 6 mois, nous avons publié la V2 de GeoDirectory et nous avions promis qu'il serait bien plus facile de personnaliser votre design avec elle.

Compatible avec la plupart des constructeurs de pages et des thèmes, vous pouviez déjà réaliser de superbes designs avec GeoDirectory V2, mais maintenant que nous peaufinons la chose, vous pourrez faire encore bien plus avec.

Nous avons décidé de commencer avec Avada et le Fusion Builder.

Avec la version actuelle de GeoDirectory, vous deviez :

On pouvait presque tout réaliser avec ça et du CSS par la suite, mais ce n'était ni intuitif ni aussi simple que de personnaliser un design avec les éléments natifs du Fusion Builder.

Les éléments GeoDirectory seront intégrés dans le Fusion Builder

À partir de la prochaine version de GeoDirectory qui sera 2.0.0.68 (disponible en bêta sur GitHub dès maintenant), tous les Widgets / Shortcodes / Blocs GeoDirectory seront également disponibles en tant qu'éléments du Fusion Builder.

Cela facilite grandement la conception, et nous pouvons maintenant plonger dans le tutoriel sur la façon de créer une page ressemblant à la page de listings d'Airbnb page ou page de résultats de recherche.

En supposant que vous avez installé Avada et GeoDirectory, voici comment je l'ai réalisé.

Avertissement: Il n'était pas possible de concevoir une page ressemblant à Airbnb UNIQUEMENT avec GeoDirectory et Fusion Builder. J'ai dû écrire quelques lignes de CSS. 11 nouvelles règles, 5 pour le modèle de page d'archive (la page des annonces) et 6 pour le modèle de page d'élément d'archive (chaque annonce à l'intérieur de la page des annonces).

Cela dit, je ne suis pas vraiment un expert Avada, et il y a tellement d'options que ce que j'ai fait pourrait probablement être réalisé avec moins de CSS. Peut-être même aucun.

Je laisse ça aux maîtres de Fusion Builder le soin de le dire. Si vous connaissez des solutions pour éviter mon CSS personnalisé, je vous serais reconnaissant de me le faire savoir via un commentaire ci-dessous, et je mettrai le tutoriel à jour.

1 Créer les champs personnalisés nécessaires

J'ai commencé par ajouter les champs personnalisés qu'AirBnB utilise via Place > Settings. J'ai uniquement ajouté ceux dont j'avais exactement besoin pour reproduire le design et gagner du temps, mais tout peut être fait.

Nous avions besoin de quatre sélecteurs pour :

et un sélecteur multiple pour les équipements tels que :

2 Modification du modèle de page d'archive

Après avoir publié quelques annonces fictives, j'avais besoin d'un nouveau modèle de page d'archive. J'ai appelé la page Avada Listings 1 et je l'ai assignée via les paramètres de GeoDirectory comme nouveau modèle de page d'archive.

Ensuite, j'avais besoin de préparer la page et de lui faire occuper tout l'écran. Je sais qu'il existe une option pour que les pages Avada utilisent toute la largeur de l'écran, mais cela affecte l'ensemble du site, j'ai donc utilisé du CSS pour y parvenir.

.geodir-archive #main .fusion-row {max-width:100%}
html:not(.avada-has-site-width-percent) .geodir-archive #main {padding:0} 
.geodir-archive #main  {padding:0}
.geodir-archive .post-content .fusion_builder_column_1_2.fusion-column-first > .fusion-column-wrapper {padding-left: 8% !important;}
.geodir-archive .avada-page-titlebar-wrapper {display:none}

Ce que fait ce code est simple. Il fait en sorte que la zone située sous l'en-tête et au-dessus du pied de page occupe toute la largeur de l'écran, supprime le rembourrage général et ajoute un rembourrage uniquement à gauche de la liste des annonces. Il masque également la barre de titre Avada qui, sur une page similaire, n'est pas nécessaire. La page ressemblera à ceci :

Nous pouvons maintenant modifier la page avec Fusion Builder. Vous pouvez utiliser aussi bien le Front End que le Back End, mais l'aperçu du Front End ne sera pas précis à 100 %, c'est pourquoi j'ai utilisé le constructeur Back End.

Nous avons besoin de deux colonnes : dans la colonne de droite, nous ajouterons l'élément GD > Map, et dans la colonne de gauche, nous ajouterons :

Les seules options à ajuster concernent la carte, pour laquelle nous devons définir la hauteur à 85vh. Pour obtenir l'effet de carte fixe au défilement, j'ai utilisé un plugin appelé : Sticky Menu (or Anything!) on Scroll par Mark Senff.

Nous aurions pu écrire notre propre JS personnalisé, mais ce plugin est léger et si vous n'avez qu'un seul élément à fixer, il fonctionne à merveille.

Si vous le configurez correctement, il pousse également la carte lorsque le pied de page apparaît.

Comme options pour ce plugin, j'ai défini les éléments suivants :

L'option Push-up Element se trouve dans les Paramètres avancés.

C'est tout pour l'instant.

La page ressemblera maintenant à ceci :

3 Modification du modèle de page d'élément d'archive

Je dois maintenant personnaliser le design de chaque annonce, ce qui peut être fait en modifiant le modèle de page d'élément d'archive.

J'ai créé un nouveau modèle de page d'élément d'archive, que j'ai appelé : GD Archive Item-avada

Je l'ai ouvert avec l'éditeur back-end Fusion Builder, et j'ai ajouté les éléments GD suivants :

4 Ajout de quelques CSS personnalisés supplémentaires

Dernière chose, j'avais besoin de quelques CSS pour rendre le tout beau et bien organisé, comme sur la page Airbnb :

.geodir-post-title, .geodir-post-rating {clear: left;}
.geodir-field-amenities li::after,.geodir-field-how_many_guests::after,.geodir-field-how_many_rooms::after,.geodir-field-how_many_beds::after {content:" - ";}
.geodir-field-amenities ul {margin:0;padding:0}
.geodir-field-amenities li:last-child::after {content:"";}
.geodir-field-amenities li {list-style: none;float: left;}
.gd-badge-meta {display: block;margin-left: 0;clear: both;}

Le CSS ci-dessus ne fonctionnera que si vous avez exactement les mêmes champs personnalisés et effectue les actions suivantes :

C'est tout. Le résultat est ce que vous voyez ici :

Je sais que ce n'est pas identique à 100 % à Airbnb, mais bon, cela m'a pris 2 heures et je savais à peine utiliser Avada.

Je voulais simplement vous montrer le niveau de personnalisation possible avec GeoDirectory et Fusion Builder.

Pour nous, c'est assez impressionnant, mais si ce n'est pas le cas pour vous, pourriez-vous nous dire ce qui le rendrait impressionnant à votre avis ?

Si vous laissez un commentaire, nous serions ravis d'avoir votre avis.

Je suis sûr que quelqu'un posera la question, alors je vais y répondre directement ici.

Comment ai-je créé les marqueurs avec les prix ? C'est simple. J'ai utilisé des catégories comme :

-Appartement (Parent)
–100 – 200 (sous)
–200 – 300 (sous)

J'ai conçu les marqueurs avec chaque fourchette de prix avec Photopea.com, et j'ai téléchargé le marqueur pour chaque sous-catégorie.

Lors de l'ajout d'annonces, j'ai assigné la sous-catégorie comme catégorie par défaut afin que le marqueur avec les prix soit utilisé sur toutes les cartes.

J'espère que ce tutoriel vous a plu.

N'hésitez pas à me poser vos questions à ce sujet dans les commentaires ci-dessous !