Konfiguration


Top-Navigation

Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • Liste anzeigen • Hamburger-Menü anzeigen

Beispiel Wert: Liste anzeigen

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation"

Technischer Name: twt-nav-main-show

Basiskonfiguration


Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen

Beispiel Wert: anzeigen

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-nav-main-home-link-show


Feldtyp: Auswahlfeld

Verfügbare Werte: • Text (Standard) • Icon

Beispiel Wert: Text (Standard)

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-nav-main-home-link


Pfeile anzeigen

Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen

Beispiel Wert: nicht anzeigen

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-nav-main-arrows-show

Zeigt einen Pfeil nach unten neben dem Menüpunkt, wenn Unterkategorien vorhanden sind.


Hover-Effekt

Feldtyp: Auswahlfeld

Verfügbare Werte: • Standard • farbig hinterlegen (inkl. Home-Link) • farbig hinterlegen (exkl. Home-Link) • unterstreichen (mittig nach links und rechts) • unterstreichen (von links nach rechts) • unterstreichen (von rechts nach links) • unterstreichen

Beispiel Wert: farbig hinterlegen (inkl. Home-Link)

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-nav-main-hover-type

Bei einer links ausgerichteten Top-Navigation empfehlen wir den Hover-Effekt "farbig hinterlegen (exkl. Home-Link)" statt "farbig hinterlegen (inkl. Home-Link)".


Höhe

Feldtyp: Nummernfeld

Beispiel Wert: 60

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-nav-main-height


Feldtyp: Nummernfeld

Beispiel Wert: 17

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-nav-main-padding

Gebe den gewünschten Abstand für die Menüpunkte ein.


Innenabstand unten

Feldtyp: Nummernfeld

Beispiel Wert: 1

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-nav-main-padding-bottom

Gebe den gewünschten Abstand nach unten für die Top-Navigation ein.


Feldtyp: Nummernfeld

Beispiel Wert: 1

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-nav-main-margin-left

Hinweis: Diese Konfiguration ist nur für das Grundlayout "boxed" verfügbar.


Außenabstand rechts @Tablet (≥992px)

Feldtyp: Nummernfeld

Beispiel Wert: 1

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-nav-main-margin-right

Hinweis: Diese Konfiguration ist nur für das Grundlayout "boxed" verfügbar.

Basis-Header "Header 1" and "Header 2"


Breite

Feldtyp: Auswahlfeld

Verfügbare Werte: • Standard • Container-Max-Width (Full-width-boxed) • 100% (Full-width)

Beispiel Wert: Standard

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basis-Header "Header 1" and "Header 2""

Technischer Name: twt-nav-main-width

Wähle den Größenmodus der "Top-Navigation" aus.

Standard: Die Breite der "Top-Navigation" orientiert sich an der Konfiguration der Breite des Headers.

Hinweis: Diese Konfiguration gilt nicht im Grundlayout "boxed".

Farbkonfiguration


Hintergrundfarbe (Navigation)

Feldtyp: Farbauswahl

Beispiel Wert: #ffffff

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-nav-main-background-color


Rahmenfarbe

Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-nav-main-border-bottom-color

Hinweis: Diese Konfiguration gilt nur für den Hover-Effekt "Standard".


Rahmenfarbe (unterstreichen) @hover

Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-nav-main-border-bottom-color-hover

Hinweis: Diese Konfiguration gilt nur für den Hover-Effekt "unterstreichen".


Rahmenfarbe (Trennstrich)

Feldtyp: Farbauswahl

Beispiel Wert: #cccccc

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-nav-main-border

Typografie


Schriftart

Feldtyp: Auswahlfeld

Verfügbare Werte: • Text • Überschriften

Beispiel Wert: Text

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Typografie"

Technischer Name: twt-nav-main-font-family


Schriftgröße

Feldtyp: Nummernfeld

Beispiel Wert: 18

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Typografie"

Technischer Name: twt-nav-main-font-size


Strichstärke

Feldtyp: Auswahlfeld

Verfügbare Werte: • light • normal • bold

Beispiel Wert: bold

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Typografie"

Technischer Name: twt-nav-main-font-weight


Strichstärke @active

Feldtyp: Auswahlfeld

Verfügbare Werte: • light • normal • bold

Beispiel Wert: bold

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Typografie"

Technischer Name: twt-nav-main-font-weight-active


Textausrichtung

Feldtyp: Auswahlfeld

Verfügbare Werte: • links ausrichten • rechts ausrichten • zentriert ausrichten • space-between • space-around

Beispiel Wert: links ausrichten

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Typografie"

Technischer Name: twt-nav-main-justify-content

Wähle die gewünschte horizontale Ausrichtung aus.

links Elemente werden am Anfang des Containers positioniert.

