Breadcrumbs are a useful little helper at the bottom left of the website editor. If you cannot see the breadcrumbs you can tick the according checkbox in the editor settings [Ctrl + ,] ).
Breadcrumbs allow you to navigate quickly to certain elements within a complex hierarchy, e.g. in a header preset.
By default, 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 way you can easily navigate to an element you cannot click on directly in the editor, e.g. parent containers. In this example we clicked on the green button (indicated by its orange border and it being the right most element in the breadcrumbs)
Classes attached to elements will be visible in blue after the element type.
A double click will open the settings for the targeted element. You can also go up and down the paths of the hierarchy using the [UP] and [DOWN] key. [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).
Little icons next to the element name will indicate some special elements:
- The puzzle icon indicates the parent container of a preset, .e.g. the header, footer or anything prebuilt.
- The star icon indicates an animated element of any kind.
- The image icon indicates a background image on this container
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.