So kombinieren Sie einen Scroll-Fortschrittsbalken mit einem festen Navigationsmenü in Divi

Fortschrittsbalkenindikatoren können Ihrer Website eine nette Note verleihen und die UX mit einer nützlichen (und unterhaltsamen) Interaktion steigern. Normalerweise stehen Fortschrittsbalken alleine oben auf der Seite ohne viel Bezug zum eigentlichen Inhalt der Seite. Der Benutzer hat lediglich einen visuellen Indikator dafür, wo er sich auf der Seite befindet. Aber heute werden wir diese Funktionalität auf eine andere Ebene bringen.

In diesem Tutorial zeigen wir Ihnen, wie Sie in Divi einen Scroll-Fortschrittsbalken mit einem festen Navigationsmenü kombinieren. Dieses Design ist insofern einzigartig, als der Fortschrittsbalken mit der Breite der Menüschaltflächen korreliert. Und da die Breite der Menüschaltflächen (in Prozent) der Höhe der scrollbaren Inhaltsabschnitte auf der Seite entspricht, wird jede Schaltfläche durch den Scroll-Fortschrittsbalken genau dann gefüllt, wenn der Benutzer den entsprechenden Abschnitt der Schaltfläche erreicht. Und als ob das nicht genug ist, machen wir jede Schaltfläche auch zu einem Ankerlink zu den entsprechenden Abschnitten, um einen zusätzlichen UX-Bonus zu erzielen!

Dieses Design wäre perfekt, um einen Benutzer durch eine Zielseite zu führen, die die Schritte eines Prozesses beschreibt. Nun, du wirst sehen.

Lass uns anfangen!

Vorgeschmack

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

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!

https://youtu.be/Kf-ciVKEZFI

Abonnieren Sie unseren Youtube-Kanal

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.

Teil 1: Erstellen des Seitenlayouts für den Vollbildbereich

Der obere Abschnitt

Fügen Sie dem Abschnitt zunächst eine einspaltige Zeile hinzu.

Aktualisieren Sie vor dem Hinzufügen eines Moduls die Zeileneinstellungen wie folgt:

• Breite: 100%
• Max-Breite: 100%
• Padding: 0px oben, 0px unten

Fügen Sie innerhalb der Zeile ein Textmodul hinzu.

Öffnen Sie dann die Einstellungen für den Textbaustein und fügen Sie folgenden HTML-Code ein, um eine bunte Überschrift zu erstellen:

<h2><span style="color: #00A4E0;">Let's</span><span style="color: #EE4266;>get</span style="color: #2a1e5c;>star</span><span style="color: #26c485;">ted</span></h2>

Aktualisieren Sie auf der Registerkarte "Design" die Textausrichtung auf die Mitte.

Die folgenden H2-Überschriftenstile werden aktualisiert:

• Überschrift 2 Schriftart: Roboto
• Überschrift 2 Textgröße: 6vw

Öffnen Sie die Schnitteinstellungen und aktualisieren Sie die Höhe auf 100 Vh (oder 100 % der Ansichtsfenster-/Fensterhöhe). Dadurch wird sichergestellt, dass der Abschnitt im Vollbildmodus angezeigt wird. Nehmen Sie dann die Polsterung wie folgt heraus:

• Höhe: 100vh
• Padding: 0px oben, 0px unten

Um sicherzustellen, dass die Zeile/der Inhalt innerhalb des Abschnitts innerhalb des Abschnitts vertikal zentriert bleibt, fügen Sie das folgende benutzerdefinierte CSS zum Hauptelement des Abschnitts hinzu:

display:flex;
flex-direction:column;
justify-content:center;

Schritt eins Abschnitt

Der nächste Abschnitt im Layout ist der erste von vier Schritten. Es ist auch der erste Abschnitt, zu dem unser erster Menüanker-Link scrollt.

Um den ersten Schrittabschnitt zu erstellen, duplizieren Sie den gerade erstellten oberen Abschnitt.

Öffnen Sie dann die Einstellungen für den Duplikatsabschnitt und aktualisieren Sie die Hintergrundfarbe:

• Hintergrundfarbe: #222222

Öffnen Sie als Nächstes die Texteinstellungen und ersetzen Sie den Fließtext durch Folgendes:

<h2>Step One...</h2>
Sed aliquet risus a urna aliquet blandit. Maecenas a scelerisque lorem. Sed commodo lectus sit amet felis rutrum, blandit elementum dui tincidunt. Nunc in tortor sit amet leo pharetra lobortis sed a velit. Fusce eu ante lacinia, gravida nibh id, semper lectus. Quisque lacinia rhoncus consectetur. 

Ändern Sie die Textausrichtung in linksbündig.

Aktualisieren Sie dann Folgendes:

