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
  • Konfiguration pro Kategorie
  • Überlagernder Header
  • Header Kontrast
  • Globale Konfiguration
  • Überlagernder Header
  • Header Kontrast
  • Header & Kategoriebild kombinieren

Was this helpful?

  1. Inhalte
  2. Kategorieseite

Kategorie Header

Einen ganz besonderen Look erzeugst Du, indem Du die Erlebniswelten von Shopware 6 mit einem transparenten oder teiltransparenten Header überlagerst.

Last updated 9 months ago

Was this helpful?

Der Effekt macht sich am Besten, wenn der Header Elemente der Erlebniswelt überlagert. Das können beispielsweise einfache Bilder oder sogar Slider-Elemente sowie Videos sein.

Beispiele:

Konfiguration pro Kategorie

Möchtest Du diesen Effekt für jede Kategorie einzeln steuern, haben wir zusätzliche Felder in der Kategorie implementiert - diese Einstellung befindet sich unter: Kataloge > Kategorien > [Kategorie auswählen]

Überlagernder Header

  • Header überlagern (1) [ Inherit | Ja | Nein ]

  • Header Hintergrund Deckkraft (2) [ Prozentwerte ]

  • Hauptnavigation Hintergrund Deckkraft (3) [ Prozentwerte ]

Header Kontrast

Header Kontrast (4) Wird der Header so eingestellt, dass dieser die Elemente der Erlebniswelt überlagert, kann es auf Grund der gewählten Vordergrundfarbe der Elemente des Header zu Kontrastproblemen kommen. Wähle daher den Kontrast-Typ des Headers:

  • Inherit: Geerbte Einstellung aus der Theme-Konfiguration

  • Standard Header: Der Header bleibt farblich, wie in der Theme-Konfiguration definiert.

  • Heller Header - dunkler Text: Die Vordergrundfarben werden dunkel. Verbessert den Kontrast, wenn helle Bilder / Elemente der Erlebniswelt überlagert werden sollen.

  • Dunkler Header - heller Text: Die Vordergrundfarben werden hell. Verbessert den Kontrast, wenn dunkle Bilder / Elemente der Erlebniswelt überlagert werden sollen.

  • Invertierter Header: Vordergrundfarben und Hintergrundfarben werden getauscht. Das Ergebnis hängt stark von den eingestellten Farben der Header Konfiguration ab. Abhängig von Deinen eingestellten Farben variiert das Ergebnis stark. Ob der Kontrast sich bei hellen oder dunklen Bildern / Elementen der Erlebniswelt verbessert, hängt ebenfalls von Deiner Header Konfiguration ab.

Beispiele:

Globale Konfiguration

Über die Theme-Konfiguration können die Werte für Header überlagern, Header Hintergrund Deckkraft und Hauptnavigation Hintergrund Deckkraft für alle Kategorien gesetzt werden.

Die Zusatzfelder in der Kategorie erben im Standard diese Einstellung und können diese auch wieder überschreiben, sollte die in der Theme-Konfiguration getroffene Einstellung für bestimmte Kategorien anders eingestellt werden. Damit ist es auch möglich, einzelne Kategorien von diesen Einstellungen auszuschließen.

Willst Du auf allen Kategorien bis auf wenige Ausnahmen einen überlagernden Header benutzen, musst Du so nicht in jeder Kategorie Deine Einstellungen wiederholen.

Überlagernder Header

  • Header überlagern (1) [ Inherit | Ja | Nein ]

  • Header Hintergrund Deckkraft (2) [ Prozentwerte ]

  • Hauptnavigation Hintergrund Deckkraft (3) [ Prozentwerte ]

Header Kontrast

Header Kontrast (1) Wird der Header so eingestellt, dass dieser die Elemente der Erlebniswelt überlagert, kann es auf Grund der gewählten Vordergrundfarbe der Elemente des Header zu Kontrastproblemen kommen. Wähle daher den Kontrast-Typ des Headers:

  • Inherit: Geerbte Einstellung aus der Theme-Konfiguration

  • Standard Header: Der Header bleibt farblich, wie in der Theme-Konfiguration definiert.

  • Heller Header - dunkler Text: Die Vordergrundfarben werden dunkel. Verbessert den Kontrast, wenn helle Bilder / Elemente der Erlebniswelt überlagert werden sollen.

  • Dunkler Header - heller Text: Die Vordergrundfarben werden hell. Verbessert den Kontrast, wenn dunkle Bilder / Elemente der Erlebniswelt überlagert werden sollen.

  • Invertierter Header: Vordergrundfarben und Hintergrundfarben werden getauscht. Das Ergebnis hängt stark von den eingestellten Farben der Header Konfiguration ab. Abhängig von Deinen eingestellten Farben variiert das Ergebnis stark. Ob der Kontrast sich bei hellen oder dunklen Bildern / Elementen der Erlebniswelt verbessert, hängt ebenfalls von Deiner Header Konfiguration ab.

Beispiele:

Header & Kategoriebild kombinieren

Häufig möchtest Du in diesem Zuge ein Kategoriebild unter dem überlagernden Header darstellen und evtl. auch den Beschreibungstext der Kategorie darstellen (Beispiel 2). Erfahre im nächsten Abschnitt mehr dazu:

📂
Hero Sektion
Teiltransparenter Header überlagert ein Slider-Element der Erlebniswelt
Transparenter Header überlagert eine Section der Erlebniswelt
Kataloge > Kategorien > {Kategorie wählen} > Zusatzfelder > Header
Standard Header Kontrast
Dunkler Header - heller Text
Theme-Konfiguration > Tab: Kategorie > Sektion: Kategorie-Header > Block: Überlagernder Header
Theme-Konfiguration > Tab: Kategorie > Sektion: Kategorie-Header > Block: Header Kontrast
Standard Header Kontrast
Dunkler Header - heller Text