The Layers panel in Instant displays the complete structure of your layout, showing all elements in a hierarchical view. This guide covers navigating the panel, understanding layer hierarchy, and managing your layout structure.
Accessing the Layers Panel
Open the Instant Builder
In the left sidebar, locate the tab items
Click on the Layers panel icon (below the Insert panel)
Panel Overview
The Layers panel displays all elements that exist on your currently selected layout. This provides a structural view of your entire page.
Understanding Layer Hierarchy
Layers are organized in a top-to-bottom hierarchy that mirrors your canvas.
Visual Order
The layer order directly corresponds to the visual order on your page:
Top layer in the panel = Top of the page on canvas
Bottom layer in the panel = Bottom of the page on canvas
Example: If your hero section appears at the top of your page, it will also be listed at the top of the Layers panel.
Parent and Child Layers
Layers can contain other layers, creating a nested hierarchy:
Parent layers — Containers that hold other elements
Child layers — Elements nested inside a parent
Sibling layers — Elements at the same level within a parent
Expanding Layers
Click on any layer that contains child layers to expand it. Continue expanding to navigate deeper into the hierarchy and view all nested elements.
Managing Layers
Reordering Layers
Drag and drop layers to change their order:
Reorder layers within the same level
Move layers between different layer groups
Nest layers inside other containers
Layer Selection
When you select a layer on the canvas, that layer is automatically highlighted in the Layers panel. This synchronization helps you understand where elements exist in your structure.
Locating Layers on Canvas
To quickly find a layer on your canvas:
Locate the layer in the Layers panel
Double-click on the layer's icon
The canvas automatically scrolls to that element
This is especially useful for finding specific elements in complex layouts.
Quick Reference
Task | Action |
Open Layers panel | Left sidebar → Layers icon |
Expand layer group | Click on parent layer |
Reorder layers | Drag and drop layers |
Move between groups | Drag layer to new parent |
Find layer on canvas | Double-click layer icon |
See selected element | Select on canvas → View highlight in panel |
Hierarchy Principles
Principle | Description |
Top-to-bottom | Panel order matches visual order on canvas |
Nesting | Child layers live inside parent containers |
Synchronization | Canvas selection highlights in panel |