So animieren Sie Parallax-Hintergrundbilder mit Divis Scroll-Effekten

Die Kombination von Scroll-Effekten mit Parallax-Hintergrundbildern kann ein ziemlich magisches Design für Ihre Besucher schaffen. Da der Parallax-Effekt das Bild bereits beim Scrollen auf der Seite in Bewegung setzt, kann das Hinzufügen zusätzlicher Scroll-Effekte (wie horizontale Bewegung und Drehung) das Design wirklich von anderen abheben und Türen für kreativere Layouts öffnen.

In diesem Tutorial erfahren Sie, wie Sie Parallax-Hintergrundbilder mit den Scroll-Effekten von Divi animieren. Wir verwenden dasselbe Hintergrundbild für mehrere Textmodule, um ein einzigartiges Layout für die Anzeige eines kurzen Textblocks zu entwerfen.

Lass uns anfangen.

Vorgeschmack

Laden Sie das animierte Parallax-Hintergrundbild-Layout KOSTENLOS herunter

Um das Layout 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 der animierten Parallax-Hintergrundbilder mit Divis Scroll-Effekten

Hinzufügen der Spalte

Erstellen Sie zunächst eine einspaltige Zeile.

Erstellen des Textmoduls

Fügen Sie dann der Spalte einen Textbaustein hinzu.

Textinhalt

Fügen Sie den Buchstaben „p“ zum Inhalt des Hauptteils hinzu.

Parallax-Hintergrundbild zum Textmodul hinzufügen

Als nächstes fügen Sie dem Textmodul ein Parallax-Hintergrundbild wie folgt hinzu:

• Hintergrundbild: Bild einfügen
• Verwenden Sie den Parallax-Effekt: JA
• Parallaxenmethode: CSS

Den Text gestalten

Aktualisieren Sie auf der Registerkarte "Design" Folgendes:

• Textschriftart: Montserrat
• Textschriftart: TT
• Text Textfarbe: #ffffff
• Text Textgröße: 100px (Desktop), 70px (Telefon)
• Text Buchstabenabstand: 5px (Telefon)
• Textzeilenhöhe: 1em
• Textausrichtung: Mitte
• Polsterung: 250px oben, 250px unten

Die Polsterung schafft die notwendige Höhe, die benötigt wird, um das Parallax-Hintergrundbild freizulegen.

Zeileneinstellungen

Nachdem unser Textmodul fertig ist, öffnen Sie die Zeileneinstellungen und aktualisieren Sie Folgendes:

• Benutzerdefinierte Dachrinnenbreite verwenden: JA
• Dachrinnenbreite: 1
• Breite: 100%

Spalte 1 Einstellungen

Klicken Sie dann auf , um die Spalteneinstellungen zu öffnen.

Aktualisieren Sie auf der Registerkarte Erweitert die folgenden Bildlaufeffekte:

Auf der Registerkarte Horizontale Bewegungseffekte…

• Horizontal aktivieren: JA
• Startversatz: -2 (bei 0% Ansichtsfenster)
• Mittlerer Offset: 0 (bei 40 % - 60 %)
• Endversatz: -2 (bei 100%)

Unter der Registerkarte Rotationseffekte…

• Drehen aktivieren: JA
• Startrotation: 20 Grad (bei 0 % Ansichtsfenster)
• Mittlere Drehung: 0 Grad (bei 40 % - 60 %)
• Enddrehung: -20deg (bei 100%)

Spalte 2 erstellen

Obwohl wir mit einem einspaltigen Layout begonnen haben, werden wir insgesamt 5 Spalten erstellen. Es ist nur einfacher, die Spalte mit all ihren Inhalten und Einstellungen zu duplizieren, um die nächsten vier für das Design benötigten zu erstellen.

Duplizieren Sie die gesamte erste Spalte (mit dem Textmodul), um die zweite Spalte zu erstellen.

Aktualisieren der Scroll-Effekte von Spalte 2

Aktualisieren Sie dann die Scroll-Effekte für Spalte 2 wie folgt:

Unter der Registerkarte Rotationseffekte…

• Startrotation: -20deg
• Enddrehung: 20deg

Erstellen von Spalte 3

Um Spalte 3 zu erstellen, duplizieren Sie Spalte 2.

Aktualisieren der Scroll-Effekte von Spalte 3

Aktualisieren Sie dann die Einstellungen von Spalte 3 wie folgt:

Auf der Registerkarte Horizontale Bewegungseffekte…

• Horizontale Bewegung aktivieren: NEIN

Unter der Registerkarte Rotationseffekt…

• Startrotation: 20deg
• Enddrehung: 10deg

Erstellen von Spalte 4

