Top-Bar – Logo + Suche + Aktions-Buttons – Navigation
Top-Bar – Suche + Logo + Aktions-Buttons – Navigation
Top-Bar + Aktions-Buttons – Logo – Navigation
Logo + Navigation + Aktions-Buttons
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
Feldtyp: Nummernfeld
Beispiel Wert:
0
Pfad zur Einstellung: Tab "Header" => Bereich "Layout" => Abschnitt "Basiskonfiguration"
Technischer Name:
twt-header-margin-top
Feldtyp: Nummernfeld
Beispiel Wert:
10
Pfad zur Einstellung: Tab "Header" => Bereich "Layout" => Abschnitt "Basiskonfiguration"
Technischer Name:
twt-header-padding-top
Feldtyp: Nummernfeld
Beispiel Wert:
20
Pfad zur Einstellung: Tab "Header" => Bereich "Layout" => Abschnitt "Basiskonfiguration"
Technischer Name:
twt-header-padding-bottom
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
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
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
Feldtyp: Farbauswahl
Beispiel Wert:
#ffffff
Pfad zur Einstellung: Tab "Header" => Bereich "Layout" => Abschnitt "Farbkonfiguration"
Technischer Name:
twt-header-background-color-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
Feldtyp: Medienauswahl
Beispiel Wert: ``
Pfad zur Einstellung: Tab "Header" => Bereich "Layout" => Abschnitt "Hintergrundbild"
Technischer Name:
twt-header-background-image
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
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
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
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
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
Feldtyp: Nummernfeld
Beispiel Wert:
14
Pfad zur Einstellung: Tab "Header" => Bereich "Layout" => Abschnitt "Dropdowns"
Technischer Name:
twt-header-dropdown-font-size
Feldtyp: Farbauswahl
Beispiel Wert:
#111111
Pfad zur Einstellung: Tab "Header" => Bereich "Layout" => Abschnitt "Dropdowns"
Technischer Name:
twt-header-dropdown-color
Feldtyp: Farbauswahl
Beispiel Wert:
$sw-color-brand-primary
Pfad zur Einstellung: Tab "Header" => Bereich "Layout" => Abschnitt "Dropdowns"
Technischer Name:
twt-header-dropdown-color-hover
Feldtyp: Farbauswahl
Beispiel Wert:
#e0e0e0
Pfad zur Einstellung: Tab "Header" => Bereich "Layout" => Abschnitt "Dropdowns"
Technischer Name:
twt-header-dropdown-border-color
Feldtyp: Farbauswahl
Beispiel Wert:
#ffffff
Pfad zur Einstellung: Tab "Header" => Bereich "Layout" => Abschnitt "Dropdowns"
Technischer Name:
twt-header-dropdown-background-color
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.
Wähle den Größenmodus des Headers aus.
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.
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.