> For the complete documentation index, see [llms.txt](https://doku.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doku.themeware.design/handbuch/erweiterungen/hero-sektion-auf-kategorieseiten/konfiguration.md).

# Konfiguration

***

### Hero-Sektion anzeigen (CMS-Listingseiten)

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• nicht anzeigen\
• anzeigen\
• anzeigen (per Zusatzfeld)

**Beispiel Wert**:\
`nicht anzeigen`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Hero-Sektion (auf Kategorieseiten)"

**Technischer Name**:\
`twt-hero-section-show-cms-category-pages`

{% hint style="info" %}
**anzeigen**:\
Diese Option aktiviert das Element "Hero-Sektion" auf allen Kategorieseiten.\
Du kannst das Element mit einem Zusatzfeld in Kategorien deaktivieren.

**anzeigen (über Zusatzfeld)**:\
Mit dieser Option kannst du das Element "Hero-Sektion" über ein Zusatzfeld auf bestimmten Kategorieseiten anzeigen.
{% endhint %}

***

### Hero-Sektion anzeigen (CMS-Shopseiten)

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• nicht anzeigen\
• anzeigen\
• anzeigen (per Zusatzfeld)

**Beispiel Wert**:\
`nicht anzeigen`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Hero-Sektion (auf Kategorieseiten)"

**Technischer Name**:\
`twt-hero-section-show-cms-shop-pages`

{% hint style="info" %}
**anzeigen**:\
Diese Option zeigt das Element "Hero-Sektion" auf allen Shopseiten.\
Du kannst das Element mit einem Zusatzfeld in Kategorien deaktivieren.

**anzeigen (per Zusatzfeld)**:\
Mit dieser Option kannst du das Element "Hero-Sektion" über ein Zusatzfeld auf bestimmten Shopseiten anzeigen.
{% endhint %}

## Basiskonfiguration

***

### Nächstes Element hochziehen

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• nein\
• ja\
• ja (über Zusatzfeld)

**Beispiel Wert**:\
`nein`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Hero-Sektion (auf Kategorieseiten)" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-hero-section-pull-up`

{% hint style="info" %}
**ja**:\
Diese Option zieht das nächste Element auf allen Seiten ein Stück über die "Hero-Sektion".\
Du kannst diese mit einem Zusatzfeld in einzelnen Kategorien deaktivieren.

**ja (per Zusatzfeld)**:\
Mit dieser Option kannst du über ein Zusatzfeld in Kategorien wählen, ob das nächste Element über die "Hero-Sektionß" gezogen werden soll.

**Beta**: Diese Konfiguration befindet sich in der Testphase, probiere Sie gerne einmal aus.
{% endhint %}

## Inhalte

***

### Textfarbe

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• weißer Text\
• heller Text\
• dunkler Text\
• schwarzer Text

**Beispiel Wert**:\
`heller Text`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Hero-Sektion (auf Kategorieseiten)" => Abschnitt "Inhalte"

**Technischer Name**:\
`twt-hero-section-text-coloration`

{% hint style="info" %}
Wähle die Textfarbe der "Hero-Sektion".
{% endhint %}

***

### Textausrichtung

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• links ausrichten\
• zentriert ausrichten\
• rechts ausrichten

**Beispiel Wert**:\
`links ausrichten`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Hero-Sektion (auf Kategorieseiten)" => Abschnitt "Inhalte"

**Technischer Name**:\
`twt-hero-section-text-align`

{% hint style="info" %}
Wähle die Textausrichtung der "Hero-Sektion".
{% endhint %}

***

### Breite des Containers

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• Container-Max-Width (Full-width-boxed)\
• 100% (Full-width)

**Beispiel Wert**:\
`Container-Max-Width (Full-width-boxed)`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Hero-Sektion (auf Kategorieseiten)" => Abschnitt "Inhalte"

**Technischer Name**:\
`twt-hero-section-sizing-mode`

{% hint style="info" %}
Wähle den Größenmodus der "Hero-Sektion".
{% endhint %}

***

### Breite des Inhalts

**Feldtyp**:\
Textfeld

**Beispiel Wert**:\
`100%`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Hero-Sektion (auf Kategorieseiten)" => Abschnitt "Inhalte"

**Technischer Name**:\
`twt-hero-section-content-max-width`

{% hint style="info" %}
Gebe die maximale Breite des Inhaltes in Pixeln (z.B. 1200px) oder mit 100% an.
{% endhint %}

***

### Abstand oben (≥576px)

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`170`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Hero-Sektion (auf Kategorieseiten)" => Abschnitt "Inhalte"

**Technischer Name**:\
`twt-hero-section-padding-top-sm`

{% hint style="info" %}
Lege den Abstand nach oben für "Hero-Sektionen" auf Seiten mit "Erlebniswelt-Header" fest.

**Hinweis**: Diese Konfiguration gilt nur für Seiten mit "Erlebniswelt-Header".
{% endhint %}

***

### Abstand oben (≥992px)

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`210`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Hero-Sektion (auf Kategorieseiten)" => Abschnitt "Inhalte"

**Technischer Name**:\
`twt-hero-section-padding-top-lg`

{% hint style="info" %}
Lege den Abstand nach oben für "Hero-Sektionen" auf Seiten mit "Erlebniswelt-Header" fest.

**Hinweis**: Diese Konfiguration gilt nur für Seiten mit "Erlebniswelt-Header".
{% endhint %}

## Overlay

***

### Hintergrundfarbe

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#0c72a7`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Hero-Sektion (auf Kategorieseiten)" => Abschnitt "Overlay"

**Technischer Name**:\
`twt-hero-section-overlay-background-color`

{% hint style="info" %}
Wähle die Hintergrundfarbe für das Farboverlay.
{% endhint %}

***

### Deckkraft

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• 0%\
• 5%\
• 10%\
• 15%\
• 20%\
• 25%\
• 30%\
• 35%\
• 40%\
• 45%\
• 50%\
• 55%\
• 60%\
• 65%\
• 70%\
• 75%\
• 80%\
• 85%\
• 90%\
• 95%\
• 100%

**Beispiel Wert**:\
`90%`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Hero-Sektion (auf Kategorieseiten)" => Abschnitt "Overlay"

**Technischer Name**:\
`twt-hero-section-overlay-opacity`

{% hint style="info" %}
Wähle die Deckkraft vom Farboverlay.
{% endhint %}

## Hintergrundbild

***

### Fixierung

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• Hintergrundbild scrollt mit der Seite (scroll)\
• Hintergrundbild bleibt fixier (fixed)

**Beispiel Wert**:\
`Hintergrundbild bleibt fixier (fixed)`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Hero-Sektion (auf Kategorieseiten)" => Abschnitt "Hintergrundbild"

**Technischer Name**:\
`twt-hero-section-background-image-attachment`

{% hint style="info" %}
**Scroll**:\
Das Hintergrundbild scrollt zusammen mit Text und Bildern.

**Fixed**:\
Fixiert das Hintergrundbild an einer festen Position im Browserfenster und erweckt beim Scrollen den Anschein, die folgenden Inhalte würden über das Hintergrundbild geschoben.
{% endhint %}

***

### Parallax-Effekt

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• nein\
• ja

**Beispiel Wert**:\
`nein`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Hero-Sektion (auf Kategorieseiten)" => Abschnitt "Hintergrundbild"

**Technischer Name**:\
`twt-hero-section-background-image-parallax`

{% hint style="info" %}
Wendet einen Parallax-Effekt auf das Hintergrundbild an, wenn diese 'fixiert' (bzw. fixed) ist. Bitte beachte, dass dieser Effekt von einem zusätzlichen JavaScript gesteuert wird.
{% endhint %}

## Breadcrumb

***

### Breadcrumb anzeigen

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• nein\
• ja

**Beispiel Wert**:\
`nein`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Hero-Sektion (auf Kategorieseiten)" => Abschnitt "Breadcrumb"

**Technischer Name**:\
`twt-hero-section-breadcrumb-show`

{% hint style="info" %}
Fügt eine Breadcrumb der "Hero-Sektion" hinzu.
{% endhint %}

***

### Position

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• oben ausrichten\
• unten ausrichten (Standard)

**Beispiel Wert**:\
`unten ausrichten (Standard)`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Hero-Sektion (auf Kategorieseiten)" => Abschnitt "Breadcrumb"

**Technischer Name**:\
`twt-hero-section-breadcrumb-position`

{% hint style="info" %}
Wähle die gewünschte Position der Breadcrumb aus.
{% endhint %}

***

### Inhalt ausrichten

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• links ausrichten\
• zentriert ausrichten\
• rechts ausrichten

**Beispiel Wert**:\
`links ausrichten`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Hero-Sektion (auf Kategorieseiten)" => Abschnitt "Breadcrumb"

**Technischer Name**:\
`twt-hero-section-breadcrumb-justify-content`

{% hint style="info" %}
Wähle die gewünschte horizontale Ausrichtung aus.

**links**\
Elemente werden am Anfang des Containers positioniert.

**rechts**\
Elemente werden am Ende des Containers positioniert.

**zentriert**\
Die Elemente befinden sich in der Mitte des Containers.

**space-between**\
Elemente werden gleichmäßig verteilt. Das erste Element an den Start, das letzte an das Ende.

**space-around**\
Elemente werden gleichmäßig verteilt. Alle Elemente haben gleiche Abstände um sie herum.
{% endhint %}