# 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 %}


---

# 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://doku.themeware.design/handbuch/erweiterungen/hero-sektion-auf-kategorieseiten/konfiguration.md?ask=<question>
```

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.