# Konfiguration

***

### USP-Bar im Header anzeigen

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• nicht anzeigen\
• anzeigen

**Beispiel Wert**:\
`anzeigen`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "USP-Bar"

**Technischer Name**:\
`twt-usp-bar-header`

{% hint style="info" %}
Zeigt die ThemeWare® "USP-Bar" im Header an.

Um den Inhalt zu bearbeiten oder übersetzten, nutze bitte die Textbausteine: **twt.extension.uspBar...**
{% endhint %}

***

### USP-Bar im Footer anzeigen

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• nicht anzeigen\
• anzeigen

**Beispiel Wert**:\
`anzeigen`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "USP-Bar"

**Technischer Name**:\
`twt-usp-bar-footer`

{% hint style="info" %}
Zeigt die ThemeWare® "USP-Bar" im Footer an.

Um den Inhalt zu bearbeiten oder übersetzten, nutze bitte die Textbausteine: **twt.extension.uspBar...**
{% endhint %}

## Basiskonfiguration

***

### Position (Header)

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• oberhalb vom Header\
• über Navigation\
• unterhalb vom Header

**Beispiel Wert**:\
`oberhalb vom Header`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "USP-Bar" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-usp-bar-header-position`

{% hint style="info" %}
Bitte beachte, im "Custom-Header" und im "Erlebniswelt-Header" wird lediglich die Position "oberhalb vom Header" unterstützt.
{% endhint %}

***

### Position (Footer)

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• oberhalb vom Footer

**Beispiel Wert**:\
`oberhalb vom Footer`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "USP-Bar" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-usp-bar-footer-position`

***

### Darstellungsart (Header)

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• kleine Icons\
• kleine Icons + Top-Bar\
• kleine Icons + Widget

**Beispiel Wert**:\
`kleine Icons`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "USP-Bar" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-usp-bar-header-layout`

{% hint style="info" %}
**kleine Icons**\
Kleines Icon links neben dem Label.

**kleine Icons + Top-Bar**\
Die "Top-Bar" wird in die "USP-Bar" verschoben. (Bei Problemen mit Plugins, welche die "Top-Bar" modifizieren, nutzte bitte ein anderes Layout)

**kleine Icons + Widget**\
Ein ThemeWare® Widget kann über die Konfiguration "Inhalt (Widget)" im rechten Bereich platziert werden.
{% endhint %}

***

### Darstellungsart (Footer)

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• kleine Icons\
• große Icons\
• große Icons mit Untertitel

**Beispiel Wert**:\
`kleine Icons`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "USP-Bar" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-usp-bar-footer-layout`

{% hint style="info" %}
**kleine Icons**\
Kleines Icon links neben dem Label.

**große Icons**\
Großes Icon über dem Label.
{% endhint %}

***

### Inhalt (Widget)

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• nicht anzeigen\
• Communities bzw. Social Media

**Beispiel Wert**:\
`Communities bzw. Social Media`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "USP-Bar" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-usp-bar-widget-content`

{% hint style="info" %}
Die Konfiguration der Widgets findest du im Tab "Widgets".
{% endhint %}

***

### Größenmodus (Header)

**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 "USP-Bar" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-usp-bar-header-width`

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

***

### Größenmodus (Footer)

**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 "USP-Bar" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-usp-bar-width`

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

***

### Höhe (kleine Icons)

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`40`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "USP-Bar" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-usp-bar-height-small-icons`

{% hint style="info" %}
**Hinweis**: Diese Konfiguration bezieht sich auf die Darstellungsart "kleine Icons".
{% endhint %}

***

### Höhe (große Icons)

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`110`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "USP-Bar" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-usp-bar-height-large-icons`

{% hint style="info" %}
**Hinweis**: Diese Konfiguration bezieht sich auf die Darstellungsart "große Icons".
{% endhint %}

***

### Vorteile ausrichten (kleine Icons)

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• links ausrichten\
• rechts ausrichten\
• zentriert ausrichten\
• space-between\
• space-around

**Beispiel Wert**:\
`space-between`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "USP-Bar" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-usp-bar-small-icons-justify-content`