rechts Elemente werden am Ende des Containers positioniert.

zentriert Die Elemente befinden sich in der Mitte des Containers.

space-between Elemente werden gleichmäßig verteilt. Das erste Element an den Start, das letzte an das Ende.

space-around Elemente werden gleichmäßig verteilt. Alle Elemente haben gleiche Abstände um sie herum.


Textformatierung

Feldtyp: Auswahlfeld

Verfügbare Werte: • keine • Großschreibung • Kleinschreibung • Wortanfang in Großbuchstaben

Beispiel Wert: keine

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Typografie"

Technischer Name: twt-nav-main-text-transform


Feldtyp: Farbauswahl

Beispiel Wert: #333333

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (Home-Link)"

Technischer Name: twt-nav-main-home-link-color


Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (Home-Link)"

Technischer Name: twt-nav-main-home-link-color-hover


Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (Home-Link)"

Technischer Name: twt-nav-main-home-link-color-active


Textfarbe

Feldtyp: Farbauswahl

Beispiel Wert: #333333

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt"

Technischer Name: twt-nav-main-color


Textfarbe @hover

Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt"

Technischer Name: twt-nav-main-color-hover


Textfarbe @active

Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt"

Technischer Name: twt-nav-main-color-active


Iconfarbe

Feldtyp: Farbauswahl

Beispiel Wert: #333333

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt"

Technischer Name: twt-nav-main-icon-color


Iconfarbe @hover

Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt"

Technischer Name: twt-nav-main-icon-color-hover


Iconfarbe @active

Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt"

Technischer Name: twt-nav-main-icon-color-active


Hintergrundfarbe

Feldtyp: Farbauswahl

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

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt"

Technischer Name: twt-nav-main-link-background-color

Hinweis: Diese Konfiguration gilt nur für die Hover-Effekte "farbig hinterlegen".


Hintergrundfarbe @hover

Feldtyp: Farbauswahl

Beispiel Wert: #eef2f5

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt"

Technischer Name: twt-nav-main-background-color-hover

Hinweis: Diese Konfiguration gilt nur für die Hover-Effekte "farbig hinterlegen".


Hintergrundfarbe @active

Feldtyp: Farbauswahl

Beispiel Wert: #ffffff

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt"

Technischer Name: twt-nav-main-background-color-active

Hinweis: Diese Konfiguration gilt nur für die Hover-Effekte "farbig hinterlegen".


Textfarbe (hervorgehoben)

Feldtyp: Farbauswahl

Beispiel Wert: #ef2f3c

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (hervorgehoben)"

Technischer Name: twt-nav-main-link-highlighted-color


Textfarbe (hervorgehoben) @hover

Feldtyp: Farbauswahl

Beispiel Wert: #feecee

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (hervorgehoben)"

Technischer Name: twt-nav-main-link-highlighted-color-hover


Textfarbe (hervorgehoben) @active

Feldtyp: Farbauswahl

Beispiel Wert: #ef2f3c

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (hervorgehoben)"

Technischer Name: twt-nav-main-link-highlighted-color-active


Iconfarbe (hervorgehoben)

Feldtyp: Farbauswahl

Beispiel Wert: #ef2f3c

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (hervorgehoben)"

Technischer Name: twt-nav-main-link-highlighted-icon-color


Iconfarbe (hervorgehoben) @hover

Feldtyp: Farbauswahl

Beispiel Wert: #feecee

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (hervorgehoben)"

Technischer Name: twt-nav-main-link-highlighted-icon-color-hover


Iconfarbe (hervorgehoben) @active

Feldtyp: Farbauswahl

Beispiel Wert: #ef2f3c

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (hervorgehoben)"

Technischer Name: twt-nav-main-link-highlighted-icon-color-active


Hintergrundfarbe (hervorgehoben)

Feldtyp: Farbauswahl

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

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (hervorgehoben)"

Technischer Name: twt-nav-main-link-highlighted-background-color

Hinweis: Diese Konfiguration gilt nur für die Hover-Effekte "farbig hinterlegen".


Hintergrundfarbe (hervorgehoben) @hover

Feldtyp: Farbauswahl

Beispiel Wert: #ef2f3c

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (hervorgehoben)"

Technischer Name: twt-nav-main-link-highlighted-background-color-hover

Hinweis: Diese Konfiguration gilt nur für die Hover-Effekte "farbig hinterlegen".


Hintergrundfarbe (hervorgehoben) @active

Feldtyp: Farbauswahl

Beispiel Wert: #ffffff

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (hervorgehoben)"

Technischer Name: twt-nav-main-link-highlighted-background-color-active

Hinweis: Diese Konfiguration gilt nur für die Hover-Effekte "farbig hinterlegen".

Last updated

Logo

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