So erstellen Sie eine von Airbnb inspirierte Bildergalerie in WordPress

Sie sind WordPress-Nutzer und haben festgestellt, wie gut die Bildergalerie der beliebten Vermietungsplattform Airbnb aussieht? Wenn Sie es auf Ihrer Website replizieren möchten, suchen Sie nicht weiter! Sie können es mit dem richtigen Werkzeug und ein paar einfachen Schritten in weniger als 10 Minuten schnell reproduzieren.

Egal, ob Sie ein erfahrener WordPress-Benutzer oder ein Neuling sind, dieses Tutorial vermittelt Ihnen alles, was Sie wissen müssen, um den Ball ins Rollen zu bringen!

In diesem Artikel lernen Sie Folgendes:

• So installieren Sie Modula
• So erstellen Sie eine Bildergalerie in Modula
• So passen Sie die Bildergalerie so an, dass sie wie eine Airbnb-Bildergalerie aussieht
• Und mehr …

Galeriedesign von Airbnb

Ein prägnantes und starkes Website-Design ist entscheidend für den Erfolg bei der Erstellung von Conversions und der Umwandlung von Kunden in Stammkunden. Und genau darauf zielt Airbnb mit seinen Listing-Bildergalerien ab.

Lassen Sie uns untersuchen, warum die Airbnb-Bildergalerie ein Hit ist:

• Hochwertige professionelle Aufnahmen der Location
• Einfaches, sauberes und benutzerfreundliches Layout der Hauptbilder
• Eine saubere Darstellung der kompletten Galerie
• Die Möglichkeit, über eine Lightbox einfach durch alle Fotos zu navigieren
• Anzeigen von Bildunterschriften oder Beschreibungen für jedes Bild
• Lightbox-Bildübergangseffekte
• Optionen zum Teilen von Galerien über verschiedene Kanäle
• Navigationspfeile

Glücklicherweise können Sie mit dem Modula-Plug-in den Stil der Airbnb-Galerie für Bilder auf WordPress ganz einfach nachbilden. Optimieren Sie ein paar einfache Einstellungen und das war's! Lesen Sie weiter und Sie werden sehen, wie einfach es ist, Ihre Bildergalerie in eine Airbnb-ähnliche Bildergalerie zu verwandeln.

Erstellen Sie eine atemberaubende Bildergalerie wie auf Airbnb

Sie benötigen eine WordPress-Website und einen Hosting-Provider, um Ihre Bildergalerie einzurichten, daher ist es wichtig, dies im Hinterkopf zu behalten, bevor Sie mit den Schritten fortfahren. Sie können schnell eine Website erstellen, wenn Sie noch keine haben, indem Sie den Anweisungen in der WordPress-Installationsanleitung folgen.

Sobald Ihre Website eingerichtet ist und läuft, müssen Sie ein Plugin auswählen, das Sie bei der Erstellung Ihrer Bildergalerie unterstützt. Obwohl es im WordPress-Repository andere Bildgalerie-Plugins gibt, empfehlen wir die Verwendung von Modula. Dieses Plugin hat viele Anpassungsoptionen, eine kostenlose Version mit grundlegenden Funktionen und ist benutzerfreundlich.

Das Erstellen einer Bildergalerie dieser Art erfordert einige Einstellungen, die Sie durch den Kauf des Starter -Plans für 39 $ freischalten können. Sobald Sie Ihren Kauf getätigt haben, gibt es vier Hauptschritte, um eine Galerie wie auf Airbnb zu erstellen und anzuzeigen.

️ Installieren Sie Modula

Der erste Schritt besteht darin, Modula zu installieren und zu aktivieren. Gehen Sie dazu zu WordPress Dashboard > Plugins > Neu hinzufügen .

Sie werden eine Suchleiste in der oberen rechten Ecke der neu geöffneten Seite bemerken. Sobald Sie „Modula“ eingeben, wird es schnell im ersten Suchergebnis angezeigt. Klicken Sie auf die Schaltfläche Jetzt installieren , um mit der Installation zu beginnen.

️ Erstellen Sie eine Bildergalerie

Sobald Sie Modula installiert und aktiviert haben, ist es an der Zeit, Ihre Airbnb-ähnliche Galerie zu erstellen. Gehen Sie zu Ihrem WordPress-Dashboard und wählen Sie dann Modula > Galleries .

Wählen Sie dort Neu hinzufügen aus, um mit der Erstellung Ihrer Galerie zu beginnen.

Sie werden zu einem neuen Fenster weitergeleitet, in dem Sie Ihrer Galerie einen Titel hinzufügen und Bilddateien hochladen auswählen können, wenn Sie neue Bilder hochladen möchten, oder Aus Bibliothek auswählen, wenn Sie bereits importierte Bilder verwenden.

