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
Last updated
