Der Header ist der Teil Ihrer Website, der das Logo und die Navigationselemente enthält. Es gibt viele verschiedene Möglichkeiten, den Stil Ihres Headers festzulegen, um einen ansprechenden Header für Ihre Website zu erstellen.
Die Funktion "Scroll on Header" hält wichtige Navigationselemente wie das Logo und das Menü am oberen Bildschirmrand sichtbar, während Benutzer auf der Seite nach unten scrollen. Es komprimiert Logos und die allgemeine Größe der Kopfzeile, um Platz zu sparen und einen einfachen Zugriff auf die Navigation zu gewährleisten, ohne aufdringlich zu sein. Ideal für Websites mit großen Kopfzeilen oder solchen, die für erweitertes Scrollen konzipiert sind, verbessert es die Benutzererfahrung, indem es die Zugänglichkeit zu wichtigen Navigationsoptionen beibehält.
Es ist wichtig zu beachten, dass der Sticky Header bereits aktiviert sein muss, bevor der Scroll on Header aktiviert werden kann.
So aktivieren Sie das Scrollen in der Kopfzeile:
-
hover über die Kopfzeile und klicken Sie auf Kopfzeile.
-
Klicken Sie auf Design bearbeiten. Das Bedienfeld "Kopfzeilendesign" wird angezeigt.
-
Erweitern Sie den Abschnitt Position , und aktivieren Sie den Schalter Als fixierten Header festlegen , falls er noch nicht aktiviert ist.
-
Aktivieren Sie den Schalter Kopfzeile beim Scrollen ändern .
-
Konfigurieren Sie die folgenden Designoptionen:
-
Polsterung. Legen Sie die anfänglichen Werte für padding-top und padding-bottom für die Kopfzeilen fest (dies ist nicht spezifisch für die Option Sticky Header).
-
BG auf der Schriftrolle. Wählen Sie die Hintergrundfarbe und Deckkraft aus. Änderungen, die an einer beliebigen Bildschirmgröße vorgenommen werden, wirken sich auf die anderen aus.
-
Abstände on scroll. Definieren Sie den oberen und unteren Abstand in px, %, vh oder vw. Wenn Sie die desktop Einstellungen für die Bildschirmgröße überschreiben möchten, können Sie Änderungen auf Tablets und Mobilgeräten vornehmen.
-
Größe des Logos. Verwenden Sie den Schieberegler oder das Textfeld, um die Größe des Logos anzugeben, wenn die Kopfzeile beim Scrollen verkleinert wird. Der Standardwert beträgt 66 %. Änderungen müssen an den einzelnen Bildschirmgrößen vorgenommen werden.
-
Änderungen, die im Abschnitt "Layout" des Header-Design-Panels vorgenommen werden, wirken sich nicht auf die Positionseinstellungen aus.
Sie haben die Flexibilität, Ihre Kopfzeile so einzustellen, dass sie sich mit dem Inhalt in den ersten Zeilen der Seite überschneidet. Dies kann einen visuell ansprechenden Effekt erzeugen, bei dem sich der Header nahtlos in den Inhalt integriert. Falls gewünscht, können Sie die Kopfzeile so einstellen, dass sie die ersten Zeilen überlappt. Dies muss pro Seite aktiviert werden.
So aktivieren Sie die Überlappungsüberschrift mit den ersten Zeilen:
-
hover über die Kopfzeile und klicken Sie auf Kopfzeile.
-
Klicken Sie auf Design bearbeiten. Das Bedienfeld "Kopfzeilendesign" wird angezeigt.
-
Erweitern Sie den Abschnitt Position , und aktivieren Sie den Umschalter für Überlappung des 1. Abschnitts auf der Seite.
-
(Fakultativ) Konfigurieren Sie eine Hintergrundfarbe, die für alle Bildschirmgrößen gilt.
Nicht alle widget sind kompatibel und werden in der verkleinerten Kopfzeile angezeigt. Wenn Sie eine widget in der Kopfzeile haben, die nicht mit der verkleinerten Kopfzeile kompatibel ist, wird anstelle der widgeteine leere Spalte angezeigt. Sie können widget nicht bearbeiten, wenn die Kopfzeile verkleinert ist.
Die folgenden widget sind kompatibel und werden in einer verkleinerten Kopfzeile angezeigt:
-
Navigation
-
Mehrsprachigkeit
-
Social Media-Symbole
-
Click-to-Call-Schaltfläche
-
Click-to-Email-Schaltfläche
-
vCita
-
PayPal-Schaltfläche
-
Facebook gefällt mir Button
-
Bilder und Logos
-
Absatz widget
-
Titel widget
-
Buttons
Ein Sticky Header wird statisch und bleibt an Ort und Stelle, wenn Sie durch die Seiten Ihrer Website scrollen.
So aktivieren Sie einen Sticky Header:
-
hover Sie über die Kopfzeile, klicken Sie auf Kopfzeile, und klicken Sie dann auf Entwurf bearbeiten.
-
Wählen Sie auf der Registerkarte Inhalt die Option Als fixierten Header festlegen aus. Wenn die Option für Sticky Header nicht verfügbar ist, müssen Sie den Schalter für Shrinking Header auf der Registerkarte Shrinking Header deaktivieren.
Es stehen mehrere vorgefertigte, flexible Header-Layouts zur Auswahl. Wenn Sie zu einem der vorgefertigten flexiblen Kopfzeilenlayouts wechseln, können Sie nicht zurück zu einer festen Kopfzeile wechseln, sondern nur zwischen anderen flexiblen Kopfzeilenlayouts. Durch das Wechseln des Layouts werden auch vorhandene Inhalte aus dem Kopfbereich entfernt. Es wird empfohlen, vor dem Wechsel des Layouts ein Backup zu erstellen.
So ändern Sie das Header-Layout:
-
hover über die Kopfzeile und klicken Sie auf Kopfzeile.
-
Wählen Sie auf der Registerkarte Entwurf ein neues Kopfzeilenlayout aus. Wenn Sie zu einem Sticky Header wechseln, müssen Sie zuerst den Schalter für Shrinking Header auf der Registerkarte Shrinking Header deaktivieren.
-
Layout: Entdecken Sie Layout-Optionen, die Top-Navigation und Hamburger-Stile konsistent über Bildschirmgrößen hinweg kombinieren. Während Standardlayouts nur über begrenzte Funktionen verfügen, erhöht eine erweiterte Bearbeitungsoption die Flexibilität.
-
Abstände: Legen Sie Ränder und Abstand fest, wobei sich Änderungen am desktop auf andere Bildschirmgrößen auswirken, wenn deren Abstände unverändert bleiben.
-
Hintergrund: Wählen Sie die Hintergrundfarbe oder das Hintergrundbild aus, fügen Sie Ränder oder Schatten hinzu und erleben Sie, wie sich Änderungen nahtlos auf allen Bildschirmgrößen widerspiegeln.
-
Position: Aktivieren Sie eine fixierte Kopfzeile mit scrollbasierten Änderungen. Die Aktivierung des Sticky Headers auf jeder Bildschirmgröße beeinflusst das Verhalten auf anderen.
Wenn der Header ein Bild enthält, wird das Logo der Website beim Wechsel der Header-Layouts beibehalten. Falls es mehr als ein Bild gibt oder das Logo aus einem Text besteht, wird das Logo-Bild wie im Layout beibehalten. Beachten Sie, dass die Kopfzeilen zwischen Geräten nicht verbunden sind. Wenn Sie also ein Logo auf dem Desktop hinzufügen, wird es nicht automatisch zu den anderen Gerätetypen hinzugefügt. Die einzige Ausnahme besteht darin, dass bei Verwendung des Header-Layouts der oberen Leiste auf einem Tablet alle auf dem Desktop vorgenommenen Logoänderungen übernommen werden.
Wenn Sie das Logo löschen, fügen Sie das Bild wieder hinzu, indem Sie das Bildelement zurück in den Header ziehen, und setzen Sie den entsprechenden Link, damit Besucher beim Anklicken zurück zur Startseite geleitet werden.
Für die Kopfzeile kann die erweiterte Bearbeitung aktiviert werden, um auf weitere Anpassungsoptionen zuzugreifen, z. B. die Möglichkeit, weitere widget und Elemente hinzuzufügen. Wenn Sie das Kopfzeilenlayout (im Bereich "Kopfzeilendesign") ändern, werden alle vorgenommenen Änderungen zurückgesetzt und die erweiterte Bearbeitung deaktiviert.
Hinweis
Da die Header über die verschiedenen Bildschirmgrößen hinweg synchronisiert werden, empfiehlt es sich, alle Bildschirmgrößen zu überprüfen, wenn Sie die erweiterte Bearbeitungsoption verwenden.
Wenn Sie die erweiterte Bearbeitung verwenden, wird empfohlen, alle Bildschirmgrößen aufgrund der Header-Synchronisierung zu überprüfen.
So aktivieren Sie die erweiterte Bearbeitung:
-
Klicken Sie auf die Registerkarte Kopfzeile .
-
Klicken Sie auf Design bearbeiten.
-
Klicken Sie im Abschnitt Layout auf Erweiterte Bearbeitung aktivieren.
Wenn Sie einen Tarif haben, um verschiedene Elemente auf desktop und Mobilgeräten anzuzeigen (z. B. eine Schaltfläche auf desktop und ein Symbol auf Mobilgeräten), verwenden Sie die Ein-/Ausblendfunktion für nahtlose Übergänge.
Um die erweiterte Bearbeitung zu deaktivieren und die Kopfzeile zurückzusetzen, wählen Sie ein anderes Layout aus:
-
Klicken Sie auf die Registerkarte Kopfzeile .
-
Klicken Sie auf Design bearbeiten.
-
Klicken Sie im Bereich Layout auf den Pfeil, um zu den Layout-Optionen zu gelangen.
-
Wählen Sie ein anderes Layout aus, um die erweiterte Bearbeitung zu deaktivieren und die Kopfzeile zurückzusetzen. Alle Änderungen, die mit der erweiterten Bearbeitung vorgenommen wurden, werden rückgängig gemacht und nicht gespeichert.
Kommentare
0 Kommentare
Zu diesem Beitrag können keine Kommentare hinterlassen werden.