Überlagernder Header
Diese Einstellung befindet sich unter: Kataloge > Kategorien > [Kategorie auswählen]
Einen ganz besonderen Look erzeugst Du, indem Du die Erlebniswelten von Shopware 6 mit einem transparenten oder teiltransparenten Header überlagerst. In unserem Demos haben wir einige Beispiele hierzu
Beispiel 1:
Teiltransparenter Header überlagert ein Slider-Element der Erlebniswelt
Beispiel 2:
Transparenter Header überlagert eine Section der Erlebniswelt
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.
Möchtest Du diesen Effekt für jede Kategorie einzeln steuern, haben wir zusätzliche Felder in der Kategorie implementiert:
- Header überlagern [ Inherit | Ja | Nein ]
- Header Hintergrund Deckkraft [ Prozentwerte ]
- Hauptnavigation Hintergrund Deckkraft [ Prozentwerte ]
Zusatzfelder in jeder Kategorie
Über das Theme 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 optimiert 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.
.png?alt=media){kind=spacer}
Theme Konfiguration > Tab: Kategorie > Sektion: Kategorie-Header > Überlagernder Header
Da die Einstellung zur Transparenz des Headers und der Hauptnavigation in den dafür vorgesehenen Felder getätigt werden, sollten keine Transparenten Farben in den Farbeinstellungen von Header und Hauptnavigation vorgenommen werden.
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:
Last modified 2mo ago