Erstellen Sie schöne WordPress-Websites mit Divi und Divi Builder

So erstellen Sie eine scrollende klebrige Überschrift für eine einzigartige Ankerlink-Navigation in Divi

Rifat Divi Tutorials Jun 8, 2021

Haben Sie jemals darüber nachgedacht, eine Seite zu erstellen, die ein außergewöhnliches Navigationssystem für Ankerlinks auf dieser Seite enthält? Gut! Division hat Webentwicklern die Tür zu zahlreichen Möglichkeiten geöffnet. Mit Division können Sie alle möglichen großartigen Designs erstellen. Heute werden wir eine Inhaltswebseite entwerfen, die es unseren Benutzern ermöglicht, sie über klebrige Überschriften als Ankerlinks zu erkunden. Die Überschriften werden nacheinander oben auf der Seite angezeigt, und Besucher können einfach auf die Überschriften klicken, um direkt zum Abschnitt zu springen. Hört sich cool an! Dann kommen wir zum heutigen Tutorial, in dem wir diesen Stil mit der integrierten Funktion von Divi namens "Sticky Option" erstellen.

Designvorschau

So wird unser heutiges Design aussehen.

Abschnitt 1: Erste Schritte

Wir gehen davon aus, dass Sie das Design Division erfolgreich installiert und aktiviert haben. Fügen Sie nun eine neue Seite aus Ihrem Dashboard hinzu und öffnen Sie sie mit Divi Builder. Hier gehen wir mit der zweiten Option, die sagt, "Wählen Sie ein vorgefertigtes Layout" aus.

Wir suchen aus dem Meal Kit Layout Pack > Meal Kit Recipe Page Layout aus der Bibliothek. Klicken Sie, um es auszuwählen.

Divi herunterladen Das beste WordPress-Thema

Das beliebteste WordPress-Thema der Welt und der ultimative Wordpress-Seite-Builder

Divi herunterladen.

Wir aktivieren das Layout mit der Option "Diese Demo verwenden".

Abschnitt 2: Layout-Änderung

Löschen Sie die Zeilen

Nachdem Sie mit dem Importieren des Layouts fertig sind, löschen Sie die letzten beiden unteren Zeilen.

Jetzt haben Sie nur noch eine Zeile namens "Step-1".

Erstellen neuer Zeilen und Hinzufügen von Inhalten

Fügen Sie die markierte Zeile unter der ersten hinzu.

Wählen Sie nun mehrere Module zusammen aus und ziehen Sie sie in die neu erstellte Zeile.

Abschnitt 3: Erstellen von klebrigen Überschriften

In diesem Layout gibt es vier Zeilen und jede davon enthält eine klebrige Kopfzeile in der linken Spalte. Wir erstellen die erste und duplizieren diese für die restlichen Zeilen.

Schritt eins: Erstellen Sie den Sticky Header für die erste Zeile First

Fügen Sie der linken Spalte ein Textmodul hinzu. Dies wird unsere klebrige Überschrift für diese Reihe sein.

Aktualisieren Sie nun die folgenden Einstellungen unter der Registerkarte Design. Stellen Sie sicher, dass Sie Änderungen am H4-Header vornehmen.

  • Überschrift 4 Schriftstärke: Fett
  • Überschrift 4 Schriftstil: TT
  • Überschrift 4 Textausrichtung: Mitte
  • Überschrift 4 Textgröße: 15px
  • Überschrift 4 Buchstabenabstand: 3px
  • Überschrift 4 Zeilenhöhe: 2em

Aktualisieren Sie außerdem die Einstellungen für den Abstand und die abgerundeten Ecken.

  • Rand: 0px
  • Polsterung: 10px
  • Abgerundete Ecken: 3px

Aktualisieren Sie auf der Registerkarte "Erweitert" die folgenden Einstellungen für Sticky-Effekte.

  • Sticky Bottom Offset: 150px (Desktop), 0px (Tablet)
  • Oberes Sticky Limit: Abschnitt (Desktop), Keine (Tablet)
  • Unteres Sticky Limit: Abschnitt (Desktop), Reihe (Tablet)
  • Versatz von umgebenden klebrigen Elementen: NEIN

Gehen Sie nun zurück zur Registerkarte Inhalt und ändern Sie den Text nach Bedarf. Fügen Sie den Text auch mit der Überschrift H4 ein, da wir zuvor die H4-Einstellungen geändert haben. Ändern Sie auch die klebrige Hintergrundfarbe.

  • Klebrige Hintergrundfarbe: #febd2d

