Dir stehen mehrere Header-Layouts für deine Website zur Verfügung. Finde das Layout, das am besten zu deinen Wünschen passt und verändere so das Aussehen deiner Website, z. B. indem du dein Logo oder den Namen deiner Website hervorhebst.
Springe zu:
So änderst du das Header-Layout
- In der Seitenleiste deines Cockpits, navigiere zu Editor.
- In der Fußleiste, wähle
.
- Wähle den Tab
.
- Wähle das Header-Layout, das am besten zu deinem Business passt. Bewege deine Maus über ein Header-Layout oder wähle die zugehörige Abbildung, um mehr Informationen zu der Ausrichtung des Headers und der empfohlenen Nutzung zu erhalten. Außerdem kannst du auf der Seite im Hintergrund eine Vorschau des Headers sehen, sobald du ein Header-Layout gewählt hast. Du kannst auch
in der rechten oberen Ecke des Header-Layout-Fensters gedrückt halten und dann das Fenster bewegen, um so andere Bereiche der Seite im Hintergrund sehen zu können.
- Sobald du dich für ein Header-Layout entschieden hast, wähle Speichern.
Die verschiedenen Header-Layouts
Du bist dir unsicher, welches Header-Layout am besten zu deinem Business passt? Sehen wir uns mal die verschiedenen Header und ihre Struktur genauer an.
Für die meisten Header-Layouts kannst du zwischen zwei Menü-Typen wählen. Weitere Informationen dazu findest du unter Wähle einen Menü-Typ.
Bitte beachte zudem, dass deine Logo-Einstellungen sich auf dein gewähltes Header-Layout auswirken können. Du kannst die Ausrichtung des Logos in den entsprechenden Logo-Einstellungen ändern.
Du kannst frei entschieden, ob du dein Logo oder den Namen deiner Website im Header anzeigen möchtest. Erfahre mehr in unserem Artikel Lade ein Logo hoch.
Beachte außerdem, dass die Reihenfolge der einzelnen Header-Layout-Optionen in deinem Editor abhängig von deiner gewählten Design-Vorlage ist.
Option 1
|
Allgemein |
Marke | Menü | Suche |
| Das Suchsymbol, das Logo / der Website-Name und das Menü werden in einer Zeile angezeigt. | Das Logo / der Website-Name ist zentriert und wird zwischen dem Menü und dem Suchsymbol angezeigt. | Besucher können ganz links |
Besucher können rechts ein Suchsymbol |
Mit diesem schmalen Header kannst du dein Logo / deinen Website-Namen, das Menü und das Suchsymbol in einer Zeile anzeigen. Da das Menü eingeklappt ist, liegt der Fokus auf deiner Marke. Außerdem ist der Header aufgrund des eingeklappten Menüs eine gute Wahl für große Menüstrukturen.
Option 2
|
Allgemein |
Marke |
Suche |
| Die Suchleiste, das Logo / der Website-Name und das Menü werden jeweils in einer eigenen Zeile dargestellt. | Das Logo / der Website-Name wird ganz links angezeigt, unter der Suchleiste aber über dem Menü. | Die Suchleiste wird ganz oben links angezeigt, über dem Logo / dem Website-Namen und dem Menü. |
Dieser breite Header betont deine Marke, da er den Logo-Bereich besonders hervorhebt.
Option 3
|
Allgemein |
Marke |
Suche |
|
Das Logo / der Website-Name und das Suchsymbol werden in einer Zeile angezeigt. Das Menü wird in einer separaten Zeile darunter dargestellt. |
Das Logo / der Website-Name ist zentriert. |
Besucher können rechts ein Suchsymbol |
Bei diesem Header-Typ liegt der Fokus auf dem Logo-Bereich und dem Menü.
Option 4
|
Allgemein |
Marke |
Suche |
| Das Logo / der Website-Name und die Suchleiste werden in einer Zeile angezeigt. Das Menü wird in einer separaten Zeile darunter angezeigt. | Das Logo / der Website-Name wird ganz links angezeigt. | Die Suchleiste wird rechts angezeigt. |
Dieser linksbündige Header bietet ein erweitertes Suchfeld.
Option 5
|
Allgemein |
Marke |
Suche |
| Das Logo / der Website-Name, das Menü und das Suchsymbol werden in einer Zeile angezeigt. | Das Logo / der Website-Name wird ganz links angezeigt. | Besucher können rechts das Suchsymbol |
Da der Fokus in diesem schmalen Header auf dem Menü liegt, eignet er sich gut für kleine Menüstrukturen.
Alle Header
In allen Headern werden deine Alleinstellungsmerkmale (falls festgelegt) ganz oben auf deiner Website angezeigt. Außerdem wird der Warenkorb (falls aktiviert) in der rechten oberen Ecke angezeigt.
Du musst dir natürlich keine Sorgen um dein responsives Design machen. Dein Header wird immer in einer Version dargestellt, die für das genutzte Gerät optimiert wurde. Das bedeutet allerdings auch, dass ein Header auf kleineren Geräten leicht anders aussehen kann als beschrieben.