Alle Seiten
Bereitgestellt von GitBook
1 von 2

Loading...

Loading...

Mobiler Header

Konfiguration

Basiskonfiguration


Darstellungsart

Feldtyp: Auswahlfeld

Verfügbare Werte: • Standard • Verkaufsfördernde Navigation

Beispiel Wert: Standard

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-header-phone-type

Die Darstellungsart "Verkaufsfördernde Navigation" verschiebt die Navigation an den unteren Bildschirmrand für eine bessere Zugänglichkeit auf Smartphones.

Hinweis: Nutze einfach die Darstellungsart "Standard" falls ein Plugin Dritter nicht mit der "Verkaufsfördernde Navigation" harmoniert.


Maximale Breite (Logo) @Phone (<576px)

Feldtyp: Textfeld

Beispiel Wert: 160

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-header-logo-max-width-mobile


Feldtyp: Textfeld

Beispiel Wert: 50

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-header-height-mobile


Feldtyp: Auswahlfeld

Verfügbare Werte: • nein • ja

Beispiel Wert: ja

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-header-phone-fixed


Feldtyp: Farbauswahl

Beispiel Wert: #ffffff

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-header-phone-background-color


Feldtyp: Farbauswahl

Beispiel Wert: #333333

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Aktions-Buttons"

Technischer Name: twt-header-phone-btn-color


Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Aktions-Buttons"

Technischer Name: twt-header-phone-btn-color-hover


Feldtyp: Farbauswahl

Beispiel Wert: #333333

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Aktions-Buttons"

Technischer Name: twt-header-phone-btn-icon-color


Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Aktions-Buttons"

Technischer Name: twt-header-phone-btn-icon-color-hover


Feldtyp: Farbauswahl

Beispiel Wert: #ffffff

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Aktions-Buttons"

Technischer Name: twt-header-phone-btn-border-color


Feldtyp: Farbauswahl

Beispiel Wert: #ffffff

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Aktions-Buttons"

Technischer Name: twt-header-phone-btn-border-color-hover


Feldtyp: Farbauswahl

Beispiel Wert: #ffffff

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Aktions-Buttons"

Technischer Name: twt-header-phone-btn-background-color


Feldtyp: Farbauswahl

Beispiel Wert: #ffffff

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Aktions-Buttons"

Technischer Name: twt-header-phone-btn-background-color-hover


Feldtyp: Auswahlfeld

Verfügbare Werte: • Standard • Clean • Center

Beispiel Wert: Standard

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Darstellungsart 'Verkaufsfördernde Navigation'"

Technischer Name: twt-header-phone-nav-type


Feldtyp: Textfeld

Beispiel Wert: 70

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Darstellungsart 'Verkaufsfördernde Navigation'"

Technischer Name: twt-header-phone-nav-height


Feldtyp: Auswahlfeld

Verfügbare Werte: • Links • Mitte • Rechts

Beispiel Wert: Mitte

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Darstellungsart 'Verkaufsfördernde Navigation'"

Technischer Name: twt-header-phone-logo-position


Feldtyp: Farbauswahl

Beispiel Wert: #ffffff

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Darstellungsart 'Verkaufsfördernde Navigation'"

Technischer Name: twt-header-phone-nav-background-color


Feldtyp: Textfeld

Beispiel Wert: 0 0 20px

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Darstellungsart 'Verkaufsfördernde Navigation'"

Technischer Name: twt-header-phone-nav-box-shadow


Feldtyp: Farbauswahl

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

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Darstellungsart 'Verkaufsfördernde Navigation'"

Technischer Name: twt-header-phone-nav-box-shadow-color


Feldtyp: Auswahlfeld

Verfügbare Werte: • Standard • abgerundete Ecken • runde Ecken

Beispiel Wert: runde Ecken

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Darstellungsart 'Verkaufsfördernde Navigation'"

Technischer Name: twt-header-phone-btn-corner-type


Feldtyp: Auswahlfeld

Verfügbare Werte: • nein (Standard) • ja

Beispiel Wert: nein (Standard)

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Darstellungsart 'Verkaufsfördernde Navigation'"

Technischer Name: twt-header-phone-btn-home


Feldtyp: Nummernfeld

Beispiel Wert: 100

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Darstellungsart 'Verkaufsfördernde Navigation'"

Technischer Name: twt-header-phone-btn-home-order


Feldtyp: Nummernfeld

Beispiel Wert: 200

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Darstellungsart 'Verkaufsfördernde Navigation'"

Technischer Name: twt-header-phone-btn-navigation-order


Feldtyp: Nummernfeld

Beispiel Wert: 300

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Darstellungsart 'Verkaufsfördernde Navigation'"

Technischer Name: twt-header-phone-btn-search-order


Feldtyp: Nummernfeld

Beispiel Wert: 400

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Darstellungsart 'Verkaufsfördernde Navigation'"

Technischer Name: twt-header-phone-btn-cart-order


Feldtyp: Nummernfeld

Beispiel Wert: 500

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Darstellungsart 'Verkaufsfördernde Navigation'"

Technischer Name: twt-header-phone-btn-wishlist-order


Feldtyp: Nummernfeld

Beispiel Wert: 600

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Darstellungsart 'Verkaufsfördernde Navigation'"

Technischer Name: twt-header-phone-btn-account-order


Feldtyp: Auswahlfeld

Verfügbare Werte: • nein • ja

Beispiel Wert: ja

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Darstellungsart 'Verkaufsfördernde Navigation'"

Technischer Name: twt-header-phone-cart-btn-highlighting


Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen

Beispiel Wert: anzeigen

Pfad zur Einstellung: Tab "Header" => Bereich "Mobiler Header" => Abschnitt "Basis-Header ('Header 1' und 'Header 2')"

Technischer Name: twt-header-phone-nav-main-toggle-label-show

Höhe (Header) @Phone (<576px)

Nur verfügbar bei der aktiver Darstellungsart "Verkaufsfördernde Navigation".

Fixiert

Farbkonfiguration

Hintergrundfarbe

Aktions-Buttons

Textfarbe

Textfarbe @hover

Iconfarbe

Iconfarbe @hover

Rahmenfarbe

Rahmenfarbe @hover

Hintergrundfarbe

Hintergrundfarbe @hover

Verkaufsfördernde Navigation

Darstellungsart

Höhe (Navigation) @Phone (<576px)

Nur verfügbar bei der aktiver Darstellungsart "Verkaufsfördernde Navigation".

Logo-Position @Phone (<576px)

Hintergrundfarbe (Navigation)

Schlagschatten

Schattenfarbe

Ecken (Aktions-Buttons)

abgerundete Ecken Verwendet die Konfiguration "Abgerundete Ecken". (siehe "Layout" > "Layout" > "Abgerundete Ecken")

runde Ecken Verwendet einen vordefinierten Radius für runde Ecken.

Home-Button anzeigen (Aktions-Button)

Reihenfolge: Home-Button (Aktions-Button)

Reihenfolge: Navigation-Button (Aktions-Button)

Reihenfolge: Suchen-Button (Aktions-Button)

Reihenfolge: Warenkorb-Button (Aktions-Button)

Reihenfolge: Merkzettel-Button (Aktions-Button)

Reihenfolge: Mein-Konto-Button (Aktions-Button)

Warenkorb-Button hervorheben

Nur verfügbar bei der aktiver Darstellungsart "Verkaufsfördernde Navigation".

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

Hamburger-Menü Text anzeigen @Phone (<576px)