So erstellen Sie eine interaktive Liste beim Scrollen mit Divis Sticky Options

Mit den Sticky-Optionen von Divi können Sie den von Ihnen erstellten und gestalteten Seiten mühelos Interaktionen hinzufügen. Wenn Sie nach einer Möglichkeit suchen, mehrere Elemente zu erwähnen, ohne nur eine statische Liste zu erstellen, wird Ihnen dieses Tutorial gefallen. Heute zeigen wir Ihnen, wie Sie mit den Sticky-Optionen von Divi eine interaktive Liste beim Scrollen erstellen. Während die Leute im Abschnitt nach unten scrollen, werden der Liste auf der linken Seite verschiedene Elemente hinzugefügt. Das hilft, den Überblick zu behalten. Sie können auch die kostenlose JSON-Datei 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!

Elementstruktur erstellen

Neuen Abschnitt hinzufügen

Hintergrundfarbe

Beginnen Sie damit, der Seite, an der Sie gerade arbeiten, einen neuen Abschnitt hinzuzufügen. Fügen Sie dem Abschnitt eine Hintergrundfarbe hinzu.

• Hintergrundfarbe: #f2f2f2

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:

• Breite: 100%
• Maximale Breite: 100%

Spalte 1 Hintergrundfarbe

Öffnen Sie dann die Einstellungen von Spalte 1 und fügen Sie eine Hintergrundfarbe hinzu.

• Hintergrundfarbe: #f2f2f2

Spalte 1 Abstand

Ändern Sie als Nächstes die Abstandseinstellungen der Spalte.

• Obere Polsterung:
  • Tablet: 20px
  • Telefon: 20px
• Untere Polsterung:
  • Tablet: 20px
  • Telefon: 20px
• Linke Polsterung: 3%
• Rechte Polsterung: 3%

Spalte 1 Z-Index

Und erhöhen Sie den Z-Index der Spalte auf der Registerkarte "Erweitert".

• Z-Index: 12

Textmodul Nr. 1 zu Spalte 1 hinzufügen

Inhalt hinzufügen

Zeit, Module hinzuzufügen, beginnend mit einem ersten Textmodul in Spalte 1. Fügen Sie Inhalte Ihrer Wahl hinzu.

Texteinstellungen

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

• Textschrift: Playfair Display
• Schriftstärke des Textes: Fett
• Textschriftart: Kursiv
• Textfarbe: #bfbfbf
• Textgröße:
  • Desktop: 2vw
  • Tablet: 5vw
  • Telefon: 8vw
• Textzeilenhöhe: 1em

Textmodul #2 zu Spalte 2 hinzufügen

H3-Inhalt hinzufügen

Fügen Sie der Spalte mit H3-Inhalten Ihrer Wahl ein weiteres Textmodul hinzu.

H3-Texteinstellungen

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die H3-Texteinstellungen wie folgt:

• Überschrift 3 Schriftart: Playfair Display
• Überschrift 3 Schriftstärke: Fett
• Überschrift 3 Textfarbe: #000000
• Überschrift 3 Textgröße:
  • Desktop: 3vw
  • Tablet: 10vw
  • Telefon: 12vw

Abstand

Fügen Sie als nächstes einen benutzerdefinierten oberen und unteren Rand hinzu.

• Obere Marge: 2vh
• Unterer Rand: 2vh

Maßstab transformieren

Wenden Sie dann einige benutzerdefinierte Transformationsskalierungseinstellungen an.

• Beides: 300%

Transformieren Übersetzen

Und vervollständigen Sie die Moduleinstellungen, indem Sie die folgenden Transformationsübersetzungseinstellungen anwenden:

• Unten: 30%

Trennmodul zu Spalte 1 hinzufügen

Sichtweite

Das letzte Modul, das wir in Spalte 1 benötigen, ist ein Divider-Modul. Stellen Sie sicher, dass die Option "Teiler anzeigen" aktiviert ist.

• Teiler anzeigen: Ja

Leitung

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

• Linienfarbe: #000000
• Linienstil: Solid
• Linienposition: Oben

Größe

Ändern Sie auch die Größeneinstellungen des Moduls.

• Teilergewicht: 4px
• Teilerhöhe: 4px

