Ein Sticky Header bleibt am oberen Bildschirmrand fixiert, während Besucher nach unten scrollen. Dies hält Ihre Navigationsleiste jederzeit sichtbar und erleichtert es den Benutzern, sich auf Ihrer Website zu bewegen, ohne zum Anfang zurückscrollen zu müssen.
Schritt 1: Fügen Sie einen Header-Bereich hinzu
Öffnen Sie die Seite oder Vorlage, die Sie im SeedProd-Builder bearbeiten möchten. Fügen Sie einen Bereich hinzu, der Ihre Header-Elemente enthält – Ihr Logo, Ihre Navigationsleiste oder andere Header-Inhalte.
Schritt 2: Öffnen Sie die Bereichseinstellungen
Klicken Sie auf das Zahnradsymbol in der lila Symbolleiste des Bereichs, um dessen Einstellungsfenster zu öffnen. Alternativ können Sie das Layout-Navigationsfenster öffnen und dort auf den Header-Bereich klicken.
Schritt 3: Öffnen Sie das Positionierungsfenster
Klicken Sie in den Bereichseinstellungen auf die Registerkarte Erweitert und erweitern Sie dann das Fenster Position.
Schritt 4: Konfigurieren Sie die Sticky-Position
Wählen Sie im Dropdown-Menü Position die Option Sticky. Konfigurieren Sie dann die folgenden Werte, um sicherzustellen, dass der Header oben über allen anderen Seitenelementen fixiert bleibt:
- Top Offset: Setzen Sie auf
0, damit der Header bündig am oberen Rand des Ansichtsfensters sitzt. - Z-Index: Setzen Sie auf einen hohen Wert wie
9999, um sicherzustellen, dass der Header über allen anderen Elementen auf der Seite angezeigt wird.
Schritt 5: Speichern und Vorschau
Klicken Sie auf Speichern, um Ihre Änderungen zu übernehmen, und zeigen Sie dann eine Vorschau der Seite an. Scrollen Sie nach oben und unten, um zu bestätigen, dass der Header am oberen Bildschirmrand fixiert bleibt.
Ihr Sticky Header ist jetzt live. Besucher haben Ihre Navigation immer in Reichweite, während sie durch jede Seite Ihrer Website scrollen – egal wie lang der Inhalt ist.