Möchten Sie eine Navigationsleiste zwischen Beiträgen erstellen, die in Divi „sticky“ ist?
Eine Sticky-Post-Navigationsleiste ist eine effektive Möglichkeit, die Benutzererfahrung von jedem zu verbessern Website des Blogs. Zusätzlich zur Hauptnavigation Ihrer Website ermöglichen Beitragsnavigationslinks Benutzern das einfache Springen zum vorherigen oder nächsten Beitrag Ihr Blog. Und wenn Sie diese Post-Navigationslinks zu einer Sticky Bar hinzufügen, bleiben diese Links sichtbar und leichter zugänglich.
In diesem Tutorial erstellen wir eine Navigationsleiste zwischen Post-Sticky-In Divi. Dazu verwenden wir die integrierten Optionen von Divi, um eine Zeile in eine Sticky Bar umzuwandeln. Als Nächstes verwenden wir das Artikelnavigationsmodul, um die Links „Vorheriger Artikel“ und „Nächster Artikel“ zu entwerfen.
Zusätzlich fügen wir in der Mitte der Leiste einen Beitragstitel als dynamischen Inhalt hinzu, der Benutzer an den Beitrag erinnert, den sie gerade ansehen, und der Navigationsleiste ein nettes „Vergangenheits-, Gegenwarts- und Zukunfts“-Element verleihen. .
Fangen wir an!
Übersicht
Hier ist ein kurzer Blick auf das Design, das wir in diesem Tutorial erstellen werden.
Was Sie brauchen, um loszulegen
Sie können diese Sticky-Post-Navigationsleiste zwar zu jedem Blog-Post-Layout oder jeder Vorlage in Divi hinzufügen, wir werden jedoch eine vorgefertigte Blog-Post-Vorlage verwenden, um den Prozess zu beschleunigen und das Design schnell in Gang zu bringen.
Importieren Sie die Blogbeitragsvorlage „Meal Kit“ in Divi Theme Builder
Laden Sie zunächst die kostenlose Blog-Post-Vorlage für Divi's Meal Kit Layout Pack . Gehen Sie dazu zu der Blogbeitrag .
Geben Sie dann Ihre E-Mail-Adresse ein, um die ZIP-Datei herunterzuladen.
Danach entpacken Sie die Datei, damit sie importiert werden kann.
Gehen Sie folgendermaßen vor, um die Datei in den Design-Editor zu importieren:
- Gehen Sie zu Divi > Theme Builder.
- Klicken Sie auf das Portabilitätssymbol.
- Wählen Sie im Popup-Fenster Portabilität die Registerkarte Import aus.
- Wählen Sie die zuvor heruntergeladene entpackte Datei zum Importieren aus.
- Klicken Sie auf « Importieren Sie den Divi Theme Builder Template ».
- Klicken Sie auf das Bearbeitungssymbol, um das importierte Modell zu bearbeiten.
Erstellen Sie eine Sticky-Navigationsleiste in Divi
Teil 1: Erstellen der Klebelinie
Um die Sticky-Navigationsleiste zu erstellen, verwenden wir eine dreispaltige Zeile als Sticky-Container für unsere Navigationslinks zwischen Beitrag und Beitragstitel.
Lesen Sie auch: Divi: So verwenden Sie die Option „Gradient Repeat“, um benutzerdefinierte Hintergrundmuster zu erstellen
Fügen Sie im zweiten Abschnitt des Vorlagenlayouts eine neue Zeile unterhalb der Zeile mit dem Inhalt des Beitrags hinzu.
Leitungseinstellungen
Leitungseinstellungen öffnen.
Zuerst müssen wir die Sticky-Position zur Linie hinzufügen, damit wir andere Designoptionen im Sticky-Zustand aktualisieren können.
Unter der Registerkarte Fortgeschrittener, aktualisieren Sie Folgendes:
- Sticky Position: Bleiben Sie oben und unten
- Obere Sticky-Grenze: Abschnitt
- Untere Klebrigkeitsgrenze: Körperbereich
Um sicherzustellen, dass Spalten auf Mobilgeräten nicht gestapelt werden, fügen Sie das folgende benutzerdefinierte CSS hinzu Hauptelement :
display:flex;
flex-wrap:nowrap;
align-items:center;
Unter der Registerkarte Inhalt, fügen Sie der Linie im klebrigen Zustand wie folgt eine weiße Hintergrundfarbe hinzu:
- Hintergrund: keiner
- Bakground: #ffffff (klebrig)
Unter Einstellungen Design, aktualisieren Sie Folgendes:
- Benutzerdefinierte Bundstegbreite verwenden: JA
- Rinnenbreite: 1
- Breite: 100 %
- Maximale Breite: 100 %
- Polsterung: 0px (oben und unten)
Mittlere Spalte auf Tablet und Telefon ausblenden
Um die Spalte auf Mobilgeräten auszublenden, öffnen Sie die Einstellungen für Spalte 2 (mittlere Spalte) und aktualisieren Sie die Sichtbarkeitsoptionen wie folgt:
- Deaktivieren auf: Telefon, Tablet
Teil 2: Erstellen von Links zur Artikelnavigation
Um mehr Designflexibilität für die Postnavigation zu eröffnen, verwenden wir zwei separate Postnavigationsmodule. In der linken Spalte fügen wir ein Post-Navigationsmodul hinzu, das nur den Link des vorherigen Artikels anzeigt. In der rechten Spalte fügen wir ein Beitragsnavigationsmodul hinzu, das nur den nächsten Beitragslink anzeigt.
Link zum vorherigen Beitrag
Fügen Sie in Spalte 1 ein neues Beitragsnavigationsmodul hinzu.
Öffnen Sie die Moduleinstellungen, aktualisieren Sie die Registerkarte Optionen von Inhalt wie folgt :
- Vorheriger Link (Text): Vorheriger Beitrag
- Link zum vorherigen Beitrag anzeigen: JA
- Link zum nächsten Beitrag anzeigen: NEIN
- Hintergrund: #000000
Unter der Registerkarte Design, aktualisieren Sie Folgendes:
- Links Schriftart: Kumbh Sans
- Links Schriftstärke: Fett
- Schriftstil: TT
- Textfarbe für Links: #ffffff
- Textgröße für Links: 26 Pixel (Desktop), 16 Pixel (Tablet und Telefon)
- Zeilenhöhe: 1,3 cm
- Polsterung: 0,9 cm (oben), 0,7 cm (unten), 2 cm (links und rechts)
Da wir die mittlere Spalte auf Mobilgeräten ausblenden, können die beiden verbleibenden Spalten, die die Navigationslinks enthalten, jetzt jeweils 50 % der Browserbreite auf Tablets und Telefonen einnehmen.
Siehe auch: Divi: So ändern Sie den Stil mehrerer Elemente beim Hovern oder nach einem Klick
Um sicherzustellen, dass der Navigationslink 50 % des Darstellungsbereichs umfasst, fügen Sie das folgende benutzerdefinierte CSS zum Links-CSS-Feld für die Tablet-Anzeige hinzu:
display:block;
width:50vw;
text-align:center;
float:none;
Erstellung des Next Post-Links
Um den Link für den nächsten Beitrag zu erstellen, kopieren Sie das Beitragsnavigationsmodul (mit dem vorherigen Beitragslink), das wir gerade entworfen haben, und fügen Sie es in Spalte 3 (rechte Spalte) ein.
Öffnen Sie als Nächstes die Post-Navigationseinstellungen für das doppelte Modul in der rechten Spalte und aktualisieren Sie die folgenden Inhaltsregisterkartenoptionen:
- Nächster Link: Nächster Beitrag
- Link zum vorherigen Beitrag anzeigen: NEIN
- Link zum nächsten Beitrag anzeigen: JA
- Hintergrund: #ffb100
Unter der Registerkarte Design, aktualisieren Sie die Textfarbe des Links:
- Linktextfarbe: #000000
Teil 3: Erstellen des dynamischen Beitragstitels
Wenn beide Navigationslinks vorhanden sind, können wir den Beitragstitel als dynamischen Inhalt in der mittleren Spalte hinzufügen.
Die Idee ist, dem Benutzer eine nette Erinnerung an die Nachricht zu geben, die er gerade liest, mit der Möglichkeit, zur vorherigen Nachricht und zur nächsten Nachricht zu navigieren.
Fügen Sie in der mittleren Spalte einen neuen Textbaustein hinzu.
Unter der Registerkarte InhaltKlicken Sie auf das Symbol „Dynamische Inhalte verwenden“ im Körperbereich und wählen Sie dann aus Beitrags-/Archivtitel.
Sobald der dynamische Beitragstitel hinzugefügt wurde, öffnen Sie die Einstellungen von Beitrags-/Archivtitel und aktualisieren Sie den Inhalt vor:
- Vor dem Lesen
Speichern Sie dann die Änderungen.
Unter der Registerkarte Design, aktualisieren Sie Folgendes:
- Textschriftart: Kumbh Sans
- Schriftstärke des Textes: Fett
- Schriftstil: TT
- Text Textfarbe: transparent (Desktop), #000000 (Sticky)
- Textgröße: 16px
- Buchstabenabstand: 1px
- Zeilenhöhe: 1,3 cm
- Textausrichtung: zentriert
- Maximale Breite: 96 %
- Ausrichtungsmodul: Mitte
- Polsterung: 0,5 cm (oben und unten)
Endergebnis
Laden Sie DIVI jetzt herunter!!!
Zusammenfassung
In diesem Tutorial haben wir gezeigt, wie einfach es ist, eine Sticky-Post-Navigationsleiste für eine Blog-Post-Vorlage in Divi zu erstellen.
Die Sticky-Funktion für Balken/Linien kann auch einfach mit den integrierten Optionen von Divi angepasst werden. Beispielsweise können Sie den Sticky-Status auf einen Abschnitt beschränken oder festlegen, dass er nur am oberen oder unteren Rand des Browser-Ansichtsfensters fixiert wird.
Ich hoffe, dies wird für Ihre nächste Blog-Site nützlich sein. 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.
...
