So stapeln Sie Zeilen beim Scrollen mit Divis Sticky Options

Seit Divi's Sticky-Optionen herausgekommen sind, haben wir Ihnen Möglichkeiten gezeigt, wie Sie die verschiedenen Funktionen in Ihren Website-Builds verwenden können, insbesondere in den Headern. Es gibt jedoch viele Möglichkeiten, wie Sie die Sticky-Optionen verwenden können, um die Benutzererfahrung auf Ihrer Website zu verbessern und Ihre Website zum Leuchten zu bringen. Im heutigen Tutorial zeigen wir Ihnen zum Beispiel, wie Sie mit Divis Sticky-Optionen Zeilen beim Scrollen stapeln. Sobald eine Reihe den oberen Rand Ihres Ansichtsfensters berührt, beginnt sie unterhalb der nächsten Reihe, was einen Stapeleffekt ergibt, der schön aussieht. Wir erstellen das Design von Grund auf neu und Sie können auch die JSON-Datei des Abschnitts 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 Reihenstapel-Layout KOSTENLOS herunter

Um das kostenlose Reihenstapellayout 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. Konzept für die erste Reihe erstellen

Neuen Abschnitt hinzufügen

Abstand

Im ersten Teil dieses Tutorials legen wir das Fundament für unsere erste Reihe. Sobald wir mit dem Styling der Elemente in der ersten Zeile fertig sind, können wir sie vollständig wiederverwenden, um den Zeilenstapeleffekt zu erzeugen. Fügen Sie der Seite, an der Sie gerade arbeiten, einen neuen Abschnitt hinzu. Öffnen Sie die Abschnittseinstellungen und wenden Sie einige benutzerdefinierte Abstandswerte für verschiedene Bildschirmgrößen an.

• Obere Polsterung:
  • Desktop: 100px
  • Tablet: 40px
  • Telefon: 25px
• Untere Polsterung:
  • Desktop: 100px
  • Tablet: 40px
  • Telefon: 25px

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 wenden Sie die folgenden Größeneinstellungen an:

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Spaltenhöhen ausgleichen: Ja
• Breite: 90%
• 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

Hintergrundfarbe

Öffnen Sie dann die Einstellungen von Spalte 1 und wenden Sie eine Hintergrundfarbe Ihrer Wahl an.

• Hintergrundfarbe: #2b343b

Hintergrundbild

Verwenden Sie auch ein Hintergrundbild. Wenn Sie die in diesem Tutorial angezeigten verwenden möchten, laden Sie den gezippten Ordner am Anfang des Tutorials herunter und laden Sie die Hintergrundbilder in Ihre Medienbibliothek hoch.

• Hintergrundbildgröße: Fit

Abstand

Wechseln Sie zur Registerkarte Design der Spalte und wenden Sie als nächstes die folgenden Abstandswerte auf verschiedene Bildschirmgrößen an:

• Obere Polsterung:
  • Desktop: 25%
  • Tablette: 40%
  • Telefon: 50%
• Untere Polsterung:
  • Desktop: 25%
  • Tablette: 40%
  • Telefon: 50%
• Linke Polsterung: 5%
• Rechte Polsterung: 5%

Spalte 2 Einstellungen

Hintergrundfarbe

Öffnen Sie dann die zweite Spalte und verwenden Sie auch dort eine Hintergrundfarbe.

• Hintergrundfarbe: #394751

Abstand

Zusammen mit einigen benutzerdefinierten Padding-Werten.

• Obere Polsterung: 13%
• Untere Polsterung: 13%
• Linke Polsterung: 8%
• Rechte Polsterung: 8%

Box Schatten

Und ein Kastenschatten.

• Vertikale Position des Kastenschattens: 20px
• Stärke der Box-Schattenunschärfe: 50px
• Schattenfarbe: rgba(0,0,0,0.14)

Textmodul zu Spalte 1 hinzufügen

H2-Inhalt hinzufügen

Zeit, Module hinzuzufügen, beginnend mit einem Textmodul in Spalte 1. Fügen Sie H2-Inhalte Ihrer Wahl in das Inhaltsfeld ein.

H2-Texteinstellungen

Wechseln Sie zur Registerkarte Design des Moduls und gestalten Sie die H2-Texteinstellungen entsprechend:

• Überschrift 2 Schriftart: Alata
• Überschrift 2 Schriftstärke: Fett
• Überschrift 2 Textausrichtung: Mitte
• Überschrift 2 Textfarbe: #ffffff
• Überschrift 2 Textgröße:
  • Desktop: 200px
  • Tablet: 150px
  • Telefon: 100px
• Überschrift 2 Buchstabenabstand: -1px

Position

Positionieren Sie das Modul auch im erweiterten Tab neu.

• Position: Absolut
• Ort: Oben links
• Vertikaler Versatz: 2%
• Horizontaler Versatz: 2%

Schaltflächenmodul zu Spalte 1 hinzufügen

Kopie hinzufügen

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

Tasteneinstellungen

Wechseln Sie zur Design-Registerkarte des Moduls und gestalten Sie die Schaltfläche entsprechend:

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 20px
• Schaltflächentextfarbe: #ffffff
• Schaltflächenhintergrundfarbe: #83a5bf
• Breite des Tastenrahmens: 0px
• Schaltflächenrandradius: 1px
• Schaltflächenschriftart: Alata

