Anleitungen/Website-Layout/Den Header deiner Website formatieren

Den Header deiner Website formatieren

Dein Header wird oben auf jeder Seite deiner Website angezeigt und prägt den ersten Eindruck, den Besucher von deiner Website erhalten. In diesem Ratgeber erfährst du, wie du einen Header-Hintergrund anwendest, einen oben gehaltenen Header erstellst und die Schriftarten anpasst, die in deinem Header verwendet werden.

Anforderungen

Um die Schritte in diesem Ratgeber zu befolgen, benötigst du ein Theme, das den Website-Editor unterstützt. Im Dashboard deiner Website unter Design → Editor kannst du schnell feststellen, ob deine Website den Website-Editor verwendet.

Du musst auf deinen Header-Template-Teil zugreifen. Wenn du das noch nicht getan hast, folge den Anweisungen in unserem Ratgeber Den Header bearbeiten.

Den Hintergrund deines Headers ändern

Die Hintergrundfarbe deines Headers zu ändern hilft dir, deine Markenidentität zu etablieren und dafür zu sorgen, dass deine Navigationselemente aus der Masse herausstechen. So änderst du die Hintergrundfarbe:

  1. Öffne beim Bearbeiten des Header-Template-Teils die Listenansicht, indem du links oben im Editor auf das Icon für die Listenansicht (drei horizontale Zeilen) klickst.
  2. Navigiere zum Gruppenblock in deinem Header-Template-Teil.
Ein Pfeil, der von der „Listenansicht“ auf den Gruppenblock innerhalb des Header-Template-Teils zeigt.
  1. Klicke in der Seitenleiste mit den Block-Einstellungen auf das Stile-Icon. Es sieht aus wie ein schwarz-weißer Kreis.
  2. Wende entweder eine Hintergrundfarbe an oder füge ein Hintergrundbild hinzu.

Weitere Informationen zu Farben oder Hintergrundbildern.

Einen oben gehaltenen Header erstellen

Ein oben gehaltener Header bleibt auf dem Bildschirm fixiert, während dein Besucher durch deine Website scrollt. Befolge diese Schritte, um einen oben gehaltenen Header zu erstellen:

  1. Navigiere in deinem Dashboard zu Design → Editor.
  2. Klicke rechts auf die Vorschau der Startseite oder wähle den Tab Templates aus, um ein bestimmtes Template anzupassen.
  3. Klicke in der linken oberen Ecke auf das Icon Listenansicht.
  4. Wähle das oberste Header-Element aus, klicke auf die drei Punkte () und wähle die Option Gruppieren aus, um den Header in einem Gruppenblock zu platzieren.
  5. Setze in der Seitenleiste mit den Block-Einstellungen die Position auf Oben gehalten.
  6. Klicke auf den Button Speichern, um die Änderungen zu speichern.

Erfahre, wie du den Gruppenblock formatieren kannst, in dem sich deine oben gehaltenen Elemente befinden. Oder erhalte Informationen zum Anpassen des Gruppenblock-Layouts.

Weitere Informationen zum Erstellen von oben gehaltenen Elementen.

Header-Schriftstile ändern

Die Typografie deines Headers anzupassen hilft, die visuelle Identität deiner Marke zu etablieren und die Lesbarkeit zu verbessern. So änderst du Schriftstile:

  1. Klicke während der Bearbeitung des Header-Template-Teils auf das Textelement, das du ändern möchtest (Website-Titel, Menü usw.).
  2. Klicke in der Seitenleiste mit den Block-Einstellungen auf das Stile-Icon. Das Stile-Icon sieht aus wie ein schwarz-weißer Kreis.
  3. Suche die Typografie-Einstellungen, um Schriftfamilie, Größe, Gewicht oder andere Optionen anzupassen.
  4. Klicke auf den Button Speichern, um die Änderungen zu speichern.

Weitere Informationen zu individuellen Schriften.

Copied to clipboard!