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

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.

---

Außenabstand oben @Desktop (≥992px)

Feldtyp: Nummernfeld

Beispiel Wert: 1

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

Wähle den Größenmodus des Headers aus.

---

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

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.

---

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

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.

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