Alle Seiten
Bereitgestellt von GitBook
1 von 1

Loading...

Konfiguration


Breadcrumb anzeigen (Startseite)

Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen (Standard)

Beispiel Wert: nicht anzeigen

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb"

Technischer Name: twt-breadcrumb-show-home


Breadcrumb anzeigen (CMS-Shopseiten)

Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen (Standard)

Beispiel Wert: anzeigen (Standard)

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb"

Technischer Name: twt-breadcrumb-show-cms-shop-pages


Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen (Standard)

Beispiel Wert: anzeigen (Standard)

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb"

Technischer Name: twt-breadcrumb-show-cms-landing-pages


Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen (Standard)

Beispiel Wert: anzeigen (Standard)

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb"

Technischer Name: twt-breadcrumb-show-cms-category-pages


Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen (Standard)

Beispiel Wert: anzeigen (Standard)

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb"

Technischer Name: twt-breadcrumb-show-cms-product-pages

a## Basiskonfiguration


Feldtyp: Auswahlfeld

Verfügbare Werte: • Links (Standard) • Links mit Hintergrundfarbe • Buttons

Beispiel Wert: Links (Standard)

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-breadcrumb-style


Feldtyp: Auswahlfeld

Verfügbare Werte: • Chevron (Standard) • Doppel-Chevron • Pfeil • Schrägstrich • Punkt • senkrechter Strich • Bindestrich

Beispiel Wert: Chevron (Standard)

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-breadcrumb-separator-style


Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen (Standard) • Home-Icon anzeigen • Home-Link anzeigen • Text anzeigen ("Sie sind hier:") • Text und Home-Icon anzeigen • Text und Home-Link anzeigen

Beispiel Wert: nicht anzeigen (Standard)

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-breadcrumb-further-information


Feldtyp: Farbauswahl

Beispiel Wert: #444444

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-breadcrumb-text-color


Feldtyp: Farbauswahl

Beispiel Wert: #444444

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-breadcrumb-link-color


Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-breadcrumb-link-active-color


Feldtyp: Farbauswahl

Beispiel Wert: #444444

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-breadcrumb-divider-color


Feldtyp: Farbauswahl

Beispiel Wert: #bcc1c7

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-breadcrumb-buttons-border-color


Feldtyp: Farbauswahl

Beispiel Wert: #eeeeee

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-breadcrumb-buttons-background-color


Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-breadcrumb-buttons-border-color-active


Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-breadcrumb-buttons-background-color-active


Feldtyp: Auswahlfeld

Verfügbare Werte: • nein (Standard) • ja • nur @hover • nur im Ruhezustand

Beispiel Wert: nein (Standard)

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Typografie"

Technischer Name: twt-breadcrumb-links-underline


Feldtyp: Auswahlfeld

Verfügbare Werte: • kein Container-Styling (Standard) • ThemeWare® CMS-Styling • Benutzerdefiniertes Container-Styling

Beispiel Wert: kein Container-Styling (Standard)

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Breadcrumb-Container (Shopware-Standard-Breadcrumb)"

Technischer Name: twt-breadcrumb-container-styling


Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht abgerundet • abgerundete Ecken (Standard) • runde Ecken

Beispiel Wert: abgerundete Ecken (Standard)

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Breadcrumb-Container (Shopware-Standard-Breadcrumb)"

Technischer Name: twt-breadcrumb-container-corner-type


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 "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Breadcrumb-Container (Shopware-Standard-Breadcrumb)"

Technischer Name: twt-breadcrumb-width


Feldtyp: Nummernfeld

Beispiel Wert: 10

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Breadcrumb-Container (Shopware-Standard-Breadcrumb)"

Technischer Name: twt-breadcrumb-margin-top


Feldtyp: Nummernfeld

Beispiel Wert: 10

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Breadcrumb-Container (Shopware-Standard-Breadcrumb)"

Technischer Name: twt-breadcrumb-margin-bottom


Feldtyp: Nummernfeld

Beispiel Wert: 1

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Breadcrumb-Container (Shopware-Standard-Breadcrumb)"

Technischer Name: twt-breadcrumb-padding-top-bottom


Feldtyp: Nummernfeld

Beispiel Wert: 1

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Breadcrumb-Container (Shopware-Standard-Breadcrumb)"

Technischer Name: twt-breadcrumb-padding-left-right


Feldtyp: Auswahlfeld

Verfügbare Werte: • links ausrichten • zentriert ausrichten • rechts ausrichten

Beispiel Wert: links ausrichten

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Breadcrumb-Container (Shopware-Standard-Breadcrumb)"

Technischer Name: twt-breadcrumb-justify-content


Feldtyp: Farbauswahl

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

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Breadcrumb-Container → Container-Styling: Benutzerdefiniertes Container-Styling"

Technischer Name: twt-breadcrumb-border-color


Feldtyp: Farbauswahl

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

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Breadcrumb-Container → Container-Styling: Benutzerdefiniertes Container-Styling"

Technischer Name: twt-breadcrumb-border-top-color


Feldtyp: Farbauswahl

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

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Breadcrumb-Container → Container-Styling: Benutzerdefiniertes Container-Styling"

Technischer Name: twt-breadcrumb-border-bottom-color


Feldtyp: Farbauswahl

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

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Breadcrumb-Container → Container-Styling: Benutzerdefiniertes Container-Styling"

Technischer Name: twt-breadcrumb-background-color


Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht abgerundet • abgerundete Ecken • runde Ecken

Beispiel Wert: abgerundete Ecken

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Darstellungsart: Links in farbiger Box"

