Kopfzeilen

Die Kopfzeile ist der Bereich deiner Website, der das Logo und die Navigation enthält. Bei ihrem Stil hast du viele Möglichkeiten und kannst so eine ansprechende Kopfzeile für deine Website gestalten.

Im Editor 2.0 bietet die Standard-Kopfzeile vorgefertigte Layouts, die das Risiko versehentlicher Änderungen verringern. Du kannst Layouts mit eingeschränkten Aktionen wählen, was ein fokussiertes und effizientes Gestalten ermöglicht. Für mehr Individualisierung steht außerdem eine erweiterte Bearbeitungsoption zur Verfügung, mit der du zum Beispiel zusätzliche Widgets oder Elemente hinzufügst, leere oder vorgestaltete Abschnitte einfügst und Kopfzeilen-Abschnitte zur Wiederverwendung speicherst. Weitere Informationen findest du unter „Erweiterte Header-Bearbeitung".

Kopfzeile aus- oder einblenden (Classic Editor)

So blendest du eine Kopfzeile aus:

1. Bewege den Mauszeiger an den unteren Rand der Kopfzeile und klicke auf Header.
2. Klicke auf Header ausblenden und wähle das Gerät, auf dem die Kopfzeile ausgeblendet werden soll.

So blendest du die Kopfzeile wieder ein:

1. Klicke in der Seitenleiste auf das Symbol zum Ein- und Ausblenden.
2. Klicke auf das Symbol Ausblenden in der Fußzeile und wähle Ja, um die Kopfzeile wieder einzublenden.

Kopfzeile aus- oder einblenden (Editor 2.0)

Du kannst die Kopfzeile für alle Seiten oder nur für bestimmte Seiten ausblenden.

So blendest du die Kopfzeile aus:

1. Klicke mit der rechten Maustaste auf die Kopfzeile, um das Kontextmenü zu öffnen.
2. Wähle Verstecken vor und dann entweder Diese Seite auf diesem Gerät oder Alle Seiten auf diesem Gerät.

So blendest du die Kopfzeile wieder ein:

1. Klicke in der Seitenleiste auf Ebenen.
2. Suche deine Kopfzeile im Panel und klicke daneben auf das Symbol mit dem durchgestrichenen Auge.

Schrumpfende Kopfzeile (Classic Editor)

Die schrumpfende Kopfzeile ist eine kleinere Version der Website-Kopfzeile. Damit hältst du wichtige Navigationselemente sichtbar, ohne Besucher beim Scrollen abzulenken und ohne zu viel Platz einzunehmen. Die schrumpfende Kopfzeile funktioniert wie eine fixierte Kopfzeile, verkleinert dabei aber die Logos und die Kopfzeile insgesamt. Besonders nützlich ist sie bei Websites mit großen Kopfzeilen und bei Websites, die für langes Scrollen gestaltet sind.

Hinweis: Die schrumpfende Kopfzeile ist auf dem Desktop verfügbar und auf dem Tablet nur dann, wenn das Top-Bar-Layout der Kopfzeile verwendet wird.

So aktivierst du eine schrumpfende Kopfzeile:

1. Bewege den Mauszeiger über die Kopfzeile, klicke auf Header und dann auf Design bearbeiten.
2. Aktiviere im Tab Schrumpfende Header den Schalter Schrumpfende Header aktivieren. Dir stehen die folgenden Optionen zur Verfügung:
   • Nur Navigationszeile anzeigen: Zeigt beim Schrumpfen nur die Zeile mit der Navigation an. Diese Funktion ist nur verfügbar, wenn die Kopfzeile mehr als eine Zeile hat.
   • Hintergrundfarbe: Ändert die Hintergrundfarbe der schrumpfenden Kopfzeile. Beachte, dass die Hintergrundfarbe der Zeile die Hintergrundfarbe der schrumpfenden Kopfzeile überschreibt.
   • Mehr Header-Farben beim Scrollen: Lege Farben für Text, ausgewählten Link und Hover, Symbole, Button-Text und mehr fest.
   • Logogröße: Ändert die Größe, auf die das Logo oder Bild schrumpft, wenn die Kopfzeile schrumpft (Standard ist 66 %).
   • Logo beim Scrollen ändern: Wähle ein Logo, das beim Scrollen angezeigt wird.
   • Header Abstand: Passe den oberen und unteren Innenabstand der schrumpfenden Kopfzeile an. Du kannst den Abstand der Kopfzeile pro Gerät ändern.

