So lösen Sie Bildübergänge mit den Sticky-Optionen von Divi aus

Die Vielseitigkeit der Sticky-Optionen von Divi geht über die Verwendung der Einstellungen für einen Sticky-Header hinaus. Sie können damit auch Änderungen in Ihrem Design auslösen. In diesem Tutorial verwenden wir zum Beispiel die Sticky-Optionen von Divi, um den Bildübergang auszulösen. Die Bildübergänge erfolgen, sobald sich Besucher beim Scrollen dem Bild nähern. Wir werden zwei verschiedene Beispiele von Grund auf neu erstellen, aber sobald Sie den Ansatz verstanden haben, können Sie Ihre eigenen einzigartigen Bildübergänge nur mit den integrierten Optionen von Divi erstellen. Sie können die JSON-Datei auch kostenlos herunterladen!

Lasst uns anfangen!

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen letzten 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. Allgemeine Schritte

Abschnitt 1 hinzufügen

Abstand

Im ersten Teil des Tutorials bauen wir die Grundlage unseres Designs. Sobald dies erledigt ist, können wir uns darauf konzentrieren, die richtigen Einstellungen anzuwenden, um die beiden Beispiele in der Vorschau dieses Beitrags zu erreichen. Fügen Sie der Seite, an der Sie gerade arbeiten, einen neuen Abschnitt hinzu, wechseln Sie zur Registerkarte Design des Abschnitts und entfernen Sie alle standardmäßigen oberen und unteren Abstände.

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

Neue Zeile hinzufügen

Spaltenstruktur

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

Größe

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

• Maximale Breite: 1480px
• Zeilenausrichtung: Mitte

Abstand

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

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

Z-Index

Und stellen Sie den az-Index in den Positionseinstellungen ein. Dies hilft uns sicherzustellen, dass die Zeile unter der nächsten Zeile bleibt, die wir später im Tutorial hinzufügen.

• Z-Index: 1

Spaltenüberläufe

Öffnen Sie als Nächstes die Spalteneinstellungen und setzen Sie die Überläufe auf ausgeblendet.

• Horizontaler Überlauf: Versteckt
• Vertikaler Überlauf: Versteckt

Bildmodul zur Spalte hinzufügen

Bildbox leer lassen

Das einzige Modul, das wir in dieser Zeile benötigen, ist ein Image-Modul. Lassen Sie das Bildfeld leer.

Hintergrundbild

Und verwenden Sie stattdessen ein Hintergrundbild Ihrer Wahl.

• Hintergrundbildgröße: Cover
• Position des Hintergrundbilds: Mitte

Abstand

Damit das Bild angezeigt wird, verwenden wir einige benutzerdefinierte Abstandswerte für verschiedene Bildschirmgrößen.

• Obere Polsterung:
  • Desktop: 300px
  • Tablet & Telefon: 150px
• Untere Polsterung:
  • Desktop: 300px
  • Tablet & Telefon: 150px

Abschnitt 2 hinzufügen

Abstand

Fügen Sie einen weiteren Abschnitt direkt unter dem vorherigen hinzu. Öffnen Sie die Abschnittseinstellungen und entfernen Sie die standardmäßige obere Auffüllung in den Abstandseinstellungen.

• Obere Polsterung: 0px

Neue Zeile hinzufügen

Spaltenstruktur

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

Z-Index

Fügen Sie auch für diese Zeile einen z-Index hinzu.

• Z-Index: 2

Call-to-Action-Modul zur Spalte hinzufügen

Inhalt hinzufügen

In dieser Zeile ist das einzige Modul, das wir brauchen, ein Call-to-Action-Modul. Fügen Sie den Inhalt Ihrer Wahl hinzu.

Schaltflächenlink hinzufügen

Zusammen mit einem Button-Link.

Hintergrundfarbe

Fügen Sie dann eine weiße Hintergrundfarbe hinzu.

• Hintergrundfarbe: #ffffff

Texteinstellungen

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

• Textausrichtung: Links
• Textfarbe: Dunkel

Einstellungen für Titeltext

Stylen Sie auch den Titeltext.

• Titelschrift: Playfair Display
• Schriftstil des Titels: Kursiv
• Titeltextgröße
  • Desktop: 45px
  • Tablet: 40px
  • Telefon: 35px
• Titel-Buchstaben-Abstand: 1px

Textkörpereinstellungen

Ebenso der Fließtext.

• Körperschriftart: Karla
• Körperlinienhöhe: 2em

Tasteneinstellungen

Stylen Sie dann die Schaltfläche.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 18px
• Schaltflächentextfarbe: #000000
• Verlaufsfarbe 1: #ffffff
• Verlaufsfarbe 2: #ffdc91
• Verlaufstyp: Linear
• Startposition: 50%
• Endposition: 50%

• Breite des Tastenrahmens: 0px
• Schaltflächenrandradius: 0px
• Button-Schriftart: Karla
• Schaltflächenschriftart: Großbuchstaben
• Schaltfläche anzeigen: Ja

• Platzierung der Schaltflächensymbole: Links
• Nur Symbol beim Hover für Schaltfläche anzeigen: Nein
• Obere Polsterung: 10px
• Untere Polsterung: 10px
• Linke Polsterung: 15%
• Rechte Polsterung: 15%

Größe

Wir ändern auch die Größeneinstellungen für verschiedene Bildschirmgrößen.

• Breite:
  • Desktop: 65 %
  • Tablette: 80%
  • Telefon: 100%
• Modulausrichtung: Mitte

Abstand

Als Nächstes fügen wir den Abstandseinstellungen einige benutzerdefinierte Rand- und Abstandswerte hinzu.

