Eine Website-Kopfzeile erstellen

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.

Es ist nicht möglich, seitenspezifische Header zu erstellen oder Elemente auf bestimmten Seiten zu entfernen.

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.

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

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.

Globale Stile festlegen

So legst du Header-Stile 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. Dadurch öffnet sich der Tab Global.
3. Um deinen Website-Titel zu bearbeiten oder ein Logo-Bild hinzuzufügen, klicke auf Website-Titel & Logo. Es werden dann Logos anstatt deines Website-Titels angezeigt. Wenn du ein Logo hinzufügst, füge auch einen Website-Titel hinzu. Suchmaschinen verwenden den Titel für Suchergebnisse und Browser-Tabs, es sei denn, du fügst einen separaten SEO-Titel hinzu.
4. Um einen Button, Social-Media-Symbole, ein Warenkorb-Symbol oder einen Kundenkonto-Login hinzuzufügen oder auszublenden, klicke auf Elemente.
5. Um Header-Hintergrundstile hinzuzufügen, klicke auf Stil. Mehr über diese Optionen erfährst du unten.
6. Um den Header oben auf deiner Website fixiert zu halten, aktiviere den Schalter Feste Position. Wenn der Header fixiert ist, lege den Festen Header-Stil auf Einfach (wird immer oben auf der Website angezeigt) oder Zurückscrollen fest (wird beim Hochscrollen oben auf der Website angezeigt). Beide Arten der festen Header können sich beim Scrollen je nach Gerät leicht ausdehnen oder zusammenziehen.
7. Klicke auf eine beliebige Stelle außerhalb des Editors und dann 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 die Kopfzeile und klicke auf Website-Kopfzeile bearbeiten. Klicke auf das Computer-Symbol.
3. Um das Layout zu ändern, klicke auf Header-Layout. Scrolle nach unten, um alle Layout-Optionen zu sehen, und klicke auf eine davon, um eine Vorschau auf deiner 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 den Elementen zu ändern.

Layout und Stile für Mobilgeräte festlegen

1. Klicke auf das Mobilgeräte-Symbol. Deine Website-Vorschau wechselt automatisch zur mobilen Ansicht.
2. Um das Layout zu ändern, klicke auf Header-Layout. Scrolle nach unten, um alle Layout-Optionen zu sehen, und klicke auf eine davon, um eine Vorschau auf deiner Website anzuzeigen.
3. Um die Anzeige deines Menüs zu ändern, wenn die Links erweitert werden, klicke auf Overlay-Menü. Du kannst auch 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.
4. Um die Anzeige deines Menüs zu ändern, wenn das Menü eingeklappt ist, wähle ein Menü-Symbol aus.
5. Klicke auf eine beliebige Stelle außerhalb des Editors und dann 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: Die Drop-down-Menüs der Ordner auf einem Computer stimmen mit der Hintergrundfarbe des Headers überein.

So fügst du einen Hintergrundstil hinzu:

1. Öffne die globalen Header-Einstellungen.
2. Klicke auf Stil.
3. Klicke oben im Editor auf das Drop-down-Menü, um einen Hintergrund auszuwählen. Wähle zwischen Einfarbig, Farbverlauf, Design oder Dynamisch. Unten erfährst du mehr über jede Option.
4. Passe je nach gewähltem Stil die anderen angezeigten Einstellungen an, die Farben, einen Unschärfe-Effekt, Ränder oder einen Schlagschatten umfassen können.
5. Klicke auf eine beliebige Stelle außerhalb des Editors und dann 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. Wähle Hintergrund- und Navigationsfarben aus der Palette deiner Website oder benutzerdefinierte Farben aus.
• Farbverlauf – Wähle eine Farbe, die von dunkel nach hell vom oberen Rand des Headers aus verblasst. Wähle Hintergrund- und Navigationsfarben aus der Palette deiner Website oder benutzerdefinierte Farben aus.
• Design – Passe die Hintergrundfarbe an eines der Farbschemata deiner Website an.
• Dynamisch – Dadurch wird der Hintergrund transparent. Der Header überlagert den ersten Abschnitt auf der Seite und zeigt die Hintergrundfarbe oder das Bild 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 oder Design 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.
• Der Header ist einfarbig, wenn der erste Abschnitt ein Blog-, Galerie-, Shop- oder ein Events-Abschnitt ist.
• Wenn der Hintergrund auf Dynamisch eingestellt ist und der erste Abschnitt auf der Seite ein Galerie-Abschnitt ist, ist der Header über den Galerie-Bildern nicht transparent. Stattdessen zeigt der Header die Hintergrundfarbe des Galerie-Abschnitts an.

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. Einige Browser, darunter Firefox, unterstützen keine unscharfen Hintergründe.
• 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.
• 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.

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.

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