Gestalte das Menü und andere Elemente, die oben auf jeder Seite deiner Website erscheinen.

Im Header deiner Website wird deine Navigation und dein Titel oder Logo angezeigt. Die Kopfzeile sieht auf deiner gesamten Website gleich aus und spielt eine große Rolle bei der Navigation und Interaktion der Besucher mit deinen Inhalten. Sie befindet sich ganz oben auf deiner Website.

In dieser Anleitung erfährst du, wie du den Header deiner Website erstellen und weitere Funktionen wie ein Warenkorb-Symbol, Social-Media-Symbole oder einen Button mit einer Handlungsaufforderung anzeigen kannst. Der Header ist auf allen Seiten auf deiner Website identisch.

Hinweis: Es ist nicht möglich, seitenspezifische Header zu erstellen oder Elemente auf bestimmten Seiten zu entfernen. Wenn deine Website jedoch Version 7.1 verwendet, kannst du den Header auf bestimmten Seitentypen ausblenden.

Video ansehen – Einen Header erstellen

Eine Kopfzeile erstellen

Wenn deine Website Version 7.0 verwendet, ist dein Header Teil des Templates deiner Website. Gehe direkt zum Abschnitt über die 7.0-Funktionen weiter unten, um mehr zu erfahren.

Wenn du deine Website erstellst, kann deine Kopfzeile bereits deinen Seitentitel, Navigationslinks oder andere Elemente enthalten, je nachdem, welches Design du gewählt hast.

Navigationslinks

Um die Navigationslinks zu ändern, kannst du Seiten im Seiten-Menü hinzufügen, bearbeiten oder löschen. So ordnest du die Links neu an:

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 die Navigationslinks und dann auf das Bleistift-Symbol.
4. Klicke und ziehe die Navigationslinks, um sie in deiner bevorzugten Reihenfolge anzuordnen.

Bitte beachte, dass durch das Neuanordnen der Links hier auch diese im Seiten-Menü neu angeordnet werden.

Während du deinen Header erstellst, kannst du Stile für die gesamte Website festlegen und auswählen, wie der Header auf Computern und Mobilgeräten aussieht.

Header-Design für die gesamte Website festlegen

So legst du dein Header-Design für die gesamte Website fest:

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. Um deinen Website-Titel zu bearbeiten oder ein Logo-Bild hinzuzufügen, klicke auf deinen Website-Titel oder dein Logo und dann auf das Bleistift-Symbol. Es werden dann Logos anstatt deines Website-Titels angezeigt. Wenn du ein Logo verwendest, stelle sicher, dass du auch einen Website-Titel hinzufügst. Suchmaschinen verwenden den Titel für Suchergebnisse und Browser-Tabs, es sei denn, du fügst einen separaten SEO-Titel hinzu.
4. Wenn du mit der Bearbeitung deines Website-Titels und Logos fertig bist, klicke auf eine beliebige Stelle außerhalb des Editors, um mit der Bearbeitung deines Website-Headers fortzufahren.
5. Um einen Button, Social-Media-Symbole, ein Warenkorb-Symbol, einen Kundenkonto-Login oder eine Sprachoption hinzuzufügen oder auszublenden, klicke auf Elemente hinzufügen und aktiviere bzw. deaktiviere die entsprechenden Schalter. Klicke auf eine beliebige Stelle außerhalb des Editors, um mit der Bearbeitung deines Website-Headers fortzufahren.
6. Klicke auf Speichern, um deine Änderungen zu speichern und die Bearbeitung fortzusetzen, oder auf Beenden und dann auf Speichern, um den Editor zu schließen.

Computer-Layout festlegen

So legst du fest, wie der Header auf Computern angezeigt wird:

