Layers represent the individual elements that make up a web page, stacked on top of one another. This allows you to easily access and manage all the elements used to create the page. 

By utilizing layers, you can customize every aspect of your page at any time, providing a streamlined and efficient way to work within the editor.

Use Layers

1. From the Pages panel on the Left Sidebar, scroll down to Layers.

2. Click a layer to select it on the canvas – helpful when elements overlap and are hard to select directly.

3. Drag and drop layers to reorder the (static) structure and nest them within structural elements.

4. Double-click a layer to rename it, or click the ellipsis (…) icon beside it for more options.

5. Right-click any layer to access the same context menu you’d get by right-clicking an element on the canvas.

Expand / Collapse All Layers

Click the Expand / Collapse icon at the top right corner of the Layers section to expand or collapse all nested layers on your page at once.

Manage Elements From Layers

Show or Hide an Element

Click the eye icon beside a layer to toggle its visibility on the page.

Rename an Element

Double-click a layer or click the ellipsis (…) icon next to it and select Rename to give it a different name.

Expand an Element

Click the ellipsis (…) icon next to a layer and select Expand All to open every nested layer inside it at once.

Delete an Element

Click the ellipsis (…) icon next to a layer and select Delete to remove it from the page.

Quick Actions For Elements

Right-click on an element from the Layers section or on the canvas to access these quick actions.

Copy an Element

Select Copy to copy it to your clipboard.

Paste an Element

Select Paste to paste a copied element.

Paste to Replace an Element

Select Paste to Replace to replace it with the one on your clipboard.

Copy an Element’s Style

Select Copy Element Style to copy only its styling, without copying the element itself.

Paste an Element’s Style

Select Paste Element Style to apply a copied style to it.

Duplicate an Element

Select Duplicate to create a copy directly next to the original.

Cut an Element

Select Cut to remove it and copy it to your clipboard.

Move an Element Forward or Backward

Select Move Forward or Move Backward to shift its position within its parent.

Increase or Decrease Z-Index

Select Increase Z-Index or Decrease Z-Index to move it in front of or behind overlapping elements.

Learn more about Z-Index.

Wrap an Element into a Frame

Select Wrap into Frame to nest it inside a new frame.

Unwrap Elements

Select Unwrap Elements to remove the frame while keeping its contents on the page.

Add a Link

Select Add Link to turn it into a clickable link.

Create a Component

Select Create Component to convert it into a reusable component.

Access Interaction Settings

Hover over Interaction to open a submenu with additional interaction options:

Add an Interaction

Hover over Add, then choose from the available triggers:

• Click
• Hover
• Mouse Move Over Element
• While Element is Scrolling
• Scroll into View

Copy an Interaction

Select Copy to copy its interaction settings.

Paste an Interaction

Select Paste to apply a copied interaction to it.