So erstellen Sie einen benutzerdefinierten Fotogalerie-Schieberegler in Divi

Wir alle wissen, dass Schieberegler großartig sind, um Benutzer mit vorgestellten Diensten, Produkten oder Seiten an einem bequemen Ort über der Falte zu locken. Einige Websites (ich denke Fotografen) müssen eine oder mehrere ihrer Fotogalerien auf der Homepage veröffentlichen. Die Verwendung eines Schiebereglers dafür kann eine gute Option sein. Möglicherweise haben Sie jedoch nicht daran gedacht, Ihre Fotogalerie in einem solchen Schieberegler anzuzeigen.

In diesem Tutorial zeige ich Ihnen eine einfache Möglichkeit, Divi-Bildergalerien in Ihre Folien einzubetten, um einen vollständig benutzerdefinierten Fotogalerie-Slider in Divi zu erstellen. Der Trick besteht darin, im Inhaltsbereich Ihres Sliders eine WordPress-Bildergalerie zu erstellen. Dann müssen Sie nur sicherstellen und die Option auswählen, die Divi-Galerie anstelle des standardmäßigen WordPress-Galeriestils zu verwenden. Es ist super einfach und macht Spaß zu implementieren.

Lass uns anfangen.

Vorgeschmack

Hier ist ein kleiner Vorgeschmack auf den Fotogalerie-Slider, den wir in diesem Tutorial erstellen werden.

Laden Sie das benutzerdefinierte Fotogalerie-Slider-Layout KOSTENLOS herunter

Um die Designs aus diesem Tutorial in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Um das Layout auf Ihre Seite zu importieren, entpacken Sie einfach die ZIP-Datei und ziehen Sie die JSON-Datei in den Divi Builder.

Kommen wir zum Tutorial, sollen wir?

Was Sie brauchen, um loszulegen

Um zu beginnen, benötigen Sie die folgende Einrichtung:

1. Das Divi Theme installiert und aktiv
2. Eine neue Seite, die erstellt wurde, um das Frontend von Grund auf neu zu erstellen (visueller Builder)
3. Ungefähr 6-8 Bilder, die für das Slider-Bild und die Fotogalerie verwendet werden sollen

Danach haben Sie eine leere Leinwand, um mit dem Erstellen einiger Hover-Tabs in Divi zu beginnen.

Aktivieren Sie die Divi-Galerie-Option in den Divi-Designoptionen

Mit Divi können Sie die standardmäßige WordPress-Galerieanzeige durch eine Divi-Galerieanzeige ersetzen. Wenn Sie also eine WordPress-Galerie erstellen und in ein Modul einbetten, wird die Galerie mit dem Divi-Galeriemodul wie eine Galerie angezeigt. Auf diese Weise können Sie im Grunde genommen jedem Modul im Divi Builder Divi-Bildergalerien hinzufügen. In unserem Fall fügen wir dem Slider-Modul eine Divi-Galerie hinzu.

Um die Einstellung zu ändern, navigieren Sie zu Divi > Themenoptionen. Klicken Sie dann unter der Registerkarte Allgemein auf die Option Divi-Galerie, um sie zu aktivieren.

Das ist es! Jetzt zeigt der Standard-WordPress-Galerie-Shortcode eine Fotogalerie im Divi-Stil an.

Erstellen des benutzerdefinierten Fotogalerie-Schiebereglers in Divi

Der Abschnitt und die Reihe

Beginnen Sie mit der Erstellung eines regulären Abschnitts mit einer einspaltigen Zeile.

Aktualisieren Sie dann die Zeileneinstellungen wie folgt:

• Breite: 100% (damit der Schieberegler auf dem Handy die volle Breite hat)
• Padding: 0px oben, 0px unten
• Abgerundete Ecken: 20px

Erstellen des Slider-Inhalts

Fügen Sie als Nächstes der Zeile ein Schiebereglermodul hinzu.

Öffnen Sie die Slider-Einstellungen und löschen Sie eine der standardmäßig hinzugefügten Folien. Klicken Sie dann auf das Zahnradsymbol auf der Folie, um die Folieneinstellungen für diese Folie zu öffnen.

Aktualisieren Sie dann den Folieninhalt wie folgt:

• Titel: Unsere Galerie
• Schaltfläche: Alle anzeigen
• Körper: Dies ist unsere Galerie. Hör zu.

Klicken Sie unter dem Textinhaltsbereich auf die Schaltfläche Medien hinzufügen.

Wählen Sie im Popup-Fenster der Medienbibliothek oben links die Registerkarte Galerie erstellen aus. Wählen Sie dann 6 Bilder aus, die Sie für die Galerie verwenden möchten, und klicken Sie unten rechts auf die Schaltfläche „Neue Galerie erstellen“.

Dadurch gelangen Sie zur Seite zum Bearbeiten der Kategorie im Popup. Ignoriere die Galerie-Einstellungen oben rechts, da die Divi-Galerie-Stile diese WordPress-Galerie-Einstellungen überschreiben.

