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.
Der Shrinking Header ist eine kleinere Version des Website-Headers, mit der Sie wichtige Navigationsinformationen fixieren können, ohne die Benutzer beim Scrollen auf einer Seite nach unten zu stören und ohne zu viel Platz zu beanspruchen. Es fungiert als Sticky-Header-Funktion, komprimiert jedoch die Größe der Logos und die allgemeine Größe des Headers. Es ist besonders nützlich bei Websites mit großen Kopfzeilen und Websites, die für langes Scrollen ausgelegt sind.
Hinweis
Der Shrinking-Header ist auf dem Desktop verfügbar und nur auf dem Tablet, wenn das Header-Layout der oberen Leiste verwendet wird.
So aktivieren Sie eine verkleinerte Kopfzeile:
-
hover Sie über die Kopfzeile, klicken Sie auf Kopfzeile, und klicken Sie dann auf Entwurf bearbeiten.
-
Klicken Sie auf der Registerkarte Shrinking Header auf den Schalter Shrinking Header aktivieren . Sie haben folgende Möglichkeiten:
-
Navigation nur anzeigen Zeilen. Zeigen Sie die Zeilen mit Navigation nur an, wenn der Header verkleinert wird. Diese Funktion ist nur anwendbar, wenn die Kopfzeile mehr als eine Zeile enthält.
-
Hintergrundfarbe. Ändern Sie die Hintergrundfarbe der verkleinerten Kopfzeile. Beachten Sie, dass die Hintergrundfarbe der Zeilen die Hintergrundfarbe der verkleinerten Kopfzeile überschreibt.
-
Mehr Header-Farben beim Scrollen. Geben Sie Farben für den Text, den ausgewählten Link und die hover, Symbole, Button-Text und mehr an.
-
Größe des Logos. Ändern Sie die Größe, auf die das Logo oder Bild verkleinert wird, wenn die Kopfzeile verkleinert wird (Standardwert ist 66 %).
-
Ändern Sie das Logo beim Scrollen. Wählen Sie ein Logo aus, das beim Scrollen angezeigt werden soll.
-
Header Abstände. Passen Sie den oberen und unteren Abstand des verkleinerten Headers an. Sie können den Header Abstände pro Gerät ändern.
-
Sobald der verkleinerte Header aktiviert ist, geschieht Folgendes:
-
Die Überschrift Abstände ändert den oberen/unteren Abstand und den Rand auf 0. Dies gilt nicht für die Zeilen innerhalb des Headers.
-
Bilder in der Kopfzeile werden auf den Prozentsatz in der Logo-Größenleiste verkleinert (Standard ist 66 %).
-
Für die Verarbeitung von Vorlagen mit einem Wert für die Mindesthöhe im Header wird die Mindesthöhe des Headers auf „automatisch“ festgelegt.
-
Wenn leere Zeilen mit Spalten vorhanden sind, nehmen die Spalten den gesamten Raum der Zeile ein.
-
Die Eigenschaften des Designs setzen die Eigenschaften des verkleinerten Headers außer Kraft. Wenn Sie beispielsweise im Header einen Zeilenhintergrund einstellen, wird dieser über dem Hintergrund des verkleinerten Headers angezeigt.
-
Im verkleinerten Header werden leere Zeilen angezeigt.
-
Wenn der verkleinerte Header nicht angezeigt wird, kann dies daran liegen, dass Sie nicht genügend Zeilen auf Ihrer Website haben, damit der verkleinerte Header durch Abwärtsscrollen ausgelöst werden kann. Wenn die Seite nur eine Zeile enthält, kann die Website nicht scrollen.
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
-
OpenTable-Schaltfläche
-
Click-to-Email-Schaltfläche
-
vCita
-
PayPal-Schaltfläche
-
Facebook gefällt mir Button
-
Bilder und Logos
-
Warenkorb
-
Absatz widget
-
Titel widget
-
Buttons
Ein Sticky Header wird statisch und bleibt an Ort und Stelle, wenn Sie durch die Seiten Ihrer Website scrollen.
Hinweis
Mobile Header sind standardmäßig immer Sticky.
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.
Um auf das Menü "Kopfzeilendesign" zuzugreifen, hover Sie über die Kopfzeile, klicken Sie auf "Kopfzeile" und dann auf die Registerkarte "Design ".
-
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 die Kopfzeile ziehen und den Link so setzen, dass er zur Startseite zurückkehrt. Weitere Informationen finden Sie unter widget: Bild.
Sie können Ihrer desktop - und Tablet-Website ein erweiterbares Menü hinzufügen, um auf einfache Weise eine moderne Website mit großer Designflexibilität zu erstellen. Wählen Sie aus mehreren erweiterbaren Menülayouts und passen Sie diese nach Belieben an, indem Sie widget, Zeilen und Spalten hinzufügen.
Das erweiterbare Menülayout für Mobilgeräte bietet mehr Anpassungsmöglichkeiten und eine Möglichkeit, widget in der Kopfzeile und ein Menü anzuzeigen, das immer sichtbar ist.
Sie können das Layout der Kopfzeile in ein vordefiniertes Layout ändern, das Schaltfläche, Click to Call, store Warenkorb, Social-Media-Symbole und mehr enthält. Sie können dem erweiterbaren Menü über das widget -Bedienfeld einen beliebigen widget hinzufügen.
So wählen und konfigurieren Sie eine Kopfzeile und ein erweiterbares Menülayout für desktop und Tablet:
-
Klicken Sie im Seitenbereich auf Design und dann auf Website-Layout.
-
Wählen Sie im Abschnitt desktop das Menülayout Erweiterbar aus.
-
Wählen Sie im Abschnitt Tablet das Menülayout Erweiterbar aus.
-
Nachdem Sie das erweiterbare Menülayout ausgewählt haben, wird ein Hamburger-Symbol in der Kopfzeile Ihrer Website angezeigt. Klicken Sie auf das Hamburger-Symbol (
), um das erweiterbare Menü anzuzeigen.
-
Klicken Sie auf der Registerkarte Layout auf das vorhandene Layout, um ein Menülayout auszuwählen.
-
In der Registerkarte „Stil“ haben Sie die folgenden Optionen:
-
Eingeben von. Wählen Sie Oben oder Seitlich aus.
-
Eingangseffekt. Wählen Sie Cover oder Push aus.
-
Breite. Verschieben Sie den Schieberegler, um die Breite des erweiterbaren Menüs beim Erweitern festzulegen. Die Breite des Menüs wird in Prozent definiert, um für alle Bildschirmgrößen geeignet zu sein.
-
Hintergrund. Konfigurieren Sie die Hintergrundfarbe oder das Hintergrundbild.
-
Farbe des Schließen-Symbols. Wählen Sie eine Farbe für das Schließen-Symbol und die Hintergrundfarbe des Schließsymbols aus.
-
-
Ändern Sie auf der Registerkarte Abstände den Abstand.
Das erweiterbare Menü kann bis zu 3 Zeilen haben, und jede Zeile lässt sich vollständig anpassen. Wenn für Desktop und Tablet das gleiche Website-Layout ausgewählt ist (für beide „erweiterbar“ oder für beide „obere Navigationsleiste“), werden alle Anpassungen für beide Geräte übernommen. Falls die Layouts unterschiedlich sind, muss jedes Gerät separat definiert werden.
So bearbeiten Sie die Position des erweiterbaren Menüs im Header:
-
hover Sie über die Kopfzeile, klicken Sie auf Kopfzeile, und wählen Sie dann Entwurf bearbeiten aus.
-
Klicken Sie im Abschnitt Layout auf Links oder Rechts.
So wählen Sie eine Kopfzeile und ein erweiterbares Menülayout für Mobilgeräte aus und konfigurieren sie:
-
hover über der Kopfzeile, klicken Sie auf die Kopfbeschriftung, und wählen Sie dann Design bearbeiten aus.
-
Klicken Sie auf der Registerkarte Layout auf das vorhandene Layout, um ein Menülayout auszuwählen. Der mobile Header bietet Layouts, die widget wie Social-Media-Links, Telefonnummer und mehr anzeigen. Die Kopfzeilenlayouts sind festgelegt, sodass Sie keine neuen widgethinzufügen können, aber Sie können sie bearbeiten oder entfernen. Wenn Sie eine store hinzufügen oder die Mehrsprachenfunktion verwenden, stehen Ihnen weitere Layout-Optionen zur Verfügung, die die Symbole für den store Versandwarenkorb und die Mehrsprachenfunktion enthalten. Wenn Sie die store oder mehrsprachig nicht aktiviert haben, werden diese Layouts nicht angezeigt.
-
Klicken Sie auf Links oder Rechts für die Position des Menüsymbols.
-
Wenn Sie es noch nicht getan haben, öffnen Sie das Menü in der mobilen Ansicht. Dadurch kann der Menüeditor geöffnet werden, sodass Sie das erweiterbare Menü bearbeiten können.
-
Klicken Sie auf der Registerkarte Layout auf das vorhandene Layout, um ein Menülayout auszuwählen. Das erweiterbare Menü bietet mehrere Layouts, in denen die sozialen Links, Kontaktinformationen und mehr angezeigt werden können. Sie können dem erweiterbaren Menü beliebige widget hinzufügen, Spalten hinzufügen und die Spalten so sortieren, dass sie nebeneinander oder übereinander liegen. Wenn Sie jedoch von einem Layout zu einem anderen wechseln, werden alle Inhalte gelöscht, die Sie dem Menü hinzugefügt haben, und es werden nur die widget im ausgewählten Layout übernommen.
-
Auf der Registerkarte Formatvorlage stehen Ihnen die folgenden Optionen zur Verfügung:
-
Eingeben von. Wählen Sie Oben oder Seitlich aus. Wenn Oben ausgewählt ist, verschieben Sie den Schieberegler für die Höhe. Wenn Seite ausgewählt ist, verschieben Sie den Schieberegler für die Breite.
-
Eingangseffekt. Wählen Sie Cover oder Push aus.
-
Hinweis
Zusätzliche widget können dem mobilen Header nicht hinzugefügt werden.
Wenn Sie Header-Elemente über Hero-Bildern anzeigen möchten, hover Sie über die Kopfzeile, klicken Sie auf Header, klicken Sie auf den Tab Design und dann auf Erste Zeilen überlappen. Das verleiht Ihren Hero Bildern mehr Sichtbarkeit und erleichtert die Gestaltung einer toll aussehenden, trendigen Website.
Beachten Sie dabei die folgenden Hinweise:
-
Für die Kopfzeile. Legen Sie die Hintergrundfarbe auf transparent oder auf eine Farbe mit Deckkraft fest.
-
Für die ersten Zeilen. Verwenden Sie einen oberen Abstand, der gleich oder ähnlich der Höhe der Kopfzeile ist.
Hinweis
Für zusätzliche Flexibilität gilt diese Einstellung nur für die aktuelle Seite. Um es auf anderen Seiten zu aktivieren, navigieren Sie zu jeder Seite und führen Sie die obigen Schritte aus.
So blenden Sie einen Header auf einer Seite aus:
-
hover Sie über den unteren Rand der Kopfzeile und klicken Sie auf Kopfzeile.
-
Klicken Sie auf Seitenkopf ausblenden auf und wählen Sie das Gerät aus, auf dem die Kopfzeile ausgeblendet werden soll. In Editor 2.0 wird dadurch die Kopfzeile auf allen Seiten ausgeblendet.
So blenden Sie den Header ein:
-
Klicken Sie in der Seitenleiste unter Einstellungen auf das Symbol Elemente einblenden (
).
-
Klicken Sie in der Fußzeile auf das Symbol Ausblenden und wählen Sie Ja aus, um die Kopfzeile wieder einzublenden.