So ändern Sie Stile beim Scrollen ohne Bewegung mit den Sticky-Optionen von Divi

Wenn Sie beim Erstellen einer neuen Website einen klaren Designstil bevorzugen, werden Sie wahrscheinlich einen Weg finden, Ihrer Website noch eine zusätzliche Dimension zu verleihen. In diesem Tutorial dreht sich alles darum. Wir zeigen Ihnen, wie Sie die Sticky-Optionen von Divi verwenden, um Sticky-Stile ohne Bewegung zu ändern. Konkret bedeutet dies, dass sich die Stile dieses Teils ändern, sobald Besucher an einem bestimmten Teil Ihrer Seite vorbeiscrollen, die Elemente jedoch an Ort und Stelle bleiben. Diese Art von Effekt ist vollständig auf das Nutzerverhalten ausgerichtet. Die Änderung der Sticky-Stile erfolgt nur, wenn die Leute daran vorbeiscrollen, was zu einem schönen Ergebnis führt. In diesem Tutorial zeigen wir Ihnen Schritt für Schritt, wie Sie dorthin gelangen. Sobald Sie den Ansatz verstanden haben, können Sie ihn in jeder Art von Design verwenden, das Sie erstellen! 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!

1. Elementstruktur erstellen

Neuen Abschnitt hinzufügen

Sichtweite

Beginnen Sie damit, der Seite, an der Sie gerade arbeiten, einen neuen Abschnitt hinzuzufügen. Öffnen Sie die Abschnittseinstellungen und blenden Sie die Überläufe in der Registerkarte Erweitert aus. Dadurch wird sichergestellt, dass keine horizontale Bildlaufleiste angezeigt wird.

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

Neue Zeile hinzufügen

Spaltenstruktur

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

Größe

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

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Spaltenhöhen ausgleichen: Ja
• Breite: 100%
• Maximale Breite: 2580px

Abstand

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

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

Spalte 1 Einstellungen

Abstand

Öffnen Sie dann die Einstellungen von Spalte 1 und wenden Sie einige benutzerdefinierte Abstandswerte für verschiedene Bildschirmgrößen an.

• Obere Polsterung:
  • Desktop: 200px
  • Tablet: 100px
  • Telefon: 80px
• Untere Polsterung:
  • Desktop: 200px
  • Tablet: 100px
  • Telefon: 80px

Z-Index

Erhöhen Sie auch den Z-Index dieser Spalte. Später im Tutorial erstellen wir eine horizontale Überlappung zwischen Spalte 1 und 2. Wir erhöhen den Z-Index, um sicherzustellen, dass die Module von Spalte 1 über den Modulen von Spalte 2 bleiben.

• Z-Index: 11

Spalte 2 Einstellungen

Hintergrundfarbe

Als Nächstes fügen wir Spalte 2 eine Hintergrundfarbe hinzu.

• Hintergrundfarbe: #f9f9f9

Abstand

Wir werden auch einige benutzerdefinierte Abstandswerte für verschiedene Bildschirmgrößen verwenden.

• Obere Polsterung:
  • Desktop: 200px
  • Tablet: 150px
  • Telefon: 100px
• Untere Polsterung:
  • Desktop: 200px
  • Tablet: 150px
  • Telefon: 100px

Spalte 3 Einstellungen

Abstand

Zu guter Letzt fügen wir Spalte 3 auch einige benutzerdefinierte Padding-Werte hinzu.

• Obere Polsterung:
  • Desktop: 200px
  • Tablet: 100px
  • Telefon: 50px
• Untere Polsterung:
  • Desktop: 200px
  • Tablet: 100px
  • Telefon: 50px
• Linke Polsterung: 8%
• Rechte Polsterung: 8%

Textmodul zu Spalte 1 hinzufügen

Kopie hinzufügen

Zeit zum Hinzufügen von Modulen, beginnend mit einem Textmodul in Spalte 1. Fügen Sie dem Inhaltsfeld eine Zahl hinzu.

Hintergrundfarbe

Ändern Sie als nächstes die Hintergrundfarbe.

• Hintergrundfarbe: #effef

Texteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die Texteinstellungen entsprechend:

• Textschriftart: Montserrat
• Textfarbe: #ffffff
• Textgröße: 100px
• Textzeilenhöhe: 1em
• Textausrichtung: Mitte

Größe

Ändern Sie als nächstes die Breite.

• Breite: 150px

Abstand

Fügen Sie dann eine benutzerdefinierte obere und untere Polsterung hinzu.

• Obere Polsterung: 20px
• Untere Polsterung: 20px

Position

Positionieren Sie auch das Modul neu.

• Position: Absolut
• Ort: Unten rechts
• Horizontaler Versatz: -5%

Textmodul zu Spalte 2 hinzufügen

H3- & H4-Kopie hinzufügen

Weiter zur zweiten Spalte. Dort fügen wir ein Textmodul mit H3- und H4-Kopie hinzu.

Texteinstellungen

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

• Textausrichtung: Mitte
• Textfarbe: Dunkel

H3-Texteinstellungen

Ändern Sie dann die H3-Texteinstellungen.

• Überschrift 3 Schriftart: Playfair Display
• Überschrift 3 Textausrichtung: Mitte
• Überschrift 3 Textgröße:
  • Desktop: 90px
  • Tablet: 70px
  • Telefon: 60px

H4-Texteinstellungen

Stylen Sie auch den H4-Text.

• Überschrift 4 Schriftart: Montserrat
• Überschrift 4 Schriftstärke: Leicht

Größe

