Use the Layers tab in the Visual Editor to manage the structure of a layout. The Layers tab lists all blocks in the layout and displays how blocks nest within each other.
- Identify how blocks are organized and nested, and drag and drop to rearrange or change the layout.
- Rename layers, use indicators to manage complex layouts, and recognize data bindings or actions.
- Search by name or element type and expand nested layers to navigate large or intricate designs.
To access the Layers tab, you must have the Editor role or higher in your Space. To learn more, see Roles & Permissions.
To display layers in the Visual Editor:
- Go to the Insert tab and drag a block onto the work area.
- Click the Layers tab to display the block’s position in the layout hierarchy.
By default, the layer name corresponds to the first few words of the block's content.
The video below demonstrates dragging and dropping a Text block onto the work area and showing the block in the Layers tab:
The Layers tab represents the content structure of the layout.
On the Layers tab, select a block in the work area to highlight the matching layer, similar to how selecting in the Layers tab highlights the work area. This two-way highlighting helps navigate complex layouts.
Use the Layers tab to add, rename, move, group, ungroup, lock, unlock, and delete layers to keep the layout organized.
A layer reflects the block’s position on the page. Go to the Insert tab, drag a block onto the work area to display the added block as a layer.
The video below demonstrates dragging and dropping a Text block onto the work area and displaying the block as a layer:
Select layers to modify, move, group, or delete the corresponding blocks:
- Click the layer to select.
- Hold
Cmd/Ctrlwhile clicking to select multiple layers. - To select a continuous range, click the first layer, hold
Shift, and click the last layer.
The following video demonstrates how to select single, multiple, and continuous Text layers using the Layers tab:
Reorder layers or nest within a container:
- Drag a layer to a new position. A blue highlight represents the position of the layer.
- Drag a layer into a container as a child. Nested layers collapse within the parent in the list.
Moving a layer impacts the layout structure. If the layer is moved outside the parent, the layer doesn't inherit the parent’s styles.
The video below demonstrates selecting and moving a Text layer:
Use clear and descriptive names to identify the purpose of each layer. Meaningful names can improve clarity, support navigation, and help locate layers using the search field on complex pages.
Rename a layer in two ways:
- Double-click the layer to change the name.
- Right-click the layer and choose Rename.
The video below demonstrates selecting and renaming a Text layer:
Lock layers to prevent accidental edits or movement while working in the Visual Editor.
- To lock a single layer, right-click the layer and select Lock layer. To unlock, click the lock icon next to the layer name.
- To lock a group, right-click the group and select Lock group. To unlock, right-click and select Unlock group.
- Alternatively, press
Cmd + Opt + g/Ctrl + Alt + gto toggle lock status for groups.
You can edit and move layers within a group, but you can't delete the group.
The video below demonstrates how to lock and unlock layers and groups using the Layers tab and context menu:
Group related layers to organize complex layouts:
- Select multiple layers.
- Press
Cmd/Ctrl + gto group layers inside a Box block or right-click and select Group selection.
Ungroup layers to edit or move individual blocks:
- Select the grouped layers.
- Press
Cmd/Ctrl + Shift + gto ungroup or right-click and select Ungroup.
The video below demonstrates how to group and ungroup Text layers using the Layers tab and context menu:
Delete layers using two ways:
- Select a layer and press Delete.
- Right-click on the layer and choose Delete.
The video below demonstrates selecting and removing a layer:
For more information on using shortcuts, see Keyboard shortcuts in the Visual Editor.
Layers that include events or data bindings display icons next to the layer name for identification. These indicators help identify layers with interactive features or dynamic content.
The video below demonstrates how action and binding icons appear next to a layer name:
- To learn more about adding blocks using the Visual Editor, see Insert tab.
- For details on the Block types, see Block types.