Elementor and Elementor Pro 3.10 include several developer-related updates. We recommend that you 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.
Custom Units
Elementor 3.10 enhances the unit selection feature that lets users change the default units. The new unit interface allows users to adjust the sizing and dimensions of an element using values that are not defined by the control. Users are no longer bound to choosing one of the standard pixels, percentage, EM etc. units of measure.
This custom feature lets the user use CSS keywords like initial, inherit, unset, max-content, min-content, fit-content, auto etc. In addition, it allows the user to use CSS functions like calc(), min(), max(), clamp(), trigonometric functions, var(), attr() or any other CSS function the user chooses to.
Setting Unit Controls
Addon developers can use unit-base controls in the editor, with controls like the slider control and dimensions control. These controls accept the size_units argument which allows the developer to set which unit to use in the control. For example, 'size_units' => [ 'px', '%', 'em' ] will allow the user to select either pixels, percentage or em units.
Developers can also use the range argument to set the value range for each unit type, or use the default arguments to set a default value.
Supporting Custom Unit
As of Elementor 3.10, addon developers can add support for custom units in editor controls. By adding the custom value to the size_units array, the control will receive the custom unit as a control option for the user.
Example usage:
$this->add_control(
'width',
[
'label' => esc_html__( 'Width', 'textdomain' ),
'type' => \Elementor\Controls_Manager::SLIDER,
'size_units' => [ 'px', '%', 'custom' ], /* New 'custom' value. */
'range' => [
'px' => [
'min' => 0,
'max' => 1000,
'step' => 5,
],
'%' => [
'min' => 0,
'max' => 100,
],
],
'default' => [
'unit' => '%',
'size' => 50,
],
'selectors' => [
'{{WRAPPER}} .your-class' => 'width: {{SIZE}}{{UNIT}};',
],
]
);
Stable Experiments
Elementor introduces several new features as experiments. While some experiments can be considered early stage features that still require additional development and issue resolution, others are labeled as experiments to enable users to decide which features they would like to make available on their website. Stable experiments are generally considered safe to use on live websites, though some edge-cases may still exist.
Upgraded to Features
Elementor 3.10 promoted four stable experiments to Elementor Core. This list includes the Color Sampler, Admin Top Bar, Favorite Widgets and Import/Export Website Kit. All these features have been stable experiments for a while and have no outstanding meaningful bug reports.
We should note that these features won’t affect a website’s functionality, they are connected to the Elementor Editor or backend services. Elementor addon developers should test these features with their own addon’s functionality.
Upgraded Experiment Status
Elementor 3.10 promoted the “Inline Font Icons” experiment to Beta status and the “Improved CSS Loading” experiment to Stable status.
We fixed many issues with the “Inline Font Icons”, allowing them to load inline SVG instead of icon-fonts (along with their related CSS). We are aware that some edge cases may still need to be addressed, which is why this experiment was only promoted to Beta status.
On the other hand, improved CSS loading is now considered a stable feature. We encourage Elementor users to start implementing this feature on production websites to see how it improves site performance. In essence, the experiment reduces the amount of CSS code that is loaded by loading the CSS inline, rather than in a separate file.
Enable/Disable Google Fonts
GDPR and other privacy laws in different countries may expose website owners to regulation violations. Since Google fonts may be in violation of GDPR regulations, Elementor 3.10 added the option to control whether or not to enable Google Fonts on pages built with Elementor.
New Settings Option
A new control was added to the “Elementor” > “Settings” tab on the WordPress dashboard , under the “Advanced” tab. In order to disable the website from loading Google fonts, you’ll need to disable the “Google Fonts” option which defines the CSS font-display property.
Websites that prefer disabling Google Fonts will display only seven system fonts in the Elementor Editor, removing the entire Google font online library. Elementor Pro users will also have access to additional fonts hosted locally, using the “Custom Fonts” feature.
Backwards Compatibility
Existing sites won’t be affected. But if you decide to disable Google Fonts on a site that currently uses Google Fonts, the font value will be returned to the “Default”. Meaning that Elementor won’t set any font-family, and it inherits the font from the theme, or you can choose one of the available system fonts.
Lazy Loading Google Maps
Elementor 3.10 introduces a new performance improvement that helps boost the initial load by using lazy loading on Google Map iframes. This tweak speeds up the initial page load by improving both LCP and FID metrics, and by reducing FCP.
Offscreen Iframes
The Google Maps widget utilizes an iframe to load and display maps. Often maps are not displayed in the visitor’s viewport, but only appear when the visitor scrolls down. Despite this, the widget loads as soon as a visitor reaches the page, slowing down the initial loading process.
The best way to speed up page load is to lazy load offscreen iframes using <iframe loading="lazy">. Chrome’s research showed that lazy-loading iframes could lead to 2-3% data savings, 1-2% First Contentful Paint (FCP) reductions, and 2% First Input Delay (FID) improvements.
Elementor’s Google Maps Widget
By lazy loading Google Maps iframes, Elementor defers the loading of offscreen iframes until the visitor scrolls near the map. This saves data, speeds up the loading of other parts of the page, and reduces memory usage.
Lazy Loading Images with Custom Sizes
To boost performance Elementor has already implemented lazy loading for almost any image uploaded to the media library. However, up until now, users couldn’t lazy load custom image sizes. Version 3.10 corrects this.
Images with Custom Dimensions
When uploading images to the WordPress media library, the original image file is saved as part of the media upload together with additional image sizes automatically generated by WordPress, based on the sizes defined in the “Settings” > “Media” tab on the dashboard.
Elementor Widgets that use the media control allow the user to select one of the predefined WordPress sizes. Widgets that add the image size control allow the user to select one of the additional image sizes generated by WordPress. But the control also offers the ability to create a new image with custom dimensions.
Images with custom sizes are generated by Elementor and saved in /wp-content/uploads/elementor/thumbs/ folder.
Lazy Loading Images
These images are not loaded using regular WordPress functions. Elementor loads them using a custom method. Up until version 3.10, this image markup didn’t support lazy loading.
Controlling Self-Hosted Videos Preload
Elementor 3.10 includes additional performance improvements for self hosted videos. Instead of loading the video during the initial page load, Elementor users can choose to defer the video file loading to when the visitor hits play.
Preloading Videos
Preloading is the process of loading certain elements of a webpage into the browser’s cache before they are needed. This can improve the performance of a webpage by reducing the amount of time it takes to load and display the content.
When optimizing video performance, we utilize the HTML <video> element and add the preload attribute. The preload attribute specifies whether or not the browser should begin downloading the video as soon as the page loads. The attribute can take three values:
auto: The browser should preload the entire video.none: The browser should not preload the video.metadata: The browser should only preload the video’s metadata (e.g., dimensions, duration, etc.).
The specification advises to set the preload attribute to metadata, that is why Elementor uses metadata as the default value for the video preload control.
Self-Hosted Videos
Videos are large files. Self-hosted videos are even larger as they don’t apply optimization techniques like YouTube, Vimeo and other video platforms. Elementor users can specify how the browser should load self-hosted videos.
A new preload control was added to the video widget, for self-hosted videos. It allows the user to specify the preload option to save bandwidth and further optimize the page performance.
Accessibility Improvements
Elementor Pro’s “Block Quote” widget and “Post Comments” widget both received markup updates to make them even more accessible for people with disabilities who use assistive technologies to navigate through the page. In those two widgets we replaced the <footer> tag with a simple <div> tag for better semantics.
Multiple Footers
When adding several block quotes to the page, the source code has several <footer> tags that can cause issues for assistive technologies users.
The <footer> element represents the footer of a section or page. It is typically used to contain information such as the content author, copyright information, or links to related documents. It is typically used to contain information about the content itself, not the source of the content.
Better semantics
It is generally better to use <div> elements or other appropriate semantic elements to represent the citation or attribution for the quote.
By removing multiple <footer> elements, it should make it clear to assistive technologies users what the purpose of the block-quote is in comparison to the overall webpage.
Conclusion
Elementor 3.10 continues to introduce new features for addon developers, such as the ability to add the custom units to your widgets.
In addition, as in every version, by upgrading to 3.10 your Elementor pages will have improved performance, as well as accessibility and privacy improvements. End users will enjoy a faster, more private and assistive technology friendly website.
