Zenit Design - Themes
Theme kaufenThemesSupport
DE
DE
  • Erste Schritte
  • Start Guides
    • Atmos - Demo 1
    • Atmos - Demo 2
    • Atmos - Demo 3
    • Atmos - Demo 4
    • Gravity - Demo 1
    • Gravity - Demo 2
    • Horizon - Demo 1
    • Horizon - Demo 2
    • Sphere - Demo 1
    • Sphere - Demo 2
    • Stratus - Demo 1
    • Stratus - Demo 2
    • Stratus - Demo 3
    • Stratus - Demo 4
  • Tipps
    • Dashboard
    • Theme Konfiguration
    • Lexikon
    • Mehrere Verkaufskanäle
  • Vorlagen
  • Support
    • Error auslesen
    • Ursache finden
  • 🎨Styling
    • Allgemein
      • Grundlayout
      • Produktbilder
      • Produkt Layout-Typ
      • Globales Hintergrundbild
      • Preloader
      • Akzentlinie
      • Scroll Animation
    • Typografie & Farben
      • Theme-Farben
      • Status-Ausgaben
      • Schriftarten
      • Typografie
      • E-Commerce
      • Buttons
    • Logos
    • Header
      • Header
      • Suche
      • Top Bar
      • Shop Navigation
      • Main Navigation
      • Flyout Navigation
      • Dropdown Navigation
    • Footer
      • Footer
      • Inhalte
      • Spalten
      • Spalten Styling
      • Unterer Footer
    • Elemente
      • Sidebar
      • Sidebar Navigation
      • Formulare
      • Bild- & Galerie-Slider
      • Produkt Slider
      • Kategorie Listing Slider
      • Paginierung
      • Breadcrumbs
      • Cookie Banner
      • Offcanvas
      • Backdrop
      • Scroll-Up Button
    • Kategorie
      • Kategorie-Header
      • Hero Sektion
      • Filter
      • Listing Actions
      • Produkt-Boxen
      • Quickview
    • Produkt
      • Details
      • Galerie
      • Beschreibung
      • Beschreibung Navigation
      • Beschreibung Inhalt
    • Kasse
      • Warenkorb
      • Kasse
  • ⚙️Einstellungen
    • Grundeinstellungen
    • Zusatzfeld Zuweisung
      • Zusatzfelder für Details auf der Produktseite
      • Zusatzfelder für Produkt-Datenblätter
    • Social Media Icons
    • Marketing Text Slider
    • Custom Tab Detailseite
    • Custom Spalten (Footer)
    • Eigener Code
  • 📂Inhalte
    • Erlebniswelten
      • Sektionen
      • Blöcke
        • Elemente
          • Bild Text Slider
          • Suche Banner
          • Text Banner
          • Teaser
          • Features
          • Breadcrumbs
          • Code
          • Trenner
          • Kategorie-Navigation
          • Footer-Navigation
          • Platzhalter
        • Commerce
          • Galerie und Buybox mit Produktname & Hersteller-Logo
          • Galerie und Buybox mit Produktname & Hersteller-Logo & Beschreibung
          • Galerie und Buybox mit Beschreibung
          • Galerie mit Beschreibung und Buybox mit Produktname & Hersteller-Logo
        • Kategorie
          • Kategorie Listing
        • Spalten
        • Layouts
      • Block Innen-Abstände
      • Block Außen-Abstände
      • Animation
      • Erlebniswelt Beispiel
      • CSS-Variablen
    • Kategorieseite
      • Hero Sektion
      • Kategorie Header
      • CSS-Klassen
      • Kategorie Labels
      • Kategorie Icons
      • Produkte pro Zeile
    • Produktseite
      • Layouts
      • Standardlayout
      • Galerie Modus
      • Custom Tabs
      • Videos Tab
      • Datenblätter
    • Produktbilder
      • Bildgrößen
      • Bildformat
      • Dateiformat
      • Produktbilder Hintergrund
    • Layout-Typ
    • Responsive Tabellen
    • Mehrsprachigkeit
  • 🎓Tutorials
    • Demodaten importieren
    • Demo-Themekonfiguration importieren
    • Child-Theme duplizieren
    • Individuelle Anpassungen
    • Konfiguration export/import
    • Zusatzfelder export/import
    • Schriften lokal einbinden
    • Schriften lokal einbinden mit Child-Theme
  • 🛠️Update Guides
    • Child-Theme Update
    • Shopware 6.6.9.0
    • Shopware 6.6.0.0
    • Shopware 6.5.0.0
    • Shopware 6.4.8.0
    • Theme 3.5.3
    • Theme 2.11.0
  • ❓FAQ
    • Übersicht
    • Barrierefreiheit
      • Typografie
      • Farben
      • Bilder
      • Video
      • Checker-Tools und Ressourcen
    • Allgemein
      • Copyright-Hinweis
      • Merkzettel
    • Produkt Layout
    • Lizenzen
      • Testversion vs Vollversion
      • Lizenzdomain ändern
    • Ableitungen
      • Child-Theme
      • Theme-Duplikat
      • Child-Theme vs Theme-Duplikat
    • Updates
      • Theme wird als inkompatibel angezeigt
      • Update wird nicht angezeigt
    • Fehler
      • Child-Theme kann nicht zugewiesen werden
      • Textbausteine zeigen technischen Namen
      • Theme Speichern Fehler
      • SVG Logo wird nicht angezeigt
      • Suche / Input mobile Zoom
      • Text ist nicht sichtbar / lesbar
