Möchten Sie in Divi eine Navigationsleiste erstellen, die vom unteren bis zum oberen Rand der Seite eingeklebt ist?
Im Tutorium Divi Heute zeigen wir Ihnen Schritt für Schritt, wie Sie in Divi eine Sticky-Navigationsleiste von unten nach oben erstellen.
Dadurch bleibt die Navigationsleiste zunächst unten auf der Seite, um ein einzigartiges „above-the-fold“-Layout zu erhalten. Sobald Sie dann den Abschnitt oberhalb des Seitenumbruchs scrollen, bleibt die Navigationsleiste am oberen Rand der Seite und bleibt dort während der gesamten Seite.
Man könnte sagen, dass die Seite das Menü am unteren Bildschirmrand "übernimmt" und einen netten Interaktionseffekt zu Ihrem Hauptmenü und Ihrem bringt Website.
Fangen wir an!
Übersicht
Um Ihnen zu helfen, das Ergebnis zu visualisieren, das wir zu erreichen versuchen, schauen wir uns das Endergebnis an:
Laden Sie DIVI jetzt herunter!!!
Beginnen wir damit, eine neue Seite mit Divi Builder zu erstellen
Um zu beginnen, müssen Sie Folgendes tun:
Gehen Sie im WordPress-Dashboard zu Seiten> Neu hinzufügen um eine neue Seite zu erstellen.
Geben Sie ihm einen für Sie sinnvollen Titel und klicken Sie darauf Verwenden Sie Divi Builder
klicken Sie dann auf Beginnen Sie mit dem Bauen (Von Grund auf neu erstellen)
Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.
Erstellen Sie eine klebende Navigationsleiste von unten nach oben in Divi
Teil 1: Erstellen des Abschnitts und der Kopfzeile über der Wasserlinie
Für den ersten Teil dieses Tutorials erstellen wir den Abschnitt und die Kopfzeile „above the fold“, die als Hauptkopfzeilenabschnitt unserer Seite dienen. Der Abschnitt wird auf dem Desktop als Vollbild angezeigt, um sicherzustellen, dass der Abschnitt das gesamte Anzeigefenster einnimmt.
Lesen Sie auch: Divi: Wählen Sie zwischen dem Raster- und dem Layout in voller Breite des Filterable Portfolio-Moduls
Fügen Sie eine Zeile hinzu
Fügen Sie zunächst eine Zeile zu einer Spalte zum Standardabschnitt hinzu.
Abschnittseinstellungen
Öffnen Sie vor dem Hinzufügen eines Moduls die Abschnittseinstellungen und fügen Sie einen Hintergrund wie folgt hinzu:
- Hintergrundfarbe: #e9f9ff
- Hintergrundbild: [Bild hinzufügen]
Unter der Registerkarte Design, aktualisieren Sie die minimale Höhe und Polsterung.
- Mindesthöhe: 100 Vh (Desktop), Auto (Tablet und Telefon)
- Polsterung: 20vh (oben und unten)
Überschrift
Um den Kopfzeilentext zu erstellen, fügen Sie der Zeile einen neuen Textbaustein hinzu.
Aktualisieren Sie dann die Inhalt mit folgendem H1-Header:
<h1>Above the Fold</h1>
Texteinstellungen
Unter der Registerkarte Design Aktualisieren Sie in den Einstellungen des Textmoduls die Schriftstile der Kopfzeile wie folgt:
- Überschrift:
- Schriftart: Rubin
- Schriftstärke: Semi Bold
- Stil: TT
- Textausrichtung: zentriert
- Textfarbe: #302ea7
- Größe: 130 Pixel (Desktop), 70 Pixel (Tablet), 40 Pixel (Telefon)
- Buchstabenabstand: 2px
- Zeilenhöhe: 1,3 cm
Teil 2: Erstellen des Abschnitts unterhalb der Wasserlinie
Um die Funktionalität der klebrigen Navigationsleiste zu demonstrieren, müssen wir einen Abschnitt unterhalb der Falte hinzufügen, damit wir Platz zum Scrollen haben.
Um den Abschnitt zu erstellen, duplizieren Sie den Abschnitt über der Falte, die wir gerade gemacht haben.
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 einfach ein Abschnitt, der anstelle von ausgefüllt werden muss Inhalt echte eine Seite.
- Mindesthöhe: 200 vh
Aktualisieren Sie dann die Inhalt des Textmoduls durch Ersetzen des Wortes "Unter" von "Über".
Teil 3: Erstellen Sie die Sticky-Navigationsleiste
Um die Sticky-Navigationsleiste von unten nach oben zu erstellen, erstellen wir zunächst einen neuen Abschnitt mit einer Zeile für eine Spalte.
Neuer Abschnitt und neue Zeile hinzugefügt
Lassen Sie uns zunächst einen neuen regulären Abschnitt direkt unter dem Abschnitt über der Falte hinzufügen.
Als Nächstes fügen wir dem Abschnitt eine einspaltige Zeile hinzu.
Abschnittshintergrund und Auffüllung
Öffnen Sie die Abschnittseinstellungen und aktualisieren Sie die Hintergrundfarbe.
- Hintergrundfarbe: #302ea7
Entfernen Sie dann die obere und untere Polsterung, damit die Navigationsleiste weniger Höhe hat.
- Polsterung: 0px (oben und 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 belassen, würde sie das Dropdown-Menü ausblenden, wenn der Benutzer darauf klickt.
Für eine bessere Benutzererfahrung möchten wir, dass die Navigationsleiste auf dem Tablet- und Telefonbildschirm ganz oben auf der Seite beginnt.
Geben Sie dazu dem Abschnitt eine absolute Position auf Tablet und Telefon an.
- Position: relativ (Desktop), absolut (Tablet und Telefon)
Sticky-Position für Desktop und Handy hinzufügen
Um die Sticky-Position zum Navigationsleistenabschnitt hinzuzufügen, aktualisieren Sie Folgendes:
- Klebeposition: Oben und unten kleben (Desktop), Oben kleben (Tablet und Telefon)
Zeilenauffüllung aktualisieren
Sobald der klebrige Abschnitt fertig ist, öffnen Sie die Zeileneinstellungen innerhalb des Abschnitts und aktualisieren Sie die Auffüllung wie folgt:
- Polsterung: 10px (oben und unten)
Erstellen Sie ein Navigationsmenü
Wenn der Abschnitt und die Linie vorhanden sind, können wir das Navigationsmenü erstellen.
Beginnen Sie, indem Sie der einspaltigen Zeile ein Menümodul hinzufügen.
Menüinhalt
Aktualisieren Sie den Menüinhalt wie folgt:
- Wählen Sie das Menü aus der Dropdown-Liste aus
- Logobild hinzufügen
- Entfernen Sie die Standardhintergrundfarbe
Unter der Registerkarte Design, aktualisieren Sie die folgenden Menütext- und Symboleinstellungen:
- Aktive Linkfarbe: #fff
- Menüschriftart: Ruby
- Menü-Schriftstil: TT
- Textfarbe: #fff
- Menütextgröße: 16px
- Textausrichtung: rechts
- Farbe der Dropdown-Menüzeile: #e19dff
- Textfarbe des mobilen Menüs: #302ea7
- Farbe des Einkaufswagen-Symbols: #fff
- Farbe des Suchsymbols: #fff
- Farbe des Hamburger-Menüsymbols: #fff
Verwenden eines Rahmens zum Versetzen der absoluten Position der Navigationsleiste auf dem Handy
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 auf derselben Höhe wie die Navigationsleiste/den Abschnitt versetzen.
Ü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 auf unter 980 Pixel reduzieren, um das mobile Menü anzuzeigen.
Sie können sich auch beraten lassen: Divi: So erstellen Sie eine Sticky-Navigationsleiste
Klicken Sie mit der rechten Maustaste auf den Abschnitt, der das Menü enthält, und wählen Sie die Option aus Untersuche das Element im Kontextmenü des Browsers. Sie sollten ein Kästchen sehen outils unter dem Abschnitt, der die Abmessungen (einschließlich Höhe) des Abschnitts angibt.
In diesem Beispiel beträgt die Höhe des Navigationsleistenabschnitts 72 Pixel.
Fügen Sie dem Abschnitt über dem Falz einen oberen Randversatz hinzu
Nachdem wir nun die Höhe des Abschnitts bestimmt haben, öffnen Sie die Einstellungen für den oberen Abschnitt (oberhalb der Falte).
Unter der Registerkarte Design, fügen Sie den folgenden oberen Rand auf Tablet und Telefon hinzu:
- Obere Randbreite: 72 Pixel (Tablet und Telefon)
- Obere Randfarbe: #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 geschnitten wird.
Endergebnis
Entdecken Sie das Endergebnis!
Laden Sie DIVI jetzt herunter!!!
Zusammenfassung
Das Erstellen einer klebrigen Navigationsleiste von unten nach oben kann einfach mit der integrierten Position und von Divi durchgeführt werden klebrige Optionen.
Der Schlüssel besteht darin, dem Abschnitt über der Falte eine Höhe von 100 vh zu geben und dann den Navigationsleistenabschnitt darunter hinzuzufügen, der am unteren und oberen Rand des Browsers klebt. Ich hoffe, dies hilft Ihnen dabei, ein einzigartigeres und ansprechenderes "above the fold" hinzuzufügen Website.
Diese klebrige Navigationsleiste eignet sich am besten für ein einzelnes Seitendesign und nicht für eine Gesamtvorlage. Sie können dies jedoch ganz einfach als Ihr Homepage-Design verwenden und einen globalen Header für den Rest der Seiten verwenden, indem Sie das verwenden Divi-Designgenerator .
Wir hoffen, dass dieses Tutorial Sie für Ihre nächsten Divi-Projekte inspirieren wird. Wenn Sie Bedenken oder Vorschläge haben, finden Sie uns unter der Kommentarbereich um darüber zu diskutieren.
Sie können sich auch beraten lassen unsere Ressourcen, wenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen.
Zögern Sie nicht, auch unseren Leitfaden zu konsultieren WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
