So erstellen Sie einen Expanding-Layer-Scroll-Effekt für ansprechende App-Illustrationen in Divi

Die Präsentation einer App oder eines Produkts auf Ihrer Website muss nicht auf statische Bilder oder Grafiken beschränkt sein. Mit den Scroll-Effekten von Divi können Sie App-Illustrationen zum Leben erwecken, indem Sie subtile und effektive Animationen hinzufügen, die die Besucher ansprechen. In diesem Tutorial werden wir eine einfache Möglichkeit zum Erstellen eines Scroll-Effekts mit expandierenden Ebenen in Divi aufdecken. Alles, was Sie brauchen, sind drei Bilder (oder Screenshots) mit den gleichen Abmessungen und der gesamten eingebauten Magie des Divi-Builders.

Lass uns gleich einsteigen und loslegen.

Vorgeschmack

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 Layout in Ihre Seite zu importieren, entpacken Sie einfach die ZIP-Datei und ziehen Sie die JSON-Datei in den Divi Builder.

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.

Erstellen des Expanding-Layer-Scroll-Effekts für eine ansprechende App-Illustration in Divi

Zeile hinzufügen

Beginnen wir mit dem Hinzufügen einer zweispaltigen (halben halben) Zeile.

Temporären Spielraum zum Abschnitt hinzufügen

Um die Bildlaufeffekte später in der Vorschau anzeigen zu können, fügen Sie dem Abschnitt wie folgt einen oberen und unteren Rand hinzu:

• Rand: 80vh oben, 80vh unten

3 Bilder als Ebenen hinzufügen

Wir werden drei Bilder erstellen, die als drei Ebenen der App-Illustration dienen. Die Idee ist, drei Bilder (oder Screenshots) der Funktionen der App zu verwenden, die die gleiche Größe / Abmessungen haben, damit die Bilder perfekt übereinander passen. Dann verschieben wir die drei Ebenen mit Divi-Scroll-Effekten.

Beginnen wir mit dem ersten Bild.

Bild erstellen 1

Fügen Sie der linken Spalte ein Bildmodul hinzu.

Laden Sie dann das erste Bild in das Modul hoch. Denken Sie daran, dass alle drei Bilder die gleichen Abmessungen haben. Dieser ist 500 x 1050 Pixel groß.

Bild 1 Einstellungen

Öffnen Sie die Bildmoduleinstellungen und aktualisieren Sie Folgendes:

Breite und Rand

• Breite: 300px (Desktop und Tablet), 150px (Telefon)
• Modulausrichtung: links
• Rand: 0px unten

Grenze

• Abgerundete Ecken: 40px
• Rahmenbreite: 15px
• Rahmenfarbe: #ffffff

Box Schatten

• Boxschatten: Siehe Screenshot
• Vertikale Position des Boxschattens: 0px
• Stärke der Box-Schattenunschärfe: 48px
• Schattenfarbe: rgba(0,0,0,0.2)

Bild erstellen 2

Um Bild 2 zu erstellen, duplizieren Sie Bild 1.

Aktualisieren Sie dann das Modul für duplizierte Bilder mit einem neuen Bild mit denselben Abmessungen (500 x 1050 Pixel).

Bild 2 Einstellungen

Nehmen Sie dann die Umrandung heraus, indem Sie Folgendes aktualisieren:

Grenze

• Rahmenbreite: 0px

Wir brauchen keinen Rahmen für dieses Bild, aber wir müssen den Rahmenabstand durch Auffüllen ersetzen, um sicherzustellen, dass die Bilder nahtlos gestapelt werden.

Polsterung

• Füllung: 15px oben, 15px unten, 15px links, 15px rechts

Position

Aktualisieren Sie dann die Position für Bild 2 auf Absolut. Dadurch überlappt das Bild Bild 1 perfekt.

• Position: Absolut

Weitere Informationen finden Sie in unserem vollständigen Beitrag zur Verwendung der absoluten Position in Divi.

Scroll-Effekte

Jetzt ist es an der Zeit, den Scroll-Effekt hinzuzufügen, der unsere Ebene bewegt (Bild 2), wenn Sie auf der Seite nach unten scrollen.

Aktualisieren Sie die Scroll-Effekte wie folgt:

Unter der Registerkarte Vertikale Bewegung …

• Vertikale Bewegung aktivieren: JA
• Startversatz: 0 (bei 0% Ansichtsfenster)
• Mittenversatz: 0 (bei 0% Ansichtsfenster)
• Endversatz: -1 (bei 100 % Ansichtsfenster)

Unter der Registerkarte Horizontale Bewegung …

• Horizontale Bewegung aktivieren: JA
• Startversatz: 0 (bei 0% Ansichtsfenster)
• Mittenversatz: 1 (bei 50% Ansichtsfenster)
• Endversatz: -1,5 (bei 100 % Ansichtsfenster)

