Blog

How to (Properly) add a Repeater control to your Custom Elementor Add-On

Elementor has a special type of control called a Repeater, which can contain other controls.
Repeaters create sub-items that are usually duplicatable, deletable, and can be used for any element which includes repetitive functionality, such as list widgets (Price List, Icon List) and Carousels (Media Carousel, Reviews).
This blog post will explain and demonstrate how to create and use repeaters – the right way.
We will take a look at and analyze the Icon List widget, which is a very clear example of creating and using a repeater properly.
Repeaters are created in the register_controls() method, along with all of the other widget controls.
To create a repeater, initialize an instance of the Repeater class:
$repeater = new Repeater();

(more…) Read More »

CSS Rendering Performance Improvement in Elementor 3.0

Elementor has two ways for rendering website CSS: 

  1. Printing it in a <style> tag in the DOM
  2. Writing it to a CSS file that will be loaded with the page

The CSS written to files, for example, is completely static. It is printed once into a file, and that file is only updated when a change is made to the page’s content.

But what about dynamic content? Some dynamic content includes its own CSS, such as colors and images (when used as background-image values). Dynamic content, such as custom fields, is disconnected from the page’s content, and can be changed outside of editing the post or page in Elementor Editor. So what happens when dynamic values include CSS that needs to be printed every single time a page is loaded?

(more…) Read More »

v3.0: Planned Deprecations

Hey all! We are getting ready to release version 3.0.

Elementor 3.0 will introduce many changes to the way our users build websites with Elementor, and the way Elementor operates.

If you are a developer who extends Elementor please review the below changes to keep your plugin up and running.

Elementor 3.0 is a major release. We took the opportunity to introduce substantial changes and improvements to the infrastructure of Elementor.

Here are the planned deprecations (last update – 09/06/2020):

PHP

Functions & Methods

Soft Deprecation

When a function/method is in the soft deprecation phase, it means that the function/method will still work while it’s in this phase, but a comment will be placed in the code mentioning the upcoming deprecation.

Function / Method NameChanges Made
Controls_Stack::_register_controls()

Core Plugin
Replaced by: Controls_Stack::register_controls()

Located in: includes/base/controls-stack.php

Hard deprecation Version: 3.4.0

Deletion version: 3.8.0
Controls_Stack::get_style_controls()

Core Plugin
Replaced by: None

Located in: includes/base/controls-stack.php

Hard deprecation Version: 3.4.0

Deletion version: 3.8.0
Controls_Stack::get_active_controls()

Core Plugin
Replaced by: None

Located in: includes/base/controls-stack.php

Hard deprecation Version: 3.4.0

Deletion version: 3.8.0
Controls_Stack::get_scheme_controls()

Core Plugin
Replaced by: None

Located in: includes/base/controls-stack.php

Hard deprecation Version: 3.4.0

Deletion version: 3.8.0
Settings::update_css_print_method()

Core Plugin
Replaced by: None

Located in: includes/settings/settings.php

Hard deprecation Version: 3.4.0

Deletion version: 3.8.0
Skin_Base::render_date()

Pro Plugin
Replaced by: Skin_Base::render_date_by_type()

Located in: modules/posts/skins/skin-base.php

Hard deprecation Version: 3.4.0

Deletion version: 3.8.0
(more…) Read More »

DOM Improvements Ahead! HTML Wrappers Removal from v3.0

We are always looking for new ways to improve the speed and performance of Elementor websites.

This has been a long time coming. Lately, we have been receiving feedback from our users about the large number of wrapper elements we include in the HTML output of the website builder. The feedback stated that many of the wrappers are not necessary, and they increase the size of web pages and harm performance.

The presence of these wrappers is due to the diverse use of Elementor, the ability to use these selectors in various ways to customize your site, and the omni-purpose of Elementor as a solution for creating advanced websites visually.

Removing wrapper elements from the DOM contributes to more simplified code output, better readability and less complexity. A smaller DOM contributes to increases in speed and performance.

** Warning: Breaking Changes **

We have wanted to address this issue for a while now, and Elementor 3.0 provided us with the perfect opportunity to do so. Elementor 3.0 will bring many changes to the way our users build websites with Elementor, and some of these changes, including the removal of several HTML wrappers from our code, are potentially breaking. This means that when you update the Elementor version in your website from 2.x (or even 1.x, for some very out of date sites) to Elementor 3.x, your website’s appearance and/or functionality could break.

Interested in the changes coming down the road? Read more here

The Wrappers Being Removed

Without further ado, here are the classes of the wrappers being removed from Elementor in Elementor 3.0:

(more…) Read More »

v3.0 Updated Convention: Creating New Widgets (For Improved Performance)

