Help Center
    Help Center
  1. Creating your site
  2. Using Editor X
  3. Structuring a site in Editor X
    4. Editor X: Reorganizing Elements by DOM Order

Editor X: Reorganizing Elements by DOM Order

3 min read
Editor X is transitioning to Wix Studio, our new platform for agencies and freelancers.Learn more about Wix Studio
Editor X lets you arrange the DOM order of your elements in a single click. When using complex layout tools like stack, layouters or repeaters, this option ensures that visitors with disabilities can read your content in the same order it appears on screen. 
In this article, learn more about:

Understanding the importance of DOM order

DOM order is used by assistive technologies to help some visitors find the information they need. They could be using a screen reader tool or the Tab key on their keyboard to navigate your page. Either way, the order of your DOM controls the reading order. 
When featuring content with many different types of elements (e.g., text, media, buttons), it's important to verify the DOM order is correct. This way, visitors are able to follow a logical sequence and fully understand what your site is about. 

Automatically reorganizing the DOM order

You can automatically rearrange the DOM order of your elements in a layouter, repeater or stack. We'll optimize the DOM order to reflect the visual order, from left to right and top to bottom.

To reorganize the DOM order:

Before you begin:
Make sure you're on the largest breakpoint. This option is not available for smaller breakpoints. 
  1. Click Layers  at the top of Editor X.
  2. Select the relevant layouter, repeater or stack.
  3. Click the More Actions icon .
  4. Click Reorganize DOM Order.
Test it out:
Use a screen reader extension on your published site to verify the automatic DOM order.

Manually arranging the DOM order

Spotted any issues with your page's DOM order? You can use the Layers panel to manually arrange your sections and the elements within.
To make the DOM order match the visual order, your sections should be organized from top to bottom. The elements inside those sections should be arranged the other way around, from bottom to top.

To manually arrange the DOM order:

  1. Click Layers  at the top of Editor X.
  2. Choose what you want to organize:
    • Elements inside a section: Organize the elements from bottom to top using drag and drop.  
    • Sections:
      1. Hover over the top section and click the More Actions icon .
      2. Click Arrange.
      3. Click Bring to Front.
      4. Repeat steps a-c with all other sections, going from top to bottom in the panel.

Did this help?

|

In This Article

  • Understanding the importance of DOM order
  • Automatically reorganizing the DOM order
  • Manually arranging the DOM order

Related Content

Editor X: Adding and Customizing a Stack
Editor X: Using Repeaters
Editor X: Using Layouters

Hire a Professional

Get matched with a Wix Partner who can help you reach your site goals.
Get Matched