So fügen Sie Navigationslinks für klebrige Seiten (Weiter, Zurück, Erste, Letzte) zu Divi-Abschnitten hinzu

Manchmal ist es bequemer, durch den Seiteninhalt zu navigieren, indem Sie auf Schaltflächen klicken, anstatt zu scrollen. Dies gilt insbesondere für One-Pager oder wenn Sie bestimmte sequenzielle Abschnitte auf einer Seite haben, die eine optimale Zugänglichkeit für Benutzer gewährleisten. Das Hinzufügen von Sticky-Page-Navigationslinks am Ende von Abschnitten kann eine einzigartige Alternative zum ständigen Scrollen von Benutzern oder zum Einfügen von Ankerlinks in Ihr primäres Kopfzeilenmenü sein.

In diesem Tutorial zeigen wir Ihnen, wie Sie Navigationslinks für Sticky-Seiten (nächste, vorherige, erste, letzte) zu einer Seite in Divi hinzufügen. Auf diese Weise können Sie problemlos zu bestimmten Abschnitten einer Seite navigieren.

Lass uns anfangen!

Vorgeschmack

Hier ist ein kurzer Blick auf das Design, das wir in diesem Tutorial erstellen werden.

Beachten Sie, wie sich die Sticky-Navigationslinks ändern, wenn Sie auf der Seite nach unten scrollen.

Beachten Sie, wie einfach es ist, zu jedem Abschnitt zu navigieren, indem Sie auf die Navigationslinks klicken.

Und so sieht das Design auf dem Handy aus.

Und hier ist ein Codepen, der die Kernfunktionalität demonstriert.

Laden Sie das Layout KOSTENLOS herunter

Um die Designs aus diesem Tutorial 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!

Um das Abschnittslayout in Ihre Divi-Bibliothek zu importieren, navigieren Sie zur Divi-Bibliothek.

Klicken Sie auf die Schaltfläche Importieren.

Wählen Sie im Portabilitäts-Popup die Registerkarte Import und wählen Sie die Download-Datei von Ihrem Computer.

Klicken Sie dann auf die Schaltfläche Importieren.

Sobald dies erledigt ist, wird das Abschnittslayout im Divi Builder verfügbar sein.

Kommen wir zum Tutorial, ja?

Was Sie brauchen, um loszulegen

Um zu beginnen, müssen Sie Folgendes tun:

1. Falls noch nicht geschehen, installieren und aktivieren Sie das Divi-Theme.
2. Erstellen Sie eine neue Seite in WordPress und verwenden Sie den Divi Builder, um die Seite im Frontend zu bearbeiten (visueller Builder).
3. Wählen Sie die Option „Von Grund auf neu erstellen“.

Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.

Hinzufügen von Sticky Page Navigation-Links zu Divi-Abschnitten

Erstellen des oberen Abschnitts

Standardmäßig gibt es einen regulären Abschnitt, der im Divi Builder verwendet werden kann. Öffnen Sie unter Verwendung des standardmäßigen regulären Abschnitts die Abschnittseinstellungen und nehmen Sie die untere Polsterung wie folgt heraus:

• Polsterung: 0px unten

Zeileneinstellungen

Fügen Sie dem Abschnitt eine einspaltige Zeile hinzu.

Aktualisieren Sie dann die Designeinstellungen für die Zeile wie folgt:

• Breite: 100%
• Max. Breite: 80vw (Desktop, Tablet), 95vw (Telefon)

Abschnittsüberschrift

Um den Abschnittstitel zu erstellen, fügen Sie zunächst der Zeile/Spalte einen neuen Textbaustein hinzu.

Aktualisieren Sie dann den Fließtext mit dem folgenden H2-Titel:

<h2>Top</h2>

Aktualisieren Sie auf der Registerkarte Design die Texteinstellungen für die H2-Überschrift wie folgt:

• Wählen Sie die Registerkarte H2
• Überschrift 2 Schriftart: Montserrat
• Überschrift 2 Schriftstärke: Schwer
• Überschrift 2 Schriftstil: TT
• Überschrift 2 Textausrichtung: Mitte
• Überschrift 2 Textgröße: 8vw (Desktop, Tablet), 61,36px (Telefon)

