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.