GeoDirectory

Erstellen Sie eine Airbnb-ähnliche Listings-Seite mit GeoDirectory und Avada

Paolo

Vor ungefähr 6 Monaten haben wir V2 von GeoDirectory veröffentlicht und versprochen, dass die Anpassung des Designs damit deutlich einfacher sein würde.

Da GeoDirectory V2 mit den meisten Page-Buildern und Themes kompatibel ist, konnten Sie bereits fantastische Template-Designs erstellen – aber jetzt, da wir es weiter verfeinern, werden Sie damit noch mehr großartige Dinge umsetzen können.

Wir haben uns entschieden, mit Avada und dem Fusion Builder zu beginnen.

Mit der aktuellen Version von GeoDirectory mussten Sie:

Damit und mit etwas CSS konnten Sie nahezu alles erreichen, aber es war weder intuitiv noch so einfach wie das Anpassen eines Designs mit den Standardelementen des Fusion Builders.

GeoDirectory-Elemente werden im Fusion Builder verfügbar sein

Ab der nächsten Version von GeoDirectory, die 2.0.0.68 (jetzt als Beta auf GitHub verfügbar ist), werden alle GeoDirectory-Widgets / Shortcodes / Blöcke auch als Elemente des Fusion Builders verfügbar sein.

Das macht das Design deutlich einfacher, und wir können jetzt in das Tutorial einsteigen, das zeigt, wie man eine Seite erstellt, die ähnlich aussieht wie Airbnbs Listings- Seite oder Suchergebnisseite.

Vorausgesetzt, Sie haben Avada und GeoDirectory installiert, habe ich es so gemacht.

Haftungsausschluss: Es war nicht möglich, eine Seite zu gestalten, die wie Airbnb aussieht, NUR mit GeoDirectory und Fusion Builder. Ich musste ein paar Zeilen CSS schreiben. 11 neue Regeln, 5 für das Archivseiten-Template (die Listenseite) und 6 für das Archiv-Element-Seiten-Template (jedes Inserat innerhalb der Listenseite).

Trotzdem bin ich kein wirklicher Avada-Experte, und es gibt so viele Optionen, dass das, was ich getan habe, wahrscheinlich auch ohne so viel CSS möglich gewesen wäre. Vielleicht sogar ganz ohne.

Das überlasse ich den Fusion Builder-Experten zu beurteilen. Falls du eine Lösung kennst, um mein benutzerdefiniertes CSS zu vermeiden, würde ich mich freuen, wenn du mir das über einen Kommentar unten mitteilst – dann aktualisiere ich das Tutorial.

1 Die benötigten benutzerdefinierten Felder erstellen

Ich habe damit begonnen, die benutzerdefinierten Felder hinzuzufügen, die AirBnB verwendet, über Place > Settings. Ich habe nur genau die Felder hinzugefügt, die ich benötigte, um das Design zu replizieren und Zeit zu sparen, aber alles ist umsetzbar.

Wir brauchten vier Auswahlfelder für:

und ein Mehrfachauswahlfeld für Ausstattungsmerkmale wie:

2 Das Archivseiten-Template bearbeiten

Nachdem ich ein paar Dummy-Inserate veröffentlicht hatte, brauchte ich ein neues Archivseiten-Template. Ich habe die Seite Avada Listings 1 genannt und sie über die GeoDirectory-Einstellungen als neues Archivseiten-Template zugewiesen.

Dann musste ich die Seite vorbereiten und dafür sorgen, dass sie den gesamten Bildschirm nutzt. Ich weiß, dass es eine Option gibt, Avada-Seiten in voller Bildschirmbreite darzustellen, aber das betrifft die gesamte Website – daher habe ich das per CSS gelöst.

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

Was das Obige bewirkt, ist einfach: Der Bereich unterhalb des Headers und oberhalb des Footers wird in voller Bildschirmbreite dargestellt, allgemeines Padding wird entfernt, und nur links von der Inseratsliste wird Padding hinzugefügt. Außerdem wird die Avada-Titelleiste ausgeblendet, die auf einer solchen Seite nicht notwendig ist. Die Seite wird dann so aussehen:

Jetzt können wir die Seite mit dem Fusion Builder bearbeiten. Du kannst sowohl das Front-End als auch das Back-End verwenden, aber die Vorschau im Front-End ist nicht zu 100 % genau – deshalb habe ich den Back-End-Builder verwendet.

Wir benötigen zwei Spalten: In der rechten Spalte fügen wir das GD > Map-Element ein, in der linken Spalte fügen wir Folgendes hinzu:

Die einzigen Optionen, die wir anpassen müssen, betreffen die Karte, bei der wir die Höhe auf 85vh setzen müssen. Um den Fixkarten-Effekt beim Scrollen zu erzielen, habe ich ein Plugin verwendet: Sticky Menu (or Anything!) on Scroll von Mark Senff.

Wir hätten unser eigenes benutzerdefiniertes JS schreiben können, aber dieses Plugin ist schlank, und wenn du nur ein Element fixieren möchtest, funktioniert es hervorragend.

Wenn du es richtig einrichtest, schiebt es die Karte auch nach oben, wenn der Footer erscheint.

Als Optionen für dieses Plugin habe ich Folgendes eingestellt:

Die Option „Push-up Element

Das war es fürs Erste.

Die Seite sieht jetzt so aus:

3 Bearbeitung der Archiv-Element-Seitenvorlage

Jetzt muss ich das Design jedes Eintrags anpassen, was durch Bearbeitung der Archiv-Element-Seitenvorlage möglich ist.

Ich habe eine neue Archiv-Element-Seitenvorlage erstellt und sie benannt: GD Archive Item-avada

Ich habe sie mit dem Fusion Builder-Backend-Editor geöffnet und die folgenden GD-Elemente hinzugefügt:

4 Adding some more custom CSS

Last thing I needed some CSS to make things look pretty and organized, like on the Airbnb page:

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

The above CSS will only work if you have the exact same custom fields and does the following:

Das war's. Das Ergebnis sehen Sie hier:

Ich weiß, es ist nicht 100% identisch mit Airbnb, aber hey, ich habe 2 Stunden gebraucht und wusste kaum, wie man Avada benutzt.

Ich wollte Ihnen nur zeigen, welches Maß an Individualisierung mit GeoDirectory und Fusion Builder möglich ist.

Für uns ist das ziemlich beeindruckend – aber falls nicht für Sie: Würden Sie uns bitte mitteilen, was es aus Ihrer Sicht beeindruckend machen würde?

Wenn Sie einen Kommentar hinterlassen, freuen wir uns auf Ihr Feedback.

Ich bin sicher, dass jemand fragen wird, daher beantworte ich es hier direkt.

Wie habe ich die Marker mit Preisen erstellt? Ganz einfach. Ich habe Kategorien wie diese verwendet:

-Apartment (Elternkategorie)
–100 – 200 (Unterkategorie)
–200 – 300 (Unterkategorie)

Ich habe die Marker für jede Preisspanne mit gestaltet Photopea.com, und das Marker-Symbol für jede Unterkategorie hochgeladen.

Beim Hinzufügen von Einträgen habe ich die Unterkategorie als Standardkategorie festgelegt, damit der Marker mit Preisen in allen Karten verwendet wird.

Ich hoffe, dieses Tutorial hat Ihnen gefallen.

Lassen Sie mich in den Kommentaren unten wissen, wenn Sie dazu Fragen haben!