Abschnitt 1 erstellen

Als Nächstes erstellen wir unseren ersten Abschnitt, der klebrige Navigationslinks enthält. Um Abschnitt 1 zu erstellen, duplizieren Sie den oberen Abschnitt und beschriften Sie den duplizierten Abschnitt entsprechend in der Ebenenansicht.

Abschnitt 1 Hintergrundfarbe

Öffnen Sie die Einstellungen für Abschnitt 1 und aktualisieren Sie die Hintergrundfarbe:

• Hintergrundfarbe: #fec0f4

Abschnitt 1 CSS-ID für die Ankerlink-Navigation

Um mit unseren Ankerlinks auf diesen Abschnitt zu verlinken, müssen wir eine CSS-ID hinzufügen. Fügen Sie auf der Registerkarte "Erweitert" die folgende CSS-ID hinzu:

• CSS-ID: eins

Titeltext aktualisieren

Aktualisieren Sie dann den Titeltext im Textbaustein auf „Abschnitt 1“.

Sticky Row für Abschnitt 1 erstellen

Sobald Abschnitt und Titel aktualisiert sind, erstellen wir eine klebrige Zeile, die schließlich unsere Navigationslinks enthält. Fügen Sie dazu eine neue einspaltige Zeile unter der bestehenden Zeile in Abschnitt 1 hinzu.

Da unser Abschnitt keine untere Polsterung hat, sollte die Reihe ganz unten im Abschnitt sitzen.

Sticky Row-Einstellungen

Damit die Zeile kleben bleibt, müssen wir die Zeileneinstellungen aktualisieren.

Sticky-Optionen

Aktualisieren Sie auf der Registerkarte "Erweitert" die Optionen für die Sticky-Position wie folgt:

• Klebrige Position: Nach unten kleben
• Oberes Sticky-Limit: Abschnitt
• Versatz von umgebenden klebrigen Elementen: NEIN

Dadurch wird sichergestellt, dass die klebrige Zeile innerhalb des Abschnitts enthalten ist.

Designeinstellungen

Aktualisieren Sie auf der Registerkarte "Design" Folgendes:

• Benutzerdefinierte Dachrinnenbreite verwenden: JA
• Dachrinnenbreite: 1
• Breite: 100%
• Max. Breite: 25vw (Desktop, Tablet), 50% Telefon
• Zeilenausrichtung: rechts (Desktop, Tablet), links (Telefon)
• Padding: 0px oben, 0px unten

Um die Zeile (zusammen mit den darin enthaltenen Schaltflächen) auszublenden, verschieben wir die Zeile mit den Transformationsübersetzungseinstellungen hinter den Abschnitt darunter. Dann verschieben wir die Reihe im klebrigen Zustand nach oben in die Ansicht. Dadurch wird sichergestellt, dass die Schaltflächen nur im klebrigen Zustand sichtbar sind.

Klicken Sie dazu auf das Sticky-Symbol (Miniaturansicht), wenn Sie mit der Maus über den Titel der Transformationsoption fahren, um die Sticky-Registerkarte zu aktivieren. Aktualisieren Sie dann die Transformationsoptionen wie folgt:

• Transformieren Y-Achse übersetzen (Desktop): 100%
• Transformieren Y-Achse übersetzen (klebrig): 0%

Positionsversatz

Schließlich werden wir eine weitere Stick-Reihe für die erste und letzte Schaltfläche haben, die unten rechts im Fenster kleben. Also müssen wir diese Stickreihe nach links verschieben.

Um die Sticky-Reihe zu verschieben, gehen Sie zur Registerkarte „Erweitert“ und aktualisieren Sie die Positions-Offset-Optionen wie folgt:

• Offset-Ursprung: oben rechts
• Horizontaler Versatz: 25vw (Desktop, Tablet), 0px (Telefon)

Hinweis: Der Offset auf dem Telefon ist auf 0px eingestellt, da die Zeilenausrichtung nach links eingestellt wird und die Breite 50 % beträgt.

