Wix Harmony Editor: Working with the Layers Panel

The Layers panel lets you see every section and element on your page in one place. Easily select, reorder, or adjust layers for full control over your layout and structure — so you can build each page exactly how you want.

Reordering sections and elements

Change the order of content on your page anytime. Using drag and drop, you can easily reorder your sections and elements.

To reorder layers:

1. Go to your editor.

2. Click Layers

   

   at the bottom left of the editor.

3. (In the Layers panel) Find the section or element you want to move.

4. Drag the layer up or down to change its position on the page.

   Note: You can move elements within their current section. To move an element between sections, drag it on the page or cut and paste it elsewhere.

Renaming a layer

Give your layers clear, custom names so you never lose track – even on sites with dozens of sections. These names are only visible within the editor, not to site visitors.

To rename a layer:

1. Go to your editor.

2. Click Layers

   

   at the bottom left of the editor.

3. (In the Layers panel) Double-click the relevant element or section.

4. Enter a new name and press Enter.

Working with layers

In the Layers panel, you can quickly manage the elements and sections on your page. Cut, copy, paste, duplicate, or delete layers to work faster, pin key elements so they stay visible as visitors scroll, and arrange overlapping items. This keeps your design organized and make precise edits easier.

To select and work with a specific layer:

1. Go to your editor.

2. Click Layers

   

   at the bottom left of the editor.

3. (In the Layers panel) Click the More Actions icon

   

   next to an element or section.

4. Choose what to do next:

   • Cut: Remove the layer while copying it to your computer's clipboard, so you can paste it elsewhere on your site.

   • Copy: Copy the layer to your computer's clipboard, so you can paste it elsewhere on your site.

   • Paste: Paste a layer copied from another part of your site. If it's an element, it's added to the section you're currently working with. If it's a section, it's pasted at the bottom of the page.

   • Duplicate: Create an exact copy of the layer for quick editing.

   • Delete: Remove the layer completely from your site.

   • Pin to screen: Pin an element to keep it visible as visitors scroll, great for social icons, menus or ways to contact you.

     Tip: This action is only available for elements, not sections.

   • Arrange: When dealing with overlapping elements, change the placement of your chosen element:

     • Bring forward: Move the element 1 layer above the one in front of it.

     • Move backward: Move the element 1 layer below the one behind it.

     • Bring to front: Bring the element to the very top layer above all others.

     • Send to back: Send the element to the very bottom layer behind all others.

Hiding the header or footer

Want the page's content to take the spotlight? Instantly hide the header or footer for a bold, focused page. This setting applies to the specific page you're working on, and you can flip it on or off at any time.

To hide the header or footer:

1. Go to your editor.

2. Click Layers

   

   at the bottom left of the editor.

3. (In the Layers panel) Click the More Actions icon

   

   next to Header / Footer.

4. Select Hide header / Hide footer.

Tip:

To show the header or footer again, repeat these steps and select Show.

Hiding elements on mobile

Design a mobile experience that’s just right for your visitors. With the Layers panel, you can control exactly what’s displayed on smaller screens, making it simple to keep things focused, organized, and on-brand. You can bring hidden elements back to mobile at any point.

To manage layers on mobile:

1. Go to your editor.

2. Click the Mobile icon

   

   at the top right of the page.

3. Click Layers

   

   at the bottom left of the editor.

4. (In the Layers panel) Click the More Actions icon

   

   next to the element or section.

5. Select Hide.

   Tip: The element disappears from your mobile site but stays visible on desktop.

Tip:

Want to show an element previously hidden on mobile? Switch to mobile view and click the Hidden from mobile tab at the top of the Layers panel. Then, click the Show on mobile icon

.

FAQs

Click a question below to learn more.

How do I control the DOM order of my sections to help with accessibility?

The DOM order of your sections is automatically optimized for accessibility — so there’s nothing you need to do. The ‘optimize DOM order’ setting in the Layers panel is enabled by default, so your sections' element order matches their visual placement on the page.

This helps assistive technologies, like screen readers, navigate your content in a natural, logica l way.

If you prefer to set a custom order, you can turn this option off for any section and arrange the elements manually. Click the More Actions icon

next to a section and select Optimize DOM order to turn it off.