header-logo
Getting started with WixBuild your website and business with Wix. Try using our AI tools to create your website, customize templates, or hire professionals to build or enhance your online presence.
Creating a websiteRead how to use the Wix Editor and manage content on your site. Discover how to protect your visitors' privacy and make your site accessible.
Account & billingReview your account settings, manage your subscriptions and plans and understand your invoices.
Using the Wix mobile appsUse our mobile apps to run your business efficiently on the go and set up a dedicated app for your site members to stay in touch.
Connecting a domainFollow our step-by step guides to learn how to purchase, connect or transfer a domain for your site, and find out how to keep your site’s data secure.
Managing your businessGet tools to grow your business and web presence. Find the right tools for your specific needs, set up online payments and keep track of your site's analytics.
Promoting your siteLearn to make your site more visible promoting it on search engines, sending emails and running paid ads. Improve your online presence with practical tips.
Studio, Partners & EnterpriseGet the most out of your Studio or Enterprise account with advanced features that'll help you work more efficiently.
Need more help?Find solutions for site performance and technical issues, learn about issues we’re working to fix or contact us for help.
placeholder-preview-image
Wix LearnImprove your skills with our courses and tutorials.
Wix BlogGet tips for web design, marketing and more.
SEO Learning HubLearn to increase organic site traffic from search engines.
Website developmentBuild a custom site using our full-stack platform.
Hire a ProfessionalGet matched with a specialist to help you reach your goals.
placeholder-preview-image
In this article
  • Using the Layers panel
  • Working with elements in Dev mode
  • FAQs
  1. Home
  2. Creating a website
  3. Using the Wix Editor
  4. Using the Editor tools
  5. Wix Editor: Using the Layers Panel

Wix Editor: Using the Layers Panel

In this article
  • Using the Layers panel
  • Working with elements in Dev mode
  • FAQs
The Layers panel clearly lists all of the elements on your page. Depending on the page layout, the panel is divided into the header, main page, and footer, so you can view and select elements to adjust them as needed.

Using the Layers panel

Use the Layers panel to select and manage elements on your site. This is a great way to locate elements, as well as rearrange them to suit your site's structure and alignment.

To use the panel:

  1. Go to your editor.
  2. Click Layers  on the bottom left of the editor.
  3. Click either Header, Page, or Footer to view the elements in that area.
  4. Locate the relevant element from the list and click it.
  5. Choose what you want to do with the element:
    • Move the element forward / backward:
      • Forward: Select Ctrl +  ↑ on your keyboard to move the element forward. (Ctrl + Shift  + ↑  if you want to bring it to the front)
      • Backward: Select Ctrl +  ↓ on your keyboard to move the element backward, ( Ctrl + Shift  + ↓ if you want to send it to the back)
    • Recenter an element: If you've moved an element outside of the editor viewport, it is not visible on your live site and may cause scrolling issues. Bring the element to the center of your screen to move and manage it as needed.
      1. Select the relevant element in the panel.
      2. Hover over the Information icon.
      3. Click Recenter element.
    • Customize / adjust the element: Click the element in your editor, and use the available options to adjust the content, layout, and design.
    • Change the order of elements: Click and drag elements in the panel to change their order. This is a helpful way to ensure that the order in the panel matches the visual order on your site.
The Layers panel in the Editor. A strip has been selected in the panel and is highlighted on the page.

Working with elements in Dev mode

With the Layers panel in Dev mode, you have even more capabilities while editing your site, so you can focus on relevant elements. Temporarily hide an element from your editor, or focus on a single element by hiding the other content on your page.
Did you know?
The panel lists the elements on your page based on their ID that you assign in the Properties panel, and grouped elements are displayed under their group ID. 

To work with the panel in Dev mode:

  1. Go to your editor.
  2. Click Tools on the top bar.
  3. Select Layers.
  4. Click either Header, Page, or Footer to view the elements in that area.
  5. Locate the relevant element from the list and click it.
  6. Choose what you want to do with the element:
    • Temporarily hide an element: Hover over the element in the Layers panel, and click the Hide in Editor icon . You can click the icon again to show the element when needed.
    • Focus on an element: Click the Spotlight icon next to the element you want to focus on to hide all of the other elements on the page. You can turn off Spotlight by clicking the icon again.
The Layers panel in the Editor with Dev mode enabled. The Hide and Spotlight icons are highlighted next to an element.
What's next?
  • When you select an element in the Layers panel, it's also selected in the Properties panel. This lets you work with the properties of an element that's placed behind other elements, without needing to move things around. 
  • Visit the Velo by Wix Resource Center to onboard and continue learning.

FAQs

Click a question below to learn more about using the layers panel in your editor and with Dev mode.

Did this help?

|
Hire a ProfessionalGet matched with a Wix Partner who can help you reach your site goals.
Start Now

Helpmate

Hello

Need a bit more guidance?
Unlock personalized helpLog in to get the most out of Helpmate.