So erstellen Sie eine Sticky-Navigationsleiste von unten nach oben in Divi

Im heutigen Divi-Tutorial zeigen wir Ihnen Schritt für Schritt, wie Sie in Divi eine Sticky-Navigationsleiste von unten nach oben erstellen. Dadurch kann die Navigationsleiste zunächst am unteren Rand der Seite kleben, um ein einzigartiges Layout über dem Falten zu erhalten. Wenn Sie dann über den oben stehenden Abschnitt der Seite hinaus scrollen, bleibt die Navigationsleiste oben auf der Seite und bleibt dort für den Rest der Seite. Sie könnten sagen, dass die Seite das Menü am unteren Bildschirmrand „aufnimmt“ und einen schönen Interaktionseffekt in Ihr Hauptmenü und Ihre Website bringt.

Lass uns anfangen!

Vorgeschmack

Schauen wir uns das Endergebnis an, damit Sie sich das Ergebnis vorstellen können, das wir erreichen möchten:

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.

Erstellen einer Sticky-Navigationsleiste von unten nach oben in Divi

Teil 1: Erstellen des Abschnitts „above the fold“ und der Überschrift

Für den ersten Teil dieses Tutorials werden wir den Überschrift-Abschnitt und die Überschrift erstellen, die als Hauptkopfzeilenabschnitt unserer Seite dienen. Der Abschnitt wird auf dem Desktop im Vollbildmodus angezeigt, um sicherzustellen, dass der Abschnitt das gesamte Ansichtsfenster einnimmt.

Zeile hinzufügen

Fügen Sie zunächst eine einspaltige Zeile zum Standardabschnitt hinzu.

Abschnittseinstellungen

Öffnen Sie vor dem Hinzufügen eines Moduls die Einstellungen für den Abschnitt und fügen Sie wie folgt einen Hintergrund hinzu:

• Hintergrundfarbe: #e9f9ff
• Hintergrundbild: [Bild hinzufügen]

Aktualisieren Sie auf der Registerkarte "Design" die Mindesthöhe und den Abstand.

• Mindesthöhe: 100 Vh (Desktop), Auto (Tablet und Telefon)
• Polsterung: 20vh oben, 20vh unten

Überschriftstext

Um den Überschriftentext zu erstellen, fügen Sie der Zeile einen neuen Textbaustein hinzu.

Aktualisieren Sie dann den Inhalt mit der folgenden H1-Überschrift:

<h1>Above the Fold</h1>

Texteinstellungen

Aktualisieren Sie auf der Registerkarte Design der Texteinstellungen die Schriftstile für Überschriften wie folgt:

• Überschrift Schriftart: Rubik
• Schriftstärke der Überschrift: Halbfett
• Überschrift Schriftstil TT
• Ausrichtung des Überschriftentextes: Mitte
• Überschrift Textfarbe: #302ea7
• Textgröße der Überschrift: 130 Pixel (Desktop), 70 Pixel (Tablet), 40 Pixel (Telefon)
• Abstand der Überschriftsbuchstaben: 2px
• Höhe der Überschriftslinie: 1.3em

Teil 2: Erstellen des Below-the-Fold-Bereichs

Um die Funktionalität der Sticky-Navigationsleiste zu demonstrieren, müssen wir einen Abschnitt unterhalb der Falte hinzufügen, damit wir etwas Platz zum Scrollen haben.

Um den Abschnitt zu erstellen, duplizieren Sie den soeben erstellten Abschnitt über dem Falten.

Aktualisieren Sie den Hintergrund des doppelten Abschnitts.

• Hintergrundfarbe: #f4def1

Geben Sie dem Abschnitt dann eine große Mindesthöhe, damit wir Platz haben, um auf der Seite nach unten zu scrollen. Dies ist nur ein Ausfüllbereich anstelle des eigentlichen Inhalts einer Seite.

• Mindesthöhe: 200vh

Aktualisieren Sie dann den Inhalt des Textmoduls, indem Sie das Wort „Unten“ durch „Oben“ ersetzen.

Teil 3: Erstellen der Sticky-Navigationsleiste

Um die Sticky-Navigationsleiste von unten nach oben zu erstellen, erstellen wir zunächst einen neuen Abschnitt mit einer einspaltigen Zeile.

Neuen Abschnitt und Zeile hinzufügen

Fügen Sie einen neuen regulären Abschnitt direkt unter dem Abschnitt über dem Falten hinzu.

Fügen Sie dann dem Abschnitt eine einspaltige Zeile hinzu.

Abschnittshintergrund und Auffüllung

Öffnen Sie die Abschnittseinstellungen und aktualisieren Sie die Hintergrundfarbe.

• Hintergrundfarbe: #302ea7

Nehmen Sie dann die obere und untere Polsterung heraus, damit die Navigationsleiste weniger Höhe hat.

• Padding: 0px oben, 0px unten

Sichtbaren Überlauf hinzufügen

Um sicherzustellen, dass die Dropdown-Menüs sichtbar bleiben, aktualisieren Sie die Sichtbarkeitsoptionen wie folgt:

• Horizontaler Überlauf: Sichtbar
• Vertikaler Überlauf: Sichtbar

Geben Sie dem Abschnitt eine absolute Position auf dem Handy

