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.In this article, learn more about:
The importance of DOM order Enabling and disabling auto DOM order Manually changing the order of elements Reorganizing the DOM order Frequently asked questions (FAQs)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 orderDOM 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 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 orderAutomatic (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 DOMIf 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
Click the Wix Studio icon  at the top left of the editor. Click Tools. Click Auto DOM Order to deselect it. Click Turn Off to confirm.Sections and containers
Right-click the relevant section / container. Click Auto DOM Order in the right-click menu to deselect it.Grid cells in a section
Right-click the grid cell. Click Auto DOM Order in the right-click menu to deselect it.Manually changing the DOM order of elementsAfter 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:
Click Layers  on the left side of the editor. Choose what you want to organize:
    
Elements inside a section: 

Select a section to open it. Drag and drop the elements into the correct position.   Sections: 

Hover over the top section and click the More Actions icon . Click Arrange. Click Bring to Front. Repeat steps i-iii with all other sections, going from top to bottom in the panel.    Reorganizing the DOM orderYou 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:
Click Pages  on the left side of the editor. Select the relevant page. Click the More Actions icon . Click Reorganize DOM Order.To reorganize the elements' DOM order:
Click Layers  on the left side of the editor. Select the relevant section, flexbox, or stack. Click the More Actions icon . Click Reorganize DOM Order.FAQsSelect a question to learn more about DOM order on a site.How can I check the DOM order of a site I'm building?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.How does auto DOM work on site pages?It is not possible to disable auto DOM on specific site pages. If you want to turn it off, you need to disable auto DOM across the entire site. Where else can I enable auto DOM?You may see the option to automatically organize a site's DOM order in the Accessibility Wizard. We recommend selecting this option, as it ensures the Wizard's scan and resulting tasks are correct.Is auto DOM applied anywhere else?Auto DOM is applied to element stacks. You can disable auto DOM in the Layers panel.What happens to auto DOM if I rearrange elements in the Layers panel?The auto DOM of sections and containers is automatically disabled if you change the order of their elements from the Layers panel. You can always reenable auto DOM for them if desired.Is there anything else I should know?The automatic DOM order on a site has been built for left-to-right scripts (e.g. English, Spanish, etc.) If your site uses a right-to-left script such as Arabic or Hebrew, you need to manually re-arrange the DOM order in the Layers panel.