Elementor 3.16 brings numerous updates aimed at improving stability and functionality. This release marks the graduation of the Loop feature as an experiment, making it fully integrated within the plugin. It improves the server-side rendering performance, reducing the client-side Time-To-First-Byte (TTFB) by 5%-20%, boosting the overall website speed. Accessibility enhancements have been implemented in various widgets. Finally, the minimum required WordPress version was upgraded to WordPress 6.0.
Experiments & Stable Features
Elementor remains committed to refining its features and solidifying experimental functionalities. Elementor 3.16 merges the Loop feature into the Elementor plugin, eliminating the need for manual activation. In addition, this version upgrades the status of three additional experimental features.
Stable Features
Loop is no longer a feature you need to activate, it was removed from the features page and merged into the plugin. While previously this feature was active for all sites, and you could deactivate it, you will no longer have to manually activate it nor will you be able to disable it. This feature will be part of Elementor the moment you update to version 3.16.
Introduced in Elementor 3.8, the “Loop Builder” allows you to style repeating dynamic content (i.e. loops). It allows you to create a loop template containing other widgets and style them as you like. Contrary to the Posts widget, which includes limited design options, the Loop Builder enables you to design your listings any way you’d like.
Upgraded Experimental Features
The “Improved CSS loading” feature, previously a stable feature, is now active by default on all websites. Up until now, this feature was only activated by default on new websites, while existing websites required manual activation. This change ensures that all Elementor users can benefit from this performance enhancement right out of the box.
The “Flexbox Container” feature, which was already a release candidate, is now active by default on new websites, and no longer needs to be manually activated. Containers, compared to sections, are high-performing, use less markup and have many more styling options.
The “Grid Container” feature, which was an alpha status experiment, is now upgraded to beta status. When the feature is activated, a Grid widget will be added to the widgets panel under the “Layout” category, making the feature easily accessible.
Performance Improvements
One of the most notable Elementor 3.16 improvements is optimization of the widget controls’ rendering process. This behind-the-scenes change results in significantly improved page performance, particularly in terms of Time To First Byte (TTFB). Results are impressive, with a 5%-20% reduction in TTFB compared to Elementor 3.15.
Improved Client-Side Performance (TTFB)
Elementor pages are composed of multiple widgets, each widget is composed of multiple controls. The server-side rendering process that generates the HTML and parses the CSS from these controls has a huge impact on the time it takes to create and serve a page. In turn, this affects the loading speed of the site’s frontend.
Elementor’s performance engineers managed to optimize one of the most resource-intensive processes, the conditional control display. Previously, that mechanism checked whether the conditional control is active by searching the entire control list for each control, and retrieving the controls list each time. The more widgets/controls the page had, the longer it took. Now, the mechanism passes the list of controls by reference, reducing the compute time.
These server-side improvements translate to more than a 5% reduction in client-side TTFB for simple templates, and even greater gains for pages with complex widgets. Pages with numerous elements and complex widgets have experienced around 20% reduction in TTFB. The more complex page you have, the greater the performance improvement.
In addition, our engineers managed to optimize redundant PHP “FOR” loops that process the entire control list. By exiting the loop in the middle, when a condition is met, the control-mechanism memory usage has been decreased even further.
These optimizations aim to continue enhancing website loading speeds, with no action required from users other than keeping Elementor up to date.
Special thanks to Elementor community members @MajorChump, @m1ga and @benni1516 for their feedback. Your valuable contribution will boost the performance of millions of websites worldwide.
Improved Editor Performance
When you have many elements on your page, it may feel like the Editor slows down. Slow editing experience can lower efficiency. That is why Elementor invests in improving the Editor performance and responsiveness.
Elementor 3.16 fixed some memory leaks in its React components and improved the memory-intensive “resize” and “device mode change” event listeners. Optimizing these event listeners has the potential to smoother the user experience for heavy users that utilize Elementor extensively.
Accessibility Improvements
Elementor continues to implement accessibility best-practices across all widgets. Version 3.16 introduced accessibility improvements in half a dozen Elementor widgets.
Keyboard Navigation
Elementor improved the keyboard navigation for the “icon box”, “image box”, and “posts” widgets.
When you add links to your icon/image box, both the heading and the icon/image are assigned separate links. This makes it difficult for keyboard users to navigate between the items since multiple elements lead to the same link. The same issue happens with the Posts widget, as the featured image, the heading and the “read more” link have three different links for the same url.
Removing the links from some elements is out of the question as it may break usability for mouse users, and using a single link element, wrapping all the elements, has the potential to break sites that have custom CSS / JS targeting the old DOM structure.
Therefore in Elementor 3.16, the focus ring in those three widgets will be applied only on the heading, the other linkable elements will be removed from the tabindex, making sure the widgets only have one clickable element when you navigate with your keyboard.
Testimonial Image ALT
Testimonials allow you to highlight user reviews. Elementor’s “Testimonial” widget presents a single testimonial while the “Testimonial Carousel” widget presents multiple testimonials in a carousel. Both widgets have the option to set the testimonial content along with a person’s name, title and image.
While you could edit the image “ALT” text in the “Testimonial” widget, you couldn’t do the same in the “Testimonial Carousel” widget. This inconsistency was fixed in Elementor 3.16. Now you will be able to update the image ALT text from the WordPress media library, similarly to other Elementor widgets.
Nested Menu
Elementor 3.16 enhanced the Nested Menu widget accessibility, fixing the role/aria attributes, improving keyboard navigation and the focus ring. The widget was updated based on W3C ARIA APG recommendations and best practices.
Among the changes, the wrapping element now has a role=”menubar” attribute, the links list have role=”menuitem” attribute. The relevant menu items have aria-label, aria-labelledby, aria-haspopup, aria-controls and aria-expanded attributes.
On mobile devices, when the menu is collapsed, the toggle button that opens the menu has all the relevant ARIA attributes.
Keyboard users can now navigate menu items with arrow keys, right/left/top/bottom. Opening menu items with Enter/Space and closing the dropdown using ESC.
Nested Tabs
This release also enhanced the nested tabs accessibility, setting the wrapper element role to role=tablist on the tab heading wrappers.
The tab items wrapping element was changed from <div> to <button>. All the ARIA attributes have been updated according to recommended W3C ARIA APG patterns.
Keyboard users can navigate between tabs with arrow keys. In LTR view, right/bottom are used to to skip to the next tab and left/up are used to skip to the previous tab. In LTR view, left/bottom arrow keys are used to to skip to the next tab and right/up are used to skip to the previous tab.
Minimum Required WordPress Version Update to 6.0
As a rule of thumb, Elementor supports the last 4 major WordPress versions. With the release of WordPress 6.3, Elementor dropped support from WordPress 5.9 raising the minimum required WordPress version to 6.0.
Slowly and steadily, Elementor drops support from older versions. The last time Elementor’s minimum required version was upgraded, was in Elementor 3.12. We upgraded all our products to WordPress 5.9 and above.
We encourage all Elementor users to review the system requirements and adjust their and their clients’ websites accordingly.
Stabilizing the Addon Ecosystem
One of the issues Elementor faced was the compatibility with external addons when upgrading to new versions. The Elementor deprecation process was a major concern among the external developers community, therefore, stabilizing the entire ecosystem was a priority.
Elementor 3.8 postponed the deletion of deprecated code, to prevent fatal errors. Elementor 3.14 tagged deprecated functions, methods and classes with phpDocs & jsDocs @deprecated tags, to identify deprecated code in IDEs. Elementor 3.15 introduced the ״Elementor Deprecated Code Detector״, to scan Elementor addons, identify deprecated code and produces a deprecation report.
With the release of Elementor 3.16 beta, we analyzed the number of Elementor addons that use deprecated code. The results show that compared to Elementor 3.15 we see a decrease of 16.6% in the number of Elementor addons that use deprecated code. We encourage all Elementor addon developers to run the Deprecated Code Detector and fix any deprecated code in use.
Become a Contributor
If you have coding skills and you want to contribute, go to our Elementor GitHub Repository and see where you can help. Report a bug or solve an issue by sending Pull Requests.
Those of you who speak more than one language, you can help translate Elementor to your language. Elementor supports over 59 languages out-of-the-box, however each version adds new translation strings, and you can always improve existing translations.
To translate Elementor visit translate.wordpress.org, for Elementor Pro visit translate.elementor.com. If you are new to WordPress translations, we’ve built a short guide explaining how to translate and localize Elementor.
To Conclude
While Elementor 3.16 doesn’t introduce many new features, this version is heavily focused on improving and stabilizing existing features. In this version we introduce updates that boost performance and improved accessibility. Experimental features have been stabilized and stable features merged to core. Keep upgrading your Elementor version, and we will keep improving your website!
3 Responses
“Improved Editor Performance”
I thought I am the only one experiencing reduced performance inside the builder. Thank you for this awesome release. Can’t wait for the final release!
Elementor after 3.14.1 and the similar versions of Elementor Pro are having conflicts. I was hoping this update would resolve them but the issue is still there and I have confirmed by disabling all other plugins. I also rolled back to 3.14.1 on both and the feature works as expected but other things break, the same case when I disable either Elementor or Elementor Pro interchangingly.
There is a conflict between the two plugins where they tend to both render materials on a learndash page. One gets embedded in the body of the main document, whilst the other is correctly placed within the Elementor template.
It’s really sad how the versions keep getting less and less improvement. I also noticed that some Elementor features have disappeared that were integrating with LearnDash. It feels like from the many integrations and possibilities that made me sign up are being thinned out limiting the flexibility that was my buy in.
Lastly, the only way to seek support is to sign in to Elementor which is not very ideal if the email address used to register the plugin is not readily available to the developer. There has to be a better way of offering support that doesn’t wall off people especially since the provided FAQs leave a lot to be desired
There is Bug in Elementor Pro Version 3.16.0
In flexbox 50%-50% in 1 row and in 2 row its 100% so when I upgrade my version to 3.16 the column break and I figure out clicking on Gap option as link values together fix this issue.
But there are many pages in website so I have to the sections and click on link values together in Gap option.