You can find an overview of every element on your page in the Layers tab and achieve the following:
- View the hierarchy of nested elements.
- Drag-and-drop layers for precision placement.
- Add, remove, and rename elements.
- See which layers have features such as an animation, action, binding, or event.
To rename a layer, double-click on the layer and enter the new name. Name layers to give your element a specific name instead of the default. This can give you a better idea of what each layer contains.
A nested element is a child element inside of a parent container. An element with nested elements has an arrow next to it that shows all nested layers.
Animations, actions, and events
If an element has features such as an animation, action, binding, or event, it will feature an indicator icon, as in the following example:
Adding, deleting, and moving layers
You can select an block in the Insert tab, drag it to the Layers tab, and drop it wherever you like among the other layers.
To nest the block, hover the block where you'd like to place it. Blue lines appear to show you where you are placing the block and whether you're nesting it within another layer.
👉Tip: Because of the way browsers understand webpage code, when you move a layer, you are adjusting the structure of your page. If you have styles on a layer and you remove one of its child layers, those styles the child layer inherits from the parent no longer apply to the child.
If you accidentally move a layer, you can step backwards by undoing with Cmd+z on a Mac and Ctrl+z on a PC.