Sobald Ihre Bilder zur Galerie hinzugefügt wurden, sollten Sie sie so sehen. Von hier aus können wir damit beginnen, die Galerie anzupassen und sie einer Airbnb-Bildergalerie so ähnlich wie möglich zu machen.

️ Bearbeiten Sie die Bildergalerie

Hier kommt der lustige Teil. Modula hat verschiedene Anpassungsoptionen, so dass es ziemlich einfach wäre, es dem Design der Bildergalerie von Airbnb nahe zu bringen.

Erstens, wenn Sie auf ein Airbnb-Inserat klicken, werden Sie mit einer begrenzten Anzahl von Bildern begrüßt – fünf, um genau zu sein – die eine Lightbox mit allen Galeriebildern öffnen, wenn Sie darauf klicken. Um dies nachzubilden, scrollen Sie im Bearbeitungsmodus der Modula-Galerie nach unten und sehen Sie sich alle Anpassungseinstellungen von Modula an.

Standardmäßig ist der Galerietyp auf Creative Gallery eingestellt, aber jetzt müssen wir ihn auf Custom Grid einstellen. Ziehen Sie als Nächstes die Ecken der ersten fünf Bilder und erweitern Sie sie so, dass sie sich so füllen.

Um die Anzahl der Bilder zu begrenzen, die Sie auf den ersten Blick sehen, finden Sie auf der Registerkarte „ Allgemein “ den Abschnitt „Max. Bilderanzahl “. Gehen Sie voran und setzen Sie das auf fünf.

Als nächstes bemerken wir einen gewissen Abstand zwischen den Bildern der Airbnb-Galerie. Um etwas Ähnliches zu erreichen, verringern Sie den Rinnenwert um einige Pixel. Standardmäßig ist es auf 10 Pixel eingestellt, aber Sie können den Desktop-Wert auf 8 reduzieren. Sie können auch mit den Tablet- und Telefonwerten herumspielen, um zu sehen, welche besser sind.

Gehen Sie anschließend zur Registerkarte Lightbox & Links und aktivieren Sie die Schaltfläche Alle Bilder anzeigen, um alle Ihre Galeriebilder anzuzeigen, wenn Sie die Lightbox öffnen. Wenn Sie diesen Schritt überspringen, durchläuft Ihre Lightbox nur die ersten fünf Bilder.

Als nächstes bemerken wir einen netten Hover-Effekt, wenn Sie mit der Maus über die Airbnb-Galerien fahren. Mit Modula können Sie das Erscheinungsbild des Mauszeigers bearbeiten. Gehen Sie zur Registerkarte Hover-Effekte , stellen Sie die Hover-Farbe auf ein dunkleres Grau ein und verringern Sie die Deckkraft auf 25 %.

Sie können auch das Cursor-Symbol , wenn Sie mit der Maus über das Bild fahren, in ein Zeiger-Symbol wie bei Airbnb ändern.

Um es den Leuten zu erleichtern, durch die Bilder zu blättern, können Sie die folgenden Einstellungen unter Lightbox & Links aktivieren: Miniaturansichtsschaltfläche , Miniaturansichten automatisch starten , Miniaturansichten unten.

Einige Airbnb-Inserate können Bildunterschriften unter jedem Bild anzeigen. Mit Modula können Sie ganz einfach Bildunterschriften festlegen. Vergessen Sie nicht, unter den Einstellungen für Lightbox & Links auf die Bildunterschrift anzeigen zu klicken. Sie können sogar die Position der Bildunterschrift festlegen, die links, rechts oder in der Mitte der Lightbox angezeigt werden soll. Auf der Registerkarte Untertitel haben Sie weitere Optionen zum Bearbeiten Ihrer Untertitel. Sie können Farbe, Schriftart, Schriftgröße, Schriftstil und sogar die Schriftgröße für die mobile Version festlegen.

Wenn du die Lightbox in der Airbnb-Galerie öffnest, siehst du Navigationsschaltflächen, die dir helfen, durch die Bildergalerie zu blättern. Auch Modula bietet Ihnen diese Funktion. Aktivieren Sie die Einstellung „ Navigationsschaltflächen “ auf der Registerkarte „Leuchtkasten & Links“.

Wenn es um die Lightbox auf Airbnb geht, werden Sie eine solide schwarze Hintergrundfarbe bemerken. Auch das können Sie mit Modula erreichen. Scrollen Sie auf derselben Registerkarte "Leuchtkasten & Links" nach unten, bis Sie die Hintergrundfarbe des Leuchtkastens sehen . Hier können Sie eine beliebige Farbe einstellen und die Deckkraft festlegen oder sie zu einer Volltonfarbe machen.