Technischer Name: twt-breadcrumb-list-corner-type


Feldtyp: Farbauswahl

Beispiel Wert: #bcc1c7

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Darstellungsart: Links in farbiger Box"

Technischer Name: twt-breadcrumb-border-color-list


Feldtyp: Farbauswahl

Beispiel Wert: #eeeeee

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Darstellungsart: Links in farbiger Box"

Technischer Name: twt-breadcrumb-background-color-list


Feldtyp: Auswahlfeld

Verfügbare Werte: • nein • ja

Beispiel Wert: nein

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Darstellungsart: Buttons"

Technischer Name: twt-breadcrumb-buttons-separator-show


Feldtyp: Auswahlfeld

Verfügbare Werte: • nein • ja

Beispiel Wert: ja

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Darstellungsart: Buttons"

Technischer Name: twt-breadcrumb-buttons-border-show


Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht abgerundet • abgerundete Ecken • runde Ecken

Beispiel Wert: abgerundete Ecken

Pfad zur Einstellung: Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Darstellungsart: Buttons"

Technischer Name: twt-breadcrumb-buttons-corner-type

Breadcrumb anzeigen (CMS-Landingpages)

Breadcrumb anzeigen (CMS-Kategorieseiten)

Breadcrumb anzeigen (CMS-Produktseite)

Darstellungsart

Links Links und Trennzeichen.

Links mit Hintergrundfarbe Links und Trennzeichen mit einem farbigen Hintergrund.

Buttons Links als Buttons, ohne Trennzeichen.

Darstellungsart (Trennzeichen)

Zusatzinformationen

Um den Text "Sie sind hier:" zu bearbeiten oder übersetzen, nutze bitte den Textbaustein: twt.breadcrumb.furtherInformation

Um den Text "Home-Link" zu bearbeiten nutze bitte den Textbaustein: general.homeLink

Farbkonfiguration

Textfarbe (Zusatzinformationen)

Linkfarbe

Linkfarbe @active

Iconfarbe (Trennzeichen)

Rahmenfarbe

Wird in der Standard-Breadcrumb verwendet. Die Hero-Section nutzt die Textfarbe des Elements.

Hintergrundfarbe

Wird in der Standard-Breadcrumb verwendet. Die Hero-Section nutzt die Textfarbe des Elements.

Rahmenfarbe @active

Wird in der Standard-Breadcrumb verwendet. Die Hero-Section nutzt die Textfarbe des Elements.

Hintergrundfarbe @active

Wird in der Standard-Breadcrumb verwendet. Die Hero-Section nutzt die Textfarbe des Elements.

Typografie

Links unterstreichen

Unterstreiche Breadcrumb-Links, damit klickbare Einträge von nicht-klickbaren strukturellen Seiten klar unterschieden werden und so die Barrierefreiheit verbessert wird.

Hinweis: Wirkt nur bei den Darstellungsarten "Links" und "Links in farbiger Box". Button-Stile sind nicht betroffen.

Diese Konfiguration kann durch die Barrierefreiheits-Konfiguration "Links unterstreichen" im Tab "Weiteres" => Bereich "Barrierefreiheit" => Abschnitt "Layout" überschrieben werden.

Breadcrumb-Container

Container-Styling

Ecken

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

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

Breite

Lege die Größenmodus der Breadcrumb-Container auf CMS-Seiten im Grundlayout "Full-width-boxed" fest.

Außenabstand oben

Lege den Außenabstand nach oben für den Breadcrumb-Container auf CMS-Seiten fest.

Außenabstand unten

Lege den Außenabstand nach unten für den Breadcrumb-Container auf CMS-Seiten fest.

Innenabstand oben/unten

Lege den Innenabstand nach oben/unten für den Breadcrumb-Container auf CMS-Seiten fest.

Wenn du eine Hintergrundfarbe nutzt ist '15' ein sinnvoller Wert.

Innenabstand links/rechts

Lege den Innenabstand nach links/rechts für den Breadcrumb-Container auf CMS-Seiten fest.

Wenn du eine Hintergrundfarbe nutzt ist '20' ein sinnvoller Wert.

Inhalt ausrichten

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.

Benutzerdefiniertes Container-Styling

Rahmenfarbe

Lege die Rahmenfarbe für den Breadcrumb-Container fest.

Rahmenfarbe oben

Lege die Rahmenfarbe oben für den Breadcrumb-Container fest.

Wird nur angewendet wenn dieser Farbwert von der Rahmenfarbe abweicht.

Rahmenfarbe unten

Lege die Rahmenfarbe unten für den Breadcrumb-Container fest.

Wird nur angewendet wenn dieser Farbwert von der Rahmenfarbe abweicht.

Hintergrundfarbe

Lege die Hintergrundfarbe für den Breadcrumb-Container fest.

Darstellungsart "Links mit Hintergrundfarbe"

Ecken

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

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

Rahmenfarbe

Lege die Rahmenfarbe für den Breadcrumb fest.

Wird bei Darstellungsarten mit Hintergrundfarbe benutzt.

Hintergrundfarbe

Lege die Hintergrundfarbe für den Breadcrumb fest.

Wird bei Darstellungsarten mit Hintergrundfarbe benutzt.

Darstellungsart "Buttons"

Trennzeichen anzeigen

Wähle ob das Trennzeichen-Icon in der Breadcrumb angezeigt werden soll.

Rahmen anzeigen

Wähle ob ein Rahmen um die Buttons angezeigt werden soll.

Die Farbe vom Rahmen kannst du unten konfigurieren.

Ecken

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

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