Gestalte die Elemente, die oben auf jeder Seite deiner Website erscheinen.

In deinem Header werden der Titel oder das Logo deiner Website, das Navigationsmenü und andere Funktionen angezeigt. Der Header sieht auf deiner gesamten Website grundsätzlich gleich aus und spielt eine große Rolle bei der Navigation und der Interaktion der Besucher mit deinen Inhalten.

Diese Funktionen sind für Website-Header in Version 7.1 verfügbar. Wenn deine Website Version 7.0 verwendet, ist dein Header spezifisch für das Template deiner Website.

Video über Website-Header

Dieses Video zeigt, wie du den Header deiner Website bearbeiten und gestalten kannst.

Bearbeitung deines Website-Titels oder deines Logos

Als du deine Website erstellt hast, hast du ihr möglicherweise einen Website-Titel gegeben. Wenn du ein Logo hinzufügst, ersetzt es deinen Website-Titel im Header, du solltest aber trotzdem einen Website-Titel hinzufügen. Suchmaschinen verwenden den Titel für Suchergebnisse und Browser-Tabs, es sei denn, du fügst einen separaten SEO-Titel hinzu.

Navigationslinks in deinem Header hinzufügen, bearbeiten oder löschen

Das Navigationsmenü im Header deiner Website zeigt an, welche Seiten du zum Seiten-Menü hinzugefügt hast. So änderst du die Navigationslinks:

• Deiner Navigation Seiten hinzufügen
• Seitentitel bearbeiten
• Seiten löschen

Füge deinem Header einen Button hinzu

Durch das Hinzufügen eines Buttons zu einem Header wird deine Handlungsaufforderung in den Mittelpunkt gestellt und ermutigt die Besucher, sofort darauf zu klicken. Je nach Layout deines Headers kann der Button mit deinen Navigationslinks oder separat von diesen gruppiert werden. Auf Mobilgeräten wird der Button immer unter deinen Navigationslinks angezeigt.

So fügst du deinem Header einen Button hinzu:

1. Öffne das Menü „Seiten“.
2. Klicke links oben in deiner Website-Vorschau auf Bearbeiten.
3. Fahre mit der Maus über die Kopfzeile und klicke auf Website-Kopfzeile bearbeiten.
4. Klicke auf Elemente hinzufügen.
5. Schalte den Button ein.

Den Header-Button bearbeiten

So legst du den Button-Text, den Link und den Stil fest:

1. Öffne das Menü „Seiten“.
2. Klicke links oben in deiner Website-Vorschau auf Bearbeiten.
3. Fahre mit der Maus über die Kopfzeile und klicke auf Website-Kopfzeile bearbeiten.
4. Klicke auf den Header-Button und dann auf das Bleistift-Symbol.
5. Bearbeite unter Inhalt den Button-Text und den Link.
6. Klicke auf den Tab Design und wähle dann Primär, Sekundär oder Tertiär aus, um den Stil des Buttons festzulegen.

Die Form deines Headers richtet sich nach deinen Button-Stilen.

Schriftart des Header-Buttons festlegen

Wenn du deinen Button-Stil auf Sekundär oder Tertiär festlegst, entspricht der Text auf deinem Header-Button deinen Button-Stilen.

So gestaltest du die Schriftart eines Header-Buttons mit dem Primären Stil:

1. Öffne Website-Stile.
2. Klicke neben „Schriftarten“ auf >.
3. Klicke auf Stile zuweisen.
4. Klicke auf Header-Button und nimm die Änderungen vor.

Die Farbe des Header-Buttons festlegen

Wie du die Farbe des Header-Buttons änderst, hängt von deinem Header-Hintergrundstil ab.

Wenn dein Header-Hintergrundstil wie folgt festgelegt ist:

• Einfarbig – Farben – Die Farbe des Buttons richtet sich nach der Standard-Farbpalette deiner Website.
• Einfarbig – Design – Die Button-Farbe richtet sich nach der ausgewählten Farbpalette.
• Farbverlauf – Die Farbe des Buttons richtet sich nach der Standard-Farbpalette deiner Website.
• Adaptiv – Die Button-Farbe richtet sich nach der Farbpalette für den oberen Abschnitt auf jeder Seite. Passe die Button-Farbe für jede Farbpalette an, die in deinen Abschnitten verwendet wird.

Füge deinem Header einen Konto-Login, Social-Media-Links, einen Warenkorb oder eine Sprachumschaltung hinzu

So fügst du deinem Header weitere Elemente hinzu, z. B. einen Konto-Login für Kunden, Social-Media-Links, einen Warenkorb oder eine Sprachumschaltung: 

