> 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/floating-widget/konfiguration.md).

# Konfiguration

***

### Floating-Widget anzeigen

**Feldtyp**:\
Auswahlfeld

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

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

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Floating-Widget"

**Technischer Name**:\
`twt-floating-widget-show`

{% hint style="info" %}
Zeigt das ThemeWare® "Floating-/Slideout-Widget" an.

Um den Inhalt zu bearbeiten oder übersetzten, nutze bitte den Textbaustein: twt.extension.floatingWidget.body
{% endhint %}

***

### Floating-Widget anzeigen @Phone (<768px)

**Feldtyp**:\
Auswahlfeld

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

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

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Floating-Widget"

**Technischer Name**:\
`twt-floating-widget-mobile`

## Basiskonfiguration

***

### Position

**Feldtyp**:\
Auswahlfeld

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

**Beispiel Wert**:\
`links`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Floating-Widget" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-floating-widget-position`

***

### Hover-Effekt

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• kein Effekt\
• Herausziehen\
• Deckkraft verringern

**Beispiel Wert**:\
`Herausziehen`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Floating-Widget" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-floating-widget-hover-type`

***

### Overlay anzeigen (wenn geöffnet)

**Feldtyp**:\
Auswahlfeld

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

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

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Floating-Widget" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-floating-widget-backdrop`

***

### Geöffnet anzeigen (wenn die Seite geladen wurde)

**Feldtyp**:\
Auswahlfeld

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

**Beispiel Wert**:\
`nein`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Floating-Widget" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-floating-widget-show-opened`

***

### Animieren (wenn die Seite geladen wurde)

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• keine Animation\
• Wackeln (3x)

**Beispiel Wert**:\
`keine Animation`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Floating-Widget" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-floating-widget-animation`

***

### Widget verlinken

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• nein\
• ja\
• ja (in neuem Tab öffnen)

**Beispiel Wert**:\
`nein`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Floating-Widget" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-floating-widget-link`

{% hint style="info" %}
Um den Link zu bearbeiten oder übersetzten, nutze bitte den Textbaustein: twt.extension.floatingWidget.link
{% endhint %}

***

### Breite (Widget)

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`400`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Floating-Widget" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-floating-widget-width`

***

### Höhe (Widget)

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`300`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Floating-Widget" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-floating-widget-height`

***

### Breite (Reiter)

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`200`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Floating-Widget" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-floating-widget-title-width`

***

### Höhe (Reiter)

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`40`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Floating-Widget" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-floating-widget-title-height`

***

### Innenabstand (Inhalt)

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`20`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Floating-Widget" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-floating-widget-padding`

***

### Inhalt ausrichten (vertikal)

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• oben ausrichten\
• zentriert ausrichten\
• unten ausrichten

**Beispiel Wert**:\
`zentriert ausrichten`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Floating-Widget" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-floating-widget-align-items`

{% hint style="info" %}
Um den Inhalt zu bearbeiten oder übersetzten, nutze bitte den Textbaustein: twt.extension.floatingWidget.body
{% endhint %}

***

### Inhalt ausrichten (horizontal)

**Feldtyp**:\
Auswahlfeld

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

**Beispiel Wert**:\
`zentriert ausrichten`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Floating-Widget" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-floating-widget-justify-content`

{% hint style="info" %}
Wenn der Text über die volle Widget-Breite läuft, hat die Ausrichtung keinen visuellen Effekt.

Um den Inhalt zu bearbeiten oder übersetzten, nutze bitte den Textbaustein: twt.extension.floatingWidget.body
{% endhint %}

***

### Abstand nach unten

**Feldtyp**:\
Textfeld

**Beispiel Wert**:\
`20`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Floating-Widget" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-floating-widget-side-bottom-distance`

***

### Abstand nach unten (Einheit)

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• % (Prozent)\
• px (Pixel)

**Beispiel Wert**:\
`% (Prozent)`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Floating-Widget" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-floating-widget-side-bottom-distance-unit`

## Farbkonfiguration

***

### Textfarbe

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#333333`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Floating-Widget" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-floating-widget-color`

***

### Linkfarbe

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`$sw-color-brand-primary`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Floating-Widget" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-floating-widget-link-color`

***

### Linkfarbe @hover

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`$twt-color-brand-primary-dark`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Floating-Widget" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-floating-widget-link-color-hover`

***

### Hintergrundfarbe (Widget)

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#ffffff`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Floating-Widget" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-floating-widget-background-color`

***

### Textfarbe (Reiter)

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#ffffff`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Floating-Widget" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-floating-widget-title-color`

***

### Hintergrundfarbe (Reiter)

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`$sw-color-brand-primary`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Floating-Widget" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-floating-widget-title-background-color`

## Hintergrundbild

***

### Hintergrundbild

**Feldtyp**:\
Medienauswahl

**Beispiel Wert**:\
\`\`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Floating-Widget" => Abschnitt "Hintergrundbild"

**Technischer Name**:\
`twt-floating-widget-background-image`

***

### Anzeigemodus

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• Standard\
• Beinhalten (contain)\
• Füllen (cover)

**Beispiel Wert**:\
`Standard`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Floating-Widget" => Abschnitt "Hintergrundbild"

**Technischer Name**:\
`twt-floating-widget-background-image-object-fit`

{% hint style="info" %}
**none**\
Das Bild wird nicht skaliert.

**cover**\
Die Größe des Bildes wird so angepasst, dass das Seitenverhältnis beibehalten wird und der gesamte Inhaltsrahmen des Elements ausgefüllt wird. Falls das Seitenverhältnis nicht übereinstimmt, wird die Grafik zugeschnitten.

**contain**\
Das Bild wird so skaliert, dass sein Seitenverhältnis beibehalten wird und es in den Inhaltsrahmen des Elements passt.
{% endhint %}

## Typografie

***

### Schriftgröße

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`16`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Floating-Widget" => Abschnitt "Typografie"

**Technischer Name**:\
`twt-floating-widget-font-size`

***

### Schriftgröße (Reiter)

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`18`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Floating-Widget" => Abschnitt "Typografie"

**Technischer Name**:\
`twt-floating-widget-title-font-size`

***

### Textausrichtung

**Feldtyp**:\
Auswahlfeld

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

**Beispiel Wert**:\
`zentriert ausrichten`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Floating-Widget" => Abschnitt "Typografie"

**Technischer Name**:\
`twt-floating-widget-text-align`

{% hint style="info" %}
Textausrichtung beim Umbruch des Textes.
{% endhint %}

***

### Textformatierung (Reiter)

**Feldtyp**:\
Auswahlfeld

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

**Beispiel Wert**:\
`keine`

**Pfad zur Einstellung**:\
Tab "Erweiterungen" => Bereich "Floating-Widget" => Abschnitt "Typografie"

**Technischer Name**:\
`twt-floating-widget-title-text-transform`