1. Klicke links oben in deiner Website-Vorschau auf Bearbeiten.
2. Fahre mit der Maus über den Header und klicke auf Website-Header bearbeiten. Um sicherzustellen, dass du dich in der Desktop-Ansicht befindest, klicke rechts oben auf das Computer-Symbol
3. Um das Layout zu ändern, klicke auf Design bearbeiten. Klicke auf das aktuelle Layout, um alle Optionen zu sehen. Klicke auf ein Layout, um eine Vorschau für deine Website anzuzeigen.
4. Um die Breite des Header-Inhalts festzulegen, klicke auf Voll oder Einrückung.
5. Verwende die Schieberegler, um das Padding und den Abstand zwischen Links, Social-Media-Symbolen und Elementen zu ändern.
6. Wähle aus den folgenden Effekten und denke daran, dass Bearbeitungen an diesen sowohl für die Darstellung auf Computern als auch auf Mobilgeräten gelten:
   • Schlagschatten – Aktiviere den Schalter Schlagschatten, um einen Schatteneffekt um den Header herum hinzuzufügen. Verwende die angezeigten Einstellungen, um Farbe, Ausbreitung und Entfernung auszuwählen und einen Unschärfe-Effekt hinzuzufügen.
   • Rand – Aktiviere den Schalter Rand, um einen Rand um den Header hinzuzufügen. Verwende die angezeigten Einstellungen, um Farbe, Position und Linienstärke zu wählen.
7. Um Header-Hintergrundstile hinzuzufügen, klicke auf Design bearbeiten und dann auf den Tab Farbe. Die hier vorgenommenen Änderungen gelten sowohl für die Darstellung auf Computern als auch auf Mobilgeräten. Mehr über diese Optionen erfährst du unten.
8. Um den Header oben auf deiner Website fixiert zu halten, klicke auf den Tab Design und aktiviere den Schalter Feste Position. Wenn der Header fixiert ist, kannst du den Fixierten Header-Stil auf Einfach (wird immer oben auf der Website angezeigt) oder Zurück scrollen (wird beim Hochscrollen oben auf der Website angezeigt) festlegen. Je nach Gerät können sich beide Arten der festen Header beim Scrollen leicht ausdehnen oder zusammenziehen. Die hier vorgenommenen Änderungen gelten sowohl für die Darstellung auf Computern als auch auf Mobilgeräten.

Layout und Stile für Mobilgeräte festlegen

1. Um zur mobilen Ansicht zu wechseln, klicke in der oberen rechten Ecke deines Bildschirms auf das Mobilgeräte-Symbol. Deine Website-Vorschau wechselt automatisch zur mobilen Ansicht.
2. Um das Layout zu ändern, klicke auf Design bearbeiten. Klicke auf das aktuelle Layout, um alle Optionen zu sehen. Klicke auf ein Layout, um eine Vorschau für deine Website anzuzeigen.
3. Wähle aus den folgenden Effekten und denke daran, dass Bearbeitungen an diesen sowohl für die Darstellung auf Computern als auch auf Mobilgeräten gelten:
   • Schlagschatten – Aktiviere den Schalter Schlagschatten, um einen Schatteneffekt um den Header herum hinzuzufügen. Verwende die angezeigten Einstellungen, um Farbe, Ausbreitung und Entfernung auszuwählen und einen Unschärfe-Effekt hinzuzufügen.
   • Rand – Aktiviere den Schalter Rand, um einen Rand um den Header hinzuzufügen. Verwende die angezeigten Einstellungen, um Farbe, Position und Linienstärke zu wählen.
