Header

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.

Header-Typen

Es sind zwei Arten von Headern verfügbar: Shrinking (verkleinert) und Sticky (angeheftet/fixiert). Shrinking-Header sind auf dem Desktop und im Header der oberen Leiste auf dem Tablet verfügbar. Sticky-Header sind auf allen Geräten verfügbar. Mobile Header sind standardmäßig immer Sticky.

Verkleinerte Header

Der Shrinking-Header ist eine kleinere Version des Website-Headers. So können Sie in geringerer Größe wichtige Hinweise zur Navigation in fixierter Position anzeigen, ohne dass Benutzer beim Scrollen auf der Seite abgelenkt werden. Die Funktion entspricht der eines Sticky-Header. Die Größe der Logos und anderen Widgets im Header wird reduziert. Dieses Feature ist besonders nützlich auf Websites mit großen Headern und Websites mit langen Abschnitten zum Scrollen. Der Shrinking-Header ist auf dem Desktop und für Tablets nur im Header-Layout der oberen Leiste verfügbar.

Header-Layouts

So ändern Sie das Header-Layout:

1. Fahren Sie mit der Maus über den Header und klicken Sie auf Header.
2. Wählen Sie in der Registerkarte „Design“ ein neues Layout für den Header aus. Durch die Verwendung vorgefertigter Header können Sie bei der Gestaltung Ihrer Website Zeit sparen. Sie können jederzeit ein Layout auswählen und es anschließend ändern. Wenn Sie zu einem Sticky-Header wechseln, müssen Sie zuerst die Option „Verkleinerter Header“ auf der gleichnamigen Registerkarte deaktivieren.

Sticky-Header

Um einen Sticky-Header zu erstellen, fahren Sie mit der Maus über einen Header, klicken Sie auf der Registerkarte Inhalt auf Header und wählen Sie die Option Header fixieren.Der Header wird dann statisch und bleibt an einer Position, wenn Besucher durch die Seiten Ihrer Website scrollen.Wenn die Option für Sticky-Header nicht verfügbar ist, müssen Sie die Option „Verkleinerter Header“ auf der gleichnamigen Registerkarte deaktivieren.

Header ausblenden

So blenden Sie einen Header auf einer Seite aus:

1. Fahren Sie mit der Maus über den unteren Bereich des Headers und klicken Sie auf Header.
2. Klicken Sie auf die Option Auf Gerät ausblenden und wählen Sie dann das Gerät aus, auf dem der Header ausgeblendet werden soll.

So blenden Sie den Header ein:

1. Klicken Sie im Seitenbereich unter Einstellungen auf das Symbol Elemente einblenden ().
2. Klicken Sie auf das Symbol Ausblenden im Footer und wählen Sie Ja, um den Header wieder einzublenden.

Weitere Informationen finden Sie unter Ausgeblendete Elemente anzeigen.

Header logo

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. Weitere Informationen finden Sie unter Bild-Widget.

Weitere Header-Optionen

Im Designmenü stehen noch mehr Header-Optionen zur Verfügung, mit denen Sie das Aussehen Ihres Headers weiter anpassen können.

Um auf das Designmenü für den Header zuzugreifen, fahren Sie mit der Maus über den Header. Klicken Sie auf Header und danach auf die Registerkarte Design.

Damit Header-Elemente über Hero-Bildern angezeigt werden, klicken Sie auf Erste Zeile überlappen. Dadurch erhalten Hero-Bilder eine höhere Sichtbarkeit und es ist leichter, ansprechende, moderne Websites zu erstellen. Beachten Sie dabei die folgenden Hinweise:

• Für den Header. Stellen Sie die Hintergrundfarbe auf transparent oder eine Farbe mit Deckkraft ein.
• Für die erste Zeile. Verwenden Sie einen oberen Innenabstand (Padding), der mit der Höhe des Headers identisch ist oder ihr zumindest weitestgehend entspricht.

Beim Wechsel zu einem neuen Header-Layout, das Social-Media-Symbole enthält, werden die Symbole so angezeigt, wie sie in der Inhaltsbibliothek definiert sind. Wenn es keine Social-Media-Links gibt, werden die Social-Media-Symbole wie im Layout allgemein gehalten.