Das mobile Dropdown-Menü wird standardmäßig unter dem Hamburger-Symbol geöffnet. Wenn wir die Navigationsleiste unten lassen, würde dies das Dropdown-Menü ausblenden, wenn der Benutzer unten darauf klickt. Für eine bessere Benutzererfahrung möchten wir, dass die Navigationsleiste ganz oben auf der Seite auf dem Tablet- und Telefondisplay beginnt.

Geben Sie dazu dem Abschnitt auf Tablet und Telefon eine absolute Position ein.

• Position: Relativ (Desktop), Absolut (Tablet und Telefon)

Sticky Position für Desktop und Mobilgeräte hinzufügen

Um die Sticky-Position zum Navigationsleistenabschnitt hinzuzufügen, aktualisieren Sie Folgendes:

• Sticky Position: Oben und unten kleben (Desktop), Oben kleben (Tablet und Telefon)

Zeilenauffüllung aktualisieren

Wenn der Sticky-Abschnitt fertig ist, öffnen Sie die Einstellungen für die Zeile innerhalb des Abschnitts und aktualisieren Sie die Auffüllung wie folgt:

• Polsterung: 10px oben, 10px unten

Navigationsmenü erstellen

Wenn der Abschnitt und die Zeile vorhanden sind, können wir das Navigationsmenü erstellen.

Beginnen Sie mit dem Hinzufügen eines Menümoduls zur einspaltigen Zeile.

Menüinhalt

Aktualisieren Sie den Inhalt des Menüs wie folgt:

• Menü aus der Dropdown-Liste auswählen
• Logobild hinzufügen (ich verwende ein Bild, das 122 x 52 Pixel groß ist)
• nimm die Standardhintergrundfarbe heraus

Aktualisieren Sie auf der Registerkarte Design den folgenden Menütext und die folgenden Symboleinstellungen:

• Farbe des aktiven Links: #fff
• Menüschrift: Rubik
• Menüschriftart: TT
• Menütextfarbe: #fff
• Menütextgröße: 16px
• Textausrichtung: Rechts
• Farbe der Dropdown-Menüzeile: #e19dff
• Mobile Menütextfarbe: #302ea7
• Farbe des Einkaufswagensymbols: #fff
• Farbe des Suchsymbols: #fff
• Farbe des Hamburger-Menüsymbols: #fff

Verwenden eines Rahmens zum Versetzen der absoluten Position der Navigationsleiste auf Mobilgeräten

Da der Abschnitt der Navigationsleiste auf Mobilgeräten eine absolute Position hat, befindet sich die Leiste über dem oberen Abschnitt der Seite (und schneidet ihn ab). Um dies zu beheben, müssen wir den oberen Abschnitt mit einem oberen Rand versetzen, der die gleiche Höhe wie die Navigationsleiste/den Abschnitt hat.

Überprüfen Sie die Höhe des Navigationsleistenabschnitts auf dem Handy

Um die Höhe der Navigationsleiste auf Mobilgeräten zu bestimmen, öffnen Sie eine Live-Version der Seite in einem neuen Browserfenster. Dann können Sie die Browserbreite unter 980px verkleinern, um das mobile Menü anzuzeigen. Klicken Sie mit der rechten Maustaste auf den Abschnitt, der das Menü enthält, und wählen Sie die Option Element überprüfen aus dem Kontextmenü des Browsers. Unterhalb des Abschnitts sollte eine Toolbox mit den Abmessungen (einschließlich der Höhe) des Abschnitts angezeigt werden. In diesem Beispiel beträgt die Höhe des Navigationsleistenabschnitts 72 px.

Hinzufügen des oberen Randversatzes zum Abschnitt über dem Falz

Nachdem wir nun die Höhe des Abschnitts bestimmt haben, öffnen Sie die Einstellungen für den oberen (über dem Falz) Abschnitt.

Fügen Sie auf der Registerkarte "Design" den folgenden oberen Rahmen auf Tablet und Telefon hinzu:

• Breite des oberen Rands: 72px (Tablet und Telefon)
• Farbe des oberen Rands: #302ea7

Da der Rand die gleiche Höhe wie der Abschnitt mit der absoluten Position hat, können Sie den Rand nicht sehen, da er nur dazu dient, den Abschnitt nach unten zu drücken, damit er nicht abgeschnitten wird.

Endergebnis

Sehen Sie sich das Endergebnis an!

Abschließende Gedanken

Das Erstellen einer Sticky-Navigationsleiste von unten nach oben kann mithilfe der integrierten Positions- und Sticky-Optionen von Divi leicht erreicht werden. Der Schlüssel besteht darin, dem Abschnitt über dem Falten eine Höhe von 100 Vh zu geben und dann den Navigationsleistenabschnitt darunter hinzuzufügen, der am unteren und oberen Rand des Browsers haftet. Hoffentlich wird dies dazu beitragen, Ihre Website einzigartiger und ansprechender zu machen.

Diese klebrige Navigationsleiste eignet sich am besten für ein einzelnes Seitendesign und nicht für eine globale Vorlage. Sie können dies jedoch problemlos als Homepage-Design verwenden und mit dem Divi-Theme-Builder einen globalen Header für den Rest der Seiten verwenden.

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

Danke schön!