Abstand

Fügen Sie als nächstes einige benutzerdefinierte Abstandswerte hinzu.

• Obere Polsterung: 20px
• Untere Polsterung: 20px
• Linke Polsterung: 50px
• Rechte Polsterung: 50px

Position

Und positionieren Sie das Modul im erweiterten Tab neu.

• Position: Absolut
• Ort: Unten rechts

Textmodul Nr. 1 zu Spalte 2 hinzufügen

H3-Inhalt hinzufügen

Weiter zur zweiten Spalte. Fügen Sie ein erstes Textmodul mit H3-Inhalten Ihrer Wahl hinzu.

H3-Texteinstellungen

Wechseln Sie zur Registerkarte Design des Moduls und wenden Sie die folgenden H3-Textstile an:

• Überschrift 3 Schriftart: Alata
• Überschrift 3 Schriftstärke: Fett
• Überschrift 3 Textfarbe: #ffffff
• Überschrift 3 Textgröße: 40px

Trennmodul zu Spalte 2 hinzufügen

Sichtweite

Unter dem ersten Textmodul fügen wir ein Divider-Modul hinzu. Stellen Sie sicher, dass die Option "Teiler anzeigen" aktiviert ist.

• Teiler anzeigen: Ja

Leitungseinstellungen

Wechseln Sie zur Design-Registerkarte des Moduls und ändern Sie die Linienfarbe.

• Linienfarbe: #f3f0ee

Größe

Ändern Sie auch die Größeneinstellungen.

• Teilergewicht: 5px
• Breite: 19%
• Höhe: 5px

Abstand

Und vervollständigen Sie die Moduleinstellungen, indem Sie den Abstandseinstellungen einen unteren Rand hinzufügen.

• Untere Marge: 20%

Textmodul #2 zu Spalte 2 hinzufügen

Inhalt hinzufügen

Fügen Sie direkt unter dem Trennmodul ein weiteres Textmodul hinzu. Geben Sie einen Beschreibungsinhalt Ihrer Wahl ein.

Texteinstellungen

Gestalten Sie den Text des Moduls entsprechend:

• Textschriftart: Montserrat
• Textfarbe: #ffffff
• Textgröße:
  • Desktop: 15px
  • Tablet & Telefon: 14px
• Textzeilenhöhe: 2em

2. Verwandeln Sie die Reihe in ein Stapelelement

Zeileneinstellungen

Z-Index

Nachdem wir nun unsere erste Reihe eingerichtet haben, ist es an der Zeit, die Sticky Row Stacking-Einstellungen anzuwenden. Wir wenden diese Einstellungen an, bevor wir unsere Zeile zur Wiederverwendung klonen, damit der Stapeleffekt automatisch erfolgt. Öffnen Sie die Zeileneinstellungen, gehen Sie zur Registerkarte Erweitert und wenden Sie einen z-Index von 1 an. Dieser z-Index hilft uns sicherzustellen, dass jede nächste Zeile über der vorherigen platziert wird.

• Z-Index: 1

Sticky-Einstellungen

Dann gehen wir zu den Scroll-Effekt-Einstellungen und wenden die folgenden Sticky-Einstellungen an:

• Klebrige Position:
  • Desktop: Bleiben Sie oben
  • Tablet & Telefon: Nicht kleben
• Untere Klebrigkeitsgrenze: Abschnitt
• Versatz von umgebenden klebrigen Elementen: Nein

3. Stapelreihe im selben Abschnitt wiederverwenden

Zeile klonen x3

Nachdem unsere Sticky-Optionen angewendet wurden, können wir die gesamte Zeile beliebig oft wiederverwenden.

Allgemeine Änderungen

Alle Kopien ändern

Stellen Sie sicher, dass Sie die Kopie in jedem Duplikat ändern

Ändern Sie die Hintergrundfarben und Bilder von Spalte 1

Zusammen mit den Hintergrundfarben und -bildern von Spalte 1.

• Duplikat 1: #edc1b6
• Duplikat 2: #efe7e2
• Duplikat 3: #f7f6f4

Ändern Sie die Hintergrundfarben von Spalte 2

Wir verwenden auch unterschiedliche Farben für die zweite Spalte jeder doppelten Zeile.

• Duplikat 1: #ffd1c1
• Duplikat 2: #fff8f2
• Duplikat 3: #fffaf7

Schaltflächenhintergrundfarben ändern

Als Nächstes ändern wir die Hintergrundfarben der Schaltflächen in jeder doppelten Zeile.

• Duplikat 1: #c18a7a
• Duplikat 2: #bab5b2
• Duplikat 3: #c98f7d

Änderungen an Zeilen mit hellen Hintergrundfarben

Textfarben ändern

Und zu guter Letzt ändern wir die Textfarbe für jedes Textmodul in den Zeilen mit einer helleren Hintergrundfarbe. Das ist es!

• Textfarbe: #2b343b

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 in Ihrem Seitendesign kreativ werden. Genauer gesagt haben wir Ihnen gezeigt, wie Sie Reihen stapeln, um ein ansprechendes Design und eine ansprechende Benutzererfahrung zu schaffen. Wir haben ein schönes Designbeispiel von Grund auf neu erstellt und 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.