So erstellen Sie mit Divi . einen doppelschichtigen Hintergrund-Scroll-Effekt

Wenn Sie nach einer Möglichkeit suchen, Ihre Website hervorzuheben, möchten Sie vielleicht lernen, wie Sie doppelschichtige Hintergründe erstellen. Das Erstellen von doppelschichtigen Hintergründen hilft, Ihr Hintergrundbild durch Bewegung zum Leben zu erwecken. Im heutigen Tutorial zeigen wir Ihnen, wie Sie mit Divi ein zweischichtiges Hintergrunddesign erstellen. Dieses Tutorial enthält drei Teile:

1. Vorbereiten von zwei Bilddateien in Adobe Photoshop
2. Erstellen des Designs in Divi
3. Anwenden der Bildlaufeffekte, um den Hintergrund zu animieren

Sie können die JSON- und Bilddateien auch kostenlos herunterladen!

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 Layout KOSTENLOS herunter

Um das kostenlose Layout 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!

1. Bilddateien in Photoshop erstellen

Produktbild mit sauberem Hintergrund auswählen und in Photoshop öffnen

Im ersten Teil dieses Tutorials erstellen wir die Bilddateien, die wir im gesamten Divi-Tutorial verwenden werden. Um diese zu erstellen, verwenden wir Adobe Photoshop, aber Sie können auch jede andere Bildbearbeitungssoftware Ihrer Wahl verwenden. Der doppelschichtige Hintergrundbildeffekt funktioniert am besten, wenn das Bild, mit dem Sie arbeiten, Folgendes aufweist:

1. Ein klarer Fokus auf ein Objekt im Bild
2. Ein sauberer Hintergrund

Das Bild unten ist ein perfektes Beispiel. Sie finden diese Bilddatei im gezippten Ordner, der im Downloadbereich dieses Beitrags freigegeben wurde.

Ebene duplizieren

Nachdem Sie das Bild in Photoshop geöffnet haben, klonen Sie die Originalebene einmal. Wir werden an der duplizierten Ebene arbeiten.

Originalebene ausblenden

Um sicherzustellen, dass wir das Ergebnis sehen, während wir uns im Tutorial nach unten bewegen, blenden Sie die ursprüngliche Ebene aus.

PNG aus Objektauswahl im Bild erstellen

Verwenden Sie das Schnellauswahlwerkzeug auf der Platte

Insgesamt benötigen wir für das Tutorial zwei Bilddateien:

1. ein PNG des Objekts, in diesem Fall die Platte
2. ein JPEG des Hintergrunds ohne das Objekt

Wir trennen das Objekt von seinem Hintergrund, damit wir es in der Divi-Umgebung einzeln bearbeiten können.

Um mit der Auswahl des Objekts zu beginnen, wählen Sie das „Schnellauswahlwerkzeug“ in der Symbolleiste und versuchen Sie, so viel wie möglich vom Objekt abzudecken.

Auswählen + Maskenauswahl

Sie werden feststellen, dass die Objektauswahl immer noch nicht gut genug ist. Sie können das Aussehen Ihrer Auswahl verfeinern, indem Sie die Option "Auswählen und maskieren" verwenden, wenn Sie mit der rechten Maustaste auf die Auswahl klicken. Dort können Sie mit der Deckkraft, Glätte usw. herumspielen.

Erstellen Sie eine Ebenenmaske aus der Auswahl

Obwohl wir eine glatte Auswahl erstellt haben, befinden sich innerhalb des Objekts noch Teile, die noch nicht ausgewählt sind. Wir fügen diese Teile manuell zu unserer Auswahl hinzu, indem wir auf die Ebenenmasken-Schaltfläche klicken, die Sie im Druckbildschirm unten sehen können:

Feinabstimmung der Auswahl in der Maske mit Pinseln

Sobald Ihre Ebenenmaske erstellt wurde, können Sie die Ebenenmaske mit einem Pinsel ändern. Stellen Sie sicher, dass Ihre Ebenenmaske ausgewählt ist.

