Elementor 3.13 includes several developer related updates. Read through these updates carefully as some of these changes could affect existing websites and Elementor addons. To convey all the changes made in this release, several technical issues have been simplified.
Elementor AI
Elementor 3.13 is revolutionizing the way websites are built. New AI capabilities are natively integrated into the Editor to help Web Creators generate content and improve existing texts. Moreover, it helps elevate website designs with the code assistants.
Elementor Controls
The AI button has been added to various Editor Controls, including the text control, textarea control, and WYSIWYG control, enabling users to produce content using AI. Additionally, an AI button has been added to the code control that enables users to generate CSS or HTML code, depending on the control’s programming language.
Addon Developers
Elementor addons will also benefit from these new AI capabilities. Developers have the option to enable or disable the AI button and customize prompt types, such as short titles, long paragraphs, HTML or CSS code, as per their requirements. For further information, read the developer documentation to learn more about this exciting new AI feature.
CLI Commands
Elementor 3.13 introduces exciting new features, designed to enhance the website development experience. New CLI (Command Line Interface) commands are aimed at simplifying and streamlining various automation tasks and development workflows.
Clear Theme Builder Conditions
When creating theme-builder templates for different site parts, all the display conditions are cached. A new command will help you clear the conditions cache to regenerate the conditions. For more information read about this command in Elementor developer docs.
Experiments Status
When you set up a new server using CLI, you can install WordPress, themes and plugins. Furthermore, you can activate/deactivate different Elementor experiments from the command line. In this version, we introduced a new CLI command that checks whether an experiment is active or inactive. For more information read about this command in Elementor developer docs.
Imported Item ID
When using CLI to import a single template JSON file (or a ZIP file with multiple JSON files), now you can choose the return type with a new CLI argument. It’s now possible to get the imported items ids. For more information read about this command in Elementor developer docs.
Composer Package
We are happy to announce that Elementor now supports the installation of Elementor Pro as a Composer dependency. This highly requested feature allows users to easily manage their Elementor Pro updates and installations through automation processes.
Using Composer
Composer is a PHP dependency management tool. It allows you to declare the dependent libraries your project needs and it will install them in your project. Hosting companies, web-development agencies and developers use Composer to manage their updates and installations.
However Composer doesn’t contain WordPress plugins and themes. WordPress Packagist is an open source service that mirrors WordPress plugin and theme as Composer repositories.
The issue is that premium WordPress themes and plugins are not hosted on wp.org therefore they cannot be installed using Packagist. Furthermore, many premium plugins require license keys. This is why Elementor launched a separate repository for Elementor Pro.
Elementor Pro Composer Dependency
This feature was added in response to user feedback and requests, it aims to provide an easier and more streamlined way to manage Elementor Pro updates and installation as a Composer dependency. For more information read about this in Elementor developer docs.
Performance Improvements
The new release of Elementor 3.13 includes new performance improvements that will make your website faster and more efficient than ever before. With a focus on two areas, the header template and widgets that are used mainly on inner pages.
Header Template
Lazy loading elements that are displayed above the fold have a negative impact on site performance. These elements should always load immediately upon page load. That is why Elementor 3.13 has removed lazy loading from background images in the header template.
This update ensures that visitors can quickly access your site’s most important information, resulting in a better user experience, faster page load and a higher Lighthouse / PageSpeed score.
Additional Image Lazy Loading
In the recent version Elementor focused on lazy loading assets and deferring them from loading on page load. Most of the commonly used widgets already have lazy load support. This update focused on less used widgets, and ones that are used in inner pages.
We added lazy load support for images in the Price List widget. Additionally, the profile pictures in the Author Box widget and the Post Info widgets are now lazy loaded too. This means that images will now load only when needed, resulting in faster initial page load times for your inner pages.
Accessibility Improvements
Elementor 3.13 includes a host of accessibility improvements to your website, as well as the Elementor Editor. This version includes enhancements to keyboard navigation, added additional ARIA tags, fixed existing ARIA compliance issues, and improved semantic markup.
WordPress Menu Widget
One significant improvement is the ability to open and close the menu toggle button in the WordPress Menu widget. This widget is widely used, that is why any improvement has a large impact on a wide amount of websites.
In the previous version, we focused on markup, making the toggle button focusable using HTML attributes. In this version, the focus was on JS, making sure the toggle button can be triggered using not only mouse click but also using Enter / Space keyboard keys.
While the two tasks didn’t ship together, as of 3.13 the widget should be fully accessible.
Table of Contents Widget
The Table of Contents (TOC) widget displays a list of headings, giving visitors an overview of the page and allowing them to easily navigate to specific sections.
When configuring the TOC widget, you can set whether or not the visitor will be able to minimize the TOC content. If it is minimizable, a toggle button is added next to the heading text, allowing the visitor to open/close the TOC.
To make the toggle button accessible and maintain backwards compatibility with any CSS changes applied to existing TOC, we added role=button and tabindex=0 attributes to make it a focusable element, accessible for keyboard users.
This entailed the creation of three new attributes: A Boolean aria-expanded attribute was added to indicate whether the TOC is expanded or not; a new aria-label attribute was added with an “open” / “close” text, which changes based on the TOC open/close state; a new aria-controls attribute was added to identify the HTML tag whose contents are controlled by the element on which this attribute is set.
And finally, the TOC can be toggled not only with a mouse click but also by using the Enter / Space keyboard keys.
Search Form Widget
The Search Form widget has received several a11y improvements. It has several skins, each with its own layout and styles, each requiring different updated features.
The most basic is the missing <label> element which was added for screen readers. Regular users will not see the label text, it will be accessible only for screen readers. In addition, all the elements have updated ROLE and ARIA tags. For example, we replaced the button title tags with aria-label, added role=button and added tabindex=0 attributes.
When using multiple search form widgets on a page, you get duplicate ID warnings. As of 3.13, each widget input field has a unique ID, helping screen readers refer from the search label to the input field.
Another major accessibility issue fix allows buttons to be activated using a mouse, not keyboard. This applies to the search button in some skins, the full-screen toggle button, and the full-screen close button.
Gallery Widget
The Gallery widget, which displays a set of images, can optionally display the image title when visitors hover over the images. In cases where images have no links, this widget is no longer accessible.
When the image has a link, the entire element becomes focusable, therefore the visitor can navigate through the images with a keyboard and reveal the image text. But when the user disables image links, the elements are no longer focusable, preventing keyboard visitors from navigating through the images.
Elementor 3.13 fixed that issue by adding tabindex=0 attributes to make image elements focusable for focused navigation.
Progress Bar Widget
The Progress Bar widget allows the user to set a minimum value, maximum value, current value and text that describes the data in simple language.
In cases where the inner text was not provided, the aria-valuetext attribute is empty, resulting in an accessibility violation that also lowers Lighthouse / PageSpeed scores in the accessibility section.
Elementor 3.13 fixed this issue by not displaying the aria-valuetext attribute when empty. In addition, to provide additional context to screen readers, the attribute includes both the inner text and the current value.
Accessible Images
The image alt attribute is used by screen readers and other assistive technologies to provide information about the image meaning. Screen readers read the text aloud.
The Call to Action widget, Media Carousel widget, and Slides widget all display images. But they all use a <div> element with a background image, which doesn’t support alt attributes.
Changing the markup to <img> may break websites and styles, which is why Elementor avoids changing front-end elements markup.
To solve this issue, Elementor 3.13 added role=img to the images within those widgets, letting the device interpret the element as an image. Instead of the alt attribute, the element uses aria-label to describe the image. This change also has the potential to improve the page SEO.
Elementor Editor
Finally, the Elementor Editor itself continues to receive a lot of structural updates including accessibility attention. Improvements include semantic markup, ARIA attributes, landmark elements, accessibility for screen-readers & keyboard-users, and improved usability for non-mouse users.
These enhancements ensure that all web creators can benefit from the features found in the Elementor Editor, regardless of their abilities. In future versions we will keep improving accessibility, paving the way for simpler website creation workflow using keyboards and assistive technologies.
While widget markup changes may break some site’s styling, Editor markup changes don’t affect sites. These changes could only affect Elementor addon developers targeting specific elements in the Editor. We encourage addon developers to test their plugins and contact us if any compatibility issues are found.
Accessibility Improvements Feature
For further accessibility improvements, we encourage our users to activate the “Accessibility Improvements” feature from the “Features” tab in “Elementor” > “Settings” screen.
This is a stable feature activated by default for new websites. These improvements include markup changes of some widgets for better accessibility. It should be noted that these changes have a potential of breaking websites as some websites use custom CSS selectors that target HTML elements rather than CSS classes or CSS IDs, or JS that targets elements based on the element.
According to data shared by Elementor users, over 84% of websites that share their usage stats with Elementor, actively enable this feature. And the numbers are growing over time. Like any other experimental feature, when the feature is stable and the adoption rate reaches a certain threshold, it is merged into the core.
To improve web accessibility, we encourage website owners to activate this feature.
