Breadcrumbs provide you with a useful overview of the element and preset hierarchy and allow you to quickly navigate to certain elements.
At first, you always see the page you are currently at (here it is Home). If you click any element within your page you will see the hierarchy of the nested elements. The parent elements are always to the left. This allows you to navigate to all elements - even those you might not reach through a click in the editor because it's overlapped by other elements. In this example, we clicked on an image (indicated by its orange border and it is the rightmost element in the breadcrumbs).
You will also see the classes that are attached to elements in blue after the element type.
A double click on an element will open the settings for this element. You can also go up and down the paths of the hierarchy using the [UP] and [DOWN] keys. [ENTER] will open the element's settings as well.
Each element has its own ID. You can copy the ID to your clipboard via the context menu (click right anywhere on the editor and click Copy element ID to fetch the ID of the right-most element in your breadcrumbs).
The little icons next to the element name will indicate some special characteristics of this element:
- Color palette icon: This is the parent container of a preset, e.g. the header, footer, or anything prebuilt.
- Star icon: This element has an animation
- Image icon: This element has a background image on this container
- Link icon: This element is linked to something
Breadcrumbs are also useful to maintain clean layouts. You can easily spot multiple containers within each other and determine whether all of them are really needed.
Become a part of our Community!
Exchange ideas with other web designers about current developments, tips, and tricks and show your favorite sites. Get advice and talk to us about possible features you would like to see on Sitejet. You can join the Sitejetters community here.