We are always looking for new ways to improve the speed and performance of Elementor websites.
This has been a long time coming. Lately, we have been receiving feedback from our users about the large number of wrapper elements we include in the HTML output of the website builder. The feedback stated that many of the wrappers are not necessary, and they increase the size of web pages and harm performance.
The presence of these wrappers is 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.
** Warning: Breaking Changes **
We have wanted to address this issue for a while now, and Elementor 3.0 provided us with the perfect opportunity to do so. Elementor 3.0 will bring many changes to the way our users build websites with Elementor, and some of these changes, including the removal of several HTML wrappers from our code, are potentially breaking. This means that when you update the Elementor version in your website from 2.x (or even 1.x, for some very out of date sites) to Elementor 3.x, your website’s appearance and/or functionality could break.
Interested in the changes coming down the road? Read more here
The Wrappers Being Removed
Without further ado, here are the classes of the wrappers being removed from Elementor in Elementor 3.0:
.elementor-inner
Previously used under the main wrapper for each document type (e.g. header, post content, footer), a document’s markup in Elementor v2.9 and below looks like this:
<div data-elementor-type="wp-post" data-elementor-id="1234" class="elementor elementor-1234" data-elementor-settings="[]">
<div class="elementor-inner">
<div class="elementor-section-wrap">
// Section Content
</div>
</div>
</div>In Elementor 3.0+, it will look like this:
<div data-elementor-type="wp-post" data-elementor-id="1234" class="elementor elementor-1234" data-elementor-settings="[]">
<div class="elementor-section-wrap">
// Section Content
</div>
</div>.elementor-row and .elementor-column-wrap
.elementor-row was previously used inside sections. .elementor-column-wrap was previously used under the main wrapper for each column in Elementor.
A section’s markup in Elementor v2.9 and below looks like this:
<section class="elementor-element elementor-element-1234 elementor-section-boxed elementor-section-height-default elementor-section elementor-top-section" data-id="1234" data-element_type="section">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-row">
<div class="elementor-element elementor-element-c5165a6 elementor-column elementor-col-100 elementor-top-column" data-id="c5165a6" data-element_type="column">
<div class="elementor-column-wrap elementor-element-populated">
<div class="elementor-widget-wrap">
// Widgets here
</div>
</div>
</div>
</div>
</div>
</section>In Elementor 3.0+, it will look like this:
<section class="elementor-element elementor-element-1234 elementor-section-boxed elementor-section-height-default elementor-section elementor-top-section" data-id="1234" data-element_type="section">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-element elementor-element-1a2b3c4 elementor-column elementor-col-100 elementor-top-column" data-id="1a2b3c4" data-element_type="column">
<div class="elementor-widget-wrap">
// Widgets here
</div>
</div>
</div>
</section>Why We Did It, and Why Now
As mentioned previously, we are always looking for new ways to improve the performance of Elementor websites, and by reducing the DOM that is being output to Elementor websites we are making one more step towards better performance.
We do our best at Elementor to address feedback coming from our community. The complaints about Elementor’s markup being unnecessarily bloated have always been on our radar, but since removing wrappers is a high-potential breaking change, we had to wait for a good opportunity to introduce it.
Elementor 3.0 is a major release. We took the opportunity to introduce substantial changes and improvements to the way our users build websites using Elementor. Introducing breaking changes is something that is traditionally done only in major releases, so we took this opportunity to include the wrappers removal among the many features and improvements coming.
What to Do, How to Prepare
Website Builders, Add-on Developers
We highly recommend you go over your code and look for any uses of the wrapper classes mentioned above. If you use them anywhere, refactor your code to use different wrapper classes that aren’t being removed.
If you have not registered as an Elementor Beta Tester in your Elementor sites, we recommend doing that for sites you want to test Elementor 3.0 on before it is released. You can register as an Elementor Beta Tester in any Elementor site by going to your admin dashboard, then going to Elementor > Tools > Version Control. At the bottom of the version control tab, choose “Enable” in the Beta Tester select box, submit your e-mail address, then click on “Save Changes”.
If you are not yet subscribed to our developer newsletter, we highly recommend subscribing via the subscription form in the footer below. When Elementor 3.0 beta is released, our mailing list will be notified.
Elementor Users
If you are an Elementor user, we highly recommend backing up your website’s files and database prior to upgrading to Elementor 3.x, and keeping them somewhere safe (we recommend downloading a copy of the backup to your computer, or saving a copy in a cloud drive service such as Dropbox, Google Drive, or Microsoft Onedrive).
It is also recommended that you test the upgrade process in a sandbox environment (test site) if you have one, and only upgrade your live site when you are sure you have taken all the steps to make sure that your website will look and function like it did before the upgrade.
Learn more about Elementor 3.0 by reading more about the upcoming changes here.
