help center

On this page

What is Optimized DOM Output?

Last Update: September 10, 2023

The optimized DOM output experiment aims to improve performance by decreasing the number of wrapper elements present in the HTML that is generated by Elementor.

Important: This experimental feature includes some markup changes which may affect any custom code that users have implemented in their websites. Because this is in the experimental stage only, users can test the new optimized DOM output on test sites only to avoid damaging existing sites.

Note: This experimental feature is automatically active on all NEW sites with a new install of Elementor only.

How to use this experimental feature

  1. Go to Elementor > Settings > Features tab.
  2. Select Active from the Optimized DOM Output dropdown.

Click the Save Changes button.

More about the optimized DOM

Starting with Elementor 3.0, some significant DOM improvements have been made to boost the speed and performance of new Elementor websites. The developers addressed a growing concern about the number of HTML wrapper elements that were output by Elementor. In response, we’ve removed some wrappers.

The presence of these wrappers was due to the diverse use of Elementor, the ability to use these selectors in various ways to customize your site, and the omni-purpose of Elementor as a solution for creating advanced websites visually.

Removing wrapper elements from the DOM contributes to more simplified code output, better readability and less complexity. A smaller DOM contributes to increases in speed and performance. This is, however, a potentially breaking change, so by default, Elementor will only use the Optimized DOM Output on new sites. 

HTML Wrappers Removed in 3.6

Removed elementor-section-wrap adding it to the Optimized DOM Output experiment

HTML Wrappers Removed in 3.0?

Three (3) HTML wrappers are removed, including:

  • .elementor-inner
  • .elementor-row
  • .elementor-column-wrap

HTML Wrappers Removed in 3.2

In this version we removed the following two (2) HTML wrappers:

  • .elementor-image
  • .elementor-text-editor

Who Does This Change Affect?

By default, this only affects new sites to avoid breaking existing sites that upgrade to 3.0. Using the Optimized DOM Output on existing sites that upgrade from pre-3.0 would potentially cause your website’s appearance and/or functionality to break. For this reason, the Optimized DOM Output is disabled on upgraded sites, and Legacy DOM remains in place. However, if you upgrade to 3.0 and wish to use the Optimized DOM Output, you can enable this feature. Simply go to Elementor > Settings > Advanced and select Enable in the Optimized DOM Output dropdown. 

domsetting What is Optimized DOM Output? 1
What is Optimized DOM Output? 3

Important: If you have used any of these wrapper classes in either your custom CSS or custom code, you should refactor your code to use different wrapper classes that aren’t being removed. Otherwise, your custom styles or code will no longer function properly

Note: If unable to edit your text in the main window, and only able to edit text in the editor panel, try disabling the Optimized DOM Output experimental feature.

See the developers post about this change here.

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article

Wait! You get 30-Day Money-back Guarantee

You have nothing to lose – but the discount