• Überschrift 2 Textfarbe: #00a4e0
• Max Breite: 40vh (Desktop), 80vh (Tablet)
• Modulausrichtung: Mitte

Das kümmert sich um den Abschnitt von Schritt eins.

Schritt zwei Abschnitt

Um den Abschnitt aus Schritt zwei zu erstellen, duplizieren Sie den Abschnitt aus Schritt eins, den wir gerade erstellt haben.

Öffnen Sie die Abschnittseinstellungen und fügen Sie wie folgt einen Hintergrundverlauf über der Hintergrundfarbe hinzu:

• Hintergrundfarbe des linken Farbverlaufs: rgba(255,255,255,0.85)
• Hintergrundfarbe des rechten Farbverlaufs: rgba(255,255,255,0.85)

Aktualisieren Sie dann die Überschriftenfarbe:

• Überschrift 2 Textfarbe: #ee4266

Hintergrund- und Überschriftenfarbe dieses Abschnitts stimmen mit den Farben der Schaltfläche überein, die diesem Abschnitt im Menü, das wir später erstellen werden, entspricht.

Schritt drei Abschnitt

Um den Abschnitt von Schritt drei zu erstellen, duplizieren Sie den Abschnitt von Schritt zwei und ziehen Sie ihn an den unteren Rand der Seite.

Ändern Sie dann die Überschriftenfarbe des Textbausteins.

• Überschrift 2 Textfarbe: #26c485

Schritt vier Abschnitt

Unser letzter Schritt ist Schritt vier. Um diesen Abschnitt zu erstellen, duplizieren Sie den Abschnitt aus Schritt zwei und ziehen Sie ihn an den unteren Rand der Seite.

Aktualisieren Sie dann die Überschrift für das Textmodul in diesem Abschnitt.

• Überschrift 2 Textfarbe: #2a1e5c

Ergebnis

Hier ist das Ergebnis unseres bisherigen Layouts.

Teil 2: Erstellen der Scroll-Fortschrittsleiste und des Menüs

In diesem nächsten Teil erstellen wir schließlich den Scroll-Fortschrittsbalken mit unseren Menüschaltflächen. Die Idee ist, oben auf der Seite einen festen Abschnitt hinzuzufügen. Dann erstellen wir innerhalb des Abschnitts eine Zeile, die ein Trennmodul enthält, das als unsere Fortschrittsanzeige dient. Über der Zeile mit dem Fortschrittsbalken fügen wir eine weitere Zeile hinzu, die unsere Schaltflächen enthält. Jede Schaltfläche hat einen transparenten (oder halbtransparenten) Hintergrund, um die Fortschrittsleiste dahinter anzuzeigen, wenn der Benutzer auf der Seite nach unten scrollt.

Lassen Sie uns zunächst den festen Abschnitt oben auf der Seite erstellen. Fahren Sie fort und erstellen Sie einen neuen regulären Abschnitt und ziehen Sie ihn an den Anfang des Seitenlayouts.

Öffnen Sie die Abschnittseinstellungen und nehmen Sie die Polsterung wie folgt heraus:

• Padding: 0px oben, 0px unten

Aktualisieren Sie auf der Registerkarte "Erweitert" Folgendes:

• Position: Behoben
• Z-Index: 999

Dadurch wird sichergestellt, dass der Abschnitt oben im Browserfenster fixiert bleibt, um eine einfache Ankerlink-Funktionalität zu gewährleisten. Es stellt auch sicher, dass der Abschnitt aus dem normalen Fluss des Dokuments/HTML ausbricht und nicht zur Höhe des gesamten Dokuments beiträgt. Dadurch erreichen wir, dass die Bildlaufleiste das Ende jeder Schaltfläche genau dann erreicht, wenn der Benutzer beim Scrollen jeden Abschnitt/Schritt auf der Seite erreicht.

Fügen Sie innerhalb des Abschnitts eine einspaltige Zeile hinzu.

Öffnen Sie die Zeileneinstellungen und aktualisieren Sie Folgendes:

• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 100%
• Padding: 0px oben, 0px unten
• Position: Absolut

Öffnen Sie die Spalteneinstellungen und fügen Sie das folgende benutzerdefinierte CSS zum Hauptelement hinzu:

height: 100%;
display:flex;
align-items:center;

Dadurch wird sichergestellt, dass die Säule die gleiche Höhe wie der Abschnitt hat. Es wird auch ermöglichen, dass die Module eine Höhe von 100% haben. Dies ist der Schlüssel, um sicherzustellen, dass der Fortschrittsbalken den Abschnitt ausfüllt.

Um den Fortschrittsbalken zu erstellen, fügen Sie der Spalte ein Trennmodul hinzu.