Powered by GitBook
On this page
  • Farben
  • Logo
  • Höhen & Abstände
  • Abgerundete Ecken
  • Rahmen unten
  • Schlagschatten
  • Sticky Header
  • Checkout Minimal Header

Was this helpful?

  1. Styling
  2. Header

Header

Last updated 5 months ago

Was this helpful?

Farben

Beispiele:

Logo

Über Logo Position (1) positionierst Du das Logo im Header entweder links, rechts oder in der Mitte. Alle weiteren Elemente des Header wie Suche, Shop-Navigation usw. ordnen sich automatisch an.

Die Logo Größe mobile (2) sowie Logo Größe (3) beschreibt die Größe des Logos in Prozent im Verhältnis zur Höhe mobile (4) bzw. Höhe (5) des Headers. Damit ist sichergestellt, dass das Logo nicht aus dem Header ausbrechen kann - außer Du verwendest Werte über 100% um diesen Effekt absichtlich zu erzielen.

Beispiel: Ist der Header in der Desktop Ansicht 100px hoch und das Logo 40% groß, ergibt sich eine Größe des Logos von 40 Pixel in der Höhe - die Breite ergibt sich proportional.

Höhen & Abstände

Die Höhe (1, 2) des Headers kann für die mobile Darstellung und die Variante für größere Geräte separat eingestellt werden. Zusätzlich können Abstand oben (3, 4) sowie Abstand unten (4,5) gesetzt werden. Dadurch können Darstellungen wie im Beispiel erzeugt werden.

Beispiel:

Abgerundete Ecken

Beispiel:

Rahmen unten

Der gesamte Header kann einen Rahmen unten (1) erhalten und so stärker vom Content abgetrennt werden.

Schlagschatten

Der gesamte Header kann einen unteren Schlagschatten erhalten und so stärker vom Content abgetrennt werden.

Der Schlagschatten kann unterschiedlich für drei verschiedene Header-Status eingestellt werden. Schlagschatten (1) aktiviert den Schlagschatten für den Header im normalen Zustand. Schlagschatten:hover (2) aktiviert den Schlagschatten nur, wenn die Maus über den Header bewegt wird. Und Schlagschatten:sticky (3) aktiviert den Schatten immer dann, wenn der Nutzer nach unten scrollt und der Header fixiert dargestellt wird. Diese Funktion greift nur, wenn der Header auch als Sticky-Header, wie im folgenden erläutert, dargestellt wird.

Für die Farbe des Schlagschattens eignet sich in der Regel am besten ein teiltransparenter Farbton. In diesem Beispiel ist der Wert in rgba angegeben, welchen Du im Color-Picker über die Alpha-Transparenz auswählen kannst. Der Wert rgba(0,0,0,0.1) ist also ein reines Schwarz mit 10% Sichtbarkeit.

