So erstellen Sie einen Parallax-Bildhintergrund mit einer gemischten Verlaufsüberlagerung in Divi

In früheren Versionen von Divi war das Hinzufügen einer Verlaufsüberlagerung zu einem Parallax-Hintergrundbild keine integrierte Option. Aber mit den neuen Hintergrundoptionen von Divi (und dem Verlaufsgenerator) können Sie ganz einfach wunderschöne Parallaxenhintergründe mit unzähligen Verlaufsüberlagerungsdesigns erstellen.

In diesem Tutorial zeigen wir Ihnen, wie Sie die Hintergrundoptionen von Divi verwenden, um eine farbige Verlaufsüberlagerung hinzuzufügen, die sich mit einem Hintergrundbild vermischt, indem Sie sowohl die True- als auch die CSS-Parallax-Methode verwenden.

Vorgeschmack

Hier ist ein kurzer Blick auf die Hintergrunddesigns, die wir in diesem Tutorial erstellen werden.

Dieses erste hat eine Verlaufsüberlagerung mit dem Farbmischmodus, der auf dem Hintergrundbild unter Verwendung der True Parallax-Methode verwendet wird.

Und hier ist das gleiche Design mit der CSS-Parallax-Methode. Beachten Sie, dass der Farbverlauf fest mit dem Hintergrundbild verbunden bleibt, sodass er als Teil des eigentlichen Bildes und nicht nur als Ebene erscheint.

Und hier ist ein Beispiel für eine Verlaufsüberlagerung mit halbtransparenten Farbstopps ohne Mischmodus.

Das Konzept

Die Grundidee dieses Designs umfasst zwei Schritte:

1. Erstellen Sie mit dem Verlaufsgenerator einen Hintergrundverlauf für einen Abschnitt und achten Sie darauf, den Verlauf über dem Hintergrundbild zu platzieren.

2. Fügen Sie demselben Abschnitt ein Hintergrundbild hinzu, das eine der Parallaxenmethoden und den Farbmischmodus verwendet.

Dadurch kann der bunte Farbverlauf das Parallaxenbild überlagern, während es sich beim Herunterscrollen der Seite bewegt. Der Farbmischmodus verschmilzt die Verlaufsüberlagerung mit dem Bild für ein schönes Bild, das mit Parallaxe großartig aussieht.

Laden Sie das Layout KOSTENLOS herunter

Um die Designs aus diesem Tutorial in die Hände zu bekommen, müssen Sie sie zuerst über die Schaltfläche unten herunterladen. Gewinnen
Um auf den Download zugreifen zu können, müssen Sie sich mit dem unten stehenden Formular in unsere Divi Daily-E-Mail-Liste eintragen. Als neu
Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der
Liste, geben Sie unten einfach 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 für den Divi-Newsletter an und wir senden Ihnen per E-Mail eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer erstaunlicher und kostenloser Divi-Ressourcen, Tipps und Tricks. Folgen Sie uns und Sie werden in kürzester Zeit ein Divi-Meister sein. Wenn Sie bereits abonniert sind, geben Sie unten einfach Ihre E-Mail-Adresse ein und klicken Sie auf Herunterladen, um auf das Layoutpaket zuzugreifen.

DOWNLOAD

Sie haben sich erfolgreich angemeldet. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugriff auf kostenlose wöchentliche Divi-Layoutpakete zu erhalten!

Gehen Sie wie folgt vor, um das Abschnittslayout in Ihre Divi-Bibliothek zu importieren:

1. Navigieren Sie zur Divi-Bibliothek.
2. Klicken Sie oben auf der Seite auf die Schaltfläche Importieren.
3. Wählen Sie im Portabilitäts-Popup die Registerkarte Import aus
4. Wählen Sie die Download-Datei von Ihrem Computer aus (stellen Sie sicher, dass Sie die Datei zuerst entpacken und die JSON-Datei verwenden).
5. Klicken Sie dann auf die Importschaltfläche.

Anschließend ist das Abschnittslayout in Divi Builder verfügbar.

Kommen wir zum Tutorial, sollen wir?

