The Layers panel is the default view when you enter a project and is located in the left sidebar. It provides a comprehensive overview of your project's structure, allowing you to navigate between pages, manage layers, and adjust various settings.
Project and Page Management
The top of the Layers panel is dedicated to managing your overall project and its individual pages.
Project Name and Location: At the very top, you'll find the project name. You can click on the name to access a menu where you can rename the project or move it to a different workspace.
Managing Pages: Below the project name, the Pages section gives you an overview of all pages in your project. This is where you can add, organize, and switch between your pages.
Page Search: To find a specific page quickly, click the search button and type the page's name.
Add a page
You can easily add new pages and manage existing ones from the Layers panel.
Adding a Page:
Click the plus button (+) next to the search button.
In the pop-up window, provide a name and page path for your new page.
Click Create to add the page to your project.
Page actions and settings
Page Actions and Settings: When you hover over a page, an overflow menu (three dots) will appear. Clicking it gives you a range of management options:
Open Page Settings
Rename the page (you can also double-click the page name to rename it)
Duplicate the page
Delete the page
Create a template from the page
Change the page status
Page status
Understanding Page Status
Page statuses are useful for communicating the state of each page to your team. The default status is 'Ready'. You can change a page's status by clicking the colored dot to the left of its name or by using the overflow menu.
The four available statuses are:
Ready: The page is complete and ready for publishing or review.
In Progress: The page is currently being worked on.
On Hold: Work on the page has been paused.
Needs Review: The page is complete and awaiting feedback.
Managing Layers
Layers are the individual components and content on your currently selected page. The Layers section shows all the content you've added, such as sections and other components.
Parent and Nested Layers: Sections are typically the parent layers that contain other, nested components. You can expand or collapse a section by clicking the arrow to its left to show or hide the nested components.
Organizing and Renaming Layers:
To reorder layers: Drag a layer up or down in the list to change its visual stacking order on the canvas (upward moves it to the front, downward to the back).
To nest a layer: Drag and drop a layer directly on top of another section or a frame.
To rename a layer: Double-click the layer's name and type the new name.
Layer categories
Within the Layers panel, you'll find different categories that serve specific purposes:
Pinned Layers: These layers remain in a fixed position on the canvas relative to the user's viewport, even when they scroll. Sections cannot be pinned. ➡️ Learn more about pinned layers.
Main Layers: This is the default category. Layers within it will scroll along with the page.
Header and Footer Layers:
Header layers are always ordered at the top of the page, appearing before all Main layers.
Footer layers are always ordered at the bottom, appearing after all Main layers. ➡️ Learn more about Header and Footer layers.
Layer Visibility and Locking
Show or Hide Layers: You can customize your design for different breakpoints (e.g., desktop, tablet, mobile) by showing or hiding layers. Click the eye icon on the right side of a layer to toggle its visibility. A slashed eye icon indicates that the layer is currently hidden. ➡️ Learn more about how breakpoints work.
Lock layers
Lock Layers: To prevent a layer from being accidentally edited, click the lock icon. To unlock it, simply click the icon again.
Addons and Interactions
The Layers panel also provides a shortcut to a layer's Addons and Interactions settings. Click the shortcut button to directly edit the layer's interactions or addons without having to find the specific panel. ➡️ Read more about Interactions.
