GeoDirectory

Crea una pagina di annunci simile ad Airbnb con GeoDirectory e Avada

Paolo

circa 6 mesi fa abbiamo rilasciato la V2 di GeoDirectory e avevamo promesso che sarebbe stato molto più semplice personalizzare il design.

Essendo compatibile con la maggior parte dei page builder e dei temi, era già possibile realizzare template fantastici con GeoDirectory V2, ma ora che stiamo affinandolo, potrete fare cose ancora più straordinarie.

Abbiamo deciso di iniziare con Avada e il Fusion Builder.

Con la versione attuale di GeoDirectory, era necessario:

Con questo e del CSS era possibile ottenere quasi qualsiasi risultato, ma non era intuitivo né semplice come personalizzare un design con gli elementi predefiniti del Fusion Builder.

Gli Elementi di GeoDirectory saranno disponibili nel Fusion Builder

Dalla prossima versione di GeoDirectory, che sarà 2.0.0.68 (disponibile in beta su GitHub ora), tutti i Widget / Shortcode / Blocchi di GeoDirectory saranno disponibili anche come Elementi del Fusion Builder.

Questo rende la progettazione molto più semplice e possiamo ora immergerci nel tutorial su come creare una pagina dall'aspetto simile a quella delle inserzioni di Airbnb o alla pagina dei risultati di ricerca.

Partendo dal presupposto che tu abbia installato Avada e GeoDirectory, ecco come l'ho realizzata.

Avvertenza: Non è stato possibile progettare una pagina dall'aspetto simile ad Airbnb SOLO con GeoDirectory e Fusion Builder. Ho dovuto scrivere alcune righe di CSS. 11 nuove regole, 5 per il template della pagina archivio (la pagina delle inserzioni) e 6 per il template della pagina del singolo elemento dell'archivio (ogni inserzione all'interno della pagina delle inserzioni).

Detto questo, non sono proprio un esperto di Avada, e ci sono così tante opzioni che probabilmente quello che ho fatto avrebbe potuto essere realizzato con meno CSS. Forse anche senza.

Lo lascio dire ai Maestri del Fusion Builder. Se conosci soluzioni per evitare il mio CSS personalizzato, ti sarei grato se me lo facessi sapere tramite un commento qui sotto, e aggiornerò il tutorial.

1 Creare i campi personalizzati necessari

Ho iniziato aggiungendo i campi personalizzati che AirBnB utilizza tramite Place > Settings. Ho aggiunto solo quelli strettamente necessari per replicare il design e risparmiare tempo, ma è possibile fare tutto.

Avevamo bisogno di quattro menu a tendina per:

e una selezione multipla per i servizi come:

2 Modifica del Template della Pagina Archivio

Dopo aver pubblicato alcune inserzioni di prova, ho avuto bisogno di un nuovo template per la Pagina Archivio. Ho chiamato la pagina Avada Listings 1 e l'ho assegnata tramite le impostazioni di GeoDirectory come nuovo template della pagina Archivio.

Poi ho dovuto preparare la pagina e farla occupare l'intero schermo. So che esiste un'opzione per far usare ad Avada la larghezza intera dello schermo, ma questo influisce sull'intero sito, quindi ho usato il CSS per farlo.

.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}

Quello che fa il codice qui sopra è semplice. Fa sì che l'area sotto l'intestazione e sopra il footer utilizzi la larghezza intera dello schermo, rimuove il padding generale e aggiunge il padding solo a sinistra dell'elenco delle inserzioni. Nasconde inoltre la barra del titolo di Avada che, in una pagina simile, non è necessaria. La pagina avrà questo aspetto:

Ora possiamo modificare la pagina con il Fusion Builder. Puoi usare sia il Front End che il Back End, ma l'anteprima del Front End non sarà accurata al 100%, motivo per cui ho utilizzato il builder del back end.

Abbiamo bisogno di due colonne: nella colonna di destra aggiungeremo l'elemento GD > Map, mentre nella colonna di sinistra aggiungeremo:

Le uniche opzioni che dobbiamo modificare riguardano la Mappa, dove dobbiamo impostare l'altezza a 85vh. Per ottenere l'effetto mappa fissa durante lo scorrimento, ho utilizzato un plugin chiamato: Sticky Menu (or Anything!) on Scroll di Mark Senff.

Avremmo potuto scrivere il nostro JavaScript personalizzato, ma questo plugin è leggero e, se hai un solo elemento da fissare, funziona alla perfezione.

Se lo configuri correttamente, spinge anche la mappa quando appare il footer.

Come opzioni per questo plugin, ho impostato quanto segue:

L'opzione Push-up Element si trova nelle Impostazioni Avanzate.

Per ora è tutto.

La pagina ora apparirà così:

3 Modifica del Template della Pagina Archivio Elemento

Ora devo personalizzare il design di ogni inserzione, e questo può essere fatto modificando il template della Pagina Archivio Elemento.

Ho creato un nuovo template per la Pagina Archivio Elemento e l'ho chiamato: GD Archive Item-avada

L'ho aperto con l'editor back-end di Fusion Builder e ho aggiunto i seguenti Elementi GD:

4 Aggiunta di ulteriore CSS personalizzato

L'ultima cosa di cui avevo bisogno era del CSS per rendere tutto esteticamente gradevole e ordinato, come sulla pagina di 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;}

Il CSS qui sopra funzionerà solo se hai esattamente gli stessi campi personalizzati e si occupa di:

Tutto qui. Il risultato è quello che vedi:

So che non è identico al 100% ad Airbnb, ma hey, mi ci sono volute 2 ore e sapevo a malapena come usare Avada.

Volevo solo mostrarti il livello di personalizzazione possibile con GeoDirectory e Fusion Builder.

Per noi è davvero impressionante, ma se non lo è per te, potresti dirci cosa lo renderebbe tale secondo la tua opinione?

Se lasci un commento, ci farebbe molto piacere ricevere il tuo feedback.

Sono sicuro che qualcuno lo chiederà, quindi rispondo direttamente qui.

Come ho creato i marker con i prezzi? È semplice. Ho usato categorie come:

-Appartamento (Genitore)
–100 – 200 (sub)
–200 – 300 (sub)

Ho progettato i marker con ogni fascia di prezzo con Photopea.com, e ho caricato il marker per ogni sotto-categoria.

Quando ho aggiunto gli annunci, ho assegnato la sotto-categoria come categoria predefinita, in modo che il marker con i prezzi venisse utilizzato in tutte le mappe.

Spero che questo tutorial ti sia piaciuto.

Fammelo sapere se hai domande a riguardo nei commenti qui sotto!