> 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/header/layout/konfiguration.md).

# Konfiguration

## Basiskonfiguration

***

### Darstellungsart

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• Header 1.1 (Top-Bar – Logo + Suche + Aktions-Buttons – Navigation)\
• Header 1.2 (Top-Bar – Suche + Logo + Aktions-Buttons – Navigation)\
• Header 2.1 (Top-Bar + Aktions-Buttons – Logo – Navigation)\
• Full-Width Sticky-Header (Logo + Navigation + Aktions-Buttons)

**Beispiel Wert**:\
`Header 1.1 (Top-Bar – Logo + Suche + Aktions-Buttons – Navigation)`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Layout" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-header-type`

{% hint style="info" %}
Für den Header stehen Dir verschiedene Layouts zur Verfügung. Neben den "Basis-Headern" für eine maximale Kompatibilität mit Plugins Dritter ("Header 1" und "Header 2") bietet Dir ThemeWare® einen kompakten aber stärker modifizierten "Custom-Header", den "Full-Width Sticky-Header".

**Wichtig:** Bitte prüfe die Darstellungsart der Suche und die Position der USP-Bar weil diese abhängig vom gewählten Header sind.
{% endhint %}

***

### Außenabstand oben @Desktop (≥992px)

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`0`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Layout" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-header-margin-top`

***

### Innenabstand oben

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`10`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Layout" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-header-padding-top`

***

### Innenabstand unten

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`20`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Layout" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-header-padding-bottom`

## Basis-Header "Header 1" and "Header 2"

***

### Breite

**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 "Header" => Bereich "Layout" => Abschnitt "Basis-Header ('Header 1' and 'Header 2')"

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

{% hint style="info" %}
Wähle den Größenmodus des Headers aus.
{% endhint %}

***

### Höhe

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`40`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Layout" => Abschnitt "Basis-Header ('Header 1' and 'Header 2')"

**Technischer Name**:\
`twt-header-height`

## Custom-Header "Full-Width Sticky-Header"

***

### Maximale Breite

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`1200`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Layout" => Abschnitt "Custom-Header: ('Full-width Sticky-Header')"

**Technischer Name**:\
`twt-custom-header-nav-max-width`

## Farbkonfiguration

***

### Hintergrundfarbe @Phone (Querformat) (≥576px)

**Feldtyp**:\
Farbauswahl

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

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Layout" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-header-background-color-desktop`

***

### Hintergrundfarbe (Aktions-Buttons) @Desktop

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`rgba(255, 255, 255, 0)`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Layout" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-header-actions-background-color`

## Hintergrundbild

***

### Hintergrundbild

**Feldtyp**:\
Medienauswahl

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

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Layout" => Abschnitt "Hintergrundbild"

**Technischer Name**:\
`twt-header-background-image`

***

### Hintergrundbild anzeigen

**Feldtyp**:\
Auswahlfeld

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

**Beispiel Wert**:\
`anzeigen`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Layout" => Abschnitt "Hintergrundbild"

**Technischer Name**:\
`twt-header-background-image-show`

***

### Abmessungen

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• Ursprüngliche Abmessungen (auto)\
• Hintergrund vollständig abdecken (cover)\
• Hintergrund vollständig abdecken (contain)

**Beispiel Wert**:\
`Ursprüngliche Abmessungen (auto)`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Layout" => Abschnitt "Hintergrundbild"

**Technischer Name**:\
`twt-header-background-image-size`

{% hint style="info" %}
**auto**\
Das auto Schlüsselwort skaliert das Hintergrundbild so in die entsprechende Richtung, dass das ursprüngliche Seitenverhältnis beibehalten wird.

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

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

***

### Position

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• Links, Oben\
• Links, Mitte\
• Links, Unten\
• Rechts, Oben\
• Rechts, Mitte\
• Rechts, Unten\
• Mitte, Oben\
• Mitte, Mitte\
• Mitte, Unten

**Beispiel Wert**:\
`Links, Oben`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Layout" => Abschnitt "Hintergrundbild"

**Technischer Name**:\
`twt-header-background-image-position`

***

### Wiederholung

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• Keine Wiederholung (no-repeat)\
• Horizontal und vertikal (repeat)\
• Horizontal (repeat-x)\
• Vertikal (repeat-y)

**Beispiel Wert**:\
`Horizontal und vertikal (repeat)`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Layout" => Abschnitt "Hintergrundbild"

**Technischer Name**:\
`twt-header-background-image-repeat`

***

### 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 "Header" => Bereich "Layout" => Abschnitt "Hintergrundbild"

**Technischer Name**:\
`twt-header-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 %}

## Dropdowns

***

### Schriftgröße (Dropdown)

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`14`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Layout" => Abschnitt "Dropdowns"

**Technischer Name**:\
`twt-header-dropdown-font-size`

***

### Textfarbe (Dropdowns)

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#111111`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Layout" => Abschnitt "Dropdowns"

**Technischer Name**:\
`twt-header-dropdown-color`

***

### Textfarbe (Dropdowns) @hover

**Feldtyp**:\
Farbauswahl

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

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Layout" => Abschnitt "Dropdowns"

**Technischer Name**:\
`twt-header-dropdown-color-hover`

***

### Rahmenfarbe (Dropdowns)

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#e0e0e0`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Layout" => Abschnitt "Dropdowns"

**Technischer Name**:\
`twt-header-dropdown-border-color`

***

### Hintergrundfarbe (Dropdowns)

**Feldtyp**:\
Farbauswahl

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

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Layout" => Abschnitt "Dropdowns"

**Technischer Name**:\
`twt-header-dropdown-background-color`