# 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`


---

# 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/floating-widget/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.