Help Center
    Help Center
  1. Studio, Partners & Enterprise
  2. Wix Studio
  3. Using the Wix Studio Editor
  4. Structuring a site in the Studio Editor
    5. Studio Editor: Reorganizing Elements by DOM Order

Studio Editor: Reorganizing Elements by DOM Order

4 min read
You can rearrange and reorganize elements in a Studio Editor site by its DOM order. This may improve the site's accessibility, as it ensures that visitors using assistive technologies (such as screen readers etc.) can navigate the site content in its display order.
In this article, learn more about:
Good to know:
Organizing elements by DOM order is especially important when using more complex layout tools on a site, such as stacks and flexboxes.

The importance of DOM order

Some site visitors may use assistive technologies to navigate sites, such as screen readers and / or the Tab key. The site's DOM order determines the "reading" order for these technologies.
A logical DOM order is therefore important, as it ensure that all visitors can navigate the site content. For example, the site menu should come first, followed by the rest of the elements in the header, then the page title, then the page contents, etc.
Want to check a site's DOM order?
You can test out the automatic DOM order of a site by using your keyboard's Tab key, or a screen reader on the live version of the site.

Automatically reorganizing the DOM order

You can automatically rearrange the DOM order of elements in a section, flexbox, or stack, or on an entire page. The order is optimized to match the visual order of the elements (left to right and top to bottom). 
Tip:
Reorganizing a page's DOM order ensures it's optimized, and can improve layout issues.

Of a page:

  1. Click Pages  on the left side of the editor.
  2. Select the relevant page.
  3. Click the More Actions icon .
  4. Click Reorganize DOM Order.
A site's Pages panel. The cursor is clicking the option to reorganize the DOM order of a page.

Of elements:

  1. Click Layers  on the left side of the editor.
  2. Select the relevant section, flexbox, or stack.
  3. Click the More Actions icon .
  4. Click Reorganize DOM Order.
A site's Layers panel. The cursor is clicking the option to reorganize the DOM order of a section.

Manually changing the DOM order

The DOM order of the site should be optimized. However, if you've noticed an issue with the DOM order of a site you're working on, you can manually change it to match the visual order of elements (left to right and top to bottom).

To change the DOM order manually:

  1. Click Layers  on the left side of the editor.
  2. Choose what you want to organize:
    • Elements inside a section: 
      1. Select a section to open it.
      2. Drag and drop the elements into the correct position.
    • Sections: 
      1. Hover over the top section and click the More Actions icon .
      2. Click Arrange.
      3. Click Bring to Front.
      4. Repeat steps i-iii with all other sections, going from top to bottom in the panel.
A site's Layers panel. The cursor is clicking the option to bring the top section to the front.

Did this help?

|

In This Article

  • The importance of DOM order
  • Automatically reorganizing the DOM order
  • Of a page:
  • Of elements:
  • Manually changing the DOM order

Hire a Professional

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