Gehen Sie dann zu den Größeneinstellungen und wenden Sie eine Breite von "100%" an. Dies hilft beim nächsten Schritt, der Neupositionierung des Moduls.

• Breite: 100%

Position

Vervollständigen Sie die Moduleinstellungen, indem Sie zur Registerkarte Erweitert gehen und die Positionseinstellungen wie folgt ändern:

• Position: Absolut
• Ort: Unten links
• Vertikaler Versatz: 20px

Textmodul zu Spalte 3 hinzufügen

H5- und Absatzinhalt hinzufügen

Weiter zur dritten Spalte. Fügen Sie ein Textmodul mit H5- und Absatzinhalten Ihrer Wahl hinzu.

Texteinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die Schriftart in den Texteinstellungen.

• Textschriftart: Montserrat

H5 Texteinstellungen

Stylen Sie auch den H5-Text.

• Überschrift 5 Schriftart: Montserrat
• Überschrift 5 Schriftstärke: Fett
• Überschrift 5 Textgröße:
  • Desktop & Tablet: 23px
  • Telefon: 18px

2. Wichtige Änderungen zum Erstellen von Effekten

Abschnitt

Abschnittsauffüllung entfernen

Nachdem wir nun die Grundlage für unser Design geschaffen haben, können wir damit beginnen, den benutzerdefinierten Sticky-Style-Effekt zu erstellen, den Sie in der Vorschau dieses Beitrags sehen konnten. Der erste Schritt, um diesen Effekt zu erzielen, besteht darin, sicherzustellen, dass die oberen und unteren Padding-Werte Ihres Abschnitts Null sind. Dadurch können wir sicherstellen, dass sowohl der Abschnitt als auch die Zeile an derselben Stelle beginnen und enden. Dies ist wichtig, wenn wir in den nächsten Schritten die Sticky-Position zu unserer Zeile hinzufügen. Indem wir das Limit auf den unteren Rand des Abschnitts setzen, lassen wir keinen Platz für die Zeile, um sich zu verschieben. Die Reihe wird jedoch für diese paar Sekunden klebrig und hebt die geänderten Sticky-Stile in unserem Design hervor.

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

Reihe

Reihe klebrig machen

Öffnen Sie die Zeileneinstellungen und machen Sie die Zeile klebrig. Wie im vorherigen Schritt erwähnt, ist es wichtig, sicherzustellen, dass die untere klebrige Grenze unserer Zeile der Abschnitt ist. Da zwischen dem Ende der Reihe und dem Ende des Abschnitts kein Platz ist, bleibt die klebrige Reihe an Ort und Stelle.

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

Sticky Row Hintergrundfarbe

Es ist Zeit, einige klebrige Styles auf unsere Elemente anzuwenden! Beginnen Sie mit der Zeilenhintergrundfarbe.

• Hintergrundfarbe: #161616

Zeilenübergang

Um einen reibungslosen Übergang zu gewährleisten, verlängern wir die Übergangsdauer im erweiterten Tab der Zeile.

• Übergangsdauer: 500ms
• Übergangsgeschwindigkeitskurve: Einfach

Sticky Column 2 Hintergrundfarbe

Dann ändern wir die Hintergrundfarbe der klebrigen Spalte 2.

• Hintergrundfarbe: #262626

Textbaustein in Spalte 1

Klebrige Hintergrundfarbe

Wir werden auch die Hintergrundfarbe des Textmoduls in Spalte 1 ändern.

• Hintergrundfarbe: #ddc7b5

Klebrige Textfarbe

Zusammen mit der klebrigen Textfarbe.

• Textfarbe: #0a0a0a

Sticky Sizing

Und wir werden die Breite des Moduls in den Größeneinstellungen erhöhen.

• Breite: 105%

Übergang

Wir sorgen für einen reibungslosen Übergang, indem wir die Übergangsdauer des Moduls auf der Registerkarte „Erweitert“ ändern.

• Übergangsdauer: 500ms
• Übergangsgeschwindigkeitskurve: Einfach

Textbaustein in Spalte 2

Klebrige Textfarbe

Als nächstes haben wir das Textmodul in Spalte 2. Wir ändern die Textfarbe in einen klebrigen Zustand hell.

• Textfarbe: Hell

Textbaustein in Spalte 3

Klebrige Textfarbe

Gleiches gilt für das Textmodul in Spalte 3.

• Textfarbe: Hell

3. Abschnitt zur Wiederverwendung klonen

Nachdem wir nun den ersten Abschnitt abgeschlossen haben, einschließlich des Effekts zum Ändern von Sticky-Styles, können wir diesen Abschnitt beliebig oft wiederverwenden, indem wir ihn klonen.

Alle Kopien ändern

Stellen Sie sicher, dass Sie alle doppelten Kopien ändern.

Fügen Sie dem ersten Abschnitt einen oberen Rand und dem letzten Abschnitt einen unteren Rand hinzu

Und zu guter Letzt fügen wir dem ersten Abschnitt einen oberen Rand und dem letzten Abschnitt einen unteren Rand hinzu. Dies wird uns helfen, einen sofortigen Übergang zu verhindern, bevor die Leute mit dem Scrollen beginnen. Das ist es!

• Oberer Rand: 200px

• Unterer Rand: 200px

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 die Divi-Sticky-Optionen verwendet, um Sticky-Stile zu ändern, ohne Bewegung hinzuzufügen. Sobald Leute an einem bestimmten Teil Ihrer Seite vorbeiscrollen, ändern sich die Stile des Designs, wodurch dieser bestimmte Teil der Seite hervorgehoben wird. 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.