Studio Editor: Working with DOM Order

Document Object Model (DOM) refers to how site pages are structured, and determines the tabbing and loading order of elements. Organizing the DOM order of a site can improve its accessibility and performance, and provide a better experience for visitors.

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

DOM order determines the loading, reading, and tabbing order of elements on a page. This means it can impact a site's:

• Accessibility: Some site visitors may use assistive technologies to navigate sites, such as screen readers and / or the Tab key. A site's DOM determines the order in which it's read by screen readers, as well as the tabbing order. Learn more about DOM and accessibility.

• Performance: The DOM determines the sequence in which elements load on a site. Matching the DOM order to the visual order of elements therefore creates a logical loading experience. Learn more about DOM and performance.

• SEO rankings: As an aligned, logical structure can improve accessibility and site loading, it may also increase the site's SEO rankings.

A logical DOM order is therefore important, as it ensure the best experience for site visitors. 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.

Auto DOM order

Automatic (auto) DOM is based on the visual order of elements on a page - from left to right, and top to bottom. The DOM order automatically rearranges as you add, align, and resize elements, so it should stay optimized as you go.

Disabling auto DOM

If you notice an issue with the DOM order of a site you're working on, you can disable it across the site. If there's an issue with specific elements, you can disable it on individual sections and containers, as well as grid cells within a section.

Select an option to learn how to disable auto DOM:

The entire site

1. Click the Wix Studio icon

   

   at the top left of the editor.

2. Click Tools.

3. Click Auto DOM Order to deselect it.

4. Click Turn Off to confirm.

Sections and containers

1. Right-click the relevant section / container.

2. Click Auto DOM Order in the right-click menu to deselect it.

Grid cells in a section

1. Right-click the grid cell.

2. Click Auto DOM Order in the right-click menu to deselect it.

Working with sticky elements and sections?

You can keep sticky sections / elements at the front without affecting the DOM order. .

Manually changing the DOM order of elements

After turning auto DOM order off, you can manually change it to match the visual order of elements (left to right, 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.

Reorganizing the DOM order

You can rearrange the DOM order of elements in a section, flexbox, or stack, or on an entire page with a single click. The order is optimized to match the visual order of the elements (left to right and top to bottom).

To reorganize the page's DOM order:

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.

To reorganize the elements' DOM order:

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.

FAQs

Select a question to learn more about DOM order on a site.