So mischen Sie die Kopie beim Scrollen mit den Positionseinstellungen und den Scroll-Effekten von Divi

Die Art und Weise, wie Sie die integrierten Funktionen von Divi kreativ nutzen, kann sich auf Ihr Seitendesign auswirken. Mit den Scroll-Effekten von Divi zum Beispiel können Sie beim Scrollen schöne Interaktionen erstellen. Heute fügen wir Ihrer Liste der Dinge, die Sie mit den integrierten Scroll-Effekten von Divi tun können, ein weiteres Tutorial hinzu. Genauer gesagt zeigen wir Ihnen, wie Sie die Kopie beim Scrollen überblenden. Auf den ersten Blick befindet sich die Kopie unter dem begleitenden Bild. Sobald Sie jedoch zu einem bestimmten Punkt scrollen, erscheint die Kopie über dem Produktbild und beginnt mit dem Bild zu verschmelzen. Dies führt zu einem auffälligen Effekt, der mühelos aussieht. Sie können die Layout-JSON-Datei 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!

Beginnen wir mit der Neuerstellung!

2x Platzhalter-Abschnitte hinzufügen

Neuen Abschnitt hinzufügen

Beginnen Sie damit, der Seite, an der Sie arbeiten, einen Platzhalterabschnitt hinzuzufügen.

Größe

Öffnen Sie die Schnitteinstellungen und ändern Sie die Höhe in den Größeneinstellungen.

• Höhe: 50vh

Abschnitt klonen

Klonen Sie den Abschnitt einmal. Dadurch bleiben Ihnen zwei Platzhalterabschnitte auf Ihrer Seite. Diese Platzhalterabschnitte helfen Ihnen, den endgültigen Effekt nach dem Durcharbeiten des Tutorials zu sehen. Auf einer Live-Website werden die Platzhalterabschnitte durch normale Abschnitte ersetzt, die Sie auf der gesamten Seite verwenden.

Neuen Abschnitt zwischen Platzhalterabschnitten hinzufügen

Sobald die Platzhalterabschnitte vorhanden sind, fügen Sie einen neuen Abschnitt zwischen den Platzhalterabschnitten hinzu.

Hintergrundfarbe

Öffnen Sie die Abschnittseinstellungen und verwenden Sie eine weiße Hintergrundfarbe.

• Hintergrundfarbe: #ffffff

Abstand

Wechseln Sie zur Registerkarte Design des Abschnitts und ändern Sie die oberen und unteren Abstandswerte entsprechend:

• Obere Polsterung: 10vh
• Untere Polsterung: 10vh

Zeile 1 hinzufügen

Spaltenstruktur

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

Größe

Ohne noch Module hinzuzufügen, öffnen Sie die Zeileneinstellungen, gehen Sie zu den Größeneinstellungen und ändern Sie die Werte für Breite und maximale Breite.

• Breite: 100%
• Maximale Breite: 100%

Textmodul zur Spalte hinzufügen

Kopie hinzufügen

Das einzige Modul, das wir für diese Zeile benötigen, ist ein Textmodul. Fügen Sie eine Kopie Ihrer Wahl hinzu.

Texteinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die Texteinstellungen entsprechend:

• Textschriftart: Montserrat
• Schriftstärke des Textes: Ultra Bold
• Textschriftart: Großbuchstaben
• Textfarbe: #fff2ea
• Textgröße: 11vw
• Textzeilenhöhe: 1em
• Textausrichtung: Mitte

Zeile 2 hinzufügen

Spaltenstruktur

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

Größe

Ohne noch Module hinzuzufügen, öffnen Sie die Zeileneinstellungen und ändern Sie die Größeneinstellungen wie folgt:

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 2
• Breite: 90%
• Zeilenausrichtung: Mitte

Bildmodul zur Spalte hinzufügen

Bild hochladen

