Elementor 3.15 Developers Update

Elementor 3.15 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 may have breaking changes.

---

Experiments & Stable Features

With the release of Elementor 3.15, we have integrated the accessibility improvements into the core. Additionally, several experimental features transitioned from their experimental “Beta” status to become stable features.

New Stable Feature

One of the notable stable features is the “Accessibility Improvements” experiment, which was initially introduced over two years ago in Elementor 3.1.0. This feature altered the HTML markup of the “Tabs” widget titles to enhance their accessibility for screen readers and other assistive technologies.

While this change had the potential to disrupt existing websites that relied on the old markup, the experiment allowed regular websites to activate the feature and make the Tabs widgets more accessible. Simultaneously, it provided sufficient time for other websites to update their custom code to align with the new HTML markup. Our statistics indicate that a significant number of users have activated this feature, affirming its stability and prompting its integration into the Elementor core by default.

Upgraded Experimental Features

In this release, we are pleased to announce that the “Global Style Guide” feature has been upgraded from “Alpha” to “Beta” status. This transition signifies significant progress in its development and indicates increased stability. On the other hand, the “Landing Pages” experiment has been downgraded from “Stable” to “Beta” status, as further enhancements are being investigated. 

The “Optimized DOM Output“, “Improved Asset Loading” and “Page Transitions” features, which were previously stable features, are now active by default on all websites. Previously, these features were only activated by default on new websites, while existing websites required manual activation. This change ensures that all Elementor users can benefit from these performance enhancements right out of the box.

---

SEO Improvements

Elementor constantly strives to provide you with more control over your websites. In this release we are excited to introduce enhanced SEO capabilities. Five widgets were expanded with new controls that allow you to easily modify HTML tags of title and description elements.

This exciting change empowers you to optimize your website even further for search engines. Instead of being limited to hardcoded HTML tags, you can now customize the <h1>–<h6>, <p>, <span> or <div> tags based on your specific needs.

Affected Widgets

The “Price List”, “Flip Box”, “Slides”, “Call to Action” and “Progress Bar” widgets all have new controls that allow you to choose the HTML tags for both the title and description fields.

We understand the importance of flexibility, which is why we added the ability to set wrapping HTML tags in various widgets. This highly anticipated update brings consistency to other Elementor widgets that already offer the option to choose wrapping HTML elements. 

Headings Structure

By allowing you to structure your pages effectively, this feature greatly enhances compatibility with search engines. It also simplifies the creation of structured heading hierarchies using a wide range of widgets.

With these improved SEO features, Elementor empowers you to take full control of your website’s optimization and improve the user experience. You can now easily customize HTML tags and ensure that your website is not only visually appealing, but also highly visible to search engines.

---

CSS Logical Properties

Elementor is committed to providing support for both LTR (left-to-right) and RTL (right-to-left) languages, which involves creating separate CSS files for each writing direction. However, this approach resulted in larger bundle sizes including regular *.css file and *-rtl.css files. To address this issue, we are gradually replacing CSS physical properties with CSS logical properties.

// CSS physical properties
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;

// CSS logical properties
margin-block-start: 0px;
margin-block-end: 0px;
margin-inline-start: 0px;
margin-inline-end: 0px;

While the refactor takes time, spanning across multiple releases, it aligns with modern web standards and ensures proper testing for backward compatibility. When the refactor is complete, you will be able to switch writing direction without reloading the pages, leaving the heavy lifting to the browser.

Refactor Status

The refactor process is divided into three parts: Elementor screens in the WordPress dashboard, the Elementor Editor, and all the widgets and frontend styles.

In the previous 3.14 release, a significant portion of Elementor’s screens in the WordPress dashboard has been refactored to CSS logical properties. This 3.15 release focused on refactoring the CSS within the Elementor Editor.

The remaining widgets and associated CSS that impact the frontend will be refactored in future versions. While ensuring a smooth transition towards modern standards, we are dedicated to upholding backwards compatibility, which  is why this final step may take longer to implement.

