Elementor 3.14 includes several developer related updates. Read through these updates carefully as some of these changes could affect existing websites and Elementor addons. Web creators and developers should read carefully as some updates have breaking changes.
Elementor AI Images
We are excited to reveal the next phase of Elementor AI, available in Elementor 3.14. Now, you can use Elementor AI to create original images and enhance existing images on your website, without ever having to leave the Elementor Editor.
Media Control
The new AI capabilities are added to all the “Media Controls” in the Elementor Editor. Whether the media control is used by Elementor, Elementor Pro or Elementor addon. The AI button on the control will allow the user to generate new images, fine tune existing images or get inspired by selecting from a gallery of premade AI-generated images.
Addon Developers
Elementor addons benefit from these new AI capabilities out-of-the-box without changing anything. To customize the AI-generated images for specific controls, addon developers can read the updated developer documentation to learn more about the new AI feature.
Important Note
Elementor addon developers should make sure that no media control is using the deprecated media_type argument. It should be replaced with the media_types array. Replacing 'media_type' => 'video' with 'media_types' => [ 'video' ]. The control relies on the media types to decide whether to display the AI button.
CLI Commands
Elementor 3.14 enhances the Elementor CLI command that activates and deactivates multiple features in a single command.
Features & Experiment
Users can use new and experimental features before they’re officially released. Experiments can be activated from the “Features” tab in the “Elementor” > “Settings” screen. Alternatively, there is an option to use the command line to activate features.
Activating Multiple Experiments
Until now, you could only activate one experiment at a time. Activating multiple experiments required multiple commands. With Elementor 3.14 multiple experiments can be activated in a single CLI command by simply using a comma after each experiment.
As of this version, you can replace this code:
wp elementor experiments activate container
wp elementor experiments activate nested-elements
wp elementor experiments activate e_dom_optimizationWith this one:
wp elementor experiments activate container,nested-elements,e_dom_optimizationPerformance, Accessibility and SEO
Elementor continues to implement accessibility best-practices across all the widgets. It’s a long process which is spread over several releases, but in each version we see improved metrics across the board and increased user satisfaction.
Button Widget
The button widget is a basic Elementor widget that is also one of the most used. For each button, you can determine whether to set a link, or not.
Previously, the widget had a role=”button” attribute because it’s a button. This is correct when it has no link. However, when a link is set, it is no longer a button, but rather a link.
Why is this important? Because buttons and links serve different purposes. When a link element has a role=”button” attribute the screen reader doesn’t include the element in the list of links on the page.
As of Elementor 3.14 the role attribute will be added conditionally based on whether the user set a link or not.
Accordion & Toggle Widgets
Two widgets that are widely used when creating pages with Elementor. Following recommendations from users to better follow best practices, Elementor 3.14 introduces enhancements to these widget.
Changing HTML tags has the potential to break existing sites, so Elementor prefers not to make these types of changes. However, changing HTML attributes can eliminate that risk. In Elementor 3.14, we updated the role and the aria-* attributes to match the W3C APG recommendations for accordions.
As a result, your website will no longer get the “not-crawlable link error” in different site auditing tools when using any of these two widgets.
Important Note: We urge you to check whether your website used custom scripts or any other workarounds to fix any accessibility issue in your Accordion / Toggle widgets. If you did, please remove the JS. The two widgets are now accessible out-of-the-box.
Video Playlist Widget
In this version we focused on the Video Playlist widget, which is a media intensive widget. When creating a Video Playlist, there is an option to set multiple videos that are presented beside the main video, and you can also display text next to each video.
Elementor managed to boost performance and improve the initial page loading time by lazy loading the video playlist cover images. As of this release, lazy loading capabilities are added to the playlist cover images. Pages using this widget will load faster compared to previous versions as cover images won’t be loaded until the visitor scrolls down and brings the widget into the viewport.
From an SEO and accessibility perspective, we also added a missing alt attribute to each cover image, which will help people using assistive technology, such as screen readers. This will also improve Search Engine readability. Similar to the accordions & toggle widgets, this version also fixes the “not-crawlable link error” in different site auditing tools.
Breaking Changes
Elementor 3.14 introduces new capabilities and bug fixes to the pagination mechanism with new infrastructure updates that will facilitate additional styling capabilities in future versions. This requires HTML updated to the pagination element.
HTML Changes
The Loop Carousel widget is like the Loop Grid widget, but with the ability to display the content in a carousel. It has additional styling capabilities for navigation, including the arrows and the pagination (dots / fractions).
In this version the HTML of the Loop Carousel navigation has been updated. The new HTML structure provides the ability to add some very interesting design capabilities we plan for upcoming Elementor versions. But like any markup change, it has the potential to break existing designs.
Breaking Potential
The vast majority of Elementor users are not affected by the change. However, sites that use custom JS or CSS targeting loop carousel pagination elements should make sure their design is not affected by the change.
Deprecation Detection
This version adds more clarity for developers using deprecated code. In previous versions developers needed to run their code, monitor debug logs or console log to detect deprecated code usage. We want to change that.
jsDocs & phpDocs
In this version we mapped all the deprecated functions, methods and classes with phpDocs & jsDocs @deprecated tags. This way the IDE informs developers that the code is deprecated, while writing the code. It should help Elementor addon developers avoid using deprecated code, or at least catch them in the development stage, not while testing, or even worse – in production.
Update: Elementor 3.14 includes only jsDocs updates. The phpDocs updates will be shipped with Elementor 3.15.
Deprecation Policy Review
Elementor’s code deprecation and deletion policy is gradual. When a piece of code is deprecated, it’s deleted from the codebase after at least 8 major versions giving developers enough time to make relevant changes.
At some point we noticed an increase of complaints about addon developers that continue using deprecated code, bloating site logs with depreciation notices. In Elementor 3.8 we decided to postpone the deletion of deprecated code. Since then, deprecated code was not deleted.
We worked closely with many Elementor addon developers to advise on code upgrades. We plan to renew our deleting policy and delete deprecated code.
Addon developers should make sure their addons are not using outdated code. If an addon will continue using deprecated code, when the code is deleted from Elementor’s code base, the addon will cause fatal errors, breaking websites.
To Conclude
Elementor 3.14 brings several developer-related changes you should become familiar with. Elementor addon developers should review their code, and remove any deprecated functions. Web creators should also review their sites to remove any custom code and workarounds fixing accessibility issues that are now built-in, in Elementor widgets.
If you have any questions don’t hesitate to ask in the comments area below, in Elementor’s GitHub discussions or in our social media groups.