4. Um den Header oben auf deiner Website fixiert zu halten, klicke auf den Tab Design und aktiviere den Schalter Feste Position. Wenn der Header fixiert ist, kannst du den Fixierten Header-Stil auf Einfach (wird immer oben auf der Website angezeigt) oder Zurück scrollen (wird beim Hochscrollen oben auf der Website angezeigt) festlegen. Je nach Gerät können sich beide Arten der festen Header beim Scrollen leicht ausdehnen oder zusammenziehen. Die hier vorgenommenen Änderungen gelten sowohl für die Darstellung auf Computern als auch auf Mobilgeräten.
5. Um Header-Hintergrundstile hinzuzufügen, klicke auf Design bearbeiten und dann auf den Tab Farbe. Die hier vorgenommenen Änderungen gelten sowohl für die Darstellung auf Computern als auch auf Mobilgeräten. Mehr über diese Optionen erfährst du unten.
6. Um zu ändern, wie dein Menü angezeigt wird, wenn die Links erweitert werden, klicke auf Menü anzeigen und dann auf Design bearbeiten. Du kannst die Ausrichtung und den Link-Abstand festlegen und ein Farbschema auswählen. Verwende die Anpassungen unter Menü-Overlay, um die für Mobilgeräte spezifischen Link-, Button-, Button-Text- und Hintergrundfarben festzulegen.
7. Um die Anzeige deines Menüs zu ändern, wenn das Menü eingeklappt ist, wähle ein Menü-Symbol aus.
8. Klicke auf Speichern, um deine Änderungen zu speichern und die Bearbeitung fortzusetzen, oder auf Beenden und dann auf Speichern, um den Editor zu schließen.

Tipp: Füge ein separates Logo-Bild für deinen mobilen Header hinzu, um ein einzigartiges Erscheinungsbild für Besucher auf Mobilgeräten zu schaffen. Weitere Informationen findest du unter Ein Website-Logo hinzufügen.

So legst du die Schriftart und Größe deines Website-Titels auf Mobilgeräten fest:

1. Öffne Website-Stile.
2. Klicke auf Schriftarten und dann auf Stile zuweisen.
3. Klicke auf Mobile Website: Titel und dann auf die Drop-down-Menüs, um den Stil und die Größe der Schriftart auszuwählen.

Mehr dazu erfährst du unter Schriftarten ändern.

Header-Hintergrundstile

Wenn deine Website Version 7.0 verwendet, hängt der Hintergrund deiner Kopfzeile vom Template deiner Website ab. Gehe direkt zum Abschnitt über die 7.0-Funktionen weiter unten, um mehr zu erfahren.

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.

Tipp: Der Dropdown-Hintergrund auf einem Computer entspricht der Hintergrundfarbe des Headers.

So fügst du einen Hintergrundstil hinzu:

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. Unten erfährst du mehr über jede Option.
5. Passe je nach ausgewähltem Stil die Hintergrundstil-Einstellungen wie Farben, Unschärfe-Effekte und Deckkraft an.
6. Klicke auf Speichern, um deine Änderungen zu speichern und die Bearbeitung fortzusetzen, oder auf Beenden und dann auf Speichern, um den Editor zu schließen.

Stil-Optionen

Wähle aus diesen Hintergrundstil-Optionen:

• Einfarbig – Wähle einen einfarbigen Hintergrund. Du kannst benutzerdefinierte Farben auswählen, die Palette deiner Website verwenden oder die Farbe an eines der Farbschemata deiner Website anpassen.
• Farbverlauf – Der Header überlagert den ersten Abschnitt auf der Seite. Wähle eine Farbe, die in den Hintergrund des ersten Abschnitts übergeht. Wähle Hintergrund- und Navigationsfarben aus der Palette deiner Website oder benutzerdefinierte Farben aus.
• Adaptiv – Dadurch wird der Hintergrund transparent. Der Header überlagert den ersten Abschnitt auf der Seite und zeigt den Hintergrund des ersten Abschnitts an. Dies kann sich von Seite zu Seite ändern, je nachdem, ob der erste Abschnitt abschnittsspezifische Stile verwendet oder ein Hintergrundbild hat.

Denke daran:

• Wenn der Hintergrund auf Einfarbig eingestellt ist, überlagert der Header den ersten Abschnitt auf der Seite. Wenn der erste Abschnitt ein Hintergrundbild hat, verdeckt der Header einen Teil des Bildes.
• Wenn der Hintergrund auf Adaptiv oder Farbverlauf eingestellt ist und der erste Abschnitt auf der Seite ein Auto-Layout-, Blog-, Events-, Galerie- oder Shop-Abschnitt ist, ist der Header über den Bildern nicht transparent. Stattdessen wird im Header die Hintergrundfarbe des ersten Abschnitts angezeigt.

