Elementor 3.18 includes updates that improve your websites performance, enhance accessibility, provide more mobile design options, upgrade experiment to stable features, enhance PHP 8.2 compatibility, and much more. Read through these updates carefully as some of these changes could affect existing websites and Elementor addons.
Performance Improvements
Elementor continues to focus on improving the website’s speed by reducing the loading times. In this version Elementor boosts the core mechanisms that generates the page, making the process more efficient.
Controls Rendering Engine
The website consists of different pages, each page consists of different elements, each element consists of different controls. By loading building blocks efficiently Elementor can improve loading time.
To further improve the website’s loading speed, Elementor focused on the server side rendering process of controls. Although the change happens in the server, it affects the Time To First Byte (TTFB) metric and improves the general Core Web Vitals (CWV) score.
Boosting Controls Loading
To generate pages, Elementor loads all the values in controls set by users. This control loading process is very intensive, as it loads all the controls and all the data.
To improve this process, Elementor won’t be loading all the controls when rendering the frontend anymore. When generating the frontend page, it will load only the information relevant to the frontend. For example, Elementor has UI controls that only add elements to the Editor, some controls have arguments that style the Editor like the control label, description, separator etc. have no effect on the frontend. Removing these controls from the frontend rendering process reduces the server-side computation required to render the page.
Internal benchmarking tests show reduction on server-side computation time and memory usage, this leads to faster loading time, decreasing the frontend TTFB, which improves the page CWV. We measured 3%-8% faster server time and 3%-5% better TTFB score with the new control rendering process. But, in production websites it may be higher – the more elements the page has, the greater the impact.
Editor Performance
Elementor users spend most of their time in the Editor building and tweaking websites. To improve the general user experience, Elementor 3.18 allows users to clean the elements panel removing unused widgets, speeding up the Editor’s performance.
Elements Manager
The new Elements Manager allows users to customize their work area, removing unused elements, to allow a distraction-free working environment. To avoid breaking existing pages, there is an option to check whether the widget is used in any of the site pages.
Faster Editor
Please note that disabling unused widgets will not improve frontend performance as Elementor has a smart rendering mechanism that only loads widgets in use. Therefore, Elementor does not load unused widgets in the first place.
However, the Editor uses a different mechanism for widgets loading. In theory, the more addons a website has, the slower the Editor, as each developer adds its own JS and CSS. Disabling unused widgets has the potential to speedup the Editor performance as the Editor is no longer required to load all the additional JS and CSS.
Accessibility Improvements
Elementor continues improving your website’s accessibility to enable users using assistive technologies to navigate easily within your website, and provide more customization options for web creators when building a website.
Video Playlist
Headings structure (h1–h6) has a vital importance on your page accessibility and SEO. In version 3.15, Elementor added the ability to change the “HTML Tag” in 5 different widgets that give you the ability to customize your page’s content hierarchy.
Elementor 3.18 adds new controls to the Video Playlist widget. Previously, the widget had three types of hardcoded heading elements: h2 for the list title/name, h3 for video sections and h4 for video titles/names. The newly added “HTML Tag” controls give you the ability to change the HTML tags for each heading type. Elementor keeps backwards compatibility by setting the previously hard-coded tags as default values for the new controls default values.
Progress Bar
Progress bars must have accessible names to refer to the element by its name. When a progress bar doesn’t have an accessible name, people who use assistive technologies have no way of knowing its purpose.
The Progress Bar widget always had the ability to set the progress bar title but it was not associated with the progress bar using ARIA attributes. Elementor 3.18 adds unique id attributes to progress bar titles, and each progress bar now references its title using the aria-labelledby attribute. This will help screen readers announce the progress bar.
Note that this functionality is implemented conditionally to Progress Bars that have titles. Users are responsible for updating titles on all of the Progress Bars for better accessibility.
Search Form & Taxonomy Filter
To make the page semantic, HTML offers the ability to use generic elements like <div> or <span> together with role attributes containing one of the eight ARIA landmark roles. Alternatively, you can use landmark elements like <header>, <footer>, <main>, <aside>, <section>, <nav> and <form> which have implicit ARIA roles.
Until recently, the <search> element was not cross-browser supported. This is no longer the case. With version 3.18, the Search Form and the Taxonomy Filter widgets wrap the search and filtering functionality with the <search> element. For backwards-compatibility, Elementor adds the role=”search” attribute to the element. Browsers that support this element will have an implicit ARIA role derived from the element itself. Older browsers that don’t support this element will use the role attribute.
Mobile Improvements
Mobile browsing has become increasingly popular in recent years, which is why Elementor’s Editor includes new features and capabilities to help you create mobile-friendly designs.
Carousels Pagination Mobile Sizes
To make websites mobile friendly, interactive elements like buttons and links should be large enough (48×48 pixels), or have enough space around them, to be easy enough to tap without overlapping onto other elements.
Previously, Elementor widgets with carousel functionality could not be customized separately for mobile devices. You could set a single size for arrows and dots, for all breakpoints. With Elementor 3.18, you will be able to set a different size for each breakpoint.
This change is applied to multiple widgets including Image Carousel (free), Slides (pro), Reviews (pro), Media Carousel (pro) and Testimonial Carousel (pro).
Menu Widget Breakpoints
When you use the Menu widget, you can set the breakpoint in which the Menu becomes a hamburger menu.
Previously, the widgets didn’t display all the breakpoints selected in Site Settings > Layout > Breakpoints panel. With Elementor 3.18, you will be able to see all the selected breakpoints, excluding only “Desktop” and “Widescreen” breakpoints.
Note that websites that didn’t use additional breakpoints beyond the three default ones, won’t be affected by this change.
Context Menu Redesign
Elementor updated the context menu design, making it wider, with more vertical spaces and removing the icons from all the actions. This affects external developers that extend Elementor and register custom actions.
Context Menu
A context menu is a popup menu that appears when users right click an element in the Elementor preview area. This popup menu offers a set of actions based on location in the Editor, or the selected element.
External developers have the option to extend the context-menu, add new context menu actions and register them to different menu types.
Custom Context Menu Actions
Previously, the context menu displayed icons beside some of the actions. Elementor 3.18 removed the icons from the context menu. Third party developers should be aware of that change, the icon property is no longer supported.
const action = {
name: 'action-id',
icon: 'eicon-code', // No longer supported.
title: 'Action Label',
shortcut: '',
isEnabled: () => true,
callback: () => {},
};Experiments & Features
Elementor remains committed to stabilizing experimental features. Elementor 3.18 upgrades experimental feature to stable status, and eliminates the need for manual activation for three features.
Upgraded Features
The “Global Style Guide” feature, which was previously in beta status experiment, is now upgraded to a stable feature. When the feature is activated, it displays a live preview of changes to global colors and fonts in a sleek style guide from the site’s settings. You will be able to toggle between the style guide and the page to see your changes in action.
Default Activation
The “Inline Font Icons” feature, which was previously inactive by default, is now active by default on new websites. New websites will load inline SVG icons for icons in use instead of loading large font files and their related CSS. This change has the potential to improve page performance.
The “Optimize Image Loading” and “Optimized Gutenberg Loading” features, which were previously active only for new websites, are now active by default for all websites. This change ensures that all Elementor users can benefit from this performance enhancement out of the box.
Stabilized Addons Ecosystem
Elementor has a huge addon ecosystem, helping developers to add new features to Elementor or integrate their products into the page builder, simplifying the usage for ordinary users. Elementor continues stabilizing the addons ecosystem by contacting developers directly, and helping them modernize their code.
Compatibility Issues
Many Elementor users reported that external addons produce deprecation warnings and some websites break when upgrading to new versions. For a long time this was a major concern for our teams.
Elementor has a straightforward deprecation process. Deprecated code remains in the codebase for 8 major versions giving developers enough time to update their code. Yet, external developers don’t upgrade their code.
To prevent fatal errors when deleting code, Elementor 3.8 postponed the deletion of deprecated code. In Elementor 3.14 we started providing depreciation data in the IDE by documenting phpDocs & jsDocs @deprecated tags. In Elementor 3.15 we introduced the ״Elementor Deprecated Code Detector״, to scan Elementor addons to produce deprecation reports for external addons.
Stabilization Progress
Stabilizing the entire ecosystem was a priority. With the release of Elementor 3.15 beta, we started actively monitoring and analyzing the addons ecosystem.
With the release of Elementor 3.16 beta there has been a decrease of 16.6% in the number of Elementor addons that use deprecated code. When Elementor 3.17 beta was released, we saw a 33.33% decrease, and with the release of Elementor 3.18 beta a 63.88% decrease in the number of external addons that use deprecated code.
Improved PHP 8.2 Compatibility
Elementor strives to provide the most secure and performant experiences. Our roadmap to upgrade PHP versions is a public commitment to drop support for older PHP versions. As part of this process, Elementor constantly improves compatibility with newer versions of PHP.
The 3.18 release introduces several enhancements that fix PHP warnings on servers using PHP version 8.2. This version fixes dynamic property creation on PHP 8.2. In the previous PHP version, dynamic property creation was allowed, PHP 8.2 deprecated dynamic properties.
We should mention that using PHP 8.2 with previous Elementor version doesn’t break sites, it simply logs warnings when WordPress debug is enabled.
To Conclude
As always, by upgrading your Elementor version, we keep improving your website! Elementor 3.18 introduces performance and accessibility improvements, extending compatibility with newer PHP versions, fixes critical bugs, promotes stable experiments and makes your website easier to operate.
