So erstellen Sie mit Divi . eine reaktionsschnelle feste Seitenleiste mit Smooth-Scrolling-Ankerlinks

Sidebars sind nicht mehr so ​​beliebt wie früher. In vielen Fällen lenken sie eher ab, als dass sie hilfreich sind. Aber manchmal ist eine Seitenleiste durchaus sinnvoll, insbesondere bei umfangreichen Inhalten. Deshalb habe ich mir vorgenommen, eine Seitenleiste zu erstellen, die sehr viel Sinn macht.

Heute zeige ich Ihnen, wie Sie mit dem Divi Builder eine reaktionsschnelle feste (oder klebrige) Seitenleiste mit reibungslos scrollenden Ankerlinks (oder Sprunglinks) erstellen können. Da die Seitenleiste sichtbar bleibt und die Ankerlinks reibungslos zu verschiedenen Abschnitten der Seite scrollen, bleibt die Seitenleiste mit dem Inhalt verbunden, was sie zu einer hilfreichen UX-Funktion macht. Wie eine Dokumentgliederung macht diese Kombination Ihren Webseiteninhalt zugänglicher und leichter lesbar. Es ist eine erfrischende Lösung für diese langen Scroll-Seiten.

Hör zu!

Vorgeschmack

Hier ist ein kleiner Vorgeschmack auf das, was wir gemeinsam aufbauen werden.

Das Konzept

Für diejenigen unter Ihnen, die genauso viel in Google Docs leben wie ich, kennen Sie dieses hilfreiche Dokumentgliederungstool, mit dem Sie ganz einfach eine feste Seitenleiste mit einer anklickbaren Gliederung bereitstellen können, die zu den verschiedenen Überschriften in Ihrem Dokument springt. Ich liebe es, weil es mir hilft, Informationen viel schneller zu finden. Ich dachte, es wäre cool, dieselbe Funktion auf Ihre Website zu bringen.

Was Sie brauchen, um loszulegen

Für dieses Tutorial brauchst du nur Divi! Wir werden auch die Rezeptseite aus dem Food Recipes Layout Pack verwenden, die über den Divi Builder frei zugänglich ist.

Hinzufügen des Layouts zu Ihrer Seite

Abonnieren Sie unseren Youtube-Kanal

Um zu beginnen, erstellen Sie eine neue Seite und stellen Sie den Divi Builder bereit. Wählen Sie die Option „Ein vorgefertigtes Layout auswählen“. Wählen Sie im Popup-Fenster Aus Bibliothek laden das Layout-Paket für Lebensmittelrezepte aus und klicken Sie dann auf , um die Seite Rezepte zu verwenden.

Klicken Sie nach dem Laden des Layouts auf , um das Frontend zu erstellen.

Erstellen eines neuen Abschnitts

Erstellen Sie im Frontend Divi Builder einen neuen Abschnitt und ziehen Sie ihn ganz nach oben im Layout.

Kopieren Sie die Schaltfläche im Kopfbereich des Layouts und fügen Sie sie in die einspaltige Zeile des neu erstellten Abschnitts ein.

Öffnen Sie die Schaltflächeneinstellungen und fügen Sie das folgende benutzerdefinierte CSS zum Hauptelement auf der Registerkarte "Erweitert" hinzu:

display: block !important;

Dadurch kann sich die Schaltfläche einfach über die gesamte Breite der Spalte erstrecken.

Ändern Sie den Text der Schaltfläche in "Einleitung". Fügen Sie dann Folgendes für die Link-URL der Schaltfläche hinzu:

#Einleitung

