So erstellen Sie Parallax Copy Transitions mit Divis Sticky Options

Wenn Sie nach kreativen Möglichkeiten suchen, Ihre Seitendesigns aufzupeppen, können Parallax-Effekte nützlich sein. Sie bringen diese zusätzliche Interaktion beim Scrollen, ohne zu invasiv zu sein. Wenn Sie nach einer Möglichkeit suchen, diesen Parallaxeneffekt auf mehrere Abschnitte Ihrer Seite auszudehnen, werden Sie dieses Tutorial lieben. Heute zeigen wir Ihnen, wie Sie mit den Sticky-Optionen von Divi Parallax-Kopierübergänge erstellen. Sobald Besucher an einem bestimmten Abschnitt vorbeiscrollen, scrollt die Kopie mit dem Parallax-Hintergrundbild nach unten, was einen wirklich ordentlichen Effekt ergibt. Sobald der nächste Abschnitt in der Zeile erreicht ist, wird die Kopie durch einen anderen Titel ersetzt. Das Ergebnis, das wir anstreben, sieht auf allen Bildschirmgrößen großartig aus und Sie können die 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!

https://youtu.be/uZCD0__Apjk

Abonnieren Sie unseren Youtube-Kanal

1. Erstellen Sie die Elementstruktur

Neuen Abschnitt hinzufügen

Beginnen Sie damit, der Seite, an der Sie gerade arbeiten, einen neuen Abschnitt hinzuzufügen. Dieser Effekt funktioniert besonders gut, wenn Sie Inhalte über und unter dem Layout haben, das wir gerade erstellen.

Neue Zeile 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 Größeneinstellungen wie folgt:

• Spaltenhöhen ausgleichen: Ja
• Breite: 95%
• Maximale Breite: 100%

Abstand

Entfernen Sie als nächstes alle standardmäßigen oberen und unteren Polster.

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

Spaltenhintergrundbild

Nachdem wir nun die allgemeinen Zeileneinstellungen geändert haben, wenden wir einige benutzerdefinierte Einstellungen auch auf die Spalte in unserer Zeile an. Öffnen Sie zunächst die Spalteneinstellungen.

Laden Sie ein Hintergrundbild hoch und aktivieren Sie einen Parallax-Effekt darauf.

• Verwenden Sie den Parallax-Effekt: Ja
• Parallaxenmethode: CSS

Spaltenabstand

Gehen Sie als Nächstes zur Registerkarte Design und wenden Sie eine benutzerdefinierte untere Polsterung an.

• Untere Polsterung: 50vh

Textmodul Nr. 1 zu Spalte 1 hinzufügen

H2-Inhalt hinzufügen

Es ist Zeit, Module hinzuzufügen, beginnend mit einem Textmodul, das H2-Inhalte Ihrer Wahl enthält.

H2-Texteinstellungen

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

• Überschrift 2 Schriftart: Montserrat
• Überschrift 2 Schriftstärke: Fett
• Überschrift 2 Schriftstil: Großbuchstaben
• Überschrift 2 Textfarbe: #ffffff
• Überschrift 2 Textgröße:
  • Desktop: 9vw
  • Tablet: 14vw
  • Telefon: 15vw

Filter

Wir aktivieren auch einen Mischmodus in den Filtereinstellungen.

• Mischmodus: Überlagerung

Schaltflächenmodul zu Spalte 1 hinzufügen

Kopie hinzufügen

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

Link hinzufügen

Fügen Sie als Nächstes einen Link ein.

Tasteneinstellungen

Wechseln Sie dann zum Design-Tab des Moduls und ändern Sie die Schaltflächeneinstellungen entsprechend:

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße:
  • Desktop: 2vw
  • Tablet & Telefon: 7vw
• Schaltflächentextfarbe: #ffffff
• Breite des Tastenrahmens: 0px
• Tasten-Buchstaben-Abstand: 0.06vw

• Button-Schriftart: Karla
• Schaltflächensymbol anzeigen: Ja
• Platzierung der Schaltflächensymbole: Links
• Nur Symbol beim Hover für Schaltfläche anzeigen: Nein

Abstand

Fügen Sie auch einige benutzerdefinierte obere und untere Polster hinzu.

• Obere Polsterung: 8%
• Untere Polsterung: 8%

Position

Und vervollständigen Sie die Moduleinstellungen, indem Sie das Modul in der unteren rechten Ecke der Spalte neu positionieren.

• Position: Absolut
• Ort: Unten rechts

2. Schritte, die für die Wirkung erforderlich sind

Textmodul Sticky machen

Nachdem wir nun die Grundlage unseres Designs mit allen erforderlichen Elementen eingerichtet haben, ist es an der Zeit, den Parallax-Kopierübergang zu aktivieren. Dazu verwenden wir die integrierten Sticky-Optionen von Divi im Textmodul. Öffnen Sie die Einstellungen des Moduls, gehen Sie zur Registerkarte Erweitert und wenden Sie die folgenden Sticky-Einstellungen an:

• Klebrige Position: Bleiben Sie oben
• Sticky Top Offset: 150px
• Untere Klebrigkeitsgrenze: Abschnitt
• Versatz von umgebenden klebrigen Elementen: Ja
• Übergangsstandard- und Sticky-Stile: Ja

Textmodulabstand ändern

Standard

Nachdem wir die Sticky-Optionen in diesem Modul aktiviert haben, können wir Sticky-Stile anwenden. Standardmäßig wird das Modul über der Spalte selbst platziert. Und aufgrund der weißen Textfarbe des Moduls fügt es sich in die Hintergrundfarbe des Abschnitts ein und lässt es so aussehen, als wäre dort überhaupt kein Text vorhanden. Um diese Positionierung zu erstellen, verwenden wir einen negativen oberen Rand für verschiedene Bildschirmgrößen.

• Oberer Rand:
  • Desktop: -10vw
  • Tablet: -14vw
  • Telefon: -15vw

Klebrig

Sobald das Textmodul klebrig geworden ist, möchten wir, dass es wieder sichtbar ist. Um sicherzustellen, dass dies geschieht, werden wir diesen oberen Rand in einem klebrigen Zustand auf „0vh“ zurücksetzen.

• Sticky Top Margin: 0vh

Abschnittsabstand

Außerdem benötigen wir oben und unten in unserem Abschnitt etwas Platz, damit der Hintergrund und das Textmodul farbig verschmelzen können. Dazu öffnen wir die Abschnittseinstellungen erneut und wenden einige benutzerdefinierte obere und untere Auffüllungen an.

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

Ganze Sektion so oft wie gewünscht klonen

Nachdem Sie das Schnittdesign fertiggestellt haben, können Sie es beliebig oft klonen.

Inhalt & Links ändern

Stellen Sie sicher, dass Sie den Inhalt und die Links für jedes Modul in den doppelten Abschnitten ändern und fertig!

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 Divis Sticky-Optionen kreativ werden. Genauer gesagt haben wir Ihnen gezeigt, wie Sie Parallax-Kopierübergänge erstellen, mit denen Sie den Parallax-Effekt auf mehrere Abschnitte auf Ihrer Seite ausdehnen können. 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.