Layers

The Layers tab shows the real hierarchy of the current page. Use it when the canvas is not precise enough: hidden elements, covered images, nested rows and columns, empty containers, symbol instances, and small elements with no visible padding are all easier to target from Layers.

Use Layers when selection must be exact

The canvas is fastest for visible, easy-to-click content. The Layers panel is the sure way to select the exact hierarchy level before editing styles, creating a symbol, moving nested content, or changing visibility.

Layers exposes the real page hierarchy so you can select the exact nested element.

Select covered or hidden elements

Some elements are difficult or impossible to click directly on the canvas. For example, a header image can sit underneath an overlay, or a nested container can have no obvious padding around it.

1. Open the Layers tab in the left sidebar.
2. Expand the parent section using the caret.
3. Click the layer row for the exact element you want.
4. Use the right sidebar to edit its Design or Settings.

Expected result

The selected row is highlighted in Layers, and the matching element is selected on the canvas.

Verify the hierarchy level

Before changing layout styles or creating a symbol, confirm that the selected layer is the level you actually mean to edit:

• Container — usually controls section width and outer spacing.
• Row — usually controls horizontal grouping.
• Column — usually controls responsive span, order, and column-specific alignment.
• Content element — text, image, button, icon, card, or media inside the layout.

This matters because the same visual area can contain several nested elements. If you style a Column when you meant to style a Button, or create a symbol from a Row when you meant to reuse the whole section, the result will feel wrong even though the canvas selection looked close.

Move and nest with Layers

Drag a layer row to move it. Drop between rows to reorder siblings, or drop inside a row that can accept children, such as a Container, Row, Column, or Card.

Moving components with the Layers panel

Use Layers for moves where canvas drag is hard to aim, especially inside dense layouts.

Hide, show, and lock layers

Hover a layer row to reveal row actions:

• Eye — hide or show the layer while you work.
• Lock — prevent accidental editing or movement.

Hidden layers remain in the page structure. They are useful while editing overlapping content, but they are not deleted.

Toggling visibility from the Layers panel

Rename layers

Double-click a layer name to rename it. Good names make complex pages much easier to manage, especially when you have repeated Containers, Rows, Columns, and symbol instances.

Use names like:

• Hero image
• Header overlay
• Primary CTA row
• Pricing card group
• Footer links column

Layers and Symbols

Layers is the safest place to confirm what you are turning into a Symbol. Select the exact parent layer first, then create the symbol from the Symbols tab.

For example:

• Select a full footer Container to create a reusable site footer.
• Select a single Button to create a reusable CTA button.
• Select a Card Group if the full repeated group should stay synced.
• Select one Card if each card instance should be reused separately.

Symbol instances show a badge in the Layers panel so you can spot reusable content while inspecting the page hierarchy.

Common issues

I clicked the canvas but selected the wrong element — open Layers and select the exact row. This is common with overlays, nested grids, and elements with no visible spacing.

I styled the wrong level — check whether the selected row is a Container, Row, Column, or content element before changing Design controls.

A layer will not drop inside another layer — not every component accepts children. Drop inside layout/content containers such as Container, Row, Column, or Card, or drop between siblings instead.

I cannot see the row actions — hover the layer row. The lock and visibility buttons appear on the right side of the row.