The layers panel is found in the left sidebar and is your default view when entering a project. It allows you to navigate through your pages, manage the layers, and edit various settings. This article provides an overview of the layers panel and its different features.
Project name and location
At the top of the layers panel, you'll find the project name. Simply click on the project name to reveal options for editing. Here, you can edit your project's name or move the project to a different workspace.
Managing pages
Directly below the project name is the pages section. This area provides an overview of all the pages within your project. Here, you can add, organize, and navigate between pages in your project.
Search for a page
If you're looking for a specific page within your project, simply click the search button and enter the page name to search for it.
Add a page
You can easily add a page to your project by following these steps:
Click the 'plus' button next to the search button.
In the modal, provide a name and page path for your new page.
Hit 'Create' to add the page to your project.
Page actions and settings
Hovering over a page in the pages section reveals an overflow menu represented by three dots. Clicking on this menu opens a range of options to manage your pages effectively. These include:
Opening page settings
Renaming pages (also double-clicking the page name lets you rename your page)
Duplicating pages
Deleting page
Creating a template from the page
Changing page status
Page status
Use the page status to communicate the state of each page effectively. Page status is by default set to 'ready'. To change the status you click the green dot on the left of the page name, or you can change it from the menu which we covered in the section above. Choose from four different statuses:
Ready
In progress
On hold
Needs review
Managing layers
Now, let's explore the layers. Layers are all the content of your currently selected page. Any content, such as sections and other components you add to the page will be shown here.
Sections are usually the parent layer in which you nest other components. To see nested components, you can easily expand or collapse by clicking the arrow on the left.
Organizing your layers is important to easily navigate your page content but also to order them visually. Drag a layer upwards in the list to order them in front, or down to position them behind. To nest a layer, drag and hold it on top of another section or a frame. If you need to rename your layer, simply double-click the layer name and enter the new name.
Layer categories
Within the layers section, you'll encounter different types of layer categories serving distinct purposes on your page. You can seamlessly organize your layers between these categories in the same way as you would normally do within one category. The differences between these categories are:
Pinned layers: The layer on the canvas remains in the same spot relative to the y-axis of the viewport while scrolling the page. Note: Sections can not be pinned layers. ➡️ Learn more about pinned layers.
Main layers: Layers in this category are the default behavior and will remain in a static position on the canvas and scroll along the page.
Header and Footer layers: If layers are positioned in the Header category, the layer will be ordered at the top of the page before the Main layers. If in the Footer category, it will be ordered at the bottom of the page after the Main layers. ➡️ Learn more about Header and Footer layers.
Show or hide layers
Customize your design for various breakpoints by showing or hiding layers as needed. Simply click the 'eye' icon on the right end of the layer to toggle its visibility. A slashed eye icon indicates that the layer is hidden.
Lock layers
Prevent accidental edits by locking your layers. Click the 'lock' icon to restrict editing access. Unlock the layer by simply clicking the same lock button once again.
Addons and Interactions
Effortlessly access addons or interactions settings for a layer with the shortcut button provided in the layers panel. Clicking this button allows you to edit your addons or interactions directly from the left panel.