So erstellen Sie einen Ankerlink. Der Hashtag (#) teilt dem Browser mit, dass Sie mit einer CSS-ID verlinken. Der folgende Text „Einleitung“ entspricht dem Namen der CSS-ID, die wir in einen unserer Abschnitte im Layout einfügen. Der Name der CSS-ID kann beliebig sein. Stellen Sie einfach sicher, dass sie mit der CSS-ID übereinstimmt, die Sie später im Abschnitt angeben.

Duplizieren Sie die Schaltfläche und wiederholen Sie dann den Vorgang, um der Schaltfläche einen neuen Schaltflächentext und eine neue Schaltflächen-Link-URL zuzuordnen. Da dies ein Ankerlink ist, der zu einem anderen Abschnitt der Seite springt, stellen Sie sicher, dass die CSS-ID (der Text nach dem „#“) eindeutig ist und dem Namen entspricht, den Sie später Ihrem Abschnitt geben werden.

Ändern Sie für diese Schaltfläche den Schaltflächentext in "Ingredients" und die Link-URL der Schaltfläche in "#ingredients".

Duplizieren Sie die Schaltfläche erneut und geben Sie dann der neuen Schaltfläche den Schaltflächentext "Ernährung" und ändern Sie die URL des Button-Links in "#nutrition".

Duplizieren Sie die Schaltfläche noch einmal und geben Sie dann der neuen Schaltfläche den Schaltflächentext „Anleitung“ und ändern Sie die URL des Button-Links in „#Anleitung“.

Das ist alles, was wir jetzt tun müssen. Wir werden zu diesem Abschnitt zurückkehren und ihn in Kürze in eine feste Seitenleiste verwandeln.

Hinzufügen der CSS-IDs zu den Abschnitten und Zeilen

Nachdem wir nun alle unsere Schaltflächen mit den Ankerlinks erstellt haben, können wir unseren Abschnitten und Zeilen die entsprechenden CSS-ID-Namen hinzufügen.

Ankerlinks springen automatisch zu jedem Element auf der Seite mit der entsprechenden CSS-ID. Eine CSS-ID kann auf Inline-Text, Module, Zeilen oder Abschnitte angewendet werden. Wenn Sie mithilfe von HTML eine CSS-ID zu einer Überschrift hinzufügen möchten, würde dies in etwa so aussehen:

<h2 id="introduction">Introduction</h2>

Da wir jedoch zu einem Abschnitt der Seite springen möchten, können wir die CSS-ID zu dem bestimmten Abschnitt der Seite hinzufügen. Dies bietet dem Benutzer genügend bequemen Anzeigeraum, damit der Besucher leicht erkennen kann, wo er sich auf der Seite befindet. Das Springen zu Inline-Text oder zu einem Modul kann beim Besucher zu Verwirrung führen.

Wie bereits erwähnt, soll jede der von uns erstellten Schaltflächen-URLs den CSS-IDs der Abschnitte entsprechen, zu denen sie springen müssen.

Für die Schaltfläche „Einführung“ müssen wir die CSS-ID dem Abschnitt der Seite hinzufügen, der den Einführungsinhalt enthält. Öffnen Sie dazu die Abschnittseinstellungen des dritten Abschnitts der Seite (der Abschnitt direkt unter der Kopfzeile) und fügen Sie unter dem Reiter Erweitert die folgende CSS-ID hinzu:

CSS-ID: Einführung

Dies entspricht der Ankerlink-Schaltfläche Einführung, die wir zuvor erstellt haben.

Suchen Sie nun im selben Abschnitt die Zeile mit der Überschrift „Zutaten“. Öffnen Sie dann die Zeileneinstellungen und fügen Sie die folgende CSS-ID hinzu:

CSS-ID: Zutaten

Dies entspricht der Ankerlink-Schaltfläche Zutaten, die wir zuvor erstellt haben.

Scrollen Sie nach unten zum nächsten Abschnitt mit der Überschrift „Ernährung“ und öffnen Sie die Abschnittseinstellungen. Fügen Sie dann die folgende CSS-ID hinzu:

CSS-ID: Ernährung

Dies entspricht der Anker-Link-Schaltfläche Ernährung, die wir zuvor erstellt haben.

Scrollen Sie abschließend nach unten zum nächsten Abschnitt des Layouts mit dem Titel „Schritt für Schritt Anleitung“. Öffnen Sie dann die Abschnittseinstellungen und fügen Sie die folgende CSS-ID unter der Registerkarte "Erweitert" hinzu:

CSS-ID: Anleitung

Dies entspricht der Ankerlink-Schaltfläche Anleitung, die wir zuvor erstellt haben.

Speichern Sie Ihre Änderungen.

Jetzt ist ein guter Zeitpunkt, um zu sehen, ob Ihre Ankerlinks funktionieren. Öffnen Sie die Seite in einem neuen Tab und klicken Sie auf die Schaltflächen im oberen Abschnitt, um sicherzustellen, dass sie zu ihren entsprechenden Positionen auf der Seite springen/scrollen.

Wenn sie nicht funktionieren, gehen Sie zurück und überprüfen Sie, ob die CSS-IDs korrekt sind und übereinstimmen.

Erstellen des festen Seitenleisten-Layouts

Hinzufügen von linken Rändern zu Abschnitten, um Platz für die Seitenleiste zu schaffen

Ankerlinks oben auf der Seite zu haben, ist für Dinge wie ein Inhaltsverzeichnis in Ordnung. Für diesen Anwendungsfall möchten wir jedoch, dass diese Ankerlinks für den Benutzer jederzeit sichtbar bleiben, damit der Benutzer nicht zum Anfang der Seite zurückscrollen muss, nachdem er auf einen der Links geklickt hat. Eine feste Seitenleiste löst dieses Problem, da sie auf der Seite der Seite fixiert bleibt, wenn der Benutzer auf die Ankerlinks klickt.

Aber bevor wir die Seitenleiste positionieren, müssen wir auf der linken Seite unserer Seite etwas Platz dafür schaffen. Dazu fügen wir jedem Abschnitt des Layouts einen linken Rand hinzu.

Der linke Rand, den wir jedem Abschnitt hinzufügen, entspricht der Breite der Seitenleiste, also ist es jetzt an der Zeit, zu entscheiden, wie breit die Seitenleiste sein soll. Für dieses Beispiel ist eine Breite von 20 % ausreichend.

Öffnen Sie die Einstellungen des zweiten Abschnitts (der direkt unter unseren Ankerlink-Buttons) und fügen Sie den folgenden benutzerdefinierten Rand hinzu:

Benutzerdefinierter Rand: 20% übrig

Bevor Sie die Einstellungen speichern, klicken Sie mit der rechten Maustaste auf die Option Benutzerdefinierter Rand und klicken Sie auf "Benutzerdefinierten Rand kopieren" und speichern Sie die Einstellungen.

Fügen Sie in jedem der verbleibenden Abschnitte Ihres Seitenlayouts den benutzerdefinierten Rand in den Abschnitt ein, indem Sie mit der rechten Maustaste auf den Abschnitt klicken und auf "Benutzerdefinierten Rand einfügen" klicken.

Dadurch erhalten alle Ihre Abschnitte einen linken Rand von 20 %, mit Ausnahme des obersten Abschnitts, der die Anker-Link-Schaltflächen enthält.

Erstellen der festen Seitenleiste

Um die Seitenleiste zu erstellen, müssen wir ihr links auf der Seite eine feste Position zuweisen. Im Grunde werden wir den oberen Bereich in eine feste Seitenleiste verwandeln. Öffnen Sie dazu die Einstellungen des oberen Bereichs und aktualisieren Sie Folgendes:

Aktualisieren Sie auf der Registerkarte Design die Höhe und Breite…

Breite: 20%
Höhe: 100%

Aktualisieren Sie auf der Registerkarte Erweitert die Position…

Position: fest
Vertikaler Versatz: 80px

Dadurch erhält der Abschnitt eine feste Position mit einer Breite von 20 % der Seite. Es positioniert auch den Abschnitt links von der Seite und 80px vom oberen Rand der Seite, um die Höhe der Kopfzeilennavigation anzupassen. Die Höhe von 100 % stellt sicher, dass der Abschnitt die volle Höhe der Seite umfasst.

Zeigen Sie nun die Seite in einem anderen Browser-Tab an, um die Funktionalität zu sehen. Während Sie auf der Seite nach unten scrollen, bleibt die Seitenleiste fixiert und Sie können auf die Ankerlink-Schaltflächen klicken, um problemlos zu den verschiedenen Abschnitten zu navigieren.

Beheben der Überlappung der Fußzeile

Sie haben vielleicht bemerkt, dass der Abschnitt die untere Fußzeile am unteren Rand der Seite überlappt.

Es gibt einige Möglichkeiten, dieses Problem anzugehen. Ich könnte zum Beispiel "height: 100%" aus dem Abschnitt herausnehmen oder Sie könnten den Seiteneinstellungen etwas CSS hinzufügen, um die Breite der Fußzeile anzupassen. Wenn Sie jedoch die Abschnittshöhe bei 100 % beibehalten möchten, besteht eine einfache Lösung darin, die Hintergrundfarbe des Abschnitts zu entfernen. Öffnen Sie die Abschnittseinstellungen des Abschnitts, den wir für die Seitenleiste verwenden, und fügen Sie die folgende Hintergrundfarbe hinzu:

Hintergrundfarbe: rgba(255,255,255,0)

Wenn Sie die Farbe der Seitenleiste ändern möchten, können Sie die Seiteneinstellungen öffnen und die Hintergrundfarbe des Inhaltsbereichs ändern.

Da die Hintergrundfarbe des Abschnitts transparent ist, scheint die Hintergrundfarbe des Inhaltsbereichs für Ihre Seite durch. Und da alle unsere anderen Abschnitte eine Hintergrundfarbe haben, wird sie nur durch den Seitenleistenabschnitt angezeigt, ohne die untere Fußzeile zu überlappen.

Anpassungen für Mobilgeräte vornehmen

Dieses Design macht für Smartphones wirklich keinen Sinn, da es keinen Platz für eine Seitenleiste gibt und die Links oben auf der Seite erfordern, dass der Benutzer jedes Mal, wenn er auf einen Ankerlink klicken möchte, zurück nach oben scrollen muss. Das Design funktioniert jedoch weiterhin für Tablets, aber Sie müssen möglicherweise etwas mehr Platz für diese Ankerlinks schaffen. Öffnen Sie dazu die Zeileneinstellungen für die Zeile der Abschnittsseitenleiste und aktualisieren Sie Folgendes:

Benutzerdefinierte Breite: 100
Benutzerdefinierte Polsterung (Desktop): 10 % links, 10 % rechts
Benutzerdefinierte Polsterung (Tablet): 0 % links, 0 % rechts

Jetzt müssen wir nur noch den Abschnitt auf dem Smartphone ausblenden (oder deaktivieren). Öffnen Sie dazu die Abschnittseinstellungen und gehen Sie zur Registerkarte Erweitert und klicken Sie auf das Kontrollkästchen zum Deaktivieren auf dem Smartphone.

Das ist es. Sie haben jetzt ein reaktionsschnelles festes Seitenleistenmenü mit reibungslos scrollenden Ankerlinks!

Das Endergebnis

Lassen Sie uns nun das Endergebnis überprüfen.

Und so sieht das Layout auf dem Tablet aus.

Erfahren Sie mehr über feste Elemente und Ankerverbindungen

Wenn Sie dieses Tutorial hilfreich fanden, sehen Sie sich einige unserer verwandten Tutorials unten an:

• 5 coole Dinge, die Sie in Divi mit Ankerlinks tun können
• So machen Sie jedes Divi-Seitenelement klebrig
• So fügen Sie feste Widgets zu Ihrer Seitenleiste in WordPress hinzu
• So starten Sie Ihre Divi-Navigation unten und bleiben dann beim Scrollen oben fixiert
• So reparieren Sie Ihre Divi-Fußzeile
• So erstellen Sie ein schwebendes Popout-Menü in Divi

Abschließende Gedanken

Das Schöne an diesem Setup ist, dass Sie jeder Seite mit verschiedenen Ankerlinks (oder allem, was Sie wollen) ganz einfach feste Seitenleisten hinzufügen können. Da Ihre Seitenleiste im Grunde ein Divi-Bereich ist, können Sie sie mit den integrierten Einstellungen anpassen, weitere Zeilen hinzufügen und jede beliebige Kombination von Modulen verwenden.

Dieses Setup wäre ideal für Mitgliedschaftskurse, Tutorials, FAQs, Portfolios oder lange Blog-Posts. Sie können es sogar für Websites mit einer Seite verwenden. Haben Sie andere Verwendungszwecke zum Teilen? Ich bin gespannt, was sie in den Kommentaren sind.

Danke schön!