Um Spalte 4 zu erstellen, duplizieren Sie Spalte 2 und ziehen Sie sie dann nach unten.

Aktualisieren der Scroll-Effekte von Spalte 4

Öffnen Sie dann die Einstellungen für Spalte 4 und aktualisieren Sie Folgendes:

Auf der Registerkarte Horizontale Bewegungseffekte…

• Startversatz: 2
• Endversatz: 2

Unter der Registerkarte Rotationseffekte…

• Startrotation: -15deg
• Enddrehung: 20deg

Erstellen von Spalte 5

Um schließlich Spalte 5 zu erstellen, duplizieren Sie Spalte 4.

Aktualisieren der Scroll-Effekte von Spalte 5

Aktualisieren Sie dann die Einstellungen von Spalte 5 wie folgt:

Unter der Registerkarte Rotationseffekte…

• Startrotation: 15deg
• Enddrehung: -15deg

Aktualisieren der Textmodulbuchstaben

Verwenden Sie als Nächstes die Inline-Textoption, um die Buchstaben in jeder Spalte so zu ändern, dass sie gemeinsam das Wort „Power“ buchstabieren.

Aktualisieren des mittleren Textmoduldesigns

Öffnen Sie die Textbausteineinstellungen in Spalte 3 und aktualisieren Sie Folgendes:

• Textschriftart: Montserrat Subrayada
• Text Textfarbe: #e0e722
• Text Textgröße: 150px (Desktop)
• Textzeilenhöhe: 100px

Aktualisieren Sie den Inhalt des ersten Textmoduls für Mobilgeräte

Um ein einzelnes Textmodul auf dem Handy anzuzeigen, müssen wir das Textmodul in Spalte 1 mit den folgenden Inhalten auf dem Tablet- und Telefondisplay aktualisieren:

Hauptinhalt auf Tablet und Telefon:

<p>po<span style="color: #edf000; font-family: 'Montserrat Subrayada';">w</span>er</p>

Einstellungen für Spalte 1 aktualisieren

Öffnen Sie als Nächstes die Einstellungen für Spalte 1 und aktualisieren Sie Folgendes:

• Abgerundete Ecken (Desktop): 100 % oben links
• Abgerundete Ecken (Tablet und Telefon): 40% oben links, 40% unten rechts

Fügen Sie auf der Registerkarte "Erweitert" das folgende benutzerdefinierte CSS zur Tablet-Anzeige des Hauptelements hinzu:

width: 100% !important;

Dadurch wird sichergestellt, dass die Spalte die volle Breite der Zeile auf dem Tablet- und Telefondisplay umfasst.

Den Rest der Spalten auf dem Tablet- und Telefondisplay ausblenden

Da Spalte 1 nun die volle Breite der Zeile auf Tablet und Telefon umfasst, können wir die restlichen Spalten auf Tablet und Telefon ausblenden/deaktivieren. Öffnen Sie dazu die Einstellungen für die Spalten 2-5 und deaktivieren Sie die Sichtbarkeit jeder der Spalten auf dem Telefon und Tablet.

Einstellungen für Spalte 5 aktualisieren

Öffnen Sie dann die Einstellungen von Spalte 5 und fügen Sie eine ergänzende abgerundete Ecke wie folgt hinzu:

• Abgerundete Ecken (Desktop): 100 % unten rechts

Hintergrunddesign zum Abschnitt hinzufügen

Um das Design abzuschließen, aktualisieren Sie die Abschnittseinstellungen mit einem Hintergrunddesign wie folgt:

• Hintergrundfarbe: #e0e722

• Top Divider-Stil: Siehe Screenshot
• Farbe des oberen Teilers: #222222
• Höhe des oberen Teilers: 650px (Desktop), 500px (Tablet und Telefon)

• Unterteiler-Stil: Siehe Screenshot
• Farbe des unteren Teilers: #222222
• Höhe des unteren Teilers: 500px (Desktop), 400px (Tablet und Telefon)

Endergebnis

Hre ist das endgültige Design auf dem Desktop.

Und hier ist das Fallback-Design auf dem Tablet- und Telefondisplay.

Abschließende Gedanken

Die Parallax-Hintergrundbilder verbinden sich auf wahrhaft magische Weise mit Scroll-Effekten. Der einzige Nachteil bei der Verwendung von Parallax-Hintergrundbildern ist die fehlende Unterstützung für Mobilgeräte, aber mit den reaktionsschnellen Einstellungen, die Divi bietet, können wir leicht einen Fallback erstellen. Ich hoffe, dieses elegante Design wird Ihrem Tag etwas Inspiration verleihen.

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

Danke schön!