Konfiguration

---

Suche anzeigen

Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen

Beispiel Wert: anzeigen

Pfad zur Einstellung: Tab "Header" => Bereich "Suche"

Technischer Name: twt-header-search-show

Basiskonfiguration

---

Darstellungsart

Feldtyp: Auswahlfeld

Verfügbare Werte: • Eingabefeld (Standard) • Flyout-Suche • Vollbildsuche • Global-Suche @Desktop (nur verfügbar mit "Header 1.1")

Beispiel Wert: Eingabefeld (Standard)

Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-header-search-type

Eingabefeld (Standard) Verfügbar in "Header 1.1" und "Header 1.2".

Flyout-Suche / Vollbildsuche Verfügbar in allen Headern.

Muss für "Header 2.1" und "Full-Width Sticky-Header" ausgewählt werden.

Global-Suche Verfügbar in "Header 1.1" im Desktop-Viewport. Nutzt die Farbe: "Layout" > "Hintergrundfarbe (Aktions-Buttons)".

---

Ecken

Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht abgerundet (Standard) • runde Ecken • individuelle Rundung

Beispiel Wert: nicht abgerundet (Standard)

Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-header-search-input-corner-type

abgerundete Ecken Verwendet die Konfiguration "Abgerundete Ecken". ("Layout" > "Layout" > "Abgerundete Ecken")

runde Ecken Verwendet einen vordefinierten Radius für runde Ecken.

---

Abgerundete Ecken (individuelle Rundung)

Feldtyp: Nummernfeld

Beispiel Wert: 10

Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-header-search-input-border-radius

Hinweis: Diese Konfiguration bezieht sich auf Ecken-Konfiguration "individuelle Rundung".

Farbkonfiguration

---

Textfarbe (Input)

Feldtyp: Farbauswahl

Beispiel Wert: #333333

Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-header-search-input-color

---

Rahmenfarbe (Input)

Feldtyp: Farbauswahl

Beispiel Wert: #e4e7ea

Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-header-search-input-border-color

---

Hintergrundfarbe (Input)

Feldtyp: Farbauswahl

Beispiel Wert: #ffffff

Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-header-search-input-background-color

---

Iconfabe (Button)

Feldtyp: Farbauswahl

Beispiel Wert: #ffffff

Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-header-search-btn-icon-color

---

Rahmenfarbe (Button)

Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-header-search-btn-border-color

---

Hintergrundfarbe (Button)

Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-header-search-btn-background-color

Typografie

---

Textausrichtung

Feldtyp: Auswahlfeld

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

Beispiel Wert: links ausrichten

Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Typografie"

Technischer Name: twt-header-search-text-align

Darstellungsart 'Eingabefeld'

---

Maximale Breite

Feldtyp: Textfeld

Beispiel Wert: 500

Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Darstellungsart 'Eingabefeld'"

Technischer Name: twt-header-search-max-width

Gebe die maximale Breite des Eingabefeldes in Pixeln (z.B. 500 oder 500px) an.

---

Maximale Breite @Desktop (≥1200px)

Feldtyp: Textfeld

Beispiel Wert: 100%

Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Darstellungsart 'Eingabefeld'"

Technischer Name: twt-header-search-width-desktop

Gebe die maximale Breite des Eingabefeldes, ab dem Desktop-Viewport (≥1200px), in Pixeln (z.B. 500 oder 500px) oder mit 100% an.

Darstellungsart 'Flyout-Suche'

---

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 "Suche" => Abschnitt "Darstellungsart 'Flyout-Suche'"

Technischer Name: twt-header-search-flyout-container-width

---

Maximale Breite @Phone (Querformat) (≥576px)

Feldtyp: Textfeld

Beispiel Wert: 500

Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Darstellungsart 'Flyout-Suche'"

Technischer Name: twt-header-search-flyout-max-width

Gebe die maximale Breite des Eingabefeldes in Pixeln (z.B. 500 oder 500px) an.

---

Maximale Breite @Desktop (≥1200px)

Feldtyp: Textfeld

Beispiel Wert: 100%

Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Darstellungsart 'Flyout-Suche'"

Technischer Name: twt-header-search-flyout-max-width-desktop

Gebe die maximale Breite des Eingabefeldes, ab dem Desktop-Viewport (≥1200px), in Pixeln (z.B. 500 oder 500px) oder mit 100% an.

---

Innenabstand

Feldtyp: Nummernfeld

Beispiel Wert: 15

Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Darstellungsart 'Flyout-Suche'"

Technischer Name: twt-header-search-flyout-padding

Die Option "Flyout-Suche" muss unter "Suche" > "Darstellungsart" ausgewählt sein.

---

Hintergrundfarbe @Phone (<576px)

Feldtyp: Farbauswahl

Beispiel Wert: #eef2f5

Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Darstellungsart 'Flyout-Suche'"

Technischer Name: twt-header-phone-search-flyout-background-color

---

Hintergrundfarbe

Feldtyp: Farbauswahl

Beispiel Wert: #eef2f5

Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Darstellungsart 'Flyout-Suche'"

Technischer Name: twt-header-search-flyout-background-color

Die Option "Flyout-Suche" muss unter "Suche" > "Darstellungsart" ausgewählt sein.

Darstellungsart 'Vollbildsuche'

---

Overlay-Farbe

Feldtyp: Farbauswahl

Beispiel Wert: rgba(0, 0, 0, 0.9)

Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Darstellungsart 'Vollbildsuche'"

Technischer Name: twt-header-search-fullscreen-backdrop-color

Wähle die gewünschte Hintergrundfarbe vom Overlay (backdrop) aus.

Die Option "Vollbildsuche" muss als "Darstellungsart" ausgewählt sein.

---

Unschärfe-Effekt [px] (Overlay)

Feldtyp: Nummernfeld

Beispiel Wert: 0

Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Darstellungsart 'Vollbildsuche'"

Technischer Name: twt-header-search-fullscreen-backdrop-effect-blur

Gib die gewüschte Stärke für den Unschärfe-Effekt vom Overlay (backdrop) ein.