CSS für Sticky Row-Spalten

Um sicherzustellen, dass unsere Schaltflächen perfekt nebeneinander und vertikal ausgerichtet sind, werden wir einen kleinen Ausschnitt aus benutzerdefiniertem CSS hinzufügen, um die Schaltflächen in ein CSS-Raster-Layout einzufügen.

Fügen Sie auf der Registerkarte "Erweitert" das folgende CSS zum Hauptelement hinzu:

display:grid;
grid-template-columns:50% 50%;

Hinzufügen von Trennzeichen und Weiter-Schaltfläche zu Sticky Row (Abschnitt 1)

Jetzt ist es an der Zeit, unsere Schaltflächen zur Spalte hinzuzufügen. Für diesen ersten Abschnitt benötigen wir nur einen Weiter-Button. Wir brauchen also einen Teiler, der als Platzhalter für die linke Schaltfläche dient.

Teiler

Fügen Sie der Spalte eine neue Trennlinie hinzu.

Stellen Sie dann die Option Teiler anzeigen auf „NEIN“.

Nächster Knopf

Fügen Sie unter dem Trennmodul ein Tastenmodul hinzu.

Aktualisieren Sie dann die Einstellungen für den Schaltflächeninhalt:

• Schaltflächentext: Weiter
• Link-URL der Schaltfläche: #two

Die URL „#two“ springt zum nächsten Abschnitt, den wir mit der CSS-ID „two“ erstellen.

Aktualisieren Sie auf der Registerkarte "Design" Folgendes:

• Tastenausrichtung: Mitte
• Benutzerdefinierte Stile für Schaltfläche verwenden: JA
• Schaltflächentextgröße: 2.1vw (Desktop, Tablet), 16.1px (Telefon)
• Schaltflächentextfarbe: #000000
• Schaltflächenhintergrund: #eeeeee
• Breite des Tastenrahmens: 0px
• Schaltflächensymbol: Pfeil nach unten (siehe Screenshot)
• Nur Symbol beim Hover für Schaltfläche anzeigen: NEIN

• Marge: 2% richtig

Um sicherzustellen, dass die Schaltfläche die gesamte Breite der CSS-Rasterspalte umfasst, fügen Sie dem Hauptelement das folgende benutzerdefinierte CSS hinzu:

display:block !important; width: 100%;

Abschnitt 2 erstellen

Nachdem wir Abschnitt 1 abgeschlossen haben, duplizieren Sie Abschnitt 1, um Abschnitt 2 zu erstellen und die Beschriftung in der Ebenenansicht entsprechend zu aktualisieren.

Abschnitt 2 Hintergrundfarbe und Titeltext aktualisieren

Aktualisieren Sie als Nächstes die Hintergrundfarbe des Abschnitts:

• Hintergrundfarbe: #8dc6c1

Aktualisieren Sie dann den Titeltext so, dass er im Textmodul der oberen Zeile „Abschnitt 2“ lautet.

Abschnitt 2 CSS-ID aktualisieren

Aktualisieren Sie auf der Registerkarte "Erweitert" den Abschnitt mit einer neuen CSS-ID:

• CSS-ID: zwei

Hinzufügen der Schaltflächen "Weiter" und "Zurück" zur Sticky Row (Abschnitt 2)

Löschen Sie in der klebrigen Reihe von Abschnitt 2 das Trennmodul und duplizieren Sie die Schaltfläche Weiter, sodass Sie zwei Schaltflächen haben.

Link-URL für die nächste Schaltfläche aktualisieren

Öffnen Sie die Einstellungen für die erste/linke Weiter-Schaltfläche und aktualisieren Sie die Schaltflächenverknüpfung wie folgt:

• Link-URL der Schaltfläche: #drei

Die URL „#three“ springt zum nächsten Abschnitt, den wir mit der CSS-ID „three“ erstellen.

Vorherigen Schaltflächentext und Link-URL hinzufügen

Um die Zurück-Schaltfläche zu erstellen, öffnen Sie die Einstellungen für die zweite/rechte Schaltfläche und aktualisieren Sie Folgendes:

• Schaltflächentext: Zurück
• Link-URL der Schaltfläche: #one

Die URL „#one“ springt zurück zum Abschnitt mit der CSS-ID „one“.

Vorheriges Schaltflächensymbol hinzufügen

Aktualisieren Sie dann das Symbol:

• Schaltflächensymbol: Pfeil nach oben (siehe Screenshot)

Abschnitt 3 erstellen

Nachdem wir Abschnitt 2 abgeschlossen haben, duplizieren Sie Abschnitt 2, um Abschnitt 3 zu erstellen, und aktualisieren Sie die Beschriftung in der Ebenenansicht entsprechend.

Abschnitt 3 Hintergrundfarbe und Titeltext aktualisieren

Fügen Sie dem Abschnitt eine neue Hintergrundfarbe hinzu:

• Hintergrundfarbe: #9fa5f4

Aktualisieren Sie dann den Titeltext so, dass er im Textmodul der oberen Zeile „Abschnitt 3“ lautet.

Abschnitt 3 CSS-ID aktualisieren

Aktualisieren Sie auf der Registerkarte "Erweitert" den Abschnitt mit einer neuen CSS-ID:

• CSS-ID: drei

Fügen Sie Teiler und Zurück-Schaltfläche zu Sticky Row hinzu (Abschnitt 3)

Trenner hinzufügen und Weiter-Schaltfläche löschen

Wir könnten fortfahren und so viele Abschnitte wie nötig erstellen, um die Schaltflächen Weiter und Zurück einzuschließen. Aber für dieses Beispiel machen wir Abschnitt 3 zum letzten Abschnitt mit Navigationslinks.

Da wir also keinen Next-Button benötigen, löschen Sie den Next-Button und ersetzen Sie ihn durch einen Teiler, wie wir es in Abschnitt 1 getan haben.

Vorherige Schaltflächenlink-URL aktualisieren

Öffnen Sie dann die Einstellungen für die Schaltfläche Zurück und aktualisieren Sie die Link-URL:

• Link-URL der Schaltfläche: #two

Die URL „#two“ springt zurück zum Abschnitt mit der CSS-ID „two“.

Erstellen des unteren Abschnitts

Nachdem nun 3 Abschnitte mit ihrer Sticky-Zeilen-Navigation und Ankerlink-Funktionalität abgeschlossen sind, erstellen wir einen unteren Abschnitt, der als Abschnitt der Seite dient, der keine Next/Prev-Sticky-Navigation enthält. Dies soll demonstrieren, ob es zusätzliche Abschnitte auf der Seite gibt, die möglicherweise keine Sticky-Navigation benötigen.

Um den unteren Abschnitt zu erstellen, duplizieren Sie einfach den oberen Abschnitt und ziehen Sie ihn unter Abschnitt 3.

Aktualisieren Sie dann den Titeltext, um „Unten“ zu lesen.

Erstellen des klebrigen unteren Abschnitts

Für unseren letzten Schritt müssen wir einen klebrigen Abschnitt erstellen, der am unteren Rand der Seite haftet und unsere ersten und letzten Navigationslinks (Anker) enthält. Dieser Abschnitt muss sich am unteren Rand der Seite befinden, wenn die Navigationslinks beim Scrollen in allen Abschnitten der Seite angezeigt werden sollen.

Erstellen Sie unter dem unteren Abschnitt einen neuen regulären Abschnitt.

Aktualisieren Sie dann die Schnittbeschriftung in der Ebenenansicht entsprechend (z. B. „Sticky Bottom Section“).

Zeile für erste und letzte Navigationslinks erstellen

Um unserer Seite mit Abschnitten mehr Navigationsfunktionen hinzuzufügen, erstellen wir zwei zusätzliche Schaltflächen (oder Ankerlinks), die zum ersten (Abschnitt 1) ​​und letzten (Abschnitt 3) Abschnitt auf der Seite springen.

Duplizieren Sie die Sticky Row in Abschnitt 2 und ziehen Sie sie in den Sticky Bottom Section