Was Sie für den Einstieg benötigen

Um zu beginnen, müssen Sie Folgendes tun:

1. Falls noch nicht geschehen, installieren und aktivieren Sie das Divi-Design.
2. Erstellen Sie eine neue Seite in WordPress und verwenden Sie den Divi Builder, um die Seite im Frontend zu bearbeiten (Visual Builder).
3. Wählen Sie die Option „Von Grund auf neu erstellen“.
4. Jetzt haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen!

So erstellen Sie einen Parallax-Bildhintergrund mit einer gemischten Verlaufsüberlagerung in Divi

1. Erstellen Sie die Füllzeile und den Überschriftentext

Obwohl wir uns in diesem Tutorial auf das Hintergrunddesign des Abschnitts konzentrieren werden, ist es sinnvoll, eine Füllzeile und eine Überschrift hinzuzufügen, um ein besseres Gefühl dafür zu bekommen, wie das Design in einem normalen Anwendungsfall aussehen wird.

Fügen Sie zu Beginn eine einspaltige Zeile zum vorhandenen Abschnitt im Builder hinzu.

Als nächstes fügen Sie der Zeile/Spalte einen Textbaustein hinzu.

Texteinstellungen

Öffnen Sie die Einstellungen für den Textbaustein. Fügen Sie auf der Registerkarte Inhalt eine H2-Überschrift zum Hauptinhalt hinzu.

<h2>Say Hello to Divi</h2>

Aktualisieren Sie auf der Registerkarte Design die Überschriftenoptionen und die maximale Breite wie folgt:

• Überschrift 2 Schriftart: Inter
• Überschrift 2 Schriftstärke: Fett
• Überschrift 2 Textfarbe: #fff
• Überschrift 2 Textgröße: 8vw
• Überschrift 2 Zeilenhöhe: 1.2em
• Überschrift 2 Textschatten: siehe Screenshot
• Überschrift 2 Stärke der Textschattenunschärfe: 0,28 em
• Textschattenfarbe für Überschrift 2: #10076d

• Maximale Breite: 50 %

Zeileneinstellungen

Jetzt, da die Überschrift vorhanden ist, aktualisieren wir die Zeilengröße und den Abstand, um sie reaktionsfähiger zu machen.

Öffnen Sie die Zeileneinstellungen. Aktualisieren Sie auf der Registerkarte Design Folgendes:

• Breite: 100 %
• Maximale Breite: 80 vw

• Polsterung: 15vw oben, 15vw unten

2. Gestalten Sie den Verlaufshintergrund für den Abschnitt

Nachdem der Füllinhalt nun vollständig ist, können wir mit der Gestaltung unseres Abschnittsverlaufshintergrunds beginnen.

Hintergrundverlaufseinstellungen

Öffnen Sie die Einstellungen für den Abschnitt. Wählen Sie auf der Registerkarte „Inhalt“ die Registerkarte „Verlauf“ unter den Hintergrundoptionen aus und aktualisieren Sie die Verlaufsoptionen wie folgt:

• Gradient Stop 1: #0094ff (bei 0%)
• Gradientenstopp 2: #ff00c7 (bei 25 %)
• Gradient Stop 3: #0094ff (bei 50 %)
• Gradient Stop 4: #ff00c7 (bei 75 %)
• Gradient Stop 5: #0094ff (bei 100%)

• Verlaufstyp: Kreisförmig
• Verlaufsposition: Unten links
• Farbverlauf über dem Hintergrundbild platzieren: JA

3. Fügen Sie ein Parallax-Hintergrundbild mit Farbmischmodus hinzu

Sobald das Verlaufsdesign fertig ist, können wir unser Parallax-Hintergrundbild hinzufügen. Dann wenden wir den Farbmischmodus an, um das Verlaufsdesign mit dem Hintergrundbild zu mischen, um ein schönes Parallax-Hintergrunddesign zu erhalten.

Hintergrundbildeinstellungen

Wählen Sie in den Hintergrundoptionen des Abschnitts die Registerkarte Hintergrundbild und laden Sie ein Hintergrundbild hoch . Das Update folgendes:

• Parallax-Effekt verwenden: JA
• Parallaxenmethode: Echte Parallaxe
• Hintergrundbildmischung: Farbe

Warum der Farbmischmodus?

Der Farbmischmodus mischt eine Graustufenversion des Bildes mit den Farben (Farbton und Sättigung) des Farbverlaufs. Dadurch bleibt die visuelle Qualität des Bildes mit einem völlig neuen Farbschema erhalten.

4. Fügen Sie eine Hintergrundmaske hinzu (warum nicht?)

Um das Design abzurunden, fügen wir eine Hintergrundmaske hinzu, die sich hinter unserer Überschrift befindet, um den Text etwas mehr hervortreten zu lassen und den Parallaxeneffekt hervorzuheben.

Hintergrundmaskeneinstellungen

Wählen Sie in den Hintergrundoptionen des Abschnitts die Registerkarte Hintergrundmaske und aktualisieren Sie Folgendes:

• Maske: Klingen
• Maskentransformation: Horizontal spiegeln, Invertieren
• Maskengröße: Benutzerdefinierte Größe
• Maskenbreite: 72vw
• Maskenposition: Oben rechts

5. Fügen Sie zum Testen einen temporären Scrollbereich hinzu

Bevor wir uns die Endergebnisse ansehen, müssen wir über und unter unserem Abschnitt etwas Platz hinzufügen, damit wir genügend Platz zum Scrollen haben, um den Parallaxeneffekt in Aktion zu sehen. Fügen Sie dazu einfach den folgenden Rand zum Abschnitt hinzu:

• Rand: 80vh oben, 80vh unten

Vergessen Sie nicht, diesen Abstand zu entfernen, wenn Sie den Abschnitt zu Ihrer eigenen Seite hinzufügen.

Endgültige Ergebnisse

Sehen wir uns das Endergebnis auf einer Live-Seite an.

Und hier ist das gleiche Design mit der CSS-Parallax-Methode. Beachten Sie, dass der Farbverlauf fest mit dem Hintergrundbild verbunden bleibt, sodass er als Teil des eigentlichen Bildes und nicht nur als Ebene erscheint.

Verwenden einer Verlaufsüberlagerung ohne den Mischmodus

Obwohl ich den Mischmodus für dieses Design liebe, haben Sie vielleicht das Bedürfnis nach einer traditionelleren Verlaufsüberlagerung für Ihr Parallax-Hintergrundbild.

Sie könnten beispielsweise dem Design keinen Mischmodus hinzufügen und einfach jedem Farbverlaufsstopp eine halbtransparente Farbe zuweisen. Auf diese Weise können Sie eine subtilere Darstellung des Hintergrundbilds hinter der Verlaufsüberlagerung sehen.

Um dies zu tun, könnten Sie die Deckkraft jeder Farbe auf etwa 72 % verringern und dann die Option zum Mischen des Hintergrundbilds wieder auf Normal setzen.

Hier ist ein Beispiel, wie das aussehen würde.

Probieren Sie mehr Farbverläufe aus!

Der Verlaufsgenerator kann so viele weitere Farben und Verlaufstypen erstellen, die Sie verwenden können, um diese mehrschichtigen Hintergrunddesigns hervorzuheben. Sie können sich unsere Live-Demos mit weiteren Gestaltungsmöglichkeiten für Hintergrundverläufe ansehen.

Abschließende Gedanken

Das Erstellen eines parallaxen Hintergrunddesigns mit einer gemischten Verlaufsüberlagerung kann einfach mit den integrierten Hintergrundoptionen von Divi erfolgen. Es gibt Ihnen wirklich die Leistungsfähigkeit von Photoshop in Divi wie nie zuvor. Fühlen Sie sich frei, verschiedene Farbkombinationen mit unzähligen Farbverlaufsstopps und -positionen zu erkunden. Außerdem können Sie auch mit verschiedenen Mischmodi experimentieren.

Hoffentlich wird dies für Ihre eigene Website oder Ihr nächstes Projekt nützlich sein.

Ich freue mich darauf, von dir in den Kommentaren zu hören.

Prost!