Aktualisieren Sie dann die Teilereinstellungen wie folgt:

• Teiler anzeigen: NEIN
• Hintergrundfarbe: #222222

• Breite: 100%
• Höhe: 100%

HINWEIS: Wir geben dem Fortschrittsbalken hier eine Breite von 100%, damit Sie ihn im Design sehen können. Wir werden die Breite des Teilers/der Fortschrittsleiste mit JQuery vergrößern und verkleinern.

Fügen Sie auf der Registerkarte "Erweitert" eine CSS-ID hinzu und weisen Sie ihr eine absolute Position zu.

• CSS-ID: scrollBar
• Position: Absolut

Hinzufügen des prozentualen Textindikators

Als Nächstes fügen wir eine Stelle hinzu, um den Prozentsatz der Bildlaufposition anzuzeigen, wenn der Benutzer auf der Seite nach unten scrollt. Dies korreliert mit der Breite des Fortschrittsbalkens.

Fügen Sie unter der Trennlinie ein Textmodul hinzu.

Fügen Sie dann den folgenden HTML-Code in den Textkörper ein:

<p><span></span></p>

Unsere JQuery schreibt den prozentualen Text in diesen HTML-Code (zwischen den Span-Tags). Sie können jetzt nichts mehr sehen.

Obwohl der prozentuale Text noch nicht sichtbar ist, müssen wir noch den folgenden Stil hinzufügen, damit er angezeigt wird.

• Textschriftart: Roboto
• Textschriftart: TT
• Text Textfarbe: #ffffff
• Text Textgröße: 16px
• Polsterung: 0.8em oben, 0.8 unten, 15px links

Geben Sie ihm auf der Registerkarte "Erweitert" eine benutzerdefinierte CSS-Klasse und deaktivieren Sie sie auf Telefon und Tablet.

• CSS-Klasse: et-progress-label
• Deaktivieren auf: Telefon, Tablet

Obwohl wir noch nicht fertig sind, ist dies ein guter Ort, um unseren benutzerdefinierten Code hinzuzufügen, der benötigt wird, um den Scroll-Fortschrittsbalken und den Prozentsatz anzuzeigen.

Um den Code hinzuzufügen, fügen Sie unterhalb des Textmoduls ein Codemodul hinzu.

Fügen Sie dann den folgenden Code in das Codefeld ein und achten Sie darauf, ihn mit den erforderlichen Skript-Tags zu umschließen:

(function($) {
$(document).ready(function(){
var docHeight = $(document).height();
var winHeight = $(window).height();
var $scrollBar = $('#scrollBar');
var $progressLabel = $('.et-progress-label p span'); 
$scrollBar.css('width', 0);
$progressLabel.html('0%');
$(window).scroll(function(){
var winScrollTop = $(window).scrollTop();
var scrollPercentage = Math.abs(winScrollTop / (docHeight - winHeight)*100);
$scrollBar.css('width', (scrollPercentage + '%'));
$progressLabel.html( Math.round(scrollPercentage) + '%');
});
});
})( jQuery );

Das kümmert sich um den Fortschrittsbalken und den Prozenttext. Kommen wir zum Navigationsmenü.

Erstellen der Menüschaltflächen mit Ankerlinks

Jetzt können wir das Navigationsmenü erstellen, das vier Schaltflächen enthält, die sich über die gesamte Breite des Browsers erstrecken. Ich dachte, es wäre cool, wenn die Bildlaufleiste jede Schaltfläche ausfüllt, wenn der Benutzer den entsprechenden Abschnitt erreicht, auf den er verlinkt. Hier ist die Idee. Jede Schaltfläche hat eine Breite von 25 % der Gesamtbreite des Browsers. Und da unsere vier Abschnitte alle die gleiche Höhe (100 Vh) haben, macht jeder der vier Abschnitte 25 % des gesamten scrollbaren Bereichs des Seitenlayouts aus. Dadurch wird sichergestellt, dass der Fortschrittsbalken das Ende jeder Schaltfläche genau so erreicht, wie der entsprechende Abschnitt das Ansichtsfenster ausfüllt. Hast du das erwischt? Wenn nicht, macht es später hoffentlich mehr Sinn.

Die Zeile und Spalte

Um die Menüschaltflächen zu erstellen, müssen wir zunächst eine vierspaltige Zeile unter der Zeile erstellen, die den Fortschrittsbalken/Teiler enthält.

Öffnen Sie die Zeileneinstellungen und aktualisieren Sie Folgendes:

• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 100%
• Padding: 0px oben, 0px unten

Um sicherzustellen, dass die Spalten auf Mobilgeräten gestapelt werden, müssen wir das folgende benutzerdefinierte CSS zum Hauptelement hinzufügen:

display:flex;
flex-wrap:nowrap;

Schritt eins Taste

Um die erste Schaltfläche zu erstellen, fügen Sie in der Spalte ganz links ein Schaltflächenmodul hinzu.

Aktualisieren Sie den Schaltflächentext und die Link-URL wie folgt:

• Schaltflächentext: Schritt 1
• Link-URL der Schaltfläche: #one
  (Dieser Ankerlink überspringt den Abschnitt mit der entsprechenden CSS-ID, die wir später hinzufügen werden)

Aktualisieren Sie als Nächstes die Schaltflächenstile wie folgt:

• Tastenausrichtung: Mitte
• Schaltflächentextgröße: 20px (Desktop), 14px (Tablet)
• Schaltflächenhintergrundfarbe: transparent
• Breite des Tastenrahmens: 0px
• Schaltflächenrandradius: 0px
• Tasten-Buchstaben-Abstand: 0.2em
• Schaltflächenschriftart: Roboto
• Schaltflächenschriftart: TT
• Polsterung: 0.8em oben, 0.8em unten, 0 links, 0 rechts

Damit die Schaltfläche die gesamte Breite der Spalte umfasst, fügen Sie dem Hauptelement das folgende benutzerdefinierte CSS hinzu:

display:block !important;
width: 100%;

Schritt 2 Taste

Um die Schaltfläche für Schritt zwei zu erstellen, duplizieren Sie die Schaltfläche in Spalte eins und ziehen Sie sie in Spalte 2.

Aktualisieren Sie dann Folgendes:

• Schaltflächentextfarbe: #ee4266
• Schaltflächenhintergrundfarbe: rgba(255,255,255,0.85)

Die halbtransparente Hintergrundfarbe wird mit der schwarzen Farbe des Fortschrittsbalkens (dahinter) kombiniert, um dem entsprechenden Hintergrund des zweiten Abschnitts zu entsprechen.

Aktualisieren Sie dann die Link-URL für die Schaltfläche wie folgt:

• Link-URL der Schaltfläche: #two

Schritt 3 Taste

Um die Schaltfläche für Schritt 3 zu erstellen, duplizieren Sie die Schaltfläche für Schritt 1 (sie hat die gleiche bg-Farbe) und ziehen Sie sie in Spalte 3.

Aktualisieren Sie dann die Textfarbe der Schaltfläche:

• Schaltflächentextfarbe: #26c485

Aktualisieren Sie dann die Link-URL für die Schaltfläche wie folgt:

• Link-URL der Schaltfläche: #drei

Schritt 4 Taste

Um die Schaltfläche für Schritt 3 zu erstellen, duplizieren Sie die Schaltfläche für Schritt 2 (sie hat die gleiche bg-Farbe) und ziehen Sie sie in Spalte 4.

Aktualisieren Sie dann die Textfarbe der Schaltfläche:

• Schaltflächentextfarbe: #2a1e5c

Aktualisieren Sie dann die Link-URL für die Schaltfläche wie folgt:

• Link-URL der Schaltfläche: #vier

Hinzufügen entsprechender Abschnitts-CSS-IDs für Ankerlinks

Sobald die Schaltflächen fertig sind und alle ihre Ankerlink-URLs haben, können wir die entsprechenden Abschnitts-CSS-IDs zu jedem Abschnitt hinzufügen, zu dem jede Schaltfläche auf der Seite springen soll.

Schritt Eins Abschnitt CSS ID

Öffnen Sie die Einstellungen für den Abschnitt von Schritt eins und fügen Sie die folgende CSS-ID hinzu:

• CSS-ID: eins

Schritt Zwei Abschnitt CSS ID

Öffnen Sie die Einstellungen für den Abschnitt von Schritt zwei und fügen Sie die folgende CSS-ID hinzu:

• CSS-ID: zwei

Schritt Drei Abschnitt CSS-ID

Öffnen Sie die Einstellungen für den Abschnitt von Schritt drei und fügen Sie die folgende CSS-ID hinzu:

• CSS-ID: drei

Schritt 4 Abschnitt CSS ID

Öffnen Sie die Einstellungen für den Abschnitt von Schritt vier und fügen Sie die folgende CSS-ID hinzu:

• CSS-ID: vier

Endergebnis

Abschließende Gedanken

Dieses Fortschrittsbalkenmenü ist definitiv ein einzigartiges Design, das das Potenzial für eine Vielzahl von Anwendungen hat. Hoffentlich hilft es Ihnen bei Ihrem nächsten Projekt. Und erkunden Sie die unzähligen Designvarianten, die im Divi-Builder verfügbar sind, um Ihr eigenes Fortschrittsbalkenmenü zu erstellen.

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

Danke schön!