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.


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

Logo

© 2024 by ThemeWare® | Made with 💙 by TC-Innovations GmbH