Die Weite ist in Pixel anzugeben und gibt an, wie groß der Schatten in Pixeln ist.

Sticky Header

Das Theme beinhaltet die Funktion Sticky Header, welche den Header beim Herunterscrollen der Seite am oberen Bildschirmrand fixiert. Mit Hilfe der Anzeigebereiche (1) kannst Du festlegen, auf welchen Geräten der fixierte Header genutzt werden soll.

Die Bildschirmfläche (Viewport) ist eine Ressource, die sinnvoll genutzt werden sollte. Man sollte daher nicht aus einem falsch verstandenen Usability-Ansatz davon ausgehen, dass eine Sticky-Navigation automatisch zu einer besseren Usability (Nutzbarkeit) führen. Fixierte Header verbrauchen auf dem mobilen Gerät wertvolle vertikale Bildschirmflächen und bieten dem Benutzer keinen enormen Mehrwert.

Der manuelle Offset (2) Wert definiert den Abstand von Oben, ab wann der Header fixiert werden soll. Lass das Feld leer, wenn der Abstand des Headers zur Oberkante des Browsers automatisch ermittelt werden soll. Der Header wird sticky, sobald der Header durch Scrollen außerhalb des sichtbaren Bereiches gerät - daraufhin wird der Header mit einer Animation erscheinen und fixiert.

  • Möglichkeit 1: Wert leer lassen zur automatischen Berechnung

  • Möglichkeit 2: Legt man einen Offset-Wert von 0 fest, wird der Header sofort fixiert - ohne Animation.

  • Möglichkeit 3: Der Offset-Wert ist immer dann nützlich, wenn das Flyout-Menü oder Dropdown-Menü so viele Einträge beinhalten, dass die Einträge unterhalb des Browserrandes verschwinden. Wird nun für den Offset-Wert ein zusätzlicher Abstand z.B. 600 eingetragen, muss der Nutzer mind. 600 Pixel nach unten scrollen, bis der Header fixiert wird. Dadurch werden die Menüpunkte, die unterhalb des Browser-Falzes verschwunden sind beim Scrollen wieder erreichbar. Der Header wird erst zu einem späteren Scrollabstand fixiert.

Die Auto Hide (3) Funktion sorgt dafür, dass der komplette Header erst wieder sichtbar wird, wenn der Nutzer im Begriff ist nach oben zu Scrollen.

Die Abweichende Header Höhe:sticky (4) lässt Dich eine zusätzliche (meist geringere) Header Höhe:sticky (5) festlegen. Der Header kann so im Sticky Zustand auf diese abweichende Höhe schrumpfen (oder eben wachsen). Die Einstellung soll insbesondere Layouts mit ausladendem Header die Möglichkeit geben, die Sticky-Funktion nutzerfreundlich einzusetzen ohne zu viele Bereiche mit dem Sticky-Header zu überdecken.

Checkout Minimal Header

Der Header im Checkout unterscheidet sich in Shopware vom normalen Header. Hier gibt es die Möglichkeit einen Schlagschatten (1) zu setzen.

Für die Farbe des Schlagschattens eignet sich in der Regel am besten ein teiltransparenter Farbton. In diesem Beispiel ist der Wert in rgba angegeben, welchen Du im Color-Picker über die Alpha-Transparenz auswählen kannst. Der Wert rgba(0,0,0,0.1) ist also ein reines Schwarz mit 10% Sichtbarkeit.

Die Weite ist in Pixel anzugeben und gibt an, wie groß der Schatten in Pixeln ist.

Der gesamte Checkout Header kann einen Rahmen unten (2) erhalten und so stärker vom Content abgetrennt werden.

Die Auto Hide Funktion verbessert die Usability, da so auch bei mehrzeiligen Headern oder sehr hohen einzeiligen Headern nicht permanent der künstlich verkleinert wird.

🎨
Viewport
Beispiel eines einzeiligen Headers
Beispiel 2: Kategorien unterhalb des Browser Falzes