> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ecomwize.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Layers Panel

> Use the layers panel to visualize your page structure, reorder sections, and quickly navigate to any part of your page.

## 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

<Frame caption="The layers panel showing all sections on the page with their order numbers.">
  <img src="https://mintcdn.com/ecomwize/lzHHkkDEjyGaRyRC/images/layers-panel.png?fit=max&auto=format&n=lzHHkkDEjyGaRyRC&q=85&s=cd1e8be6a74f472b5c506fbc1b3e324b" width="1444" height="1918" data-path="images/layers-panel.png" />
</Frame>

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

<Tip>
  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.
</Tip>

## Reordering sections

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

<Steps>
  <Step title="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.
  </Step>

  <Step title="Drag to the new position">
    Move the item up or down in the list. A visual indicator shows where the item will be placed.
  </Step>

  <Step title="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.
  </Step>
</Steps>

<Note>
  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.
</Note>

## 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

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

## Layers panel vs. canvas editing

| Feature                  | Layers panel                                   | Canvas                              |
| ------------------------ | ---------------------------------------------- | ----------------------------------- |
| View full page structure | Compact list, all sections visible at once     | Must scroll through the full page   |
| Reorder sections         | Drag compact list items                        | Drag full section previews          |
| Select sections          | Click layer item                               | Click section on canvas             |
| Edit content             | Not available (use config panel)               | Inline text editing available       |
| Visual preview           | Names and numbers only                         | Full visual preview                 |
| Best for                 | Navigation, reordering, managing many sections | Editing content, visual design work |

<Tip>
  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.
</Tip>

<CardGroup cols={2}>
  <Card title="Drag and drop" icon="arrows-up-down" href="/page-builder/drag-and-drop">
    More about the drag-and-drop system.
  </Card>

  <Card title="Undo/Redo and history" icon="clock-rotate-left" href="/page-builder/undo-redo">
    How to undo changes and manage versions.
  </Card>
</CardGroup>