Layer Manager

In short. The Layer Manager is a tree-view of your whole page — every section, row, column, and block, shown nested exactly the way they sit on the page. It's the dependable way to select something the canvas makes awkward to click: an element buried deep inside other blocks, or one sitting behind another. Selection works both ways — click a block in the tree and it lights up on the canvas; click it on the canvas and the tree jumps to it. And because the tree is the structure itself, it's where you reorder sections, move a block from one column to another, and delete cleanly.

On this page: What it is · Where to find it · Reading the tree · Selecting through the tree · Reordering, moving, and deleting · Worked examples · Troubleshooting · Vocabulary

What it is

The Layer Manager is one of the tabs in the SG-Builder side panel. It shows your page as a collapsible tree: every block is a node, and the way nodes nest under one another mirrors the way blocks nest on the page. If you've used the layers panel in a design tool or the outline of a document, it's the same idea — a structural map you navigate instead of a visual surface you click.

Its real value shows up the moment the canvas gets fiddly. When a block is deep inside other blocks, overlaps a neighbour, or sits behind something, clicking it directly is hit-or-miss — you keep grabbing the parent instead. The tree sidesteps all of that: every block has exactly one node, so you can always reach the one you want. Think of the canvas as the what it looks like view and the Layer Manager as the how it's built view; you'll move between them constantly.

Where to find it

In the builder workspace, open the side panel and choose the Layer Manager tab (it sits alongside the block settings and the Style Manager). It always reflects the page you currently have open in the builder, and it updates live as you add, move, or remove blocks.

Reading the tree

Each block on the page appears as a node, and blocks that contain other blocks — sections, rows, columns — appear as collapsible parents you can expand or fold. The indentation is the page's nesting made visible:

Reading the tree top to bottom tells you the page's section order at a glance, and expanding a section confirms that its blocks are nested the way they should be — a quick way to catch, say, a heading that landed outside its column. One thing to expect: the tree labels each node by the type of block it is ("Heading", "Column", "Cards"), not by the words it contains. You tell two "Section" nodes apart by expanding them and reading their contents, or by their position on the page — not by a custom label. That keeps the structure readable and predictable.

Selecting through the tree

Selection is two-way and continuous:

Because they stay in sync, you can pick whichever surface is easier for the job. A big, obvious hero is fastest to click on the canvas; a single card buried in a grid inside a section is far easier to grab from the tree.

Reordering, moving, and deleting

The tree isn't only for selecting — it's where you restructure the page:

• Reorder. Drag a node up or down to change the order of blocks. Move a whole section above another and the canvas reflows to match immediately.
• Move into a different parent. Drag a node into a different column or section to re-nest it — handy for pulling a block out of one column and dropping it into another without rebuilding it.
• Delete. Remove the selected block from the tree and the canvas updates to match.

Because you're acting on the structure directly, these moves are precise in a way that dragging on a busy canvas often isn't — especially for reordering sections on a long page.

Worked examples

Reach a card buried in a grid

You want to edit one card inside a three-column row inside a section, but clicking on the canvas keeps selecting the whole row. Open the Layer Manager, expand the section down to the card, and click it — the card highlights on the canvas and its settings open.

Reorder a long page

You decide the testimonials should come before the pricing. Open the Layer Manager and drag the testimonials section above the pricing section. The page reflows to the new order.

Move a block to another column

A button is in the left column but belongs on the right. Drag its node from the left column into the right column in the tree, and it moves on the canvas to match.

Delete a section you no longer need

Select the section in the tree and delete it. The canvas updates, and the change is ready to publish.

Troubleshooting

• I can't click the element I want on the canvas. It's likely nested or behind another block. Open the Layer Manager and select it from the tree instead.
• I selected a block but the settings show the wrong one. You probably grabbed its parent on the canvas. Use the tree to select the exact node — its settings open when you click it.
• My two sections look identical in the tree. Labels name the block type, not its content. Expand each one to see what's inside, or go by its position on the page.
• A drag in the tree didn't move what I expected. Make sure you dropped the node into the parent you intended (a column, a row, a section). Check the new nesting in the tree, and remember to Publish when the structure is right.

Vocabulary

• Layer Manager — the side-panel tab that shows your page as a nested tree.
• Node — one block as it appears in the tree.
• Selection sync — the two-way highlight that keeps the tree and the canvas pointing at the same block.
• Re-nest — moving a block under a different parent (a different column or section) by dragging its node.

Related reading

• SG-Builder Overview — the parent surface.
• Builder Workspace — the editor that hosts the Layer Manager.
• Components — the blocks the tree is made of.
• Editor Actions — the actions you can drive from the workspace.