So fächern Sie Bilder beim Scrollen auf, um eine Bildergalerie in Divi . zu bewerben

Zu wissen, wie man Bilder mit den Scroll-Effekten von Divi auffächert, kann ein subtiles und beeindruckendes Designelement sein, um eine Bildergalerie auf einer Landingpage zu bewerben. Die Idee besteht darin, Benutzer beim Scrollen auf der Seite zu motivieren, indem Bilder wie eine Hand Spielkarten aufgefächert werden.

In diesem Tutorial erstellen wir ein sauberes Abschnittslayout zum Bewerben einer Bildergalerie, die eine Sammlung von Bildern enthält, die sich beim Scrollen auffächern. Sie können alle gewünschten Bilder mit diesem Design verwenden und es wäre eine schöne Ergänzung für jede Landingpage.

Vorgeschmack

Hier ist ein kurzer Blick auf das Design, das wir in diesem Tutorial erstellen werden.

Laden Sie das 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 Abschnittslayout in Ihre Divi-Bibliothek zu importieren, navigieren Sie zur Divi-Bibliothek.

Klicken Sie auf die Schaltfläche Importieren.

Wählen Sie im Portabilitäts-Popup die Registerkarte Import und wählen Sie die Download-Datei von Ihrem Computer.

Klicken Sie dann auf die Schaltfläche Importieren.

Sobald dies erledigt ist, wird das Abschnittslayout im Divi Builder verfügbar sein.

Kommen wir zum Tutorial, ja?

Was Sie brauchen, um loszulegen

Um zu beginnen, müssen Sie Folgendes tun:

1. Falls noch nicht geschehen, installieren und aktivieren Sie das Divi-Theme.
2. Erstellen Sie eine neue Seite in WordPress und verwenden Sie den Divi Builder, um die Seite im Frontend zu bearbeiten (visueller Builder).
3. Wählen Sie die Option „Von Grund auf neu erstellen“.

Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.

Teil 1: Erstellen des Layouts und des simulierten Inhalts

Für diesen ersten Teil des Tutorials erstellen wir das Abschnittslayout mit einer zweispaltigen Zeile mit einem Titel und einer Schaltfläche in der linken Spalte. Im zweiten Teil fügen wir die Fan-Out-Bilder in die rechte Spalte ein.

Abschnittseinstellungen

Bevor wir dem Layout etwas hinzufügen, aktualisieren Sie die Einstellungen für den Standardabschnitt wie folgt:

• Polsterung: 10vw oben, 10vw unten
• Horizontaler Überlauf: Versteckt
• Vertikaler Überlauf: Versteckt

Hinzufügen der Zeile

Fügen Sie als Nächstes eine neue Zeile mit einer Zwei-Drittel-Ein-Drittel-Spaltenstruktur hinzu.

Zeileneinstellungen

Aktualisieren Sie dann die Zeileneinstellungen mit einem benutzerdefinierten Hintergrundbild. Ich verwende eines aus dem vorgefertigten Layout der Landing Page von Schreibwarengeschäften. Danach aktualisieren Sie Folgendes:

• Hintergrundbildgröße: Tatsächliche Größe
• Position des Hintergrundbilds: Oben links
• Maximale Breite: 900px

Hinzufügen des Textmoduls zum Erstellen des Titels

Sobald die Zeile fertig ist, fügen Sie ein neues Textmodul zu Spalte 1 hinzu, um den Titel zu erstellen.

Textinhalt

Fügen Sie dem Textkörperinhalt die folgende H1-Überschrift hinzu:

<h1>Our Gallery</h1>

Texteinstellungen

Aktualisieren Sie dann die Texteinstellungen wie folgt:

• Überschrift Schriftart: Bellefair
• Ausrichtung des Überschriftentextes (Tablet und Telefon): rechts
• Überschriftstextgröße: 150px (Desktop und Tablet), 110px (Telefon)

Hinzufügen der Schaltfläche

Fügen Sie unter dem Textmodul ein neues Schaltflächenmodul hinzu.

Schaltflächentext

Aktualisieren Sie den Schaltflächentext mit „Galerie anzeigen“.

Tasteneinstellungen

Aktualisieren Sie auf der Registerkarte "Design" Folgendes:

• Ausrichtung (Tablet und Telefon): rechts
• Schaltflächentextgröße: 14px
• Schaltflächentextfarbe: #ffffff
• Schaltflächenhintergrundfarbe: #121212
• Breite des Tastenrahmens: 0px
• Tastenabstand der Buchstaben: 3px
• Button-Schriftart: Montserrat
• Schaltflächenschriftart: TT
• Rand: 7vw oben

Teil 2: Erstellen der Bilder mit dem Fan-Out-Scroll-Effekt

In diesem zweiten Teil des Tutorials erstellen wir die Bilder mit dem Fan-Out-Scroll-Effekt. Wir beginnen mit dem mittleren Bild. Ich verwende die Bilder aus dem vorgefertigten Layout der Fashion Gallery-Seite. Für ein einheitliches Design sollten sie alle gleich groß sein. Die, die ich verwende, sind 400 x 600 Pixel.

Erstellen des mittleren Bildes

Fügen Sie in der rechten Spalte ein neues Bildmodul hinzu.

Laden Sie dann ein Bild in das Modul hoch.

Bildeinstellungen

Aktualisieren Sie die maximale Breite und den maximalen Rand für mobile Displays wie folgt:

