> 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/usp-bar/konfiguration.md).

# 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 übersetzen, 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 übersetzen, 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 %}

***

### Untertitel anzeigen (große Icons)

**Feldtyp**:\
Auswahlfeld

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

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

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

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

{% hint style="info" %}
Untertitel unterhalb des Titels anzeigen. Gilt nur für Darstellungsarten mit großen Icons.
{% 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 übersetzen, 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 übersetzen, 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 übersetzen, 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 übersetzen, 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 übersetzen, 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 übersetzen, nutze bitte die Textbausteine: twt.extension.uspBar.usp6.title und twt.extension.uspBar.usp6.icon
{% endhint %}