Sobald die schrumpfende Kopfzeile aktiviert ist, passiert Folgendes:

• Der Kopfzeilen-Abstand setzt den oberen/unteren Innenabstand und den Außenabstand auf 0. Das gilt nicht für die Zeilen innerhalb der Kopfzeile.
• Bilder in der Kopfzeile schrumpfen auf den Prozentwert im Regler Logogröße (Standard ist 66 %).
• Bei Vorlagen mit einem Mindesthöhenwert in der Kopfzeile wird die Mindesthöhe der Kopfzeile auf „auto" gesetzt.
• Wenn es leere Zeilen mit Spalten gibt, füllen die Spalten den gesamten Platz der Zeile aus.
• Die Design-Eigenschaften überschreiben die Eigenschaften der schrumpfenden Kopfzeile. Wenn du zum Beispiel einen Zeilenhintergrund in der Kopfzeile festlegst, wird dieser über dem Hintergrund der schrumpfenden Kopfzeile angezeigt.
• Leere Zeilen werden in der schrumpfenden Kopfzeile angezeigt.
• Wenn du deine schrumpfende Kopfzeile nicht siehst, liegt das vielleicht daran, dass du nicht genügend Zeilen auf deiner Website hast, um nach unten zu scrollen und die schrumpfende Kopfzeile auszulösen. Wenn du nur eine Zeile auf der Seite hast, lässt sich die Website nicht scrollen.

Widgets, die mit schrumpfenden Kopfzeilen kompatibel sind

Nicht alle Widgets sind kompatibel und erscheinen in der schrumpfenden Kopfzeile. Wenn du ein Widget in der Kopfzeile hast, das nicht mit der schrumpfenden Kopfzeile kompatibel ist, erscheint an seiner Stelle eine leere Spalte. Du kannst Widgets nicht bearbeiten, während die Kopfzeile geschrumpft ist.

Die folgenden Widgets sind kompatibel und werden in einer schrumpfenden Kopfzeile angezeigt:

• Navigation
• Social Media-Symbole
• Button Anruf per Mausklick
• Button E-Mail per Mausklick
• vCita
• Bilder und Logos
• Paragraph-Widget
• Title-Widget
• Buttons

Fixierte Kopfzeilen

Eine fixierte Kopfzeile bleibt beim Scrollen durch deine Website an ihrem Platz.

Hinweis: Mobile Kopfzeilen sind standardmäßig immer fixiert.

So aktivierst du eine fixierte Kopfzeile:

1. Bewege den Mauszeiger über die Kopfzeile, klicke auf Header und dann auf Design bearbeiten.
2. Wähle im Tab Inhalt die Option Fixierten Header aktivieren. Wenn die Option Sticky Header nicht verfügbar ist, musst du im Tab Schrumpfende Header den Schalter für Schrumpfende Header deaktivieren.

Kopfzeilen-Layouts

Es stehen mehrere vorgestaltete, flexible Kopfzeilen-Layouts zur Auswahl. Wenn du zu einem der vorgestalteten flexiblen Kopfzeilen-Layouts wechselst, kannst du nicht mehr zu einer festen Kopfzeile zurückwechseln, sondern nur zwischen anderen flexiblen Kopfzeilen-Layouts wechseln. Beim Wechseln des Layouts werden außerdem vorhandene Inhalte aus dem Kopfzeilen-Abschnitt entfernt. Wir empfehlen, vor dem Wechsel eine Sicherungskopie zu erstellen.

So änderst du das Kopfzeilen-Layout:

1. Bewege den Mauszeiger über die Kopfzeile und klicke auf Header.
2. Wähle im Tab Design ein neues Kopfzeilen-Layout. Wenn du zu einer fixierten Kopfzeile wechselst, musst du zuerst im Tab Schrumpfende Header den Schalter für Schrumpfende Header deaktivieren.

