Elementor and Elementor Pro 3.11 include several developer, performance and accessibility 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.
Responsive Sizes for Background Images
Websites performance is significantly impacted by images. The image size chosen may significantly impact page speed. That is why, in this release, we’ve invested a lot of resources on one of Elementor’s biggest issues – improving the performance of background images by enabling the user to choose the image size, per device.
Image Sizes
When uploading images to WordPress, the original full image is cut into four additional sizes – thumbnail, medium, medium_large and large.
However, it is not considered best-practice to display a 3000px image in a 280px area as this can impact page speed. However, until now the user couldn’t choose different image sizes for background images per device, and by default Elementor used the full size. Elementor 3.11 enables users to choose the image size for background images, per device.
Huge Performance Gains
As mentioned in previous posts, we are working with Google Chrome’s “Core Web Vitals” team to improve Elementor’s performance. According to their metrics, one of the biggest performance issues on Elementor websites are background images. Websites have been using huge images as backgrounds.
Selecting the image size that fits best for the website’s design per device, can improve page speed. However, please note that setting smaller image sizes will improve performance but may also affect the quality of the image.
Stable Experiments and Features
Elementor continues improving experimental features, making them stable and safe to use. In this version we integrated one feature into Elementor core and upgraded the status of three other experimental features.
Stable experiments are generally considered safe to use on live websites, though some edge-cases may still exist. Some experimental features can be considered early stage features that still require additional development and issue resolution.
As part of Elementor 3.11, the Experiment tab has also been renamed as “Features” to more accurately convey which features are considered experimental, as opposed to features that should be treated as having a feature flag, that users can choose when to activate.
New Stable Feature
The “Hide WP widgets from search” feature is no longer an experiment, being merged with the Core. This means that WordPress widgets will not be shown when searching in the editor panel. Instead, these widgets can be found in the “WordPress” category at the bottom of the elements panel.
Upgraded Experimental Features
The “Save as Default” experiment is now a “Stable” feature. This feature enables users to accelerate their workflow, and maintain consistency across their site by updating the widgets default styling and setting for future use. Please note, that this is still an experimental feature that requires manual activation.
In addition, we promoted the “Flexbox Container” experiment to “Release Candidate” (RC) status, the “Nested Elements” experiment to “Beta” status and we activated the “Loop” experiment by default for all new Elementor websites.
Measuring Performance Experiments Impact
Over the years, Elementor has released various performance experiments, and measured their adoption based on users who share anonymous data with us. This allows us to monitor which experiments are in use, but not how much they improve the site speed on live websites.
Google Tools
This is where Chrome User Experience Report (CrUX) comes into the picture. It can provide the tools to understand the true impact of each performance experiment at scale. The platform can find the correlations between different performance improvements and the website’s Core Web Vitals score.
To achieve this, Google needs data at scale. A transparent way for them to gather this data is to rely on HTTP Archive and its public data sets. HTTP Archive uses Wappalyzer to identify web technologies, including many popular WordPress plugins.
The Generator Tag
One of the methods used to identify web technologies is the basic generator meta tag <meta name="generator" content="...">. It’s a standard way used by many platforms to list the technologies running the site, including WordPress itself and a bunch of popular WordPress plugins.
In this release, Elementor will start updating the “generator” meta tag to include the Elementor version, all the active performance experiments, and all the settings that may affect page load:
- Experiments – Improved CSS Load, Optimized DOM output, Improved Asset Loading, Flexbox Containers, Lazy Load Background Images, Accessibility Improvements and Additional Custom Breakpoints.
- Settings – Google Fonts, Google Fonts Load, CSS Print Method
Disabling the Generator Tag
As mentioned above, other platforms use the “generator” meta tag to list the web technologies a site uses. WordPress performance lab plugin, for example, implements the same solution to provide information about the active performance modules.
The generator meta tag is a crucial method for gathering metrics at scale. While there is no real benefit in removing generator tags, some websites prefer to remove these tags. Elementor provides an easy way to disable the generator meta tag from the WordPress dashboard, Elementor > Settings > Advanced screen.
Upgraded Swiper Library Experiment
The swiper library was upgraded from version 5.3.6 to version 8.4.5. This library is used by Elementor to control various widgets – image carousel, slides, media carousel, testimonial carousel, reviews, loop carousel (in beta). The new version adds more features to the carousel capabilities providing additional functionality.
Who will be Affected?
To reduce bugs and compatibility issues, we released this as a new experimental feature, only active by default on new websites.
To smooth the transition, existing websites will remain with the older version. Websites that would like to implement new features from the upgraded library in the future, will have to navigate to the Elementor Features tab, and manually activate the experiment.
This is introduced as an experiment, as older sites may have tweaked their code, added styles or changed functionality. Forced upgrades may break those websites. Using an experiment will allow web creators to test their websites and remove incompatible custom behavior before activating the upgraded swiper functionality.
Transition Period for Addon Developers
Third party addon developers that rely on the older version, have enough time to make the required adjustments, like using swiper instead of swiper-container class.
W3C HTML Validation
Some of our users reported that in some very specific cases, pages created with Elementor fault the W3C HTML validation. This release fixed the issue by updating invalid HTML attributes making Elementor pages, once again, fully compliant with W3C standards and avoiding any validation errors.
Widgets Using Lightbox
In some cases, websites use widgets that provide lightbox functionality (e.g. the Video and Gallery widgets). In Elementor, this functionality is implemented using the e-action-hash attribute on HTML elements, which is not a valid attribute.
Here’s an example of how the attribute appears in the HTML code:
<div e-action-hash="value"> ... </div>
Valid HTML Attributes
Since the e-action-hash attribute is not a valid attribute, Elementor has resolved this issue by renaming the attribute to a valid data-* format. Specifically, the attribute is now called data-elementor-action-hash.
Here’s an example of how the attribute appears in the HTML code in Elementor 3.11:
<div data-elementor-action-hash="value"> ... </div>
By using the new attribute name, Elementor pages are fully compliant with W3C standards.
Aspect Ratio
To apply a width-height ratio to an element, Elementor uses different CSS/JS hacks, which used to be the best practice in the industry. With the introduction of the aspect-ratio CSS property, we decided to upgrade our code.
Elementor 3.11 made some under-the-hood changes that can reduce unused CSS, and should help improve cumulative layout shift (CLS) metrics. We achieved this by removing the CSS utility classes and obsolete JS solutions that calculated the element aspect ratio.
The Ratio Hack
In the past, web developers had few choices of CSS properties that set an element size. Usually the width and height properties were enough. But, as the web progressed, developers sought ways to apply fixed ratios between the width and height of an element (i.e. 1:1, 4:3, 19:9, etc.).
The industry adopted different hacks to recreate the ratio functionality using CSS properties like padding-top|padding-bottom or using JS. These hacks were popular as there was no official CSS way for creating ratios. Later, an official CSS property was introduced, but it was not fully cross-browser supported.
To address this, Elementor created several CSS utility classes for different ratios, each containing the padding hack. These CSS classes were loaded on all websites and used by different elements. The problem was that these CSS classes were loaded even when they were not in use.
Official aspect-ratio CSS Property
An official CSS aspect-ratio property was introduced as part of the CSS-Sizing-4 spec. Initially it was not widely adopted but in 2021 all major browsers worked together to make the aspect-ratio property cross-browser supported.
In Elementor 3.11 we replaced all the CSS utility classes with the aspect-ratio property, which at this point is widely adopted. We updated several Elementor widgets to create their own CSS instead of using the ratio CSS utility classes. This way, Elementor includes the aspect-ratio property only if it is used in the page.
Security Improvements
We updated the Elementor Coding Standards to include the “WordPress.Security” rules to strengthen Elementor security.
Coding Standards
Elementor Coding Standards (ECS) and WordPress Coding Standards (WPCS) are a list of PHP Code Sniffer (PHPCS) ruleset that checks the code. Using CS we improve code quality and code conventions.
IDEs use CS rules to highlight errors and rule violations. It helps developers to fix issues while writing the code. Automation tools use CS rules to highlight errors and rule violations before new code is merged to the repository.
New Security Rule
Elementor 3.11 implemented strict security rulesets enforcing super global input values validation sanitization, output escaping and nonce verification. These fixes make Elementor & Elementor Pro code more secure and prevent possible XSS attack vectors.
Multiple Accessibility Improvements
In recent years, accessibility compliance has become a major factor when choosing the tools that help create a website. In many countries, regulations require providing accessible websites, and more countries are passing stricter laws.
We know that many users need to ship accessible websites. As in previous versions, we continue to address accessibility issues. In this version we fixed several a11y-related issues.
Accessible “read more” Link in Post Widget
Some screen-reader users prefer to listen to a list of links and not the surrounding text. In that case, “read more” links, which are commonly used on websites, are not descriptive without the surrounding text.
The best-practice to solve this issue is to add an aria-label attribute to the “read more” link and include additional information. This way, screen-reader users have all the information, while disregarding the surrounding text.
We have added a new aria-label attribute to the “read more” link in the Post widget, which includes the post title, thus making these links and the entire website much more accessible.
Accessible Search Widget
Some website designs don’t have enough space to display a search box. For those websites, Elementor’s Search widget provides a full-screen mode that displays a small icon that opens up when clicked, into a full-screen modal that includes the search box.
Until now, this icon could only be opened using a mouse click. We changed that behavior and added the ability to navigate to the search-icon and open the search-modal using the keyboard. This improvement makes the full-screen search accessible.
Accessible Flip Box Widget
The flip box widget creates animated boxes that flip, when the visitor hovers over them. This feature presented a challenge for keyboard-only users as the content was not focusable and not reachable by simply pressing the “TAB” key.
We added the ability for screen-reader users that use the keyboard, to focus on each flip box element when navigating with the keyboard.
Accessible Popup Dismissal
The accessibility of popups was improved in Elementor 3.11. Visitors using a keyboard to navigate the page have the ability to focus on a popup’s inner elements while avoiding the “tab trap” – where a user can’t exit a popup using the “TAB” key.
When using keyboard navigation, visitors can use the “TAB” key to navigate regular focusable elements inside the popup. The popup can be closed in one of two ways – since the close button is now a focusable element, users can use the “TAB” key to navigate to the close button and hit “Enter” or they can use the “ESC” key to exit from anywhere else.
Copy & Paste Between Websites
We know that many of our users create websites for a living. The process is usually done in a development or a staging environment and then exported to a production website owned by the client.
In previous versions we introduced many improvements to Elementor’s import/export feature. Elementor 3.11 introduces a simple mechanism to copy entire Elementor designs and move them to external websites with a few mouse clicks.
LocalStorage vs. Clipboard
Elementor has a simple copy & paste functionality where you copy one element and paste it in another area or apply the style to another element. This functionality stores the data in the website’s Local Storage.
The issue with this API is that you can’t simply copy the entire page and paste it to another site. Because one website can’t access another website’s local storage data. This is a security issue enforced by all web browsers.
We could copy the data to the operating systems clipboard but web browsers are very careful with reading information from the clipboard because users can copy credit card information and passwords. To avoid scripts that listen to clipboard changes, Google Chrome allows reading clipboard data only after user consent. On the other hand, Firefox and other browsers block this entirely.
Some companies use middleware servers to transfer data from one site to the other, but those solutions create a possible attack vector that we prefer to avoid.
Simple Input Field
Elementor doesn’t interact with high level APIs, we use the browsers native functionality. We use a simple input field and listen to the element’s paste event. Then we make sure it’s an Elementor JSON and then we also make sure it has the Elementor signature. Several security measures are applied to validate the data.
When the data is verified, we use the existing import functionality developed in previous Elementor versions. The new cross-website functionality doesn’t add any new import/export functionality.
125 New Google Fonts
Google Fonts is an awesome resource for web creators that seek for interesting typographies. In this version we added an additional 125 (!) fonts to choose from. Although it’s not a developer-related update, it’s worth sharing as Elementor makes it simple to choose a font with a simple select box.
Please make sure using Google Fonts does not violate your country’s privacy laws. And if it does, you can disable Google Fonts from your WordPress dashboard, by going to the Elementor > Settings > Advanced screen.
To Conclude
Each major version adds new features while improving existing ones. Elementor 3.11 is not different, this release has performance improvements, security improvements, accessibility improvements and more.
By upgrading to the latest Elementor versions your website becomes faster, more secure and more friendly for assistive technology.
All this couldn’t be achieved without your help because we are a data-driven company so keep sending requests for new features, keep reporting bugs and keep sharing your thoughts on social media, it drives us to improve our products.
