So erstellen Sie ein Scroll-Galerie-Mockup mit den neuen Überlaufoptionen von Divi

Suchen Sie nach einer kreativen Möglichkeit, Bilder auf Ihrer Website anzuzeigen? Lesen Sie unbedingt weiter, denn in diesem Beitrag zeigen wir Ihnen, wie Sie ein Scroll-Galerie-Modell nur mit den integrierten Optionen von Divi erstellen. Konkret werden wir einen Abschnitt in ein Mockup umwandeln und alle Zeilen im Abschnitt Teil des Mockups sein. Sobald Sie die Technik beherrschen, können Sie jede Art von Inhalten, die Sie möchten, in einem mobilen Mockup präsentieren und Ihren Seiten im Handumdrehen Interaktion hinzufügen.

Lasst uns anfangen!

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Laden Sie das Scroll-Galerie-Mockup-Design KOSTENLOS herunter

Um das kostenlose Mockup-Design der Scroll-Galerie 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!

Beginnen wir mit der Neuerstellung!

Abonnieren Sie unseren Youtube-Kanal

Neuen Abschnitt hinzufügen

Größe

Beginnen Sie damit, eine neue Seite zu erstellen oder eine vorhandene zu öffnen, und fügen Sie einen regulären Abschnitt hinzu. Öffnen Sie die Abschnittseinstellungen und ändern Sie die Breite und die maximale Breite in den Größeneinstellungen.

• Breite: 25vw (Desktop), 60vw (Tablet), 80vw (Telefon)
• Max. Breite: 25vw (Desktop), 60vw (Tablet), 80vw (Telefon)

Abstand

Gehen Sie dann zu den Abstandseinstellungen, entfernen Sie alle standardmäßigen oberen und unteren Abstände und fügen Sie einen oberen und unteren Rand hinzu, um Platz zu schaffen.

• Oberer Rand: 9vw
• Unten: 9vw
• Obere Polsterung: 0px
• Untere Polsterung: 0px

Grenze

Fahren Sie fort, indem Sie zu den Randeinstellungen des Abschnitts gehen und die Form eines mobilen Mockups erstellen, indem Sie an jeder Ecke '30px' hinzufügen.

Box Schatten

Fügen Sie einen subtilen Kastenschatten hinzu, damit die Form durchkommt.

• Stärke der Box-Schattenunschärfe: 100px
• Schattenfarbe: rgba(0,0,0,0.18)

Zeile 1 hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie die erste Zeile mit der folgenden Spaltenstruktur zum Abschnitt hinzufügen:

Hintergrundfarbe

Ohne noch Module hinzuzufügen, öffnen Sie die Zeileneinstellungen und ändern Sie die Hintergrundfarbe.

• Hintergrundfarbe: #ffffff

Größe

Gehen Sie dann zu den Größeneinstellungen und lassen Sie die Reihe die gesamte Breite des Abschnitts einnehmen.

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 100%

Abstand

Entfernen Sie als nächstes die standardmäßige obere und untere Polsterung.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Box Schatten

Und fügen Sie auch einen Boxschatten hinzu.

• Stärke der Box-Schattenunschärfe: 80px
• Schattenfarbe: rgba(0,0,0,0.92)

Z-Index

Zu guter Letzt werden wir sicherstellen, dass die Zeile (und insbesondere ihr Kastenschatten) die nächste Zeile überlappt, indem wir den Z-Index in den Sichtbarkeitseinstellungen erhöhen.

• Z-Index: 99

Textmodul zur Spalte hinzufügen

H2-Inhalt hinzufügen

Das einzige Modul, das wir in dieser Zeile benötigen, ist ein Textmodul mit H2-Inhalten.

H2-Texteinstellungen

Nachdem Sie die H2-Kopie hinzugefügt haben, gehen Sie zu den H2-Texteinstellungen und nehmen Sie einige Änderungen vor.

• Überschrift 2 Schriftart: Abril Fatface
• Überschrift 2 Textausrichtung: Mitte
• Überschrift 2 Textfarbe: #000000
• Überschrift 2 Textgröße: 1,5 vw (Desktop), 3,5 vw (Tablet), 5 vw (Telefon)

Abstand

Fügen Sie als nächstes einen benutzerdefinierten oberen und unteren Rand hinzu.

• Obere Marge: 1,5 vw (Desktop & Tablet), 3,5 vw (Telefon)
• Unterer Rand: 1,5 vw (Desktop & Tablet), 3,5 vw (Telefon)

Zeile 2 hinzufügen

Spaltenstruktur

Auf in die zweite Reihe! Hier verwenden wir die folgende Spaltenstruktur:

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und lassen Sie die Zeile die gesamte Breite des Abschnitts einnehmen. Wir ändern auch die Höhe und die maximale Höhe, um in den nächsten Schritten einen vertikalen Bildlaufeffekt zu erzielen.

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 100%
• Höhe: 38vw (Desktop), 100vw (Tablet), 120vw (Telefon)
• Maximale Höhe: 38vw (Desktop), 100vw (Tablet), 120vw (Telefon)

Abstand