Kopfzeilen-Design

Um das Design-Menü der Kopfzeile zu öffnen, bewege den Mauszeiger über die Kopfzeile, klicke auf Header und dann auf den Tab Design.

• Layout: Entdecke Layout-Optionen, die obere Navigation und Hamburger-Stile bildschirmgrößenübergreifend einheitlich kombinieren. Während Standard-Layouts eingeschränkte Möglichkeiten bieten, erhöht eine erweiterte Bearbeitungsoption die Flexibilität.
• Abstand: Lege Außen- und Innenabstände fest. Änderungen auf dem Desktop wirken sich auf andere Bildschirmgrößen aus, sofern deren Abstände unverändert bleiben.
• Hintergrund: Wähle eine Hintergrundfarbe oder ein Hintergrundbild, füge Rahmen oder Schatten hinzu und sieh die Änderungen nahtlos auf allen Bildschirmgrößen.
• Position: Aktiviere eine fixierte Kopfzeile mit scrollbasierten Änderungen. Wird die fixierte Kopfzeile auf einer Bildschirmgröße aktiviert, beeinflusst das das Verhalten auf den anderen.

Kopfzeilen-Logo

Wenn die Kopfzeile ein Bild enthält, wird das Logo der Website beim Wechsel zwischen Kopfzeilen-Layouts beibehalten. Enthält sie mehr als ein Bild oder ist das Logo ein Text, wird das Logobild so beibehalten, wie es im Layout vorliegt.

Wichtig: Die Kopfzeilen der verschiedenen Geräte sind nicht miteinander verbunden. Wenn du also auf dem Desktop ein Logo hinzufügst, wird es nicht automatisch auf den anderen Gerätetypen hinzugefügt. Die einzige Ausnahme ist das Top-Bar-Layout auf dem Tablet: Es übernimmt alle Logo-Änderungen, die auf dem Desktop vorgenommen wurden.

Wenn du das Logo löschst, füge das Bild wieder hinzu, indem du das Bildelement zurück in die Kopfzeile ziehst, und setze den Link so, dass er zurück zur Startseite führt.

Kopfzeile und ausklappbares Menü

Du kannst auf deinen Desktop- und Tablet-Websites ein ausklappbares Menü hinzufügen. So gestaltest du ganz einfach moderne Websites mit großer Design-Flexibilität. Wähle aus mehreren Layouts für ausklappbare Menüs und passe sie nach Belieben an, indem du Widgets, Zeilen und Spalten hinzufügst.

Für Mobilgeräte bietet das Layout des ausklappbaren Menüs mehr Anpassungsmöglichkeiten: Du kannst Widgets in der Kopfzeile anzeigen und dazu ein Menü, das immer sichtbar bleibt.

Du kannst das Layout der Kopfzeile zu einem vordefinierten Layout ändern, das Buttons, Anruf per Mausklick, Social Media-Symbole und mehr enthält. Du kannst dem ausklappbaren Menü jedes Widget aus dem Panel Hinzufügen hinzufügen.

Kopfzeile und ausklappbares Menü für Desktop und Tablet

So wählst und konfigurierst du ein Layout für Kopfzeile und ausklappbares Menü für Desktop und Tablet:

1. Klicke in der Seitenleiste auf Ebenen.
2. Klicke auf Site Layout.
3. Wähle im Bereich Desktop das Layout für das ausklappbare Menü.
4. Wähle im Bereich Tablet das Layout für das ausklappbare Menü.
5. Nachdem du das Layout für das ausklappbare Menü ausgewählt hast, erscheint ein Hamburger-Symbol in deiner Website-Kopfzeile. Klicke auf das Hamburger-Symbol, um das ausklappbare Menü anzuzeigen.
6. Klicke im Tab Layout auf das vorhandene Layout, um ein Menü-Layout auszuwählen.
7. Im Tab Stil stehen dir die folgenden Optionen zur Verfügung:
   • Enter from: Wähle Top oder Side.
   • Starteffekt: Wähle Cover oder Push.
   • Width: Bewege den Regler, um die Breite des ausklappbaren Menüs im ausgeklappten Zustand festzulegen. Die Breite des Menüs wird in Prozent angegeben, damit es auf alle Bildschirmgrößen passt.
   • Hintergrund: Konfiguriere die Hintergrundfarbe oder das Hintergrundbild.
   • Close icon color: Wähle eine Farbe für das Schließen-Symbol und die Hintergrundfarbe des Schließen-Symbols.
8. Ändere im Tab Abstand den Innenabstand.

Das ausklappbare Menü kann bis zu 3 Zeilen haben, und jede davon ist vollständig anpassbar. Wenn Desktop und Tablet dasselbe Seiten-Layout haben (beide ausklappbar oder beide obere Leiste), sind alle Anpassungen für beide gleich. Sind sie unterschiedlich, muss jedes Gerät separat definiert werden.

So bearbeitest du die Position des ausklappbaren Menüs in der Kopfzeile:

1. Bewege den Mauszeiger über die Kopfzeile, klicke auf Header und dann auf Design bearbeiten.
2. Klicke im Bereich Layout auf Links oder Rechts.

Kopfzeile und ausklappbares Menü für Mobilgeräte

So wählst und konfigurierst du ein Layout für Kopfzeile und ausklappbares Menü für Mobilgeräte:

1. Bewege den Mauszeiger über die Kopfzeile, klicke auf die Bezeichnung Header und dann auf Design bearbeiten.
2. Klicke im Tab Layout auf das vorhandene Layout, um ein Menü-Layout auszuwählen. Die mobile Kopfzeile bietet Layouts, die Widgets wie soziale Links, Telefonnummern und mehr anzeigen. Die Kopfzeilen-Layouts sind fest, du kannst also keine neuen Widgets hinzufügen, aber du kannst sie bearbeiten oder entfernen.
3. Klicke für die Position des Menüsymbols auf Links oder Rechts.
4. Falls noch nicht geschehen, öffne das Menü in der mobilen Ansicht. So öffnet sich der Menü-Editor und du kannst das ausklappbare Menü bearbeiten.
5. Klicke im Tab Layout auf das vorhandene Layout, um ein Menü-Layout auszuwählen. Das ausklappbare Menü bietet mehrere Layouts, die soziale Links, Kontaktinformationen und mehr anzeigen können. Du kannst dem ausklappbaren Menü jedes Widget hinzufügen, Spalten hinzufügen und die Spalten so anordnen, dass sie nebeneinander oder übereinander liegen. Wenn du jedoch von einem Layout zu einem anderen wechselst, werden alle Inhalte gelöscht, die du in das Menü eingefügt hast, und es werden nur die Widgets des gewählten Layouts übernommen.
6. Im Tab Stil stehen dir die folgenden Optionen zur Verfügung:
   • Enter from: Wähle Top oder Side. Bei Top bewegst du den Höhenregler, bei Side den Breitenregler.
   • Starteffekt: Wähle Cover oder Push.

Hinweis: Der mobilen Kopfzeile können keine zusätzlichen Widgets hinzugefügt werden.

Kopfzeilen-Elemente über dem Hero-Bild anzeigen

Um Kopfzeilen-Elemente über Hero-Bildern anzuzeigen, bewege den Mauszeiger über die Kopfzeile, klicke auf Header, dann auf den Tab Design und anschließend auf Überlappung mit oberen Bereichen. So erhalten deine Hero-Bilder mehr Sichtbarkeit und du gestaltest leichter ansprechende, moderne Websites.

Beachte dabei Folgendes:

• Für die Kopfzeile: Setze die Hintergrundfarbe auf transparent oder auf eine Farbe mit Deckkraft.
• Für die erste Zeile: Verwende einen oberen Innenabstand, der gleich oder ähnlich der Höhe der Kopfzeile ist.

Hinweis: Für mehr Flexibilität gilt diese Einstellung nur für die aktuelle Seite. Um sie auf anderen Seiten zu aktivieren, rufe jede Seite auf und folge den obigen Schritten.