Elementor 3.19 Developers Update

Elementor 3.19 introduces a variety of features for advanced users and developers. This version drops support for PHP 7.3, upgrades the status for experimental features, merges stable features to core, introduces display conditions for elements, improves SEO and accessibility by displaying hints for missing ALT texts, adds additional units to all controls, introduces two new editor controls and much more.

---

Update Minimum Required PHP Version to 7.4

As part of Elementor’s Roadmap to Upgrade PHP Versions, Elementor continues the gradual transition to newer and faster PHP versions, dropping support for older unsupported versions. This release raised the minimum required PHP version from 7.3 to 7.4.

PHP Upgrades History

The gradual process of upgrading PHP versions spans across multiple releases. Elementor 3.17 dropped PHP 7.0, 7.1 and 7.2 support and set the new minimum required version to PHP 7.3. This release, Elementor 3.19, dropped PHP 7.3 support and set the new minimum requirement to PHP 7.4.

Security and Performance

Using the latest technologies on websites is vital for security and performance. Elementor is committed to provide a smooth transition to newer technologies on all its products, while giving our users the best experience possible.

Upgrade Your PHP

We encourage all users to update their server configuration to make their websites faster and more secure. Websites using older PHP versions will not be able to upgrade to Elementor 3.19 and above. WordPress’s upgrade process will not allow upgrading to newer Elementor versions as they are incompatible with older PHP versions to avoid issues.

---

Experiments and Features

With the release of Elementor 3.19, optimized DOM improvements have been  merged into the core, making the HTML much lighter. As more features became stable, two performance features transitioned to “Stable” status and an additional feature promoted to “Beta” status.

Merged Features

Introduced in Elementor 3.0, then further improved in Elementor 3.2 and 3.6, the “Optimized DOM output” feature boosted performance by decreasing the number of HTML wrappers for each element.

Removing wrapper HTML elements from the DOM simplifies code output. Less complexity means increased speed and performance. As of this version, this feature is now part of Elementor without the need to activate it.

Upgraded Features

The “Optimize Image Loading” feature, which was previously in beta status, is now upgraded to a stable feature. This change ensures that all Elementor users can benefit from this performance enhancement which applies fetchpriority="high" on LCP image and loading="lazy" on images below the fold.

The “Optimized Gutenberg Loading” feature, which was previously in beta status, is now upgraded to a stable feature. This change ensures that all Elementor users can benefit from this performance enhancement which reduces unnecessary render-blocking loads by dequeuing unused Gutenberg block editor scripts and styles.

The “Menu” feature, which was previously in alpha status, is now upgraded to a beta status. When the feature is activated, it provides the option to create beautiful menus and mega menus with new nested capabilities.

---

Display Conditions for Elements

Until now, Elementor Pro had the ability to set display conditions on the template level using the Theme Builder. This release adds the ability to set display conditions on the element level.

Display Conditions

With this new and exciting feature, web creators can display elements according to conditions and rules. This new ability means that websites will no longer have to load different templates based on conditional logic, as of now it will be possible to create a single template with multiple elements loaded conditionally.

New Possibilities

You can use time & date based-conditions to display different promotions on the page. You can also display different promotions based on the day of the week. You can display different content parts for anonymous or registered users. You can display different elements depending on the author of the page/post. You can display elements based on their post category/tag. You can display different elements based on the website from which the user comes from – display one promotion for users coming from Twitter and another promotion for users coming from Facebook. The possibilities are endless.

---

Editor Workflow Hints – SEO & Accessibility

This version adds hints in the editing panel for improving the SEO and accessibility of websites. When selecting images, Elementor will display a warning if an image is missing an ALT text. This will remind and help creators add ALT texts while building.

Streamline the Creation Process

When adding ALT text to an image, the website becomes more accessible and more optimized for search engines. However, web-creators usually check for missing ALT texts when the page is done, in most cases using external tools.

Elementor 3.19 streamlines your workflow, helping web-creators detect which images don’t have an ALT text while building the page. As of now, you will be able not only detect missing alts, but also fix them on the fly.

Support for Third-Party Addons

Elementor’s third-party addons ecosystem is very important. That is why the new Workflow Hints have been rooted to core Media Control and Gallery Control. This way, workflow hints appear not only on builtin Elementor widgets, but across all widgets, including third-party addons developed by external developers.

---

Additional Units To Remaining Controls

Elementor 3.10 added the ability to set custom units. Elementor 3.12 added units everywhere (to ~80% of controls). This version added additional units to the remaining controls, providing more options for creators to customize additional aspects of their websites.

You Control Your Units

Elementor uses unit-based controls in the editor for styling properties. The values of properties can be set with controls like the Slider Control and Dimensions Control. Previously, users could control the value of the style property, but couldn’t change the type of the unit.

In most cases, users didn’t even know what unit was in use. In other cases, limited options of units to choose from led to an increase in requests to add additional units in different controls.

As a platform, Elementor strives to provide web creators with the ability to make their own decisions based on their needs. Therefore, we have added custom units to all style controls across the Editor.

Mapping Missing Units

We mapped all the controls in the Editor where the user can adjust the sizing and dimensions of an element. In previous versions, controls that have the potential to break functionality were not updated. After extensive research, ~99% of unit-based controls have the option to change units or set custom units.

To avoid frustration, each control can only be set to units that work with that style property. For example, percentages can’t be used to determine the size of icons because the unit is incompatible with some rendering methods. In other cases, custom units can be incompatible with widgets that use CSS functions to calculate positions based on the set value. In these cases, Elementor doesn’t provide units at all, or provides a specific set of units.

---

New Editor Controls

This release adds two new UI controls into the Editor. The Alert control helps display static alerts in different panels, and the Notice control provides the option to display dismissible notices, making it an ideal tool to display one time messages.

Alert Control

Elementor now has a dedicated Alert control that offers a simple way for developers to display alerts inside Editor panels. The new control has the ability to set alert type (info, success, warning, danger), alert heading and content.

$this->add_control(
	'custom_panel_alert',
	[
		'type' => \Elementor\Controls_Manager::ALERT,
		'alert_type' => 'info',     /* info, success, warning, danger */
		'heading' => esc_html__( 'Custom Alert', 'textdomain' ),
		'content' => esc_html__( 'Lorem ipsum dolor sit amet consectetur adipisicing elit.', 'textdomain' ),
	]
);

Notice Control

While alerts are static and fully backwards compatible, the new Notice control offers a new style and the option to add a dismiss button to notices and save the data to the user meta table in the database, thus making sure the user will never see this notice again.

$this->add_control(
	'custom_panel_notice',
	[
		'type' => \Elementor\Controls_Manager::NOTICE,
		'notice_type' => 'danger',     /* info, success, warning, danger */
		'dismissible' => true,
		'heading' => esc_html__( 'Custom Notice', 'textdomain' ),
		'content' => esc_html__( 'Lorem ipsum dolor sit amet consectetur adipisicing elit.', 'textdomain' ),
		'button_text' => '',
		'button_event' => '',
	]
);

---

To Conclude

Elementor strives to improve all aspects of the site creation process. Whether adopting new server software to speed up your website, adding new functionality, improving user experience, or easy development for third party developers.