Gehen Sie dann zu den Abstandseinstellungen und entfernen Sie alle standardmäßigen oberen und unteren Polster.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Vertikaler Überlauf

Wie bereits erwähnt, machen wir diese Zeile vertikal scrollbar. Dazu müssen wir den vertikalen Überlauf in den Sichtbarkeitseinstellungen der Zeile ändern.

• Vertikaler Überlauf: Scrollen

Bildmodul zur Spalte hinzufügen

Bild hochladen

Fahren Sie fort und fügen Sie der Zeile ein erstes Bildmodul hinzu und laden Sie ein Bild Ihrer Wahl hoch. Sie können die Bilder, die wir in diesem Tutorial verwenden, herunterladen, indem Sie zum Beitrag Wedding Planner Layout Pack gehen.

Größe

Stellen Sie sicher, dass Sie die Option „Vollbreite erzwingen“ im Bildmodul aktivieren, um ein reaktionsschnelles Ergebnis zu gewährleisten.

• Volle Breite erzwingen: Ja

Abstand

Gehen Sie als nächstes zu den Abstandseinstellungen und schaffen Sie etwas Abstand zwischen diesem und dem nächsten Modul, indem Sie einen unteren Rand hinzufügen.

• Unterer Rand: 1vw

Klonen Sie das Image-Modul so oft Sie wollen

Nachdem Sie das erste Image-Modul geändert haben, können Sie es beliebig oft klonen.

Laden Sie verschiedene Bilder hoch

Natürlich möchten Sie das Bild in jedem der Duplikate ändern.

Zeile 3 hinzufügen

Spaltenstruktur

Auf in die dritte und letzte Reihe! Wir verwenden die folgende Spaltenstruktur:

Hintergrundfarbe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und fügen Sie eine weiße Hintergrundfarbe hinzu.

• Hintergrundfarbe: #ffffff

Größe

Gehen Sie dann zu den Größeneinstellungen und lassen Sie die Reihe die gesamte Breite des Abschnitts einnehmen.

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 100%

Abstand

Fügen Sie als Nächstes einige benutzerdefinierte obere und untere Auffüllungswerte hinzu.

• Obere Polsterung: 2.1vw (Desktop), 3.5vw (Tablet), 5vw (Telefon)
• Untere Polsterung: 2.1vw (Desktop), 3.5vw (Tablet), 5vw (Telefon)

Box Schatten

Und fügen Sie einen Kastenschatten hinzu, um Tiefe zu erzeugen.

• Stärke der Box-Schattenunschärfe: 80px
• Schattenfarbe: rgba(0,0,0,0.92)

Z-Index

Um sicherzustellen, dass diese Zeile (und insbesondere ihr Kastenschatten) die vorherige Zeile überlappt, erhöhen wir den Z-Index.

• Z-Index: 99

Schaltflächenmodul zur Spalte hinzufügen

Kopie hinzufügen

Das einzige Modul, das wir in dieser Zeile benötigen, ist ein Button-Modul. Fügen Sie eine Kopie Ihrer Wahl hinzu.

Ausrichtung

Wechseln Sie dann zur Registerkarte Design und ändern Sie die Ausrichtung der Schaltfläche.

• Tastenausrichtung: Mitte

Tasteneinstellungen

Ändern Sie auch die Tasteneinstellungen.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Tastentextgröße: 1vw (Desktop), 2.5vw (Tablet), 3.5vw (Telefon)
• Schaltflächentextfarbe: #ffffff
• Schaltflächenhintergrundfarbe: #000000
• Breite des Tastenrahmens: 1px
• Button-Schriftart: Abril Fatface

Abstand

Und erstellen Sie die gewünschte Form mit benutzerdefinierten Abstandswerten.

• Obere Polsterung: 0.5vw (Desktop), 1vw (Tablet), 2vw (Telefon)
• Untere Polsterung: 0.5vw (Desktop), 1vw (Tablet), 2vw (Telefon)
• Linke Polsterung: 3vw (Desktop), 7vw (Tablet), 9vw (Telefon)
• Rechte Polsterung: 3vw (Desktop), 7vw (Tablet), 9vw (Telefon)

Stil-Bildlaufleiste

CSS-ID zu Zeile 2 hinzufügen

Es liegt an Ihnen, ob Sie die Bildlaufleiste gestalten möchten oder nicht. Öffnen Sie in diesem Fall die zweite Zeile und fügen Sie eine CSS-Klasse hinzu.

• CSS-Klasse: image-scrollbar

Seiteneinstellungen öffnen

Öffnen Sie dann die Zeileneinstellungen.

Scrollbar mit CSS gestalten

Und fügen Sie die folgenden Zeilen CSS-Code zum Feld Benutzerdefiniertes CSS auf der Registerkarte "Erweitert" hinzu:

.image-scrollbar::-webkit-scrollbar {
width: 10px;
}
.image-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
}
.image-scrollbar::-webkit-scrollbar-thumb {
background: #000000;
}

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie nur mit den integrierten Optionen von Divi ein schönes Scroll-Galerie-Modell erstellen. Zu Beginn dieses Beitrags konnten Sie auch das Layout JSON kostenlos herunterladen und auf jeder Website verwenden, an der Sie arbeiten. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.