• Oberer Rand:
  • Desktop: -150px
  • Tablet: -50px
  • Telefon: 0px
• Unterer Rand: 50px
• Obere Polsterung: 150px
• Untere Polsterung: 150px

Box Schatten

Und wir vervollständigen die Moduleinstellungen, indem wir einen subtilen Kastenschatten hinzufügen.

• Box Shadwo Blur Stärke: 30px
• Schattenfarbe: rgba(0,0,0,0.11)

2. Wenden Sie den Sticky-Effekt auf die Reihe an

Zeile in Abschnitt 1 öffnen

Nachdem wir nun die Grundlage für unser Design gelegt haben, ist es an der Zeit, den klebrigen Effekt anzuwenden. Dieser Sticky-Effekt hilft uns, den Stil zu ändern, wenn die Leute am Element vorbeiscrollen. Das Element, dem wir unseren Sticky-Effekt hinzufügen, ist die Zeile im ersten Abschnitt, die das Bild enthält.

Klebeeffekt anwenden

Es ist wichtig, sicherzustellen, dass das untere Sticky-Limit auf Abschnitt eingestellt ist. Die Anfangs- und Endpunkte unserer Zeile sind die gleichen wie die des Abschnitts, wodurch sichergestellt wird, dass die Zeile nicht wirklich klebrig wird, sondern klebrige Stile angewendet werden. Der Sticky Top Offset bestimmt, an welchem ​​Punkt der Übergang beginnt. Wenn dieser Wert beispielsweise null wäre, würde dies bedeuten, dass der obere Rand des Browsers den oberen Rand der Zeile berühren müsste, um den Übergang zu starten. Indem wir den Sticky Top Offset auf „300px“ setzen, erstellen wir diesen Übergang früher.

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

Stellen Sie sicher, dass der obere Versatz gleich über dem ersten Abschnitt ist

Da wir den Sticky Top Offset auf „300px“ gesetzt haben, benötigen wir dafür den Platz oben auf unserer Seite. Wenn Sie dieses Design in der Mitte Ihrer Seite verwenden, müssen Sie sich über diesen Schritt keine Gedanken machen. Wenn Sie diesen Ansatz jedoch oben auf Ihrer Seite verwenden, müssen Sie entweder den Sticky Top-Offset ändern oder oben genügend Platz hinzufügen. Wir fügen unserem ersten Abschnitt einen oberen Rand hinzu, um diesen Platz zu schaffen.

• Oberer Rand: 400px

3. Wenden Sie den Ken-Burn-Effekt auf das Bildmodul an

Nachdem unsere Zeile nun klebrig geworden ist, können wir damit beginnen, klebrige Stile auf die Zeile und alle ihre untergeordneten Elemente anzuwenden. Obwohl die Möglichkeiten endlos sind, zeigen wir Ihnen zwei verschiedene Beispiele und wie Sie diese erreichen. Um das Herumspielen mit den beiden unterschiedlichen Beispielen zu erleichtern, klonen wir beide Abschnitte einmal und platzieren sie unter den ersten.

Beispiel 1

Sticky Row-Einstellungen

Box Schatten

Um Beispiel Nr. 1 nachzubilden, das Sie in der Vorschau dieses Beitrags sehen konnten, öffnen Sie die Zeileneinstellungen und wenden Sie die folgenden Einstellungen für den Boxschatten an:

• Vertikale Position des Boxschattens: 0px
• Stärke der Box-Schattenausbreitung: 0px
• Schattenfarbe: rgba(0,0,0,0)

• Klebrige vertikale Position: 100px
• Klebrige Schattenfarbe: #ffdc91

Übergang

Fügen Sie auch in der Registerkarte "Erweitert" einen sanften Übergang hinzu.

• Übergangsdauer: 500ms
• Übergangsgeschwindigkeitskurve: Einfach

Einstellungen des Sticky Image Moduls

Maßstab transformieren

Öffnen Sie als Nächstes das Bildmodul und wenden Sie einen Transformationsskalierungseffekt in einem klebrigen Zustand an.

• Beides: 100%

• Beides klebrig: 130%

Übergang

Sorgen Sie für einen reibungslosen Übergang, indem Sie die Übergangseinstellungen des Moduls entsprechend ändern:

• Übergangsdauer: 1200ms
• Übergangsgeschwindigkeitskurve: Einfach

Beispiel #2

Sticky Row-Einstellungen

Transformieren Übersetzen

Auf zum zweiten Beispiel! Öffnen Sie die Zeileneinstellungen und wenden Sie die folgenden Transformationsübersetzungseinstellungen an:

• Rechts: 20%

• Klebriges Recht: 0%

Übergang

Ändern Sie auch die Übergangseinstellungen der Zeile.

• Übergangsdauer: 500ms
• Übergangsgeschwindigkeitskurve: Einfach

Einstellungen des Sticky Image Moduls

Filter

Öffnen Sie dann das Bildmodul und spielen Sie mit den Filtern im Standard- und Sticky-Zustand herum.

• Sättigung: 0%
• Helligkeit: 50%

• Klebrige Sättigung: 100%
• Klebrige Helligkeit: 100%

Übergang

Schließen Sie die Moduleinstellungen und dieses Tutorial ab, indem Sie die Übergangseinstellungen wie folgt ändern:

• Übergangsdauer: 500ms
• Übergangsgeschwindigkeitskurve: Einfach

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 Bildübergänge auslösen. Sobald die Leute am Bild vorbeiscrollen, ändern sich die Stile des Bildes, was zu einem schönen Übergang führt. Wir haben zwei verschiedene Beispiele behandelt, aber die Möglichkeiten sind endlos. 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.