End Goals

By transitioning from physical properties to logical properties, we aim to eliminate the need for duplicate *-rtl.css files and create a more streamlined Elementor plugin.

This will facilitate easier copying of Elementor templates between LTR and RTL sites while only modifying the content and simplifying the translation to other languages.

Hopefully, this change will introduce additional capabilities in the future like supporting languages with top-to-bottom writing direction.

---

Deprecations – Schemes Deletion

With the release of Elementor 3.15, the schemes code has finally been removed.

Update: after the beta version release we had to revert some of the classes and methods at our partners’ request, to provide additional time to update their code.

From Schemes to Globals

Since its initial release, Elementor incorporated the schemes mechanism, which provided a way to set default colors and typographies. Each editor control could set its default value from one of these schemes.

However, this mechanism had limitations, offering only four options – primary, secondary, text, and accent. In Elementor 3.0, it was replaced with the site global feature, which allows users to define limitless options.

Long Deprecation Period

Elementor 3.0 deprecated schemes but retained them in the codebase for backwards compatibility, giving addon developers sufficient time to update their code by removing schemes and transitioning to globals. Now, after 15 releases, twice the typical number of releases we wait before deleting deprecated code, Elementor 3.15 finally removes the schemes code.

Migration from Older Versions

Previously, upgrading your code from older versions to Elementor 3.x involved utilizing the migration script in Elementor > Tools > Version Control to migrate from 2.x to 3.x. However, this option is no longer available in Elementor. For older websites, it is necessary to update to Elementor 3.0-3.14, run the migration, and then upgrade to the latest version.

Part of Our Deprecation Process

The removal of schemes from Elementor is a significant step in our deprecation process. We believe that three years is enough time for addon developers to migrate their addons from schemes to globals, enabling a seamless transition to the latest version of Elementor.

By embracing globals, Elementor continues to evolve and offer more powerful and flexible customization capabilities. Stay tuned for further updates as we strive to provide an even better web design experience.

---

Elementor Deprecated Code Detector

To ensure addon developers can keep their code in line with the latest Elementor updates, we introduced the “Elementor Deprecated Code Detector” tool. While initially it was used to scan the top 100 Elementor addons on WordPress.org, this tool is available for anyone to utilize and scan their own code to identify any deprecated code.

To initiate a code scan, you need to install the required versions of Elementor and Elementor Pro. Developers can run the detector with any Elementor version. A simple scan can be executed by running the following command:

composer run scan:source

Upon completion, the tool will generate a JSON file that provides a comprehensive list of files utilizing deprecated Elementor code. The JSON file includes detailed information such as the type of code (e.g., function, class, method, constant), the version in which it was deprecated by Elementor, suggested replacement code (if one exists), and additional relevant details. Here’s an example of the JSON output:

{
    "sourcePath": "\/folder-name\/file-name.php",
    "details": {
        "type": "function",
        "name": "register_control",
        "version": "3.5.0",
        "namespace": "Elementor",
        "class": "Controls_Manager",
        "line": 513,
        "replacement": "Use `register()` method instead.",
        "file_path": "\/includes\/managers\/controls.php"
    }
}

This report aims to assist developers in identifying the specific code segments that require updating to align with the latest Elementor standards. By utilizing the tool, developers can ensure their code remains up-to-date and compatible with the evolving Elementor ecosystem.

---

Performance Improvement

WordPress relies on Gravatar for fetching profile pictures, as does Elementor. The “Author Box” widget simplifies showcasing post author data, including profile pictures. However, Gravatar’s fixed 300 pixel width image poses an issue for desired display sizes. Reducing image size with CSS negatively impacts site performance as the original image remains quite large.

Elementor 3.15 overcomes this limitation by empowering users to define the desired profile picture size retrieved from Gravatar servers. This minor but significant control optimizes your pages further.

While it may seem like a minor page optimization, it is crucial to consider that every millisecond counts when it comes to performance optimization. By efficiently managing the image size, Elementor enables you to further improve loading speed and overall performance.