Studio Editor: Working With Layers

6 min read

Manage the layers of a page as you're working on it in the Studio Editor. This is where you see all of the sections and elements, to better understand their hierarchy. The Layers panel is also helpful when you need to select an element that is difficult to find on the canvas.

A screenshot of the Layers panel showing a specific element selected on a page

In this article, learn more about:

The structure of the Layers panel

The Layers panel displays all of the sections in the current page, in a hierarchy from top to bottom. If the page has a header at the top, for instance, it appears at the top of the list.

When nesting elements within other elements, it creates a parent/child relationship between them. For example, text elements within a container are its child elements. In turn, that container is the child of the section that displays it.

The Layers panel is organized according to this parenting logic, so you can click a parent element to see its child elements. If your page has any global sections, they are highlighted green.

Use the search bar to quickly find the layer you need. You can type the element name or ID.

A screenshot of the search bar in the Layers panel in the Studio Editor

Selecting and managing layers

The Layers panel is a useful and quick way to navigate to a certain element on the page. It's also a great way to find an element, for example, if you have overlapping elements and you can't locate or select the one you need.

When you hover over a layer, it is highlighted on the page. If you click the layer, the Editor scrolls directly to that element. Even if you close the panel at this point, your selection is still saved.

A GIF showing how the page scrolls to the login bar element when selected in the Layers panel

Tip:

Select multiple elements by holding the Shift key as you click on them.

Managing a layer

Found the layer you need? From this panel, you can perform actions like copying the layer, moving it up or down, choosing which pages to show it on and much more.

Manage a layer by doing one of the following:

Right-click on the layer's name.
Hover over the layer's name and click the More Actions icon .

A screenshot of the menu of actions that is available for each layer you select in the panel

Setting a layer selection preference

The Studio Editor lets you choose a default pathway for grabbing layers on your canvas. Decide which element gets "selected" when you click a parent container that has child elements.

Parent Container First: The parent container (e.g., container box, stack, etc.) is selected when you click it. Then, you can click again on any element inside to edit it.
Child Element First: The specific child element you click on is selected, not its parent container.

To set a layer selection preference:

Click the Wix Studio icon at the top left.
Hover over View.
Hover over Layer Selection.
Select the relevant option: Parent Container First or Child Element First.

Setting a layer selection preference in the Studio Editor

Renaming layers

When adding many sections, containers and elements to a page, it might become difficult to tell them apart in the Layers panel. Rename layers to make sure they're easy to recognize - double-click the relevant layer to give it a new name.

A GIF showing how to rename a layer by double clicking it in the panel

Using Dev Mode?

Display element IDs in the Layers panel to easily identify elements in your code. Enable the Display IDs toggle to see the IDs as defined in the Properties panel.

Reordering layers

Using drag and drop, you can easily reorder elements and sections on the current page. As the Layers panel is organized from top to bottom, moving elements around also affects their location on the page.

When working with overlapping elements, reordering them also affects the Z order. For example, if you want text to appear on top of a shape, the text must be above the shape in the Layers panel.

A GIF showing the drag and drop functionality in the Layers panel

Hiding and unhiding elements

You can quickly hide an element from the current breakpoint, directly on the canvas, by selecting Don't Display.

A screenshot of the option to not display an element, as it appears on the canvas

However, if you ever need to unhide the element, you must do it from the Layers panel. A hidden element appears with a Hidden icon

so you can easily locate it on the list.

Tip:

When adding an element to a smaller breakpoint (e.g. mobile), it's always hidden on larger breakpoints (e.g. desktop). Following these steps, you can make the element appear on the larger breakpoints.