Hinweis: Während unsere beliebtesten Anleitungen ins Deutsche übersetzt wurden, sind einige Anleitungen nur auf Englisch verfügbar.

Eine Website-Kopfzeile erstellen

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 die Kopfzeile deiner Website erstellen und zusätzliche Funktionen wie ein Warenkorb-Symbol, Social-Media-Symbole oder einen Button mit einer Handlungsaufforderung anzeigen kannst. Die Kopfzeile ist auf allen Seiten auf deiner Website identisch. Es ist nicht möglich, eine seitenspezifische Kopfzeile zu erstellen.

Version_7.1_site_header.png

Video ansehen

Eine Kopfzeile erstellen

Wenn deine Website Version 7.0 verwendet, ist deine Kopfzeile 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. Bewege den Mauszeiger über den Header und klicke auf Website-Header 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, einen Warenkorb oder Kundenkonto-Login hinzuzufügen oder auszublenden, klicke auf Elemente.
  5. Um die Farben des Headers zu ändern, klicke auf Farben.
  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 auf Zurück scrollen (wird beim Hochscrollen oben auf der Website angezeigt).
  7. Klicke auf eine beliebige Stelle außerhalb des Editors, bewege den Mauszeiger über Fertig und klicke auf Speichern.

Layouts für Computer und Mobilgeräte festlegen

So legst du fest, wie der Header auf Computern und Mobilgeräten 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 Desktop-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.
  6. Klicke auf das Mobil-Symbol. Deine Website-Vorschau wird automatisch auf die mobile Ansicht umgestellt.
  7. 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.
  8. Um die Anzeige deines Menüs zu ändern, wenn die Links erweitert werden, klicke auf Overlay-Menü. Du kannst auch die Overlay-Farbe des Menüs ändern. 
  9. Um die Anzeige deines Menüs zu ändern, wenn das Menü ausgeblendet wird, wähle ein Menü-Symbol aus. Klicke auf eine beliebige Stelle außerhalb des Editors, fahre mit dem Mauszeiger über Fertig und klicke auf Speichern.

Hintergrund der Kopfzeile

Wenn deine Website die 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 den Hintergrund der Kopfzeile auf transparent oder einfarbig einstellen. Die Drop-down-Menüs der Ordner auf einem Computer passen sich der Hintergrundfarbe der Kopfzeile an. Du kannst auch die Farbe des Kopfzeilen-Overlays für Mobilgeräte festlegen.

Den Hintergrund transparent machen

So machst du den Header-Hintergrund transparent:

  1. Öffne die globalen Kopfzeileneinstellungen.
  2. Klicke auf Farben.
  3. Aktiviere den Schalter Transparent.

Wenn dieser Schalter aktiviert ist, überlagert die Kopfzeile 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.

Wenn der Schalter Feste Position aktiviert ist und der erste Abschnitt ein Hintergrundbild enthält, ändert sich das Verhalten der transparenten Kopfzeile geringfügig. Beim Scrollen wechselt die Kopfzeile von der Anzeige des Hintergrundbilds des ersten Abschnitts zur Anzeige der Hintergrundfarbe des ersten Abschnitts. 

Hinweis: Wenn der erste Abschnitt auf der Seite ein Galerie-Abschnitt ist, wird der Header über den Galerie-Bildern nicht transparent sein. Stattdessen wird im Header die Hintergrundfarbe des Galerie-Abschnitts angezeigt.

Den Hintergrund einfarbig machen

So machst du den Header-Hintergrund einfarbig:

  1. Öffne die globalen Kopfzeileneinstellungen.
  2. Klicke auf Farben.
  3. Deaktiviere den Schalter Transparent und wähle dann ein Farbdesign aus.

Wenn der Transparent-Schalter deaktiviert ist, überlagert die Kopfzeile den ersten Abschnitt auf der Seite. Wenn der erste Abschnitt ein Hintergrundbild hat, verdeckt die Kopfzeile einen Teil des Bildes.

Weitere Hilfe zu Farbdesigns für Abschnitte findest du unter Farben ändern.

Overlay-Farbe auf Mobilgeräten festlegen

Wähle ein Farbdesign für das erweiterte Navigationsmenü aus, das auf mobilen Geräten angezeigt wird:

  1. Öffne die Kopfzeileneinstellungen für Mobilgeräte.
  2. Klicke auf Overlay-Menü und dann auf Farben
  3. Wähle ein Farbdesign aus.

Weitere Hilfe zu Farbdesigns für Abschnitte findest du unter Farben ändern.

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 Kopfzeilen. Diese feste oder „Sticky“-Navigation bleibt an derselben Position oben im Browser, während du nach unten scrollst. Verwende die folgende Tabelle, um zu sehen, welche Templates feste Kopfzeilen 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ählen Sie 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ählen Sie 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 Blocks (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.

War dieser Beitrag hilfreich?
23 von 158 fanden dies hilfreich
Eine Website-Kopfzeile erstellen