Gehen Sie zurück zur Registerkarte "Erweitert" und aktualisieren Sie den Z-Index im Sticky-Zustand. Dadurch bleibt der Text auf mobilen Geräten oben.

  • Z-Index (klebrig): 10003

Weitere Inhalte hinzufügen

Wir müssen etwas mehr Inhalt unter dem Bild anhängen, damit wir genug Inhalt zum Scrollen haben. Fügen Sie also unter dem Bild ein weiteres Textmodul hinzu und fügen Sie einige Schriften Ihrer Wahl hinzu.

Doppelte Zeile 1

Erstellen Sie schließlich eine Kopie der ersten Zeile, indem Sie sie duplizieren.

Schritt 2: Erstellen Sie den Sticky Header für die zweite Zeile Second

Ändern Sie nun die Überschrift H4 in Spalte 1.

Ändern Sie nun die Sticky-Einstellungen.

  • Sticky Top Offset: 50px (Desktop), 0px (Tablet)
  • Sticky Bottom Offset: 100px (Desktop)
  • Oberes Sticky-Limit: Abschnitt (Tablet)

Aktualisieren Sie den Z-Indexwert.

  • Z-Index (klebrig): 10002

Doppelte Zeile 2

Erstellen Sie dann erneut eine Kopie von Zeile zwei, indem Sie sie duplizieren.

Schritt 3: Erstellen Sie den Sticky Header für die dritte Zeile

Ändern Sie wieder H4 in Spalte 1 und benennen Sie es als Schritt - 3.

Ändern Sie nun die Sticky-Optionen für den Text.

  • Sticky Top Offset: 100px (Desktop)
  • Sticky Bottom Offset: 50px (Desktop)

Aktualisieren Sie erneut den Z-Index-Wert für die dritte Zeile.

  • Z-Index (klebrig): 10001

Z-Index für jede Spalte 1 aktualisieren

Wir haben bereits alle H4-Überschriften mit einem Z-Index-Wert versehen. Jetzt aktualisieren wir auch den Wert für jede Spalte, die diese klebrigen Überschriften enthält. Öffnen Sie jede Spalte und aktualisieren Sie den Wert.

  • Zeile 1 > Spalte 1: Z-Index = 20
  • Zeile 2 > Spalte 1: Z-Index = 19
  • Zeile 3 > Spalte 1: Z-Index = 18

Abschnitt 3: Ankerlinks für klebrige Überschriften

Jetzt weisen wir den Zeilen eine CSS-ID zu, damit der Benutzer die gesamte Seite problemlos über sie bedienen kann.

Reihe 1: Ankerverbindung

Öffnen Sie die Einstellungen für Zeile 1 und fügen Sie die folgende CSS-ID hinzu.

  • CSS-ID: eins

Öffnen Sie nun die Textmoduleinstellungen in Spalte 1 oder Zeile 1 und fügen Sie die Modullink-URL hinzu.

  • Modul-Link-URL: #one

Reihe 2: Ankerverbindung

Öffnen Sie die Einstellungen für Zeile 2 und fügen Sie die folgende CSS-ID hinzu.

  • CSS-ID: zwei

Öffnen Sie nun die Textmoduleinstellungen in Spalte 1 oder Zeile 1 und fügen Sie die Modullink-URL hinzu.

  • Modul-Link-URL: #two

Reihe 3: Ankerverbindung

Öffnen Sie die Einstellungen für Zeile 3 und fügen Sie die folgende CSS-ID hinzu.

  • CSS-ID: drei

Öffnen Sie nun die Textmoduleinstellungen in Spalte 1 oder Zeile 1 und fügen Sie die Modullink-URL hinzu.

  • Modul-Link-URL: #drei

Endgültige Ansicht

Hier ist also unsere scrollende klebrige Überschrift für ein einzigartiges Ankerlink-Navigationsdesign.

Letzte Worte

Ehrlich gesagt, die Verwendung einer klebrigen Überschrift im Webdesign bringt mehr Charme und hilft den Besuchern, durch den Inhalt zu gehen. Die Verwendung von Ankerlinks kann Ihre Besucher verbessern, indem die Benutzererfahrung in vielerlei Hinsicht verbessert wird. Diese integrierten Optionen von Division bieten Ihnen immer mehr Möglichkeiten, Ihren Besuchern eine bessere Website bereitzustellen. Hoffentlich hilft Ihnen dieses Tutorial beim Erstellen einer klebrigen Überschrift mit einzigartiger Ankerlink-Navigation. Scrollen einer klebrigen Überschrift für eine einzigartige Ankerlink-Navigation. Bitte lassen Sie uns wissen, welche weiteren Themen wir mit Ihnen teilen können. Viel Spaß mit Division.