Layers Panel

Overview

The layers panel provides a compact, list-based view of every section on your page. It is an alternative to working directly on the canvas and is especially useful for pages with many sections where scrolling through the full canvas would be slow.

Opening the layers panel

Click the Layers icon in the sidebar to open the layers panel. The icon looks like stacked horizontal lines. When the layers panel is open, it replaces the current sidebar panel.

To close the layers panel, click the X button at the top of the panel or click the Layers icon again.

What the layers panel shows

Each section on your page is represented as a row in the layers panel. Each row displays:

• Order number - A numbered badge showing the section's position on the page (1, 2, 3, etc.)

• Section type - The name of the section (e.g., "Hero 01", "Benefits 03", "FAQ 02")

• Section category - A subtle label showing the category (e.g., "hero", "benefit", "faq")

• Drag handle - A grip icon on the left for reordering

• Action buttons - Duplicate and delete buttons that appear on hover

The currently selected section is highlighted with a purple accent border and background.

Selecting sections

Click on any layer item to:

1. Select the section - It becomes the active section in the builder

2. Scroll to the section - The canvas automatically scrolls (or pans, in free canvas mode) to bring the section into view

3. Open the config panel - If you switch to the config panel, it will show the selected section's properties

The layers panel is the fastest way to jump to a specific section. Instead of scrolling through a long page on the canvas, open layers and click directly on the section you want to edit.

Reordering sections

You can drag sections to new positions directly in the layers panel:

1. Grab the drag handle
   

   Hover over the layer item you want to move. A drag handle (grip icon) appears on the left side of the row. Click and hold it.

2. Drag to the new position
   

   Move the item up or down in the list. A visual indicator shows where the item will be placed.

3. Release to drop
   

   Let go to drop the section in its new position. The order numbers update automatically, and the canvas reflects the new arrangement.

Reordering from the layers panel is functionally identical to dragging sections on the canvas. Both methods update the same underlying section order and are recorded in the undo/redo history.

Duplicating sections

To duplicate a section from the layers panel:

1. Hover over the layer item

2. Click the copy icon that appears on the right side of the row

3. A duplicate of the section is inserted immediately after the original

4. A toast notification confirms the duplication

The duplicate inherits all the configuration of the original section, including text content, images, colors, and layout settings.

Deleting sections

To delete a section from the layers panel:

1. Hover over the layer item

2. Click the trash icon that appears on the right side of the row

3. The section is removed from the page immediately

4. A toast notification confirms the deletion

Deleting a section is immediate, but you can always undo it with Ctrl/Cmd + Z. The deletion is recorded in the undo/redo history.

Layers panel vs. canvas editing

For the most efficient workflow, keep the layers panel open while making structural changes (adding, removing, reordering sections), then switch to the sections or config panel when you need to edit content and styling.

• Drag and drop - More about the drag-and-drop system.

• Undo/Redo and history - How to undo changes and manage versions.