# Kategorie-Header
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 überlagernd (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:
Standard Header Kontrast
Dunkler Header - heller Text
## 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.
{% hint style="info" %}
Willst Du auf allen Kategorien bis auf wenige Ausnahmen einen überlagernden Header benutzen, musst Du so nicht in jeder Kategorie Deine Einstellungen wiederholen.
{% endhint %}
### Überlagernder Header
* **Header überlagernd (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:
Standard Header Kontrast
Dunkler Header - heller Text
## 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:
{% content-ref url="/pages/9TC6CpWajLVasqPkQq60" %}
[Hero Sektion](/content/kategorie/kategoriebild.md)
{% endcontent-ref %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://themedocs.zenit.design/content/kategorie/ueberlagernden-header.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.