Um die Zeile für unsere ersten und letzten Navigationslinks zu erstellen, können wir die klebrige Zeile (Zeile 2) aus Abschnitt 2 duplizieren und in den neuen klebrigen unteren Abschnitt ziehen.

Zeileneinstellungen aktualisieren

Für diesen letzten Abschnitt werden wir den gesamten Abschnitt sticky machen, damit wir die Sticky-Einstellungen, die wir von unseren doppelten Zeileneinstellungen geerbt haben, herausnehmen und ihm stattdessen eine absolute Position zuweisen können.

Öffnen Sie die Zeileneinstellungen und aktualisieren Sie Folgendes:

Aktualisieren Sie als Nächstes die Positionsoptionen wie folgt:

• Position: Absolut
• Ort: unten rechts
• Horizontaler Versatz: 0px
• Klebrige Position: Nicht kleben

Setzen Sie auf der Registerkarte Entwurf die Transformationsoptionen für die Zeile zurück.

Fügen Sie erste und letzte Schaltflächen für den klebrigen unteren Abschnitt hinzu

Um die erste Schaltfläche zu erstellen, öffnen Sie die Einstellungen für die Schaltfläche links und aktualisieren Sie Folgendes:

• Schaltflächentext: Zuerst
• Link-URL der Schaltfläche: #one

Aktualisieren Sie dann das Schaltflächensymbol in einen anderen Aufwärtspfeil.

Um die letzte Schaltfläche zu erstellen, öffnen Sie die Einstellungen für die Schaltfläche rechts und aktualisieren Sie Folgendes:

• Schaltflächentext: Zuletzt
• Link-URL der Schaltfläche: #drei

Aktualisieren Sie dann das Schaltflächensymbol in einen anderen Abwärtspfeil.

Abschnittseinstellungen für klebrigen unteren Abschnitt aktualisieren

Öffnen Sie als Nächstes die Abschnittseinstellung und aktualisieren Sie Folgendes:

• Breite: 100 %;
• Höhe: 0px;
• Polsterung: 0px oben, 0px rechts

Dies stellt grundsätzlich sicher, dass der Abschnitt keinen tatsächlichen Platz auf der Seite einnimmt. Da die Zeile jedoch eine absolute Position hat, wird sie weiterhin über dem Abschnitt angezeigt.

Zuletzt aktualisieren Sie auf der Registerkarte "Erweitert" Folgendes:

• Vertikaler Überlauf: sichtbar
• Horizontaler Überlauf: sichtbar
• Klebrige Position: Nach unten kleben
• Obere Klebrigkeitsgrenze: Körperbereich
• Versatz von umgebenden klebrigen Elementen: NEIN

Endergebnis

Beachten Sie, wie sich die Sticky-Navigationslinks ändern, wenn Sie auf der Seite nach unten scrollen.

Beachten Sie, wie einfach es ist, zu den einzelnen Abschnitten zu navigieren, indem Sie auf die Navigationslinks klicken.

Und so sieht das Design auf dem Handy aus.

Abschließende Gedanken

Die Navigationslinks für Sticky-Seiten, die wir in diesem Tutorial erstellt haben, sollten für diejenigen nützlich sein, die nach einer effektiven Alternative zum herkömmlichen Scrollen suchen oder Ankerlinks in Ihren globalen Header aufnehmen. Außerdem können Sie die Abschnitte ganz einfach duplizieren und die Ankerlinks (und die entsprechenden CSS-IDs für jeden Abschnitt) aktualisieren, um mehr Inhalt zu erstellen.

Um optimale Ergebnisse zu erzielen, sollte jeder Abschnitt über genügend Inhalt verfügen, um über die Browserhöhe hinauszugehen. Wenn nicht, werden diese Ankerlinks möglicherweise nicht klebrig (oder sichtbar). Eine einfache Möglichkeit, dies sicherzustellen, besteht darin, jedem Ihrer Abschnitte eine Mindesthöhe von 100 Vh zuzuweisen. Wenn Ihnen das nicht gefällt, können Sie die Sticky-Option transform translate für jede der Sticky-Zeilen jederzeit entfernen, damit die Schaltflächen sichtbar bleiben.

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!