{% hint style="info" %}
**Hinweis**: Diese Konfiguration bezieht sich auf die Darstellungsart "kleine Icons".

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

***

### Vorteile ausrichten (große Icons)

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• links ausrichten\
• rechts ausrichten\
• zentriert ausrichten\
• space-between\
• space-around

**Beispiel Wert**:\
`space-around`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "USP-Bar" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-usp-bar-large-icons-justify-content`

{% hint style="info" %}
**Hinweis**: Diese Konfiguration bezieht sich auf die Darstellungsart "große Icons".

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

## Farbkonfiguration

***

### Textfarbe (Header)

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#263842`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "USP-Bar" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-usp-bar-header-color`

***

### Iconfarbe (Header)

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#263842`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "USP-Bar" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-usp-bar-header-icon-color`

***

### Rahmenfarbe (Header)

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#eef2f5`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "USP-Bar" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-usp-bar-header-border-color`

***

### Hintergrundfarbe (Header)

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#eef2f5`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "USP-Bar" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-usp-bar-header-background-color`

***

### Textfarbe (Footer)

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#555555`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "USP-Bar" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-usp-bar-footer-color`

***

### Iconfarbe (Footer)

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#555555`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "USP-Bar" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-usp-bar-footer-icon-color`

***

### Rahmenfarbe (Footer)

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#e5ebf0`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "USP-Bar" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-usp-bar-footer-border-color`

***

### Hintergrundfarbe (Footer)

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#eef2f5`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "USP-Bar" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-usp-bar-footer-background-color`

## Typografie

***

### Schriftart

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• Text\
• Überschriften

**Beispiel Wert**:\
`Text`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "USP-Bar" => Abschnitt "Typografie"

**Technischer Name**:\
`twt-usp-bar-font-family`

***

### Schriftgröße

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`14`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "USP-Bar" => Abschnitt "Typografie"

**Technischer Name**:\
`twt-usp-bar-font-size`

***

### Strichstärke (kleine Icons)

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• light\
• normal\
• bold

**Beispiel Wert**:\
`normal`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "USP-Bar" => Abschnitt "Typografie"

**Technischer Name**:\
`twt-usp-bar-font-weight`

{% hint style="info" %}
**Hinweis**: Diese Konfiguration bezieht sich auf die Darstellungsart "kleine Icons".
{% endhint %}

***

### Strichstärke (große Icons)

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• light\
• normal\
• bold

**Beispiel Wert**:\
`bold`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "USP-Bar" => Abschnitt "Typografie"

**Technischer Name**:\
`twt-usp-bar-font-weight-large`

{% hint style="info" %}
**Hinweis**: Diese Konfiguration bezieht sich auf die Darstellungsart "große Icons".
{% endhint %}

***

### Textformatierung

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• keine\
• Großschreibung\
• Kleinschreibung\
• Wortanfang in Großbuchstaben

**Beispiel Wert**:\
`keine`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "USP-Bar" => Abschnitt "Typografie"

**Technischer Name**:\
`twt-usp-bar-text-transform`

***

### Icongröße (kleine Icons)

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`15`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "USP-Bar" => Abschnitt "Typografie"

**Technischer Name**:\
`twt-usp-bar-icon-size-small`

{% hint style="info" %}
**Hinweis**: Diese Konfiguration bezieht sich auf die Darstellungsart "kleine Icons".
{% endhint %}

***

### Icongröße (große Icons)

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`36`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "USP-Bar" => Abschnitt "Typografie"

**Technischer Name**:\
`twt-usp-bar-icon-size-large`

{% hint style="info" %}
**Hinweis**: Diese Konfiguration bezieht sich auf die Darstellungsart "große Icons".
{% endhint %}

## USPs

***

### Vorteil 1 anzeigen ab ...

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• nicht anzeigen\
• Phone (Hochformat) (<576px)\
• Phone (Querformat) (≥576px)\
• Tablet (Hochformat) (≥768px)\
• Tablet (Querformat) (≥992px)\
• Desktop (≥1200px)\
• Container-max-width (Full-width-boxed)

**Beispiel Wert**:\
`Phone (Hochformat) (<576px)`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "USP-Bar" => Abschnitt "USPs"

**Technischer Name**:\
`twt-usp-bar-breakpoint-item-1`

{% hint style="info" %}
Um das Label und das Icon zu bearbeiten oder übersetzten, nutze bitte die Textbausteine: twt.extension.uspBar.usp1.title und twt.extension.uspBar.usp1.icon
{% endhint %}

***

### Vorteil 2 anzeigen ab ...

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• nicht anzeigen\
• Phone (Hochformat) (<576px)\
• Phone (Querformat) (≥576px)\
• Tablet (Hochformat) (≥768px)\
• Tablet (Querformat) (≥992px)\
• Desktop (≥1200px)\
• Container-max-width (Full-width-boxed)

**Beispiel Wert**:\
`Phone (Querformat) (≥576px)`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "USP-Bar" => Abschnitt "USPs"

**Technischer Name**:\
`twt-usp-bar-breakpoint-item-2`

{% hint style="info" %}
Um das Label und das Icon zu bearbeiten oder übersetzten, nutze bitte die Textbausteine: twt.extension.uspBar.usp2.title und twt.extension.uspBar.usp2.icon
{% endhint %}

***

### Vorteil 3 anzeigen ab ...

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• nicht anzeigen\
• Phone (Hochformat) (<576px)\
• Phone (Querformat) (≥576px)\
• Tablet (Hochformat) (≥768px)\
• Tablet (Querformat) (≥992px)\
• Desktop (≥1200px)\
• Container-max-width (Full-width-boxed)

**Beispiel Wert**:\
`Tablet (Hochformat) (≥768px)`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "USP-Bar" => Abschnitt "USPs"

**Technischer Name**:\
`twt-usp-bar-breakpoint-item-3`

{% hint style="info" %}
Um das Label und das Icon zu bearbeiten oder übersetzten, nutze bitte die Textbausteine: twt.extension.uspBar.usp3.title und twt.extension.uspBar.usp3.icon
{% endhint %}

***

### Vorteil 4 anzeigen ab ...

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• nicht anzeigen\
• Phone (Hochformat) (<576px)\
• Phone (Querformat) (≥576px)\
• Tablet (Hochformat) (≥768px)\
• Tablet (Querformat) (≥992px)\
• Desktop (≥1200px)\
• Container-max-width (Full-width-boxed)

**Beispiel Wert**:\
`Tablet (Querformat) (≥992px)`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "USP-Bar" => Abschnitt "USPs"

**Technischer Name**:\
`twt-usp-bar-breakpoint-item-4`

{% hint style="info" %}
Um das Label und das Icon zu bearbeiten oder übersetzten, nutze bitte die Textbausteine: twt.extension.uspBar.usp4.title und twt.extension.uspBar.usp4.icon
{% endhint %}

***

### Vorteil 5 anzeigen ab ...

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• nicht anzeigen\
• Phone (Hochformat) (<576px)\
• Phone (Querformat) (≥576px)\
• Tablet (Hochformat) (≥768px)\
• Tablet (Querformat) (≥992px)\
• Desktop (≥1200px)\
• Container-max-width (Full-width-boxed)

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

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "USP-Bar" => Abschnitt "USPs"

**Technischer Name**:\
`twt-usp-bar-breakpoint-item-5`

{% hint style="info" %}
Um das Label und das Icon zu bearbeiten oder übersetzten, nutze bitte die Textbausteine: twt.extension.uspBar.usp5.title und twt.extension.uspBar.usp5.icon
{% endhint %}

***

### Vorteil 6 anzeigen ab ...

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• nicht anzeigen\
• Phone (Hochformat) (<576px)\
• Phone (Querformat) (≥576px)\
• Tablet (Hochformat) (≥768px)\
• Tablet (Querformat) (≥992px)\
• Desktop (≥1200px)\
• Container-max-width (Full-width-boxed)

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

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "USP-Bar" => Abschnitt "USPs"

**Technischer Name**:\
`twt-usp-bar-breakpoint-item-6`

{% hint style="info" %}
Um das Label und das Icon zu bearbeiten oder übersetzten, nutze bitte die Textbausteine: twt.extension.uspBar.usp6.title und twt.extension.uspBar.usp6.icon
{% 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/usp-bar/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.