Unter der Registerkarte Ein- und Ausblenden…

• Ein- und Ausblenden aktivieren: JA
• Anfangsdeckkraft: 0 % (bei 0 % Ansichtsfenster)
• Mittlere Deckkraft: 100 % (bei 10 % – 15 % Ansichtsfenster)
• Endopazität: 70 % (bei 30 % Ansichtsfenster)

Bild erstellen 3

Sobald alle Bildlaufeffekte zu Bild 2 hinzugefügt wurden, können wir Bild 3 erstellen.

Öffnen Sie das Einstellungsmenü am unteren Rand des Builders und wählen Sie die Schaltfläche Layer aus, um das Layer-Popup bereitzustellen. Dann duplizieren Sie Bildmodul 2 in Spalte 1, um Bild 3 zu erstellen. Die Verwendung der Ebenenfunktion hierfür ist hilfreich, da es schwierig ist, überlappende Module auszuwählen.

Öffnen Sie nun die Einstellungen für das duplizierte Bild (Bild 3) und laden Sie ein neues Bild hoch. Achte darauf, dass es die gleichen Abmessungen (500 x 1050 Pixel) behält.

Bild 3 Scroll-Effekte

Aktualisieren Sie auf der Registerkarte Erweitert die Optionen für Bildlaufeffekte für Bild 3.

Unter Vertikal Registerkarte Bewegung, aktualisieren Sie die vertikale Bewegung versetzt , wie folgt:

• Endversatz: -2 (bei 100 % Ansichtsfenster)

Unter der Horizontal Registerkarte Bewegung, aktualisieren Sie die horizontale Bewegung wie folgt:

• Mittenversatz: 2 (bei 50% Ansichtsfenster)
• Endversatz: 3 (bei 100 % Ansichtsfenster)

Unter dem Ein- und Ausblenden Registerkarte aktualisieren , um die Ein- und Ausblenden Einstellungen wie folgt:

• Anfangsdeckkraft: 5 % (bei 0 % Ansichtsfenster)
• Mittlere Deckkraft: 100 % (bei 30-40 % Ansichtsfenster)
• Endopazität: 100 % (bei 50 % Ansichtsfenster)

Ergebnis

Sehen Sie sich das bisherige Ergebnis an.

Transform-Schiefe zu Spalte 1 hinzufügen

Dies ist ein großartig aussehender Effekt, aber wir werden die Spalte verzerren, um einen 3D-Effekt zu erzielen.

Öffnen Sie die Einstellungen für Spalte 1 und fügen Sie einen Transformationsversatz wie folgt hinzu:

Transformationsversatz (X- und Y-Achse): 8deg

Dies erzeugt einen schönen 3D-Effekt auf den expandierenden Ebenen.

Das ist es!

Optional: CTA zu Spalte 2 hinzufügen

Jetzt können wir der rechten Spalte jeden Titel und jede Schaltfläche (oder jeden CTA) mit einigen kostenlosen Scroll-Effekten hinzufügen. Sehen Sie sich den kostenlosen Download dieses Layouts oben an, um denselben CTA in dieser Abbildung zu erhalten.

Endergebnis

Hier ist das Endergebnis.

Und so stapelt es sich auf Tablet und Telefon.

Verwenden von Bildern aus einem Divi-Layout-Paket

Die in diesem Tutorial verwendeten Bilder sind Scheinbilder von Shutterstock und werden auch auf unserer Demoseite für Bildlaufeffekte vorgestellt.

Um das Design an Ihre eigenen Bedürfnisse anzupassen, können Sie Bilder aus unseren kostenlosen Layoutpaketen verwenden oder eigene Screenshots erstellen. Hier ist ein Beispieldesign mit den Bildern aus dem Mobile App Layout Pack. Ich habe auch einen Verlaufshintergrund hinzugefügt, um die hellen Bilder zu ergänzen, die für die expandierenden Ebenen verwendet werden.

In wenigen Minuten haben wir ein ganz anderes Design!

Abschließende Gedanken

Der Scroll-Effekt mit sich erweiternden Ebenen ist eine elegante Lösung, um Apps oder Produkte zu präsentieren, ohne auf kompliziertere CSS-Techniken oder Fotobearbeitung zurückgreifen zu müssen. Und Sie können dieselbe Technik verwenden, um fast alles zu veranschaulichen. Ich liebe es, wie einfach es ist, die Bilder durch Ihre eigenen zu ersetzen und die gesamte Sammlung von Bildern / Ebenen mit einer einfachen Option in Divi zu verzerren. Hoffentlich gibt Ihnen dies etwas Inspiration, die Sie befähigt, erstaunliche Divi-Designs zu erstellen.

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

Danke schön!