Elementor Developers Blog

Elementor 2.7: Moving Sliders from Slick to Swiper

Elementor has been using the Slick Slider library for various widgets and core functionality since the plugin’s early days. In addition to Slick slider, we also gradually introduced another slider library into Elementor, Swiper Slider. Elementor and Elementor Pro have been using Swiper for several widgets and other core functionality, such as lightbox gallery (browsing through an image gallery in lightbox mode).

Why we’re switching

Since we have been using both slider libraries in conjunction for a while, we could compare our experience with each of them in terms of performance, ease of use, and more. Swiper has proved itself to be more flexible, more performant, and more suitable for Elementor users’ needs.

In terms of loading speed and performance, using two different slider libraries simultaneously is inefficient. That is why we have decided to deprecate our usage of Slick slider.

(more…) Read More »

Elementor Pro 2.7: Custom Fonts `font-display` support

Elementor Pro 2.7 will add support for the font-display property which defines how font files are loaded and displayed by the browser.

This feature was widely requested ( #5993 ) so it is implemented with a default value of auto which is the equivalent to not having it at all.

You can now modify the value to block,swap,fallback,optional via a filter we added, ex:

add_filter( 'elementor_pro/custom_fonts/font_display', function( $current_value, $font_family, $data ) {
	return 'swap';
}, 10, 3 );

After adding the code above, you will need to regenerate the CSS via Elementor > Tools > Regenerate CSS on your WordPress Dashboard.

This will set all Elementor Pro Custom Fonts font-display to swap.

As can be seen, the filters’ callback accepts 3 arguments:

  • $current_value – (string) defaults ‘auto‘ the value filtered.
  • $font_family – (string) the current font family.
  • $data – (array) the current font data config.

You can use that to set different values based on your needs, ex, change only font family named ‘Lobster’ font-display to block:

add_filter( 'elementor_pro/custom_fonts/font_display', function( $current_value, $font_family, $data ) {
	if ( 'Lobster' === $font_family ) {
		$current_value = 'block';
	return $current_value;
}, 10, 3 );

Trouble shooting:

If you add your custom filter to alter the font-display property after you have uploaded you custom fonts, you need to regenerate the font-face CSS, which can be easily done by:

  1. Head over to the Custom fonts screen at Elementor > Custom Fonts. 
  2. Edit the custom font you want to regenerate (simple edit and update, no changes are needed).
  3. Repeat step 2 for each font you want to regenerate.
  4. Head over to Elementor > Tools > click on the Regenerate Files.

This needs to be done every time you change the value of font-display via this hook.

Read More »

Elementor 2.7: Background Video in Mobile Mode

Elementor has enabled adding videos as a background for sections for a long time now. 

In desktop mode, this worked great. In mobile mode, since mobile browsers blocked the autoplay feature for embedded videos, we hid the video backgrounds simply by giving the video container a CSS attribute of display: none.

This worked great, up until a few months ago, when several mobile browsers started to loosen their policy on blocking video autoplay. Unfortunately, this caused hidden videos to auto-play sound. Since we hide the video display itself, this was confusing for Elementor users and especially for mobile visitors of Elementor-based websites that used the background video feature.

Some developers and advanced users took advantage of this policy change in their websites by overriding our display CSS attribute with a display: block value, so their embedded videos are displayed in mobile as well. 

Starting from Elementor 2.7.0, such manipulation on the video container will not work. Due to this policy change by a variety of mobile browsers, we decided to change the way we remove background videos from mobile mode. Instead of simply hiding the video content with display: none, we will be removing the video content completely in mobile devices.

Since we learned that many users want the option to show the background video in mobile as well, we will also add an option (a toggle in the settings panel) to enable showing the background video in mobile mode. However, it is important to note that since not all mobile browsers allow video autoplay, video section background might not work on all mobile devices (in blocking browsers, users will probably see a black screen).

Read More »

Elementor 2.7: New Editor JS API ($e)

We are working on a new JS API for Elementor to make everything simpler and to have better capabilities.

As a part of the new JS API integration, in Elementor 2.7.0, the Editor UI will use parts of the new API.

To make sure that Elementor and Elementor Pro will continue to play nicely together, anyone running Elementor Pro MUST update Elementor Pro to v2.6.3+ prior to upgrading Elementor to 2.7.

We don’t foresee any issues arising from this implementation with any 3rd party plugin, but with that said, any 3rd party plugin/theme extension developer that implements tweaks to Elementor Library or listening on changes between screens in the panel should double-check and see that everything is running smooth.

Read More »

Query Control Autocomplete Refactoring


Standardize the way the various widgets access the Query-Control Module’s autocomplete & show-title functionality.

Audience: widgets developers.

This change was introduced in Elementor Pro 2.6.0.
The old API is deprecated and will be declared “end of life” in Elementor Pro 2.10.0 or 3.0.0 (whichever is earlier).

(more…) Read More »

Building a simple Custom Widget with Javascript

Are you building a custom Elementor widget, and looking to add some Javascript functionality to it? You’ve come to the right place. Elementor has a best practice for adding Javascript handlers to custom widgets, which we are going to cover in this blog post. We will build a simple, Javascript-powered widget together, explaining every step of the process.

In addition to this blog post, our Developers site also has official documentation on adding JS to widgets.

(more…) Read More »

New Control: Icons

Elementor 2.6.0 is just around the corner and with it, we are introducing a new Icons control which loads the new Elementor’s homemade Icon Library.

This new control allows easier upgrading of Font Awesome versions while supporting older versions for backward compatibility. On top of that, it introduces support for SVG icons and in the near future, will support custom icon font libraries.


Start by adding the control to your widget in the widget’s class _register_controls() method, just like any other control in Elementor.

protected function _register_controls() {
			'label' => __( 'Icon', 'text-domain' ),
			'type' => Controls_Manager::ICONS,
			'default' => [
				'value' => 'fas fa-star',
				'library' => 'solid',
(more…) Read More »

v2.6.0: Planned Deprecations

Hello everyone – we are getting ready to release version 2.6.

From now on we will update every time we release a new version of Elementor & Elementor Pro.

Here is the planned deprecations:

(more…) Read More »

Never miss an update
Subscribe to our developer’s newsletter for every latest update