Elementor 3.23 Developers Update

Elementor 3.23 Developers Update

Elementor 3.23 introduces new performance improvements that will help speed up your website editing experience, multiple accessibility improvements for users using assistive technologies, an exciting new search widget with live results, link in bio widgets, floating button widgets, and more. Elementor addon developers will find some of the updates interesting as they include future plans for deleting older technologies.


Performance Improvements

While previous releases focused on performance for your users, this release improves your editing experience. This release reduces the Elementor editor interaction time for nested elements.

Furthermore, this release has enabled the Element Caching experiment by default for new users, ensuring that more sites can take advantage of the performance improvements offered by this feature.

Performant Nested Elements In the Editor

The nested capabilities infrastructure allows Elementor to place widgets inside other widgets. This includes nested accordion, nested tabs, nested carousel, mega menu and off-canvas widgets.

For a long time, the nested elements feature remained a beta stage experiment since the nested widget slowed the browser response times in the Elementor editor. The reason for the slow reaction times is that when changing the widget data, the editors’ rendering engine re-rendered all the repeater fields instead of just changing the affected item.

Elementor 3.23 addresses these issues. This release improved all the widgets that use the nested infrastructure by updating only a specific item that is changed inside the repeater.

The improvement focused on four repeated actions – add, delete, sort, and duplicate. For instance, when you delete a repeater item, it will only delete that element instead of re-rendering the entire widget. Or, when you add an item, it will only add a single item, without affecting the rest of the repeater items.

The results are very promising. Depending on the widget, the amount of items in the repeater and the action type, the interaction time improved by 60%-98%. In some cases the interaction time was reduced from 2,290ms to only 240ms, while in other cases the interaction time was reduced from 707ms to 5.5ms. Either way you’ll enjoy a faster editing experience.

Element Caching

The Element Caching experiment introduced in Elementor 3.22 has proven to be a significant performance booster for websites utilizing this feature. By reducing the server computation time for cached widgets, Elementor speeds up HTML generation, significantly improving the time it takes for the first byte to reach the user.

With Elementor 3.23, this experiment is active by default for new websites. However, existing websites will need to manually activate the experiment to benefit from the Element Caching capabilities. The change ensures that more sites can take advantage of the performance improvements offered by Element Caching.


Accessibility Improvements

Elementor 3.23 enhances accessibility for navigation menus, one of the most frequently used elements on any website. These updates are crucial for users relying on assistive technologies, ensuring that websites become more inclusive and user-friendly.

Labeling Navigation Elements

Landmark <nav> elements are used to identify groups of links that are used for navigation. When there are multiple navigation elements, each should have a unique label to identify what each navigation is used for.

All Elementor menus already had aria-label attributes describing the menu, but the text was hardcoded in the widget without the user having the ability to change the description and customize it for the website.

As of this release, a new “Menu Name” control was added to the “WordPress Menu” widget and to the “Menu” widget. Now you will be able to set different names for your menus, further improving your website’s accessibility.

Logical DOM Order for Mega Menus

The “Menu” widget is a useful tool that allows you to create mega menus with nested containers which you can customize and style as you wish. To make the menu widget more accessible for assistive technologies, the DOM output was restructured applying a logical DOM order.

While previously the menu items were grouped in one place and the content in another place, the new DOM order places the content below each menu item. This makes the code more accurate, and associates menu items with their content areas and vice versa.


Experiments and Features

This release promoted three experiments, two of which are performance experiments which prove to significantly improve page performance, and the third feature improves the user experience inside the Elementor editor.

New Stable Feature

This release upgrades the “Background Images Lazy Loading” feature from beta to stable status, making it safe to use on all websites. In addition, this feature is now active by default not only for new websites, but also for existing ones.

Upgraded Features

The “Element Caching” feature, introduced in Elementor 3.22, was upgraded from development to beta status, and as mentioned above, it will now be active by default on new installations. This experiment proved to significantly improve the time it takes for the first byte to reach the user.

The “Top Bar” feature, introduced in Elementor 3.12, is now active by default for new websites. The new editor design aims to improve the user experience and productivity by providing easy and quick access to common actions in the editor.


New Elementor Widgets

Elementor introduces the following exciting widgets to help users search with instant live results, and contact you more easily, thereby increasing conversions on your website.

Search Widget With Live Results

This innovative widget features live search results that display as users type in a drop-down beneath the search input. Results are shown in loop templates, which can be customized. The content can also be set for specific queries, setting custom post types to search, including or excluding specific taxonomies and more.

Floating Button Templates

Floating sticky buttons help improve conversion by offering communication with your visitors. The buttons can be placed on the viewport and when clicked, they open and offer the visitor a way to contact you with various messaging platforms like WhatsApp, Viber, email, etc. The buttons are easy to customize, but they also offer pre-designed templates.

Link In Bio Widgets

The new Link in Bio widgets offer the ability to promote services, display your social profiles, showcase portfolios, and more. The widgets are customizable, allowing you to match it to your website design. Free users have access to one widget while Pro users have access to seven different widgets.


Developer Advisory and Future Plans

In the next versions, Elementor is planning to migrate away from older technologies. Elementor addon developers should read carefully and make the required adjustments.

Deleting waypoints.js

Elementor 3.22 transitioned from the externally developed waypoints.js library to the native JavaScript IntersectionObserver(). The code refactor removed an external dependency, decreased the unused JS code, and made websites a bit faster.

In the next version (3.24), Elementor will delete waypoints.js files. We advise all Elementor addon developers to check whether waypoints.js is in use. Elementor addons should either refactor the code to use IntersectionObserver(), or include waypoints.js files in the addon.

Deleting Swiper 5

Elementor 3.11 introduced the ability to upgrade from Swiper 5 to Swiper 8 by simply activating an experiment. In the next release, Elementor 3.24, we plan to finally retire Swiper 5, and adopt Swiper 8 in all Elementor widgets.

We advise all Elementor addon developers to check which Swiper versions they support and transition to Swiper 8. Not all the external developers use Elementor’s built-in Swiper library, but if you do, make sure to make the needed changes.

This change will allow future Elementor to offer new and advanced capabilities in all carousel-based widgets. We are excited about this transition and advise all external developers to switch from Swiper 5 to Swiper 8.

Deleting Schemes

Elementor 3.0 replaced the limited Schemes mechanism with the robust Globals. This allowed users to define limitless colors and typographies.

Over the past few years Elementor avoided deleting the Schemes files as many Elementor addons haven’t made the transition. However, over the last 18 months we have contacted dozens of external developers and helped many to transition to Globals.

The Schemes mechanism is planned to be removed from the Elementor code base. We advise addon developers to check whether they use Schemes and transition to Globals. See the developers docs how easy it is to migrate from Elementor Schemes to Globals and you can check your addon for deprecated code using the Deprecated Code Detector Tool.


To Conclude

In conclusion, Elementor 3.23 brings significant performance enhancements in the editor, improved accessibility, and exciting new widgets to enhance site search and increase leads and conversions. The update emphasizes future-proofing with planned transitions away from older technologies, and we encourage addon developers to adapt and benefit from the latest advancements.

Developer Newsletter

Stay up to date on the latest developer news, product updates, and best practices.

Author

Picture of Rami Yushuvaev
Rami Yushuvaev
Head of Elementor Developers Experience & Performance Lead. Fullstack developer and open source projects contributor.