Klicken Sie dann auf die Schaltfläche „Galerie einfügen“.

Dadurch wird ein Galerie-Shortcode in den Inhalt des Slider-Moduls eingefügt. Wenn die Galerie nach dem aktuellen Fließtext angezeigt werden soll, stellen Sie sicher, dass Sie den Shortcode nach dem Inhalt platzieren.

Jetzt haben Sie eine eingebettete Galerie im Divi-Stil, die im Inhaltsbereich Ihres Schiebereglermoduls angezeigt wird. Ziemlich cooles Zeug!

Lassen Sie uns unseren Folieninhalt weiter aktualisieren, indem wir ein Hauptfolienbild hinzufügen.

Nachdem wir nun unseren Slider-Inhalt bereit haben, speichern Sie Ihre Einstellungen für Folie 1.

Slider-Einstellungen

Stellen Sie sicher, dass Sie die Einstellungen für die einzelnen Folien speichern. Aktualisieren Sie dann die folgenden Designeinstellungen für den Hauptschieberegler. Dadurch wird sichergestellt, dass sich die Designaktualisierungen auf alle einzelnen Folien auswirken, die Sie hinzufügen.

Bildrahmen und Boxschatten

• Bild abgerundete Ecken: 20px
• Bildrandbreite: 40px (Desktop), 0px (Tablet)
• Bildrandfarbe: rgba(0,0,0,0)

• Image Box Shadow: siehe Screenshot
• Horizontale Position des Boxschattens: -170px
• Vertikale Position des Boxschattens: -220px
• Stärke der Box-Schattenausbreitung: -60px
• Schattenfarbe: rgba(255,255,255,0.2)

Titel und Haupttext

• Titelschriftart: Karla
• Ausrichtung des Titeltextes: rechts
• Titeltextgröße: 48px
• Höhe der Titelzeile: 1,3 em
• Körpertextgröße: 16px
• Abstand des Hauptbuchstabens: 2px
• Körperlinienhöhe: 2em

Schaltflächenstile

• Schaltflächentextgröße: 16px
• Schaltflächenhintergrundfarbe: #333333
• Breite des Tastenrahmens: 0px
• Schaltflächenrandradius: 20px
• Tastenabstand der Buchstaben: 2px
• Button-Schriftart: Karla
• Tastenschriftstärke: Fett
• Schaltflächensymbol: siehe Screenshot
• Tastenausrichtung: rechts
• Schaltflächenrand: -5em rechts
• Tastenpolsterung (Desktop): 3em links, 5em rechts
• Tastenpolsterung (Telefon): 2em links, 6em rechts

• Button Box Shadow: siehe Screenshot
• Vertikale Position des Boxschattens: 0px
• Stärke der Box-Schattenausbreitung: 20px (Desktop), 10px (Telefon)
• Schattenfarbe: #ffffff

Schieberpolsterung

• Polsterung: 10 % oben, 10 % unten

Hinzufügen eines Hintergrundverlaufs zu Folie 1

Nachdem wir nun das Slider-Styling eingerichtet haben, können wir unserer einzelnen Folie einen benutzerdefinierten Hintergrundverlauf hinzufügen. Öffnen Sie die Folieneinstellungen für Folie 1 und aktualisieren Sie Folgendes:

• Hintergrundfarbverlauf links: #6d0066
• Hintergrund mit Farbverlauf rechts: #000000
• Verlaufstyp: Radial
• Radiale Richtung: Oben links

Erstellen von Folie 2

Um die zweite Folie zu erstellen, können wir einfach Folie 1 mit dem Duplikat-Symbol duplizieren. Öffnen Sie dann die duplizierten Folieneinstellungen (Folie 2).

An dieser Stelle können Sie den Inhalt der neuen Folie nach Bedarf aktualisieren. Sie können beispielsweise ein neues Folienbild hinzufügen und einen weiteren Shortcode für die Galerieeinbettung generieren, um der Folie eine neue Fotogalerie hinzuzufügen.

Aktualisieren Sie dann den Hintergrundverlauf wie folgt:

• Hintergrundfarbe links: #0c71c3

Endergebnis

Hier ist das Endergebnis.

Und so sieht der Slider auf Tablet und Telefon aus.

Und hier ist der Schieberegler, wenn Sie die Folienbilder herausnehmen, damit nur der Folieninhalt und die Galerie angezeigt werden.

Abschließende Gedanken

Die Möglichkeit, eine Divi-Galerie in das Slider-Modul von Divi einzubetten, eröffnet die Möglichkeit, mit wenig Aufwand einige großartig aussehende Fotogalerie-Slider zu erstellen. Hoffentlich gibt Ihnen dieses Tutorial einige Inspirationen zum Erstellen einiger schöner Fotogalerie-Schieberegler.

Weitere Informationen zu dieser Einbettungstechnik für Divi-Galerien (einschließlich Tipps zum Gestalten der Einbettungs-Divi-Galerie) finden Sie im Beitrag zum Einbetten von Divi-Galerien in Umschalter.

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!