As part of our effort to simplify and minimize the markup created by Elementor, we have decided to truncate the prefix we use for any Elementor CSS classes, from .elementor- to just .e-.

This move is joined by another important step in our journey of performance enhancement – reducing the number of wrapper HTML elements used by our widgets and by the system in general.

What does it actually mean?

In all of our new widgets, controls, and all-in-all system markup, we will be prefixing all of our classes with .e-.

We will NOT be changing pre-existing widgets, controls, or any other system elements, in order to allow for backwards compatibility and avoid causing serious problems in existing Elementor websites.

As opposed to the wrapper removal step, this is not a breaking change, so it’s not a big deal – if you see a change in our conventions, we just wanted you to let you know that it’s legit and share with you the reasoning behind it.

How does this affect me as an Elementor user or extension developer?

First of all, there is no need for you to make any changes to pre-existing widgets or system elements. If you are developing extensions that manipulate existing system elements, controls or widgets, and used the .elementor- prefix before – we recommend you to follow this guideline and start using .e- instead in your new developments.

Read More »

Elementor is Officially Dropping Support for Internet Explorer in v3.0

Elementor officially supported Internet Explorer 11 for front-end display (excluding the Editor) up until version 3.0. Starting from Elementor 3.0.0, it will no longer officially support IE 11 at all, not even for front-end display.

Why are we doing it?

Web standards and technology are constantly evolving, providing web developers with more features and better technology for creating websites and web applications. Modern Browsers like Google Chrome, Firefox, and even Edge (now Chromium-based), are constantly evolving with it, constantly being updated and improved upon. Do you know what’s not evolving, at all? Internet Explorer. Internet Explorer browser is old and outdated, and even Microsoft themselves say that using Internet Explorer is highly unrecommended. In addition, less than 3% of web traffic comes from IE browsers.

Why now?

Elementor has been already gradually introducing new widgets and features that utilize Modern web technologies and tools such as CSS Grid and CSS variables. In order to provide our users with a better experience using Elementor, as well as the ability to build faster, better-performing websites with more advanced features, it was inevitable that we would have to drop IE support completely, in order to proceed in the right direction.

How does this affect me?

If you or your target audience don’t really use Internet Explorer, this should not affect you at all.

However, If your target audience includes a large portion of Internet Explorer users, it might be a good idea to consider holding off on upgrading Elementor and Elementor Pro to v3.0.0 until you’ve made sure you have solutions that enable your site visitors to use your website conveniently.

Users who already upgraded don’t need to worry, simply use Version Control tool to downgrade back to an earlier version and everything should work as it used to.

Read More »

URI Protocols Handling Update

Elementor has now updated the way it handles URLs in the URL control.

From v2.9.11 and on, Elementor will use the use wp_allowed_protocols() function to handle allowed URI protocols in links. These protocols are often used to create a deep-link (i.e. a direct link to an app via unique protocol) to a 3rd party application (such as mailto: or tel:)

This means that from this version, only protocols allowed by this WordPress function will be available.

Examples of allowed URI protocols: mailto:, tel:, sms:, etc…

If you wish to add another protocol to your website, you will need to alter the function that retrieves the list of allowed protocols, and add your own protocol.

function allow_additional_protocol( $protocols ){
     $protocols[] = 'my-protocol';
     return $protocols;
}
add_filter( 'kses_allowed_protocols' , 'allow_additional_protocol' );
Read More »

Swiper Update to 5.3.6 & New Wrapper Class

In Elementor Core 2.9.0, we integrated an update to the Swiper.js library used in all of Elementor’s carousels (Core and Pro). Up to 2.9.0, the included Swiper version was 4.4.6. In Elementor 2.9, the Swiper library was updated to version 5. This version includes potentially breaking changes. Please read on for more information.

Why Did We Update?

As part of standard maintenance, we update our external libraries from time to time, including Swiper. Swiper 4.4.6 was released in December 2018, and many issues and features were added in the current 5.3.6 version.

Major Changes From Swiper 4.x

The biggest change, for Elementor, which was introduced in Swiper 5.0, was an inversion of the library’s breakpoints system. Up until Swiper 5.x, the breakpoint system worked on a max-width basis: meaning, for a given breakpoint (say, 768px), a given setting would be implemented on all screen widths under 768px.

In Swiper 5.x, the library author changed the breakpoints system to work on a min-width basis. Meaning, for a given breakpoint (e.g. 768px), the given setting would be implemented on all screen widths above 768px. There used to be an option to actively invert the breakpoint system (an optional parameter), but the library author removed that option for reasons unbeknownst to us.

It is important to understand – this is a breaking change for anyone using the Swiper library for their custom widgets. Please read the entire article in order to be sure you take the necessary action to keep your Elementor add-ons working properly.

