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 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, einen seitenspezifischen Header zu erstellen.

Version_7.1_site_header.png

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. 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, 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 die 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 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 den Link-Abstand festlegen und ein Farbdesign auswählen. Verwende die Anpassungen unter Menü-Overlay, um die für Mobilgeräte spezifischen Link-, Button- und Hintergrundfarben festzulegen.  
  9. Um die Anzeige deines Menüs zu ändern, wenn das Menü eingeklappt ist, wähle ein Menü-Symbol aus.
  10. Klicken Sie auf eine beliebige Stelle außerhalb des Editors, bewegen Sie den Mauszeiger über Fertig und klicken Sie auf Speichern.

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.

Video ansehen – Einen Header erstellen

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. Um deine Änderungen zu speichern, klicke auf eine beliebige Stelle außerhalb des Editors, bewege den Mauszeiger über Fertig und klicke auf Speichern.

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 Farbdesigns 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 machen sich stärker bemerkbar, wenn die Deckkraft unter 90 % liegt. Einige Browser, darunter Internet Explorer und 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

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ä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?
27 von 201 fanden dies hilfreich
Eine Website-Kopfzeile erstellen