Elementor 3.12 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.
Minimum Required WordPress Version Update to 5.9
We have updated the minimum required WordPress version for Elementor, Elementor Pro and Hello theme. Previous versions had inconsistent minimum requirements, and now we have aligned the requirements across all products.
Aligning Requirements
Previously, Hello theme required WordPress 4.7 or above, Elementor required WordPress 5.0 or above, and Elemenor Pro inherited the minimum requirement from Elementor.
As part of this version, we updated the minimum required WordPress version for working with Elementor products to WordPress 5.9. All Elementor products are adopting the new threshold at approximately the same time, to enable you to update all the products at the same time.
Experiments & Stable Features
Experimental features are constantly being improved and stabilized. Elementor 3.12 integrated two stable features to core, making them safe to use on all websites. Other features graduated their beta status and are considered stable features.
Please note that Elementor considers experimental features as early stage features that may require additional development and issue resolution. On the other hand, stable features are generally considered safe to use on live websites, though some edge-cases may still exist.
Upgraded Experimental Features
In this release, the “Loop Builder”, “Page Transitions” and the “Upgrade Swiper Library” features have been upgraded from “Beta” to “Stable” status.
The “Accessibility Improvements” and the “Additional Custom Breakpoints” features, which were both stable features, are now active by default on all sites. Previously they were active by default only on new websites, and existing websites had to activate them manually.
New Stable Feature
The “Save as Default” and the “Form Submissions” features have been removed from the features panel and merged to Elementor. This means that these features will be available to everybody by default, without having to activate them manually.
UPDATE: In version 3.12.1 the “Form Submissions” feature merge to core have been reverted.
Custom Units Everywhere
Elementor 3.10 enhances the unit selection feature that enables you to change the default units, and set custom CSS keywords and CSS functions. Elementor 3.12 applies this feature everywhere, providing even more control over your design.
More Unit Types
Since the introduction of custom units, we have seen an increase in requests to add additional units beyond the simple pixels and percentage – units like REM, VW, VH in others areas that were limited.
We mapped all the controls in the Editor where the user can adjust the sizing and dimensions of an element. For consistency, we added pixels, percentage, EM, REM where they were missing. In addition, we added the custom unit selection everywhere! This improvement provides the option to set custom CSS keywords and functions.
Elementor Addon Developers
Both the Slider Controls and the Dimension Controls accept the size_units argument. Setting additional unit size improves the user’s control over their design, without impacting the Editor performance.
This is why we encourage Elementor addon developers to use additional unit sizes, and mainly the custom unit, wherever possible. The simple usage example: 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ].
Performance Improvements
Elementor 3.12 includes additional updates to make your website faster. This version focused on the Flip Box and CTA widgets. We managed to boost performance and improve the LCP score by lazy loading background images.
Flip Box & CTA Widgets
The Flip Box and the Call to Action widgets help users create beautiful animated elements with interactive effects. The issue with both of these widgets is that they use background images, not regular images, which is why the loading=lazy attribute could not be applied to them. In addition, background images are usually large and heavy images slowing the initial page load.
The lack of lazy loading leads to lower LCP score as the images load on initial page load, even if they are located below the fold. To improve the performance of the page, we defer the loading of background images to the moment the user actually scrolls down to the area containing the Flex Box and CTA widgets.
Lazy Loading Background Images
Elementor 3.9 introduced an experiment that lazy loads background images. Instead of loading the background images upon page load, Elementor uses the image dominant color as background-color, with a blur effect. Then, when the user scrolls down, the page fetches the background image. This helps the browser defer the image load to a later time and improves performance.
When looking at the bigger picture, Elementor managed to eliminate one of the biggest performance issues it had – background images. Together with other improvements, our test shows a higher lighthouse score in all the metrics we monitor internally.
Accessibility Improvements
To meet the required regulation compliance out-of-the-box, we continue to implement accessibility updates that improve your website’s accessibility when you update to new versions of Elementor.
The accessibility changes we introduced in the latest versions caused several agencies to reach out and suggest additional areas for accessibility improvement. Special thanks to Elchanan Levavi for his many suggestions. Some of his highlights have been implemented in Elementor 3.12 and many more will be introduced in Elementor 3.13.
Accessible Gallery Images
The gallery widget in Elementor Pro uses background images instead of <img> tags. To improve accessibility and help assistive devices to identify the images, we added the role="img” attribute to add implicit ARIA semantics, indicating that the element represents an image.
In addition, we exposed the image alternative text to screen reader users. Normal images use alt attributes to provide additional information to screen reader users. But as mentioned above, Elementor galleries don’t use <img> elements. To overcome this obstacle, and provide the image alternative text, we added aria-label tags to all gallery items, containing the image alternative text.
Gallery Widget Filter Bar
With the gallery widget you can create multiple galleries, where the visitor can navigate between galleries using a filter bar. Elementor 3.12 improves the markup of this section to make it more accessible for screen readers.
The container element has a new aria-label indicating that the element is a filter bar, enabling your visitors to understand the context. In addition, each of the elements inside the filter bar are now focusable with a button role, enabling your visitors to navigate through the galleries and filter them using a keyboard.
Accessible Dismissal Notices
Visitors who use assistive technologies to browse your website, can’t always see the surrounding context when navigating with their keyboard. A close button with a simple “Dismiss” or “Close” label doesn’t always clearly indicate what element they are closing.
Elementor 3.12 updates many of the dismissal buttons in the front-end, providing additional context to the element being closed – an alert (widget), popup, lightbox, full screen search-box etc.
Elementor Editor Facelift
The editor is adopting a new design system. The interface is being rewritten using the latest best-practices, improved accessibility, accelerated workflow, and enhanced capabilities. It’s a long term project, with several milestones and new features planned for coming releases.
Top Bar Experiment
The new Top Bar is an experimental feature in the Editor. It consists of common actions required for the site building process.
The central location at the top of the screen aims to improve the user experience and productivity by providing easy and quick access to common actions in the Editor. These actions include the publish button, widgets panel, page settings, site settings, structure panel (formerly known as navigator), history/revisions panel, user preferences, responsive breakpoints and others.
New Color Scheme
The most notable change is the Editor’s interface in the introduction of a new color scheme. The different Editor elements have been recolored and simplified. The colors are optimized for accessibility and better support for Light and Dark mode.
The new color scheme improves readability for users with certain types of color blindness and other similar conditions. The Editor implements AA level Web Content Accessibility Guidelines (WCAG).
New CSS Class Names
The different components in the Elementor Editor (including all the panels, controls and other entities) have been rewritten. The CSS classes are renamed, merged, simplified and optimized.
This is an internal change that affects the interface behind the scene. It’s like rebuilding your house walls, floor, roof and lighting without changing its appearance.
Most users won’t be affected but we do encourage Elementor addon developers that interact with the Editor in informal ways to test their addons with Elementor 3.12.
Popover Toggle Control
Elementor 3.12 aligns the support for the description argument in Editor controls. As of this release, 3rd-party developers can add descriptions to popover toggle controls in their Elementor addons.
Control description
Each control in the Elementor Editor has additional arguments that affect the control’s appearance in the Editor. Developers can set labels, description, separators etc.
For a long time the popover toggle control lacked support for the description argument. Elementor 3.12 fixes that with support for the popover description.
Usage
$this->add_control(
'border_popover_toggle',
[
'label' => esc_html__( 'Test Popover', 'elementor' ),
'type' => \Elementor\Controls_Manager::POPOVER_TOGGLE,
'label_off' => esc_html__( 'Default', 'elementor' ),
'label_on' => esc_html__( 'Custom', 'elementor' ),
'return_value' => 'yes',
'default' => 'yes',
'description' => 'Test popover description...' /* This works now */
]
);
$this->start_popover();
/* … */
$this->end_popover();In previous versions, the description wouldn’t be displayed. As of 3.12, the description will be displayed in the Editor.
Conclusion
Elementor 3.12 continues to improve existing websites, while also introducing new capabilities. In this version we introduce updates that boost performance, improve accessibility and enhance Editor controls used by addon developers. Experimental features have been stabilized and stable features merged to core. Additionally, Elementor is adopting a new look and the interface is being rewritten from the ground up.
As always, your help is valuable and real progress comes from genuine user feedback and bug reports. So keep reporting bugs and asking for innovative features.
Our development cycle has been accelerated significantly, and we try to deliver new features faster than ever before. Keep following our release notes because we have tons of new features to introduce.
