[Ad_1]
Lassen Sie uns beginnen!
Übersicht
Um Ihnen zu helfen, das Ergebnis, das wir erreichen möchten, zu visualisieren, schauen wir uns das Endergebnis an:
Laden Sie das Layout KOSTENLOS herunter
Um die Designs in diesem Tutorial in die Hände zu bekommen, müssen Sie sie zuerst über die Schaltfläche unten herunterladen. Um auf den Download zugreifen zu können, müssen Sie unsere Divi Daily-Mailingliste über das abonnieren Formular unter. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Vorteile und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie unten einfach Ihre E-Mail-Adresse ein und klicken Sie auf Herunterladen. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.
Um das Layout des Abschnitts in Ihre Divi-Bibliothek zu importieren, gehen Sie zur Divi-Bibliothek.
Klicken Sie auf die Schaltfläche Importieren.
Wählen Sie im Popup-Fenster für die Portabilität die Registerkarte „Import“ und die Datei aus, die Sie von Ihrem Computer herunterladen möchten.
Klicken Sie dann auf den Import-Button.
Sobald dies erledigt ist, wird das Layout der Abschnitte im Divi Builder verfügbar sein.
Auf zum Tutorial, ja?
Was Sie brauchen, um loszulegen
Um zu beginnen, müssen Sie Folgendes tun:
- Falls noch nicht geschehen, installieren und aktivieren Sie die Divi-Thema.
- Erstellen Sie eine neue Seite in WordPress und verwenden Sie den Divi Builder, um die Seite im Frontend (visueller Builder) zu bearbeiten.
- 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 Sie eine klebende Navigationsleiste von unten nach oben in Divi
Teil 1: Erstellen des Abschnitts und der Kopfzeile über der Wasserlinie
Im ersten Teil dieses Tutorials erstellen wir den Abschnitt und die Kopfzeile über der Wasserlinie, die als Hauptkopfzeilenabschnitt unserer Seite dienen. Der Abschnitt wird auf dem Desktop als Vollbild angezeigt, um sicherzustellen, dass der Abschnitt das gesamte Fenster einnimmt.
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]
Aktualisieren Sie auf der Registerkarte Entwurf die Mindesthöhe und den Mindestabstand.
- Mindesthöhe: 100 Vh (Desktop-Computer), automatisch (Tablet und Telefon)
- Polsterung: oben 20vh, unten 20vh
Überschrift
Um den Kopfzeilentext zu erstellen, fügen Sie der Zeile einen neuen Textbaustein hinzu.
Aktualisieren Sie dann den Inhalt mit dem folgenden H1-Header:
<h1>Above the Fold</h1>
Texteinstellungen
Aktualisieren Sie auf der Registerkarte Entwurf der Texteinstellungen die Schriftstile für Überschriften wie folgt:
- Titelschriftart: Rubik
- Schriftstärke der Kopfzeile: Halbfett
- TT-Header-Schriftart
- Ausrichtung des Kopfzeilentextes: Mitte
- Titeltextfarbe: # 302ea7
- Titeltextgröße: 130 Pixel (Desktop), 70 Pixel (Tablet), 40 Pixel (Telefon)
- Kopfzeilenabstand: 2px
- Höhe der Überschriftslinie: 1,3 em
Teil 2: Erstellen des Abschnitts unter der Falte
Um die Funktionalität der Sticky-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 gerade erstellten Wasserlinie.
Aktualisieren Sie den Hintergrund des doppelten Abschnitts.
- Hintergrundfarbe: # f4def1
Dann geben Sie dem Abschnitt eine große Mindesthöhe, damit wir Platz haben, um die Seite zu scrollen. Dies ist nur ein Abschnitt, den Sie anstelle des eigentlichen Inhalts einer Seite ausfüllen müssen.
Aktualisieren Sie anschließend den Inhalt des Textbausteins, indem Sie das Wort „unten“ durch „oben“ ersetzen.
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.
Fügen Sie einen neuen Abschnitt und eine neue Zeile hinzu
Fügen Sie einen neuen regulären Abschnitt direkt unter dem Abschnitt über der Wasserlinie hinzu.
Fügen Sie dann dem Abschnitt eine Zeile zu einer Spalte 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.
- Füllung: 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 Dropdown-Menü für Mobilgeräte wird standardmäßig unter dem Hamburger-Symbol geöffnet. Wenn wir die Navigationsleiste unten lassen, würde sie 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 Telefonbildschirm beginnt.
Weisen Sie dazu dem Abschnitt auf Tablet und Telefon eine absolute Position zu.
- Position: Relativ (Desktop-Computer), Absolut (Tablet und Telefon)
Klebeposition für Desktop und Mobilgerät 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 abgeschlossen ist, öffnen Sie die Zeileneinstellungen im Abschnitt und aktualisieren Sie die Füllung wie folgt:
- Padding: 10 Pixel oben, 10 Pixel unten
Erstellen Sie ein Navigationsmenü
Nachdem der Abschnitt und die Zeile vorhanden sind, können wir das Navigationsmenü erstellen.
Beginnen Sie damit, der Zeile einer Spalte ein Menümodul hinzuzufügen.
Menüinhalt
Aktualisieren Sie den Menüinhalt wie folgt:
- Wählen Sie das Menü aus der Dropdown-Liste
- Logobild hinzufügen (ich verwende ein 122px x 52px Bild)
- Standardhintergrundfarbe entfernen
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
- Textfarbe des mobilen Menüs: # 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 dem Handy
Da der Navigationsleistenabschnitt auf Mobilgeräten eine absolute Position hat, befindet sich die Leiste über dem oberen Abschnitt der Seite (und schneidet ihn ab). Um dieses Problem zu lösen, müssen wir den oberen Abschnitt mit einem oberen Rand der gleichen 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 Breite des Browsers unter 980px reduzieren, 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 prüfen aus dem Kontextmenü des Browsers. Unter dem Abschnitt 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.
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).
Fügen Sie auf der Registerkarte Design den folgenden oberen Rahmen sowohl auf dem Tablet als auch auf dem 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 geschnitten wird.
Endergebnis
Entdecken Sie das Endergebnis!
Abschließende Gedanken
Mit den integrierten Positions- und Sticky-Optionen von Divi können Sie ganz einfach eine Sticky-Navigationsleiste von unten nach oben erstellen. Der Schlüssel ist, dem Abschnitt über der Falte eine Höhe von 100 vh zu geben und dann den Navbar-Abschnitt darunter hinzuzufügen, der am unteren und oberen Rand des Navigators haftet. Hoffentlich wird dies dazu beitragen, Ihrem Objekt ein einzigartigeres und ansprechenderes Aussehen über der Wasserlinie zu verleihen 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 mit dem Builder einen globalen Header für den Rest der Seiten verwenden. Divi-Thema.
Ich freue mich darauf, von Ihnen in den Kommentaren zu hören.
Ihrer Gesundheit zuliebe!
[Ad_2]