Airbnb hat eine Teilen-Schaltfläche auf der Lightbox, um das Inserat auf verschiedenen sozialen Kanälen zu teilen. Modula verfügt auch über diese Funktionalität und bietet Zugriff auf einige der beliebtesten Plattformen. Sobald Sie die Option „ Teilen “ aktiviert haben, werden auf derselben Registerkarte „Leuchtkasten & Links“ sechs neue Freigabeoptionen angezeigt: Facebook, Twitter, Pinterest, WhatsApp, LinkedIn und E-Mail. Sie können individuell auswählen, welche in Ihrer Galerie erscheinen sollen.

Die Lightbox auf Airbnb hat eine sichtbare Schaltfläche zum Schließen, auf die Benutzer klicken können, um die Lightbox-Galerie zu schließen. Sie können mit Modula auch eine Schließen-Schaltfläche anzeigen.

Vergessen Sie schließlich nicht, auf Galerie aktualisieren zu klicken, um die Einstellungen zu speichern.

Sobald Sie auf eines der fünf führenden Bilder klicken, die auf Airbnb angezeigt werden, werden Sie zur gesamten Bildergalerie weitergeleitet. Erst wenn Sie erneut auf eines der Bilder klicken, öffnet sich die Lightbox. Um dies mit Modula zu erreichen, können Sie zu Galerien gehen und Galerie duplizieren auf der gerade erstellten auswählen. Ein neues wird angezeigt, und wir können dieses als nächstes anpassen.

Spielen Sie mit der neu erstellten Galerie mit dem benutzerdefinierten Raster herum, bis Sie ein Layout erhalten, das Ihnen gefällt.

Vergessen Sie nicht, nach unten zu den allgemeinen Einstellungen zu scrollen und die 5 in der Max. Bilderanzahl zu löschen. Speichern Sie die neu bearbeitete Galerie und kopieren Sie den Shortcode auf der rechten Seite.

️ Zeigen Sie Ihre Galerie an

Die erste Anzeige, die wir machen werden, ist die Galerie in voller Länge.

Gehen Sie zu Ihrem WordPress- Dashboard und wählen Sie Seiten > Neu hinzufügen aus. Diese Seite dient als vollständige Anzeige der Bildergalerie. Geben Sie ihm einen aussagekräftigen Titel und fügen Sie den Shortcode in den Shortcode- Block ein.

Klicken Sie als Nächstes auf die Schaltfläche Veröffentlichen oder Aktualisieren . Kopieren Sie anschließend die URL dieser Seite. Wir werden diese URL in Kürze benötigen.

Gehen Sie zu der Seite, auf der die Airbnb-ähnliche Bildergalerie angezeigt werden soll, und fügen Sie den Shortcode der ersten von uns erstellten Galerie ein.

Als letztes müssen wir diese beiden Galerien verknüpfen. Gehen Sie zu Modula > Galerien und wählen Sie die erste von uns erstellte Galerie aus. Klicken Sie auf das Stiftsymbol, um das erste Bild zu bearbeiten.

Fügen Sie im Bearbeitungsbereich die vollständige URL der Galerieseite in das URL-Feld ein. Klicken Sie auf die Schaltfläche Speichern&Schließen.

Wiederholen Sie diesen Vorgang mit den folgenden vier Bildern und vergessen Sie nicht, auf die Schaltfläche Galerie aktualisieren zu klicken.

Gehen Sie zu Ihrer Seite und sehen Sie sich Ihre neu erstellte Airbnb-ähnliche Bildergalerie an

Endergebnis: Airbnb vs. Modula

Wie Sie sehen, können Sie mit Modula dem Design der Airbnb-Bildergalerie sehr nahe kommen. Vom Fünf-Bilder-Layout mit leichtem Abstand dazwischen über die Lightbox mit Bildunterschriften, Navigationspfeilen, Social-Sharing-Buttons bis hin zur Zwischenseite, die alle Bilder in einem benutzerdefinierten Raster enthält.

Modula ist ein vielseitiges Bildergalerie-Plugin, das noch mehr Funktionen und Einstellungen bietet, um Ihre Bildergalerie auf die nächste Stufe zu heben.

Abschließende Gedanken

Eine gut gestaltete Website kann erheblich beeinflussen, wie viele Besucher konvertieren und Ihre Dienste erneut nutzen. Mit dem richtigen Plugin und ein paar einfachen Schritten können Sie schnell eine Airbnb-inspirierte WordPress-Bildergalerie erstellen. Diese Art von Galerie ist eine hervorragende Methode, um qualitativ hochwertige Bilder zu präsentieren und Ihren Website-Besuchern ein freundliches Benutzererlebnis zu bieten.

Egal, ob Sie Ihre Galerie für Ferienwohnungen, Immobilienangebote oder aus anderen Gründen verwenden, Modula ist das beste WordPress-Plugin zum Erstellen einer von Airbnb inspirierten Bildergalerie, die die Besucher Ihrer Website anzieht und einbezieht.

Holen Sie sich Modula noch heute und beginnen Sie mit der Anpassung Ihrer Bildergalerien!