• Mit einem schwarzen Pinsel (#000) werden Teile deiner Ebenenmaske entfernt
• Die Verwendung eines weißen Pinsels (#fff) fügt Teile deiner Ebenenmaske zurück

Verwenden Sie einen Pinsel, der nicht zu hart ist, damit Sie nicht sehr genau sein müssen.

Doppelkontrollmaske mit farbiger Ebene

Sie können Ihre Ebenenmaske jederzeit überprüfen, indem Sie eine farbige Ebene darunter platzieren. Farbige Schichten verraten es leichter, wenn Sie eine Stelle verpasst haben.

PNG-Auswahl als separate Bilddatei speichern

Neue Datei erstellen

Da Sie nun die PNG-Auswahl Ihres Objekts haben, können Sie die gesamte Ebene klonen, sodass Sie jederzeit darauf zurückgreifen können. Im nächsten Teil verwenden wir die duplizierte Ebene, um das Hintergrundbild ohne das Objekt zu erstellen.

Die Größe unseres Objekts ist viel kleiner als die anfängliche Dateigröße, daher werden wir eine neue Datei für unser Objekt erstellen und diese übertragen.

Auswahl in neue Datei einpassen

Kopieren Sie die Ebene mit ihrer Ebenenmaske und fügen Sie sie in die neu erstellte Datei ein.

Für das Web exportieren

Und exportieren Sie es für das Web als PNG.

Bilddatei komprimieren

PNGs mit transparentem Hintergrund haben in der Regel eine größere Dateigröße, daher wird empfohlen, die Datei mit einem Tool Ihrer Wahl zu komprimieren.

Objekt im Originalbild entfernen

Ebenenmaske auswählen

Zurück zur ursprünglichen Photoshop-Datei! Dort erstellen wir das Hintergrundbild ohne das Objekt. Dazu verwenden wir die oberste Ebene in unserer Datei. Stellen Sie zunächst sicher, dass Ihre Ebenenmaske ausgewählt ist.

Maske umkehren

Gehen Sie dann zu den Eigenschaften dieser Ebene und klicken Sie auf „Invertieren“.

Ebenenmaske anwenden

Sie werden jetzt feststellen, dass das Objekt innerhalb der ersten Ebene transparent ist. Wir werden die Ebenenmaske auf unsere Ebene anwenden, indem wir mit der rechten Maustaste klicken und "Ebenenmaske anwenden" auswählen.

Leeren Platz mit dem Klon-Tool auffüllen

Wir haben noch ein Loch in der Mitte, das wir auffüllen müssen. Hier kommt das Klon-Tool zum Einsatz. Wählen Sie eine Pinselgröße Ihrer Wahl und füllen Sie das Bild aus. Sie müssen dabei nicht sehr genau sein, im Divi-Tutorial platzieren wir das Objekt darüber.

Bild ohne Objekt speichern

Für das Web exportieren

Nachdem Sie das Hintergrundbild ohne das Objekt fertiggestellt haben, können Sie es als JPEG-Datei mit 70 % Qualität speichern.

Bilddatei komprimieren

Stellen Sie sicher, dass Sie auch dieses Bild komprimieren.

2. Erstellen Sie einen doppelschichtigen Hintergrundeffekt in Divi

Neuen Abschnitt hinzufügen

Hintergrundbild hochladen

Sobald Sie beide Bilddateien in Reichweite haben, ist es an der Zeit, zu Divi zu wechseln! Öffnen Sie eine neue Seite und fügen Sie einen neuen Abschnitt hinzu. Laden Sie das Hintergrundbild hoch, das Sie im ersten Teil des Tutorials erstellt haben.

Abstand

Wechseln Sie zur Registerkarte Entwurf des Abschnitts und wenden Sie einige benutzerdefinierte Abstandswerte an. Der untere Rand, den wir hinzufügen, hilft uns, den Effekt zu sehen. Normalerweise wird dieser Rand durch die nächsten Abschnitte in Ihrem Design ersetzt.

• Unterer Rand: 100vh
• Obere Polsterung:
  • Desktop: 100px
  • Tablet & Telefon: 50px
• Untere Polsterung:
  • Desktop: 100px
  • Tablet: 600px
  • Telefon: 500px

Zeile 1 hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Größe

Ohne noch Module hinzuzufügen, öffnen Sie die Zeileneinstellungen und ändern Sie die Breite und die maximale Breite. Mit diesen Einstellungen kann die Reihe jederzeit die linke und rechte Seite des Abschnittscontainers berühren. Auf diese Weise können wir sicherstellen, dass die PNG- und Hintergrundbilder über alle Bildschirmgrößen hinweg das gleiche Gleichgewicht aufweisen.

• Breite: 100%
• Maximale Breite: 100%

Abstand

Gehen Sie als nächstes zu den Abstandseinstellungen der Zeile und entfernen Sie alle standardmäßigen oberen und unteren Abstände.

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

Position

Positionieren Sie dann die gesamte Reihe neu.

• Position: Absolut
• Standort:
  • Desktop: Mitte
  • Tablet & Telefon: Mitte unten
• Vertikaler Versatz:
  • Desktop: /
  • Tablet & Telefon: 30vh

Bildmodul zu Zeile hinzufügen

PNG-Bild hochladen

Nachdem Sie die Zeileneinstellungen abgeschlossen haben, fügen Sie der Zeile ein Bildmodul hinzu und laden Sie die PNG-Datei hoch, die Sie im ersten Teil des Tutorials erstellt haben.

Ausrichtung

Wechseln Sie zur Registerkarte Design und ändern Sie die Bildausrichtung.

• Bildausrichtung: Mitte

Größe

Ändern Sie als nächstes die Größeneinstellungen.

• Breite:
  • Desktop: 36 %
  • Tablet & Telefon: 60%

Zeile 2 hinzufügen

Spaltenstruktur

Fügen Sie dann dem Abschnitt eine weitere Zeile mit der folgenden Spaltenstruktur hinzu:

Hintergrundfarbe

Öffnen Sie die Zeileneinstellungen und ändern Sie die Hintergrundfarbe.

• Hintergrundfarbe: #ffffff

Größe

Ändern Sie als nächstes die Größeneinstellungen.

• Breite: 90%
• Maximale Breite: 550px
• Zeilenausrichtung:
  • Desktop: Links
  • Tablet & Telefon: Mitte

Abstand

Wenden Sie dann einige benutzerdefinierte Auffüllungswerte an.

• Obere Polsterung: 11%
• Untere Polsterung: 11%
• Linke Polsterung: 5%
• Rechte Polsterung: 5%

Horizontaler Versatz

Wir fügen den Positionseinstellungen auch einen horizontalen Versatz hinzu.

• Horizontaler Versatz:
  • Desktop: 5%
  • Tablet & Telefon: 0%

Textmodul Nr. 1 zu Spalte 1 hinzufügen

H2-Inhalt hinzufügen

Zeit, Module hinzuzufügen, beginnend mit einem ersten Textmodul mit H2-Inhalten.

H2-Texteinstellungen

Stylen Sie den H2-Text wie folgt:

• Überschrift 2 Schriftart: Kumbh Sans
• Überschrift 2 Textgröße:
  • Desktop: 90px
  • Tablet: 60px
  • Telefon: 45px

Textmodul #2 zu Spalte 1 hinzufügen

Beschreibungsinhalt hinzufügen

Fügen Sie ein weiteres Textmodul direkt unter dem vorherigen hinzu und fügen Sie einen Beschreibungsinhalt Ihrer Wahl ein.

Texteinstellungen

Ändern Sie die Texteinstellungen des Moduls entsprechend:

• Textschriftart: Kumbh Sans
• Textzeilenhöhe: 2em

Schaltflächenmodul zu Spalte 1 hinzufügen

Kopie hinzufügen

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

Tasteneinstellungen

Stylen Sie die Schaltfläche entsprechend:

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 20px
• Schaltflächentextfarbe: #6b6443
• Breite des Tastenrahmens: 0px
• Schaltflächenrandradius: 0px

• Button-Schriftart: Kumbh Sans
• Schriftstärke der Schaltfläche: Fett
• Schaltflächensymbol anzeigen: Ja
• Platzierung der Schaltflächensymbole: Links
• Nur Symbol beim Hover für Schaltfläche anzeigen: Nein

Box Schatten

Fügen Sie auch einen Kastenschatten hinzu.

• Horizontale Position des Boxschattens: 0px
• Vertikale Position des Kastenschattens: 2px
• Schattenfarbe: #6b6443

3. Scroll-Effekte hinzufügen

Vertikale Bildbewegung

Im letzten Teil dieses Tutorials konzentrieren wir uns darauf, die Bildlaufeffekte zum Bildmodul hinzuzufügen, das die PNG-Bilddatei enthält. Öffnen Sie die Einstellungen des Moduls, navigieren Sie zur Registerkarte Erweitert und wenden Sie die folgenden vertikalen Bewegungseinstellungen an:

• Vertikale Bewegung aktivieren: Ja
• Startversatz:
  • Desktop: 0
  • Tablet & Telefon: 4 (bei 0%)
• Mittlerer Versatz:
  • Desktop: 0
  • Tablet & Telefon: 0 (bei 97%)
• Endversatz:
  • Desktop: 0
  • Tablet & Telefon: -2 (bei 100%)

Horizontale Bildbewegung

Wir vervollständigen unser Design mit den folgenden horizontalen Bewegungseinstellungen:

• Horizontale Bewegung aktivieren: Ja
• Startversatz:
  • Desktop: 0 (bei 0%)
  • Tablet & Telefon: 0
• Mittlerer Versatz:
  • Desktop: 0 (bei 65 %)
  • Tablet & Telefon: 0 (bei 97%)
• Endversatz:
  • Desktop: -10 (bei 100%)
  • Tablet & Telefon: 0

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 einen doppelschichtigen Hintergrund erstellen und ihn mit den integrierten Scroll-Effekten von Divi animieren. Im ersten Teil des Tutorials haben wir die Bilddateien in Adobe Photoshop vorbereitet. Im zweiten Teil des Tutorials haben wir uns darauf konzentriert, die Bilddateien in Divi zu verwenden, um ein responsives Design zu erstellen. Sie konnten die JSON-Datei auch kostenlos herunterladen! Wenn Sie Fragen oder Anregungen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen.

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.