Header Design

Inhaltsbereich

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.

Eine wesentliche Rolle beim Header-Design spielt die Funktionalität und das Layout des Hauptmenüs. Speziell bei komplexen Menüstrukturen, wird häufig ein Megamenü mit mehrspaltigen Menülisten eingesetzt. Das Standard-Megamenü kannst direkt bei der Erstellung des Hauptmenüs einstellen.

Smarda Partner können auch ein ganz individuell gestaltetes Megamenü einrichten. Dies funktioniert in Kombination mit dem passenden Header-Typ und einem individuell gestalteten Pop-up, das das Standard-Megamenü ersetzt.

Megamenü mit Pop-ups erstellen

Header-Einstellungen für ein Menü mit einem Button auf der rechten Seite. Auswahl zwischen verschiedenen Menütypen, einschließlich Pop-up und Standardmenü für Desktop, Tablet und Smartphone. Hinweise zur Verwaltung der Menüpunkte.

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.

Dropdown-Menü zur Auswahl von Header-Typen in deutscher Sprache, einschließlich einfacher und standard Header-Optionen.

Screenshot Standard Header — Standard Header

Standard Header (zentriertes Logo)

Screenshot Einfacher Header — Einfacher Header

Einfacher Header (zentriertes Logo)

Screenshot Einfacher Header (Fukntionen oben) — Einfacher Header (Fukntionen oben)

Screenshot Header mit Menü-Button (Hamburger) — Header mit Menü-Button (Hamburger)

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).