You can nest components as much as you can but when the structure begins to grow the Layers (or) Node Inspector comes very handy. For example, if an element’s Display Setting is set to None you cannot see or select it on the Canvas, but you can still select it from the Layers.
It allows you to manage and rearrange your elements extremely faster, focusing always on the architecture of your structure.
With the Layers you can interact with every element on a given page. There are three main features of the Layers:
- Selecting an element
- Hierarchy of elements
- Moving elements
Selecting an element
If you hover over different elements in the Layers, the corresponding elements on the Canvas will highlight. The same is true if you hover over elements on the Canvas, elements in the Layers will highlight.
You can select an element from the Navigator by clicking on it. This will allow you to access the Style Manager and Element Properties Panel for that element just like if you had selected it on the Canvas.
Hierarchy of elements
The Layers also serve as a way to see your page hierarchy and which elements are nested inside of other elements.
You can choose to expand or collapse parent elements. Each time you expand a parent element, the child elements within become visible and are indented.
Dragging Elements
Elements can be moved directly on the canvas, but sometimes it’s easier to see the structure when moving elements in the Layers. For example, you can reorganize sibling elements (elements that share the same parent) by dragging the elements around within the Layers. You can also drag entire sections of the page and all the child elements within will be moved with it.
The Layers also makes it simple to change the hierarchy of your page. This can be challenging on the Canvas with some nested elements — especially if they are similarly sized. In the Layers, though, you can quickly grab a child element, and move it outside of its parent element. Likewise, you can nest an element by clicking and dragging it into another element.