(more…)

Read More »

All Swiper.js Instances in Elementor are Now Exposed

Elementor uses Swiper, an external JS library, to power all of the sliders and carousels in the editor. Swiper has an extensive API which provides methods and events which can be utilized to control and manipulate the slider/carousel and its behavior.

Up until Elementor 2.9.0, the Swiper instances used in our widgets and other features were contained in our JS handler classes and not exposed in the front end. 

Following requests from our developer user base, we have decided to make all of the Swiper instances used in Elementor and Elementor Pro available in the frontend.

Swiper uses the class 'swiper-container' in the slider wrapper element. Starting in Elementor 2.9.0, the Swiper instance will now be available in the cache of this element’s jQuery instance. 

To access a slider or carousel’s Swiper instance, create a jQuery instance targeting the slider’s container, and query the element’s data cache with the key 'swipe'

How to Access a Swiper Instance

1. Add an image carousel to an Elementor page/post.

2. Edit the widget > Go to Advanced > Advanced

3. Give the widget a unique class name/ID in the “CSS ID” or “CSS Classes” field.

4. In your Javascript file, create a jQuery instance of the carousel’s 'swiper-container' element using the ID/class you chose and the 'swiper-container' class (replace #my-id with your ID/class):

const imageCarousel = jQuery ( '#my-id .swiper-container' );

5. Now, get the Swiper instance by querying your carousel instance’s data cache using the key 'swiper':

const swiperInstance = imageCarousel.data( 'swiper' );

The swiperInstance constant now holds a reference to our carousel’s Swiper instance. You can now call Swiper methods on this variable, add event listeners, and generally taking advantage of everything the Swiper API has to offer.

Usage Example

Here is an example code snippet you can use to change the active slide to the slide of your choice. Replace #my-id with your ID/class, and replace 0 with the slide number you want to change to:

const imageCarousel = jQuery ( '#my-id .swiper-container' ),
swiperInstance = imageCarousel.data( 'swiper' );
swiperInstance.slideTo( 0 );

Open the page with your image carousel (in the frontend), paste this into your developer console and run it to change the active slide to the slide of your choice.

Read More »

v2.9.0: Planned Deprecations


Hey all! we are getting ready to release version 2.9.0. Here is the planned deprecation list:


PHP

Functions & Methods

Soft Deprecation

Function / Method NameChanges Made
Controls_Stack::_content_template()
Core Plugin
Replaced by: Controls_Stack::content_template()
Located in: includes/base/controls-stack.php
Hard deprecation Version: 3.3.0
Deletion version: 3.7.0
Controls_Stack::_get_initial_config()
Core Plugin
Replaced by: Controls_Stack::get_initial_config()
Located in: includes/base/controls-stack.php
Hard deprecation Version: 3.3.0
Deletion version: 3.7.0
Controls_Stack::_init()
Core Plugin
Replaced by: Controls_Stack::init()
Located in: includes/base/controls-stack.php
Hard deprecation Version: 3.3.0
Deletion version: 3.7.0

Hard Deprecation

When a function/method is on hard deprecation phase, it means that the function/method will still work while it’s in this phase, but will add a PHP notice if the website WP_DEBUG property is set to true.

Function / Method NameChanges Made

Group_Control_Posts
Pro Plugin
Replaced by: Group_Control_Query
Located in: modules/query-control/controls/group-control-posts.php
In Soft deprecation since: 2.5.0
Deletion version: 3.3.0
Modules\QueryControl\Module::add_exclude_controls()
Pro Plugin
Replaced by: None
Located in: modules/query-control/module.php
In Soft deprecation since: 2.5.0
Deletion version: 3.3.0
Modules\QueryControl\Module::fix_query_found_posts()
Pro Plugin
Replaced by: Elementor_Post_Query:: fix_query_found_posts()
Located in: modules/query-control/module.php
In Soft deprecation since: 2.5.0
Deletion version: 3.3.0
Modules\QueryControl\Module::fix_query_offset()
Pro Plugin
Replaced by:  Elementor_Post_Query::fix_query_offset()
Located in: modules/query-control/module.php
In Soft deprecation since: 2.5.0
Deletion version: 3.3.0
Modules\QueryControl\Module::get_query_args()
Pro Plugin
Replaced by:  None
Located in: modules/query-control/module.php
In Soft deprecation since: 2.5.0
Deletion version: 3.3.0
\ElementorPro\Modules\LinkActions\Module::create_action_url()
Pro Plugin
Replaced by:  Plugin::elementor()->frontend->create_action_hash()
Located in: modules/link-actions/module.php
Deletion version: 3.3.0
(more…) Read More »

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