Weitere Stil-Optionen

Abhängig von deinem gewählten Hintergrundeffekt zeigt der Editor möglicherweise auch diese Stil-Optionen an:

• Deckkraft – Verwende den Schieberegler, um die Transparenz der Farbe zu ändern.
• Unscharfer Hintergrund – Aktiviere den Schalter Unscharfer Hintergrund, um Hintergrundinhalte unscharf zu machen. Unscharfe Hintergründe sind bei geringer Deckkraft besser zu sehen.

Hinweis: Einige Browser, darunter Firefox, unterstützen keine unscharfen Hintergründe.

Video ansehen – Header-Stile

Einen Button zu einem Header hinzufügen

Durch das Hinzufügen eines Buttons zu einem Header wird deine Handlungsaufforderung in den Mittelpunkt gestellt und ermutigt die Besucher, sofort darauf zu klicken. Deine Optionen hängen von der Version deiner Website ab.

Kopfzeile 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.

Das Ausblenden des Headers ist nur für leere Seiten und Layout-Seiten sowie leere Seiten und Layout-Seiten auf Mitglieder-Websites verfügbar. Sammlungs-Seiten wie Blog, Shop, Portfolio und Events haben 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.

Wiederhole diese Schritte für jede Seite, auf der du den Header ausblenden möchtest. 

Kopfzeilen-Funktionen in Version 7.0

In Version 7.0 erscheint die Website-Kopfzeile weiterhin auf jeder Seite und enthält die gleichen Elemente wie in Version 7.1, aber ihr Stil hängt vom Template deiner Website ab. Mehr über die Kopfzeile deines Templates erfährst du in der entsprechenden Template-Anleitung.

Manche Templates haben besondere Funktionen in der Kopfzeile. Verwende die Links in dieser Tabelle, um Näheres zu erfahren:

Funktion	Verfügbarkeit
Hintergrundfarbe	Verfügbar in einigen Templates
Banner-Bild oder -Video	Verfügbar in einigen Templates
Block-Bereich	Verfügbar in einigen Templates
Geschäftsinformationen	Verfügbar in einigen Templates
Schaltflächen	Verfügbar in einigen Templates
Fester Header	Verfügbar in einigen Templates
Dropdowns	Immer verfügbar, aber die Anzeige variiert je nach Template
Logo	Immer verfügbar, aber die Anzeige variiert je nach Template
Primärnavigationslinks	Immer verfügbar, aber die Anzeige variiert je nach Template
Navigation-Overlay	Verfügbar in der Template-Gruppe Skye (Einige mobile Websites haben ein Overlay)
Suchleiste	Verfügbar in einigen Templates
Sekundärnavigation	Verfügbar in einigen Templates
Warenkorb	Immer verfügbar, aber einige Vorlagen haben Stil-Optionen
Seitentitel	Immer verfügbar, aber die Anzeige variiert je nach Template
Social-Media-Symbole	Verfügbar in einigen Templates
Slogan	Verfügbar in einigen Templates

Feste Kopfzeilen in Version 7.0

In Version 7.0 unterstützen einige Templates feste Header. Diese feste oder „Sticky“-Navigation bleibt an derselben Position oben im Browser, während du nach unten scrollst. Anhand der folgenden Tabelle kannst du sehen, welche Templates feste Header unterstützen und wie diese auf einem Computer oder einem Mobilgerät angezeigt werden.

• Sofern nicht anders angegeben, zeigen feste Header alle Header-Elemente deiner Website an (wie Website-Titel oder Logo und Navigationslinks).
• Um auf kleineren Bildschirmen Platz zu sparen, kann die Navigation auf Mobilgeräten in vielen Templates nicht fixiert werden. In einigen Fällen kann die Navigation auf größeren Mobilgeräten, wie z. B. Tablets, fixiert werden.