Bildmodul zu Spalte 2 hinzufügen

Bildbox leer lassen

In Spalte 2 ist das erste Modul, das wir hinzufügen, ein Image-Modul. Lassen Sie das Bildfeld leer.

Hintergrundbild

Verwenden Sie stattdessen ein Hintergrundbild.

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

Abstand

Und damit das Hintergrundbild angezeigt werden kann, ändern wir die Abstandseinstellungen wie folgt:

• Oberer Rand:
  • Desktop: 15vh
  • Tablet & Telefon: 0vh
• Obere Polsterung: 33vh
• Untere Polsterung: 33vh

Textmodul zu Spalte 2 hinzufügen

Inhalt hinzufügen

Das nächste und letzte Modul, das wir brauchen, ist ein Textmodul unterhalb des Bildmoduls. Fügen Sie einen Beschreibungsinhalt Ihrer Wahl hinzu.

Texteinstellungen

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

• Textschriftart: Kabine
• Textfarbe: #000000
• Textgröße:
  • Desktop: 1.2vw
  • Tablet: 2.3vw
  • Telefon: 3.4vw
• Textzeilenhöhe: 1,6em

Abstand

Vervollständigen Sie die Moduleinstellungen, indem Sie die Abstandseinstellungen des Moduls entsprechend ändern:

• Linke Polsterung:
  • Tablet & Telefon: 5%
• Rechte Polsterung: 5%

Klebeeffekte anwenden

Spalte 1 klebrig machen

Nachdem nun alle Elemente vorhanden sind, können wir mit der Anwendung der Sticky-Einstellungen beginnen. Öffnen Sie die Einstellungen von Spalte 1 und verwenden Sie die folgenden responsiven Sticky-Einstellungen auf der Registerkarte "Erweitert":

• Klebrige Position: Bleiben Sie oben
• Untere Klebrigkeitsgrenze
  • Desktop: Abschnitt
  • Tablet & Telefon: Reihe
• Versatz von umgebenden klebrigen Elementen:
  • Desktop: Ja
  • Tablet & Telefon: Nein
• Übergangsstandard- und Sticky-Stile: Ja

Textmodul #1 in Spalte #1: Sticky Settings

Höhe

Nachdem Spalte 1 nun klebrig geworden ist, können wir damit beginnen, einige klebrige Einstellungen auf die Elemente in dieser Spalte anzuwenden. Wir beginnen mit der Höhe des ersten Textmoduls.

• Höhe: 0px
• Klebrige Höhe: Auto

Opazität

Wir ändern auch die Deckkraft.

• Deckkraft: 0%
• Klebrige Deckkraft: 100%

Textmodul #2 in Spalte 1: Sticky Settings

Maßstab transformieren

Als Nächstes öffnen wir das zweite Textmodul in Spalte 1. Bringen Sie die Transformationsskalierungswerte in einem klebrigen Zustand auf „100%“.

• Beides klebrig: 100%

Transformieren Übersetzen

Ändern Sie auch die Übersetzungseinstellungen für die Sticky-Transformation.

• Klebriger Boden: 0%

Übergang

Und vervollständigen Sie die Moduleinstellungen, indem Sie die Übergangsdauer auf der Registerkarte Erweitert erhöhen.

• Übergang: 1000ms

Teilermodul: Sticky-Einstellungen

Maximale Breite

Zu guter Letzt werden wir auch die maximale Breite des Divider-Moduls ändern.

• Maximale Breite: 0px
• Klebrige maximale Breite: 120px

Zeile zweimal klonen

Sobald Ihre erste Zeile fertiggestellt ist, können Sie sie zweimal klonen.

Alle Inhalte und Bilder ändern

Stellen Sie sicher, dass Sie alle Inhalte und Bilder ä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 eine interaktive Liste beim Scrollen erstellen. Während die Leute im Abschnittsdesign nach unten scrollen, werden auf der linken Seite verschiedene Elemente Ihrer Liste gesammelt. Dies gibt einen strukturierten Überblick und hilft Ihnen, ein interaktives Design zu erstellen. Sie können diesen Ansatz für jede Art von Liste verwenden, die Sie auf Ihren Seiten teilen möchten! 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.