Skip to main contentUsing the Layers Panel
The Layers panel shows your page’s element hierarchy, making it easy to select and organize content.
Opening Layers Panel
Click the Layers button in the right panel area.
Panel Features
Element Tree
- Hierarchical view of all elements
- Expandable/collapsible sections
- Visual nesting indicators
Selection
- Click element name to select
- Selection syncs with preview
- Multi-level navigation
Reordering
- Drag elements to reorder
- Move between containers
- Visual drop indicators
Visibility
- Toggle element visibility
- Hide without deleting
- Preview without element
Locking
- Lock elements from editing
- Prevent accidental changes
- Unlock when needed
Element Types
The tree shows different element types:
- Sections - Major page blocks
- Containers - Grouping elements
- Text - Headings, paragraphs
- Images - Photos, graphics
- Buttons - Interactive elements
- Forms - Input elements
Common Actions
Select Nested Element
- Expand parent in tree
- Find child element
- Click to select
Reorder Sections
- Find section in tree
- Drag to new position
- Drop where indicated
Hide Element
- Find element in tree
- Click visibility icon
- Element hides in preview
Lock Element
- Select element
- Click lock icon
- Element can’t be edited
Tips
- Use for complex layouts
- Combine with Select mode
- Name sections for clarity
- Collapse unused branches
Keyboard Navigation
| Key | Action |
|---|
| ↑/↓ | Navigate tree |
| →/← | Expand/collapse |
| Enter | Select element |
| Delete | Remove element |
Next Steps