• Max. Breite (Tablet und Telefon): 200px
• Rand (Tablet und Telefon): 0px übrig

Erstellen des mittleren rechten Bildes

Um das zweite Bild (oder das mittlere rechte Bild) zu erstellen, duplizieren Sie das erste Bildmodul.

Bildeinstellungen

Öffnen Sie dann die Einstellungen für das Modul Duplicate Image und aktualisieren Sie Folgendes:

Position

• Position: Absolut

Ursprung transformieren

• Ursprung der Transformation: unten Mitte

Scroll-Effekte

Aktualisieren Sie unter Horizontale Bewegung Folgendes:

• Horizontale Bewegung aktivieren: JA
• Startversatz: 0 (bei 20%)
• Mittlerer Offset: 0,5 (bei 50%)
• Endversatz: 0,5 (bei 100%)

Aktualisieren Sie unter Drehen Folgendes:

• Rotation aktivieren: JA
• Startrotation: 0 Grad (bei 20%)
• Mittlere Drehung: 20 Grad (bei 50%)
• Enddrehung: 20 Grad (bei 100%)

Das richtige Image erstellen

Um das dritte Bild zu erstellen, das sich ganz rechts auffächert, duplizieren Sie das zweite von uns erstellte Bild.

Scroll-Effekte aktualisieren

Aktualisieren Sie unter Horizontale Bewegung Folgendes:

• Mittenversatz: 1
• Endversatz: 1

Aktualisieren Sie unter Drehen Folgendes:

• Mittlere Drehung: 40 Grad
• Enddrehung: 40 Grad

Wenn Sie es nicht bemerkt haben, erhöhen wir den horizontalen Versatz im Wesentlichen um 0,5-Schritte und den Rotationsversatz um 20-Grad-Schritte mit jedem Bild. Dadurch wird ein gleichmäßiger Abstand zwischen den Bildern erzeugt. Und da die Scroll-Effekt-Animation auf dem Transformations-Ursprung unten in der Mitte basiert, wird der Eindruck erweckt, dass sich die Bilder wie eine Spielkartenhand auffächern.

Bilder in der Ebenenbox beschriften

Bevor wir die letzten beiden Bilder erstellen, aktualisieren wir die Labels der aktuellen Bilder, damit wir nicht verwirrt werden.

Erstellen des mittleren linken Bildes

Um das mittlere linke Bild zu erstellen, können wir das mittlere rechte Bild duplizieren.

Ziehen Sie es dann über das mittlere Bild an den oberen Rand der Spalte.

Sie können dieses Bildlabel auch aktualisieren.

Scroll-Effekte aktualisieren

Öffnen Sie die Einstellungen für das mittlere linke Bild und aktualisieren Sie die folgenden Scroll-Effekte:

Unter Horizontale Bewegung…

• Mittenversatz: -0.5
• Endversatz: -0.5

HINWEIS: Alles, was wir tun, ist, den Offset-Wert in einen negativen Wert zu ändern.

Unter Rotieren…

• Mittlere Drehung: -20 Grad
• Enddrehung: -20 Grad

Erstellen des linken Bildes

Lassen Sie uns schließlich das endgültige linke Bild erstellen, indem wir das rechte Bild duplizieren und ganz nach oben in die Spalte ziehen.

Sie können auch das Etikett aktualisieren.

Scroll-Effekte aktualisieren

Öffnen Sie die Einstellungen für das linke Bild und aktualisieren Sie die Scroll-Effekte:

Unter Horizontale Bewegung:

• Mittenversatz: -1
• Endversatz: -1

Unter Rotieren…

• Mittlere Drehung: -40 Grad
• Enddrehung: -40 Grad

Spalte 1 Z-Index

Im Moment überlappen die Bilder in Spalte bis den Inhalt in Spalte 1. Um dies zu ändern, öffnen Sie die Einstellungen für Spalte 1 und aktualisieren Sie den z-Index wie folgt:

• Z-Index: 10

Hinzufügen neuer Bilder und Filter

Jetzt müssen wir nur noch jedes der Bilder mit neuen/anderen aktualisieren.

Um einen einzigartigen Effekt zu erzielen, fügen Sie die folgenden Filter zu allen Bildern (mit Multiselect) hinzu, außer dem rechten Bild.

• Sättigung: 20%
• Deckkraft: 85%

Ergebnis

Hier das bisherige Ergebnis…

Drehen der Säule

Um das Design ein wenig zu ändern, können wir die Bildersammlung drehen, indem wir die übergeordnete Spalte drehen.

Öffnen Sie dazu die Einstellungen für Spalte 2 und fügen Sie die folgende Transformationsoption hinzu:

• Transformieren Drehen Z-Achse: 40 Grad

Endergebnis

Hier ist das Endergebnis.

Desktop

Tablette

Telefon

Abschließende Gedanken

In diesem Tutorial haben wir gelernt, wie man Bilder mit Divis Scroll-Effekten auffächert, aber Sie müssen hier nicht aufhören! Sie können dieselbe Technik leicht verwenden, um jede Sammlung von Modulen aufzufächern (ich denke an Klappentexte). Ich habe den Versatzabstand mit den Scroll-Effekten jedes Bildes begrenzt, so dass das Design nicht wirklich funktional ist (dh Sie können nicht wirklich jedes Bild in seiner Gesamtheit sehen). Sie können jedoch die Versätze erhöhen, um die Bilder sichtbarer zu machen, wenn Sie möchten.

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

Danke schön!