Elementor 3.18 Developers Update

Elementor 3.18 Beta

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 (h1h6) 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.

Author

Picture of Rami Yushuvaev
Rami Yushuvaev
Head of Elementor Developers Experience. Fullstack developer. Open source projects contributor. Creator of ChartsCSS.org, GenerateWP.com, DisplayWP.com and many other projects.
Wait! You get 30-Day Money-back Guarantee

You have nothing to lose – but the discount

days
hours
minutes
seconds