Fügen Sie der Spalte der Zeile ein Bildmodul hinzu. Laden Sie ein Bild Ihrer Wahl hoch.

Ausrichtung

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die Bildausrichtung entsprechend:

• Bildausrichtung: Mitte

Größe

Gehen Sie dann zu den Größeneinstellungen und erzwingen Sie die volle Breite des Moduls.

• Volle Breite erzwingen: Ja

Schaltflächenmodul zur Spalte hinzufügen

Kopie hinzufügen

Das nächste und letzte Modul, das wir der Spalte hinzufügen, ist ein Button-Modul. Verwenden Sie eine Kopie Ihrer Wahl.

Tastenausrichtung

Wechseln Sie zur Registerkarte Design und ändern Sie die Ausrichtung der Schaltfläche.

• Tastenausrichtung: Mitte

Tasteneinstellungen

Stylen Sie dann die Schaltfläche wie folgt:

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 16px
• Schaltflächentextfarbe: #000000
• Hintergrundfarbe der Schaltfläche: #ffffff
• Breite des Tastenrahmens: 0px
• Tastenabstand der Buchstaben: 2px
• Button-Schriftart: Montserrat
• Schriftstärke der Schaltfläche: Fett
• Schaltflächenschriftart: Großbuchstaben

Abstand

Verwenden Sie auch einige benutzerdefinierte Abstandswerte in den Abstandseinstellungen.

• Obere Polsterung: 20px
• Untere Polsterung: 20px
• Linke Polsterung: 5%
• Rechte Polsterung: 5%

Absolute Positionierung zu Zeile 1 hinzufügen

Wenn Sie die zweite Zeile ausgefüllt haben, navigieren Sie zurück zu Zeile 1. Öffnen Sie die Einstellungen der Zeile, gehen Sie zur Registerkarte Erweitert und drehen Sie den Abschnitt absolut. Dadurch wird die Zeile und das darin enthaltene Textmodul unter der Zeile mit dem Bildmodul platziert.

• Position: Absolut
• Ort: Zentrum

Klonen Sie Zeile 1 und platzieren Sie Duplikat unter Zeile 2

Damit das Textmodul über dem Bild angezeigt wird, benötigen wir eine weitere Zeile mit einem höheren z-Indexwert. Klonen Sie die erste Reihe und platzieren Sie das Duplikat unter der zweiten Reihe.

Anwenden von Effekten auf Zeile 3

Z-Index erhöhen

Öffnen Sie die doppelte Zeile und ändern Sie den Z-Index auf der Registerkarte "Erweitert".

• Z-Index: 12

Textfarbe ändern

Öffnen Sie das Textmodul in der Zeile und ändern Sie die Textfarbe.

• Textfarbe: #1e1e1e

Wenden Sie den Mischmodus auf die Reihe an

Öffnen Sie dann die Zeileneinstellungen und ändern Sie den Mischmodus in den Filtereinstellungen.

• Mischmodus: Überlagerung

Verwenden Sie den Scroll-Effekt für das Textmodul in Zeile 3

Ein- und Ausblendeffekt hinzufügen

Schließen Sie das Tutorial ab, indem Sie das Textmodul erneut öffnen, zu den Bildlaufeffekten gehen und den Ein- und Ausblendeffekt aktivieren. Das ist es!

• Ein- und Ausblenden aktivieren: Ja
  • Anfangsdeckkraft: 0%
  • Mittlere Deckkraft: 0% (bei 26%)
  • Endopazität: 100 % (bei 28 %)
• Bewegungseffekt-Trigger: Mitte des Elements

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 mit den integrierten Scroll-Effekten von Divi kreativ werden. Genauer gesagt haben wir Ihnen gezeigt, wie Sie die Kopie beim Scrollen überblenden. Zunächst scheint die Kopie unter dem Bild zu sein. Nach dem Scrollen zeigt sich die Kopie über dem Bild und verschmilzt mit dem Bild. 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.