Template	Computer	Mobilgerät
Adirondack	Aktivieren Sie in Website-Stil die Option Nav immer anzeigen. Wenn du nach unten scrollst, wird die Kopfzeile ausgeblendet und der Seitentitel ersetzt das Logo. Mehr erfahren.	Nicht fixiert
Avenue	Nicht fixiert	Nicht fixiert
Aviator	Nur Navigationslinks Verwenden Sie in Website-Stil die Option Info-Seiten-Layout, um entweder Offset oder Visitenkarte auszuwählen.	Nicht fixiert
Bedford	Nur Index-Seiten Die Kopfzeile erscheint an einer festen Position erneut, nachdem Sie über den ersten Abschnitt hinaus scrollen.	Nicht fixiert
Brine	Nicht fixiert	Die obere Mobilgeräte-Leiste kann fixiert werden (Seitenanfang auf Mobilgeräten fixieren). Die untere Mobilgeräte-Leiste ist immer fixiert. Wähle aus, was in diesen angezeigt wird.
Farro	Nicht fixiert	Die obere Mobilgeräte-Leiste kann fixiert werden (Seitenanfang auf Mobilgeräten fixieren). Die untere Mobilgeräte-Leiste ist immer fixiert. Wähle aus, was in diesen angezeigt wird.
Five	Nicht fixiert	Nicht fixiert
Flatiron	Wählen Sie in Website-Stil Kopfzeilen-Position: Fest.	Nicht fixiert
Forte	Nicht fixiert	Nicht fixiert
Galapagos	Nicht fixiert	Nicht fixiert
Ishimoto	Nicht fixiert	Nicht fixiert
Momentum	Immer fixiert	Immer fixiert
Montauk	Nicht fixiert	Nicht fixiert
Native	Nicht fixiert	Nicht fixiert
Pacific	Nur Navigationslinks und nur auf Index-Seiten, die als Startseite festgelegt sind. Wählen Sie in Website-Stile Index-Scrolling-Nav: Beim Scrollen anzeigen. Die Navigation erscheint an einer festen Position erneut, nachdem Sie über den ersten Abschnitt hinaus scrollen.	Nicht fixiert
Skye	Immer fixiert Kann transparent sein	Immer fixiert
Supply	Seitenleiste, fixiert (scrollt, wenn der Inhalt die Höhe des Browsers übersteigt)	Nicht fixiert
Tremont	Nicht fixiert	Nicht fixiert
Wells	Seitenleiste, immer fixiert	Nicht fixiert
Wexley	Nicht fixiert	Nicht fixiert
York	Nicht fixiert	Mobilgeräte-Leiste kann fixiert werden (Mobilgeräte-Leiste: Position: Am Seitenanfang fixiert oder Am Seitenende fixiert)

Kopfzeilen in der Version 7.0

In der Version 7.0 unterstützen einige Vorlagen Seiten-Kopfzeilen. Solche Kopfzeilen sind seitenspezifische Inhaltsbereiche, die oberhalb des Seiteninhalts angezeigt werden.

Seiten-Kopfzeilen sind in diesen Template-Familien verfügbar:

• Avenue
• Brine (sogenannte Intro-Bereiche)
• Farro (sogenannte Intro-Bereiche)
• Five
• Wexley
• York

So bearbeitest du die Kopfzeile der Seite:

1. Wenn du den Mauszeiger über den oberen Rand der Seite bewegst, kannst du anschließend auf Edit (Bearbeiten) klicken.
2. Mit Blöcken kannst du Inhalte wie Text und Bilder hinzuzufügen.
3. Klicken Sie auf Save (Speichern), um Ihre Änderungen zu veröffentlichen.

Kopfzeilen sind vom Inhalt der Hauptseite getrennt. Es ist nicht möglich, Blöcke aus der Kopfzeile in andere Inhaltsbereiche auf der Seite zu verschieben.