# Produkt-Header

Der Effekt macht sich am besten bemerkbar, wenn der Header Elemente der Erlebniswelt überlagert. Das können etwa einfache Bilder oder der Galerie-Slider sein.

Beispiel:

![Transparenter Header überlagert die Galerie der Produktdetailseite](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2FlDjbx1fMtMWDTseFHBEy%2Fdocs-de-config-product-header-example-storefront.webp?alt=media\&token=a0bb615c-b8ab-437b-a129-bf766a36bd4e)

## Konfiguration pro Produkt

Möchtest Du diesen Effekt für **jedes Produkt einzeln** steuern, haben wir zusätzliche Felder in den Produkt Stammdaten implementiert – diese Einstellung befindet sich unter: Kataloge > Produkte > \[Produkt auswählen] > Tab: Spezifikationen > Zusatzfelder > Tab: Header

![Kataloge > Produkte > {Produkt wählen} > Tab: Spezifikationen > Zusatzfelder > Tab: Header](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2FFk7AYWBKboYh2WSso8CH%2Fdocs-de-config-custom-fields-product-header.png?alt=media\&token=4e57f1fa-d37d-4518-8054-dba5556f95a5)

### Header überlagernd

* **Header überlagernd (1)** \[ Inherit | Ja | Nein ]
* **Header Hintergrund Deckkraft (2)** \[ Prozentwerte ]
* **Hauptnavigation Hintergrund Deckkraft (3)** \[ Prozentwerte ]

### Überlagernder Header

**Header Kontrast (4)**  Wird der Header so eingestellt, dass dieser die Elemente der Erlebniswelt überlagert, kann es aufgrund der gewählten Vordergrundfarbe der Elemente des Headers 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:

<figure><img src="https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2F6KjP47DGhPmFjliGuJkp%2Fdocs-en-config-product-contrast-header-example-storefront-light-header.webp?alt=media&#x26;token=e8b39eec-287a-4530-be9b-30f9e94527cb" alt=""><figcaption><p>Heller Header - dunkler Text</p></figcaption></figure>

<figure><img src="https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2FmmPDXmIKh5YMweVGVYfY%2Fdocs-en-config-product-contrast-header-example-storefront-dark-header.webp?alt=media&#x26;token=a764e683-ee23-40d9-b3cf-8f5db866c5e6" alt=""><figcaption><p>Dunkler Header - heller Text</p></figcaption></figure>

## Globale Konfiguration

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

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

{% hint style="info" %}
Willst Du auf allen Produktseiten bis auf wenige Ausnahmen einen überlagernden Header benutzen, musst Du so nicht in jedem Produkt Deine Einstellungen wiederholen.
{% endhint %}

### Überlagernder Header

![Theme-Konfiguration > Tab: Produkt > Sektion: Produkt-Header  > Block: Überlagernder Header](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2FJ0Iq1KWsXU7TNXj6Knmz%2Fdocs-de-config-theme-product-detail-header.png?alt=media\&token=de2e1bed-6992-4547-a72b-d0fdb7cf2f35)

* **Header überlagernd (1)** \[ Inherit | Ja | Nein ]
* **Header Hintergrund Deckkraft (2)** \[ Prozentwerte ]
* **Hauptnavigation Hintergrund Deckkraft (3)** \[ Prozentwerte ]

### Header Kontrast

<figure><img src="https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2FxGlRJJVAMyICreGdOcEx%2Fdocs-de-config-theme-product-detail-contrast-header.png?alt=media&#x26;token=f09dbec8-78a1-4c36-8e38-ccf10166fef7" alt=""><figcaption><p>Theme-Konfiguration > Tab: Produkt > Sektion: Produkt-Header > Block: Header Kontrast</p></figcaption></figure>

**Header Kontrast (1)**  Wird der Header so eingestellt, dass dieser die Elemente der Erlebniswelt überlagert, kann es aufgrund der gewählten Vordergrundfarbe der Elemente des Headers 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:

<figure><img src="https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2F6KjP47DGhPmFjliGuJkp%2Fdocs-en-config-product-contrast-header-example-storefront-light-header.webp?alt=media&#x26;token=e8b39eec-287a-4530-be9b-30f9e94527cb" alt=""><figcaption><p>Heller Header - dunkler Text</p></figcaption></figure>

<figure><img src="https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2FmmPDXmIKh5YMweVGVYfY%2Fdocs-en-config-product-contrast-header-example-storefront-dark-header.webp?alt=media&#x26;token=a764e683-ee23-40d9-b3cf-8f5db866c5e6" alt=""><figcaption><p>Dunkler Header - heller Text</p></figcaption></figure>
