help center

Search
Close this search box.
On this page

Optimized DOM Output and custom code

Last Update: February 1, 2024

Optimized DOM output aims to improve performance by decreasing the number of wrapper elements present in the HTML generated by Elementor.

Important
This feature includes some markup changes which may affect the custom code users have implemented in their websites. If your custom code is affected, you will need to rewrite your CSS, taking into account the new HTML structure. For more details about these changes, check out our developers update.

Starting with Elementor 3.0, some significant DOM improvements have been made to boost the speed and performance of new Elementor websites. These improvements involved removing a number of HTML wrapper elements that were output by Elementor.

Removing these wrapper elements from the DOM contributes to simplified code output, better readability and less complexity. A smaller DOM contributes to increases in speed and performance. However, removing these elements may affect some web creator’s custom code.  

HTML Wrappers Removed

Elementor Version 3.6

Removed elementor-section-wrap

Elementor Version 3.2

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

Elementor Version 3.0

  • .elementor-inner
  • .elementor-row
  • .elementor-column-wrap
Important
Starting with Elementor 3.19, these DOM improvements were fully incorporated into the Elementor Core meaning they are not longer optional. If you used any of these wrapper classes in your custom CSS or custom code, you need to refactor your code to use different wrapper classes that aren’t being removed. Otherwise, your custom styles or code will no longer function properly.

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

Stuck?
Our Elementor Expert is Ready

Book a 45-min video consultation call with an Elementor expert and elevate your site!