1. Öffne das Menü „Seiten“.
2. Klicke links oben in deiner Website-Vorschau auf Bearbeiten.
3. Fahre mit der Maus über die Kopfzeile und klicke auf Website-Kopfzeile bearbeiten.
4. Klicke auf Elemente hinzufügen.
5. Aktiviere den Schalter neben den Funktionen, die du aktivieren möchtest.

Header-Funktionen anpassen

Du kannst das Design deiner Social-Media-Links und des Warenkorb-Symbols anpassen. Wenn deine Website Weglot verwendet, kannst du auch die Sprachumschaltung anpassen.

So bearbeitest du diese Funktionen:

1. Öffne das Menü „Seiten“.
2. Klicke links oben in deiner Website-Vorschau auf Bearbeiten.
3. Fahre mit der Maus über die Kopfzeile und klicke auf Website-Kopfzeile bearbeiten.
4. Klicke auf die Funktion, die du bearbeiten möchtest, und klicke dann auf das Bleistiftsymbol .
5. Verwende die Einstellungen, um Änderungen am Design vorzunehmen. Diese Optionen variieren je nach Funktion.
6. Klicke auf Speichern.

Deinem Header Design-Effekte hinzufügen

Wenn du das Design deines Website-Headers bearbeitest, kannst du visuelle Effekte hinzufügen, um ihn einzigartig zu gestalten oder ihn an deine Marke anzupassen. Diese Effekte gelten sowohl für die Desktop- als auch für die mobile Version deines Website-Headers.

So fügst du Header-Effekte hinzu:

1. Öffne das Menü „Seiten“.
2. Klicke in der oberen linken Ecke deiner Website-Vorschau auf Bearbeiten, bewege dann den Mauszeiger über den Header und klicke anschließend auf Website-Header bearbeiten.
3. Klicke auf Design bearbeiten.
4. Füge unter Effekte einen Schlagschatten hinzu, füge einen Rand hinzu und lege einen festen Header-Stil fest.

Deinem Header einen Schlagschatten hinzufügen

So erstellst du einen Schatteneffekt um den Header:

1. Klicke beim Bearbeiten des Header-Designs auf Schlagschatten. Dies aktiviert sofort einen Schlagschatten.
2. Wähle zwischen den Voreinstellungen Weich oder Stark. Du kannst die Voreinstellungen anpassen, nachdem du sie ausgewählt hast.
3. Klicke auf Farbe, um die Farbe auszuwählen und zu gestalten.
4. Verwende die Schieberegler für Breite, Abstand und Unschärfe, um das Erscheinungsbild des Schlagschattens zu ändern. Wir empfehlen dir, verschiedene Kombinationen auszuprobieren, bis du eine findest, die dir gefällt.
5. Klicke auf Entfernen, um den Schlagschatten zu entfernen.

Deinem Header einen Rand hinzufügen

So fügst du deinem Header einen Rand hinzu:

1. Klicke beim Bearbeiten des Header-Designs auf Rand. Dies aktiviert sofort einen Rand.
2. Klicke auf Farbe, um die Farbe auszuwählen und zu gestalten.
3. Klicke auf S, M oder L, um die Linienstärke festzulegen, oder klicke auf …, um eine benutzerdefinierte Stärke festzulegen.
4. Lege die Position des Rands fest. Er kann auf allen Seiten des Headers angezeigt werden, nur oben, nur unten oder sowohl oben als auch unten.
5. Klicke auf Entfernen, um den Rahmen zu entfernen.

Einen festen Header aktivieren

Je nach Gerät können sich beide Arten der festen Header beim Scrollen leicht ausdehnen oder zusammenziehen. So bleibt der Header oben auf deiner Website fixiert, während die Besucher scrollen:

1. Aktiviere beim Bearbeiten des Header-Designs den Schalter Feste Position.
2. Lege den Stil des festen Headers auf Basic (der Header wird immer oben im Browser angezeigt) oder Zurückscrollen (der Header wird nur oben im Browser angezeigt, wenn der Besucher nach oben scrollt) fest.

Dein mobiles Navigationsmenü gestalten

In der mobilen Ansicht wird deine Header-Navigation auf ein erweiterbares Menü reduziert.

So gestaltest du das Navigationsmenü für Mobilgeräte:

1. Öffne das Menü „Seiten“.
2. Klicke in der oberen linken Ecke deiner Website-Vorschau auf Bearbeiten, bewege dann den Mauszeiger über den Header und klicke anschließend auf Website-Header bearbeiten.
3. Klicke rechts oben auf das Symbol Mobile Ansicht.
4. Klicke auf das mobile Navigationsmenü und dann auf das Bleistift-Symbol.
5. Wähle einen Menüsymbol-Stil aus.
6. Klicke auf S, M oder L, um die Linienstärke des Symbols festzulegen, oder klicke auf …, um eine benutzerdefinierte Stärke festzulegen.

Ändern der Hintergrundeffekte und -farbe deines Headers

Du kannst Hintergrundstile zum Header hinzufügen, um deinem Header ein individuelles Aussehen zu verleihen, das sich vom Rest deines Inhalts unterscheidet, oder um ihn an die Markenführung deiner Website anzupassen. Wenn deine Navigation Drop-downs hat, entspricht der Drop-down-Hintergrund auf einem Computer der Hintergrundfarbe des Headers.

So änderst du den Hintergrundstil:

1. Klicke links oben in deiner Website-Vorschau auf Bearbeiten.
2. Fahre mit der Maus über die Kopfzeile und klicke auf Website-Kopfzeile bearbeiten.
3. Klicke auf Design bearbeiten und dann auf den Tab Farbe.
4. Wähle einen Hintergrundstil aus dem Drop-down-Menü oben im Editor aus. Wähle zwischen Einfarbig, Farbverlauf oder Adaptiv.. 
5. Passe je nach ausgewähltem Stil die Farbe, den Unschärfe-Effekt und die Deckkraft des Hintergrundstils an. Einige Browser zeigen möglicherweise keine Unschärfe-Effekte an.

Einfarbiger Header-Hintergrund

Um den Hintergrund des Headers auf einfarbig festzulegen, wähle den einfarbigen Hintergrundstil aus. Wähle eine Benutzerdefinierte Farbe aus, verwende die Palette deiner Website oder passe die Farbe an eine der Farbpaletten deiner Website an.

Header-Hintergrund mit Farbverlauf

Wenn du möchtest, dass der Hintergrund des Headers sanft in den Hintergrund des ersten Abschnitts auf jeder Seite übergeht, wähle den Stil „Farbverlauf“ aus. Du kannst den Hintergrund mit Farbverlauf und die Navigationsfarben anpassen.

Adaptiver Header-Hintergrund

Wenn dein Header von Seite zu Seite unterschiedlich aussehen soll, wähle den adaptiven Stil, um ihn transparent zu machen. Hinter dem Header wird nun der Hintergrund des ersten Abschnitts auf jeder Seite angezeigt.

Deinen Website-Header ausblenden

Um die Aufmerksamkeit auf deine Inhalte zu lenken oder deine Besucher zu einer Aktion zu ermutigen, kannst du den Header auf bestimmten Seiten ausblenden.

Bei Sammlungs-Seiten wie Blog- und Shop-Seiten gibt es diese Option nicht.

So blendest du den Header aus:

1. Öffne das Menü „Seiten“.
2. Bewege den Mauszeiger über einen Seitentitel und klicke dann neben dem Titel auf .
3. Klicke im Tab „Seiteneinstellungen“ auf Navigation.
4. Verwende die Schalter, um Header anzeigen zu deaktivieren.
5. Wiederhole diese Schritte für jede Seite, auf der du den Header ausblenden möchtest. 

Kann ich meinen Header auf Mobilgeräten anders aussehen lassen?

Du kannst das Layout, die Höhe und die Breite deines Headers für mobile Geräte unabhängig von der Desktop-Ansicht anpassen. Andere Designänderungen wirken sich sowohl auf die Desktop- als auch auf die mobile Ansicht aus.

So legst du separate Stile für deine Desktop- oder mobile Ansicht fest:

1. Klicke links oben in deiner Website-Vorschau auf Bearbeiten. Klicke rechts oben auf das Desktop-Ansicht-Symbol oder das Mobile-Ansicht-Symbol, je nachdem, was du bearbeiten möchtest.
2. Fahre mit der Maus über die Kopfzeile und klicke auf Website-Kopfzeile bearbeiten.
3. Klicke auf Design bearbeiten. 
4. Klicke auf das Drop-down-Menü Layout und wähle ein Layout aus, um die Anordnung im Header zu ändern. Verwende die Schieberegler, um den Abstand zwischen Links und anderen Elementen zu ändern.
5. Verwende den Schieberegler für den Header, um die Höhe des Headers zu ändern.
6. Klicke auf Voll oder Eingerückt, um die Breite des Headers festzulegen.
7. Klicke auf Speichern.