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:
- Klicke links oben in deiner Website-Vorschau auf Bearbeiten.
- Fahre mit der Maus über die Kopfzeile und klicke auf Website-Kopfzeile bearbeiten. Dadurch öffnet sich der Tab Global.
- 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.
- Um einen Button, Social-Media-Symbole, ein Warenkorb-Symbol oder einen Kundenkonto-Login hinzuzufügen oder auszublenden, klicke auf Elemente.
- Um Header-Hintergrundstile hinzuzufügen, klicke auf Stil. Mehr über diese Optionen erfährst du unten.
- 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.
- 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:
- Klicke links oben in deiner Website-Vorschau auf Bearbeiten.
- Fahre mit der Maus über die Kopfzeile und klicke auf Website-Kopfzeile bearbeiten. Klicke auf das Computer-Symbol.
- 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.
- Um die Breite des Header-Inhalts festzulegen, klicke auf Voll oder Einrückung.
- Verwende die Schieberegler, um das Padding und den Abstand zwischen den Elementen zu ändern.
Layout und Stile für Mobilgeräte festlegen
- Klicke auf das Mobilgeräte-Symbol. Deine Website-Vorschau wechselt automatisch zur mobilen Ansicht.
- 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.
- 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.
- Um die Anzeige deines Menüs zu ändern, wenn das Menü eingeklappt ist, wähle ein Menü-Symbol aus.
- 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:
- Öffne Website-Stile.
- Klicke auf Schriftarten und dann auf Stile zuweisen.
- 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:
- Öffne die globalen Header-Einstellungen.
- Klicke auf Stil.
- 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.
- 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.
- 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.
Ein Handlungsaufforderungs-Button in Ihrer Website-Kopfzeile wird auf der gesamten Website angezeigt. So fügen Sie Ihrer Kopfzeile einen Button hinzu:
- Klicke auf einer Seite deiner Website auf Bearbeiten.
- Klicke auf Website-Header bearbeiten.
- Klicke auf Elemente.
- Schalte den Button ein.
- Bearbeite den Button-Text und den Link. Du kannst auch Social-Media-Links und einen Warenkorb anzeigen lassen, indem du diese Schalter aktivierst.
- 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.
Je nachdem, welches Layout du für deine Kopfzeile auf einem Computer auswählst, kann der Button von deinen Navigationslinks getrennt oder mit ihnen gruppiert werden. Auf Mobilgeräten wird der Button immer unter deinen Navigationslinks angezeigt.
So gestaltest du die Buttons:
- Form – Öffne das Buttons-Menü der Website-Stile und suche den Tab „Primär“.
- Schriftart – Öffne das Schriftarten-Menü der Website-Stile, klicke auf Stile zuweisen und suche die Anpassung Header-Button.
- Farbe – Verwende in der Desktop-Ansicht die Farbeinstellungen für die gesamte Website. Weitere Informationen zur mobilen Ansicht findest du im Abschnitt oben.
Sie können der Website-Kopfzeile in den folgenden Template-Gruppen Buttons hinzufügen:
- Bedford – Zeige den letzten Link in deiner Navigation als Button an.
- Brine – Gestalte die Haupt- oder Sekundärnavigation oder beide als Buttons.
- Montauk - Füge einen Button-Block zum benutzerdefinierten Untertitel im Header hinzu.
- Skye - Fügen Sie einen Button-Block zum Website-Navigations-Overlayhinzu.
- Wells – Füge einen Button-Block zum Inhaltsbereich der Navigationsseitenleiste hinzu.
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:
- Wenn du den Mauszeiger über den oberen Rand der Seite bewegst, kannst du anschließend auf Edit (Bearbeiten) klicken.
- Mit Blöcken kannst du Inhalte wie Text und Bilder hinzuzufügen.
- 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.