Header Design
Hier kannst du grundlegende Einstellungen für deinen Header festlegen.
- Header-Typ: Bestimme die Anordnung der Elemente im Header, z. B. um dein Logo zu zentrieren.
- Mobilmenü-Typ: Lege fest, wie dein Hauptmenü auf Mobilgeräten strukturiert wird.
- Header Sticky: Wähle aus, welche Bereiche deines Headers beim Scrollen am oberen Bildschirmrand fixiert bleiben sollen.
- Zusatz-Header für Mobilgeräte: Entscheide, ob diese ein- oder ausgeblendet werden. Zusatz-Header kannst du im Inhaltseditor erstellen.
Die Basis-Einstellungen für den Header sind keine Styling-Einstellungen. Erweiterte Design-Anpassungen findest du unter Header & Footer. Über den Button „Erweitertes Header-Styling“ gelangst du direkt dorthin.
Layout-Auswahl der Header-Typen
Die Header-Typen bestimmen die Anordnung der Elemente, die im Header in Verwendung sind: Logo, Hauptmenü-Navigation, Suche, Warenkorb, Kundenkonto, Wunschliste und Zusatzheader. Es stehen 8 Varianten für das Header-Layout zur Auswahl:
- Standard-Header
- Standard-Header mit zentriertem Logo
- Einfacher Header
- Einfacher Header mit zentriertem Logo
- Einfacher Header (Funktionen oben)
- Header mit Menü-Button rechts
- Header mit Menü-Button links
- Header mit Menü-Button Funktionen oben
Wenn du eine Variante mit "Header mit Menü-Button" wählst, dann wird auch in der Desktop-Ansicht nur das Hamburger-Icon für das Menü angezeigt. Dieses Hamburger-Icon muss dann geklickt werden, damit die Menüpunkte der Hauptnavigation als Mobil-Menü eingeblendet werden.
Header Styling
Der Header besteht aus mehreren Elementen, die stylebar sind:
- Block (betrifft den gesamten Container)
- Logo
- Menübutton (Hamburger-Button)
- Menüleiste (Bereich für das Hauptmenü)
In den Layout-Einstellungen ist X/Y-Ausdehnung für das Logo festlegbar. Das raufgeladene Logo wird dann in die angegebenen Pixelgrößen eingepasst.
Der Menübutton wird nur in bestimmten Auflösungen angezeigt abhängig davon, welches Header-Design gewählt wurde (siehe oben).
