Breadcrumbs sind nützliche Helfer in der Leiste unterhalb des CMS Editors. Falls du die Leiste nicht sehen kannst, kannst du unter Allgemein Einstellungen Editor-Ansicht Brotkrumenpfad anzeigen ein Häkchen setzen.

Basiswissen

Breadcrumbs erlauben dir, ähnlich wie das Ebenen-Handling, schnell verschiedene Elemente in einer komplexen Hierarchie anzusteuern, z. B. in einem Header preset.

Standardmäßig wird dir links die ID der Seite angezeigt, auf der du dich im Moment befindest (hier: "Home"). Außerdem siehst du auf einen Blick, welche Klassen dem jeweiligen Element zugewiesen wurden. Diese werden in blauer Schrift dargestellt.

Umgang mit den Breadcrumbs

Immer wenn du ein Element anklickst, wirst du in den Breadcrumbs seinen Platz in der Elementhierarchie sehen. Das ausgewählte Element ist immer das ganz rechts angezeigt. Sämtliche übergeordneten Container werden links davon dargestellt. Auf die Weise kannst du schnell und einfach Elemente erreichen, welche du nicht unmittelbar im Editor sehen kannst - wie z. B. die soeben angesprochenen übergeordneten Container (hier im Beispiel wird der übergeordnete Container mit der Klasse ".header" vom Container mit der Klasse ".header-content" überdeckt, sodass sich dieser nur mit einem Klick über das Ebenen-Handling im Editor auswählen lässt. Im Bild oben wurde der Button mit dem "Read more" Text ausgewählt, der durch seine blaue Umrandung und Position in den Breadcrumbs als aktiv markiert ist.

Ein Doppelklick auf ein Breadcrumb-Element öffnet sein Einstellungsfenster am linken Bildschirmrand. Mit den Pfeiltasten [Hoch] und [Herunter] kannst du benachbarte Elemente auswählen und so durch die Hierarchie schalten. Mit [Enter] kannst du ebenfalls die Einstellungen des markierten Elements öffnen.

Per Rechtsklick auf das jeweilige Element lässt sich außerdem schnell und einfach das entsprechende Kontextmenü des Elements aufrufen.

Kleine Icons vor dem Elementnamen weisen auf spezielle Elemente hin:

• Das Puzzle-Icon bedeutet, dass das Element ein Parent Container eines Presets ist, z.B. header, footer bzw. alle vorgebauten Presets.
• Das Stern-Icon bedeutet, dass das Element eine Animation besitzt.
• Das Bild-Icon bedeutet, dass auf dem Hintergrund des Elements ein Hintergrundbild hinterlegt wurde.

Zurück zum Anfang