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.

Der mobile Header verfügt über ein fixiertes Design und kann nicht angepasst werden. So ändern Sie die Inhalte im mobilen Header:

1. Klicken Sie in der oberen Navigationsleiste auf Smartphone-Version anzeigen und bearbeiten.
2. Klicken Sie auf die Inhalte im Header, um sie zu bearbeiten.

Header-Typen

Es gibt drei Typen von Headern: flexibel, fixiert (auch „fest“ genannt) und angeheftet (auch „sticky“ genannt).

Weitere Informationen über Header finden Sie im folgenden Video:

Flexible Header

Damit ein Header angepasst werden kann, muss er in einen flexiblen Header umgewandelt werden. Das erreicht man, indem er in eine Zeile umgewandelt wird. In den meisten Vorlagen ist der Header standardmäßig eine Zeile. In einigen älteren Vorlagen sind die Anpassungsoptionen für Header jedoch beschränkt. Vorlagen mit fixierten Headern enthalten in der Standardeinstellung normalerweise bestimmte Widgets, wie Social-Media-Links oder eine Telefonnummer im Header. Diese Widgets sind jedoch fixiert und können nicht wie die Widgets in normalen Zeilen verschoben werden. Indem Sie den Header in eine Zeile umwandeln, können Sie im Header Widgets hinzufügen oder bearbeiten.

So können Sie einen Header so einstellen, dass er flexibel ist, und einen Header in eine Zeile verwandeln:

1. Fahren Sie mit der Maus über den Header und klicken Sie auf Header.
2. Aktivieren Sie in der Registerkarte Inhalte die Option Header in Zeile umwandeln.
   In den meisten neuen Vorlagen ist der Header in der Standardeinstellung eine Zeile. Wahrscheinlich tritt das Problem bei Ihnen nur auf, wenn Sie ältere Vorlagen mit festen Headern verwenden.

Fester Header

In einigen unserer älteren Vorlagen sind die Header fixiert. Das bedeutet, dass der Header das Logo, die Navigation, Social-Media-Symbole und Text enthält, aber gesperrt ist und nicht mit Widgets aus dem Abschnitt Widgets angepasst werden kann.

Verkleinerte Header

Der verkleinerte 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 angehefteten Headers. 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 verkleinerte Header ist in der Desktop- und der Tablet-Ansicht verfügbar. Verkleinerte Header lassen sich nur umschalten, wenn der Header in eine Zeile umgewandelt wurde. Wenn der Header keine Zeile ist und die Vorlage einen festen Header hat, ist die Option für den verkleinerten Header nicht verfügbar. Weitere Informationen finden Sie unter Header.

Weitere Informationen zu verkleinerten Headern finden Sie unter Verkleinerte Header.

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. Wenn Sie zu einem dieser Layouts wechseln, werden fixierte Header in flexible Header umgewandelt. 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.

Sticky-Header

Um einen Sticky-Header zu erstellen, fahren Sie mit der Maus über einen Header, klicken Sie auf Header und wählen Sie die Option Sticky-Header aktivieren. Der Header wird dann statisch und bleibt an einer Position, wenn Besucher durch die Seiten Ihrer Website scrollen.

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.

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.