Blog

New Experiment: Optimized Asset Loading Mode

In the upcoming Elementor v3.1.0, we created a new “Improved Asset Loading” mode, which reduces the amount of JS code loaded on the page by default. When activated, parts of the infrastructure code will be loaded asynchronously, only when needed.

Which Functionalities Already Support the New Improved Asset Loading Mode?

1. Widget JS Handlers

Up to Elementor v3.1.0, all widget handlers were loaded to every page by default, regardless of whether they are actually used on the page.

Starting in Elementor v3.1.0, when the “Improved Asset Loading” mode is active, each widget will dynamically load its handler, only when being used on the page.

(more…) Read More »

A New Method For Attaching A JS Handler To An Element

In Elementor 3.1.0 version, we created a new method for attaching a JS handler to an element.

Up to Elementor 3.1.0, in order to attach a JS handler, we used a hook called addAction, and passed a function to it (addHandler):

const addHandler = ( $element ) => {
	elementorFrontend.elementsHandler.addHandler( ElementHandlerClass, {
		$element,
	} );
};
 
elementorFrontend.hooks.addAction( 'frontend/element_ready/your-element-name.default', addHandler );

For more details, see here.

(more…) Read More »

The Road to Additional Custom Breakpoints

At Elementor, we pride ourselves on listening to user requests. In fact, roughly 80% of all features have been developed based on such requests. Additional custom breakpoints have been at the top of the list for quite some time.

We are determined to  ship this feature, but we want to do it right. This post shares some of the constraints that we are currently dealing with to make Additional Custom Breakpoints ready.

Before we delve into the challenges, we want you to know that Additional Custom Breakpoints are coming! We are continuing our efforts towards a robust and reliable Additional Custom Breakpoints solution, and plan to ship it as soon as it’s ready.

(more…) Read More »

New Developers Feature – Compatibility Tag

As part of its being an open-source project, Elementor includes an extensive developers API, enabling the creation of a vast eco-system of 3rd party extensions that build on and enhance Elementor’s capabilities.

However, there are aspects of Elementor’s codebase that are not officially exposed and/or documented in our Developer Docs. From time to time, 3rd party extension developers utilize code from Elementor’s codebase which has not been officially exposed and documented. 

This can cause problems for Elementor users who also use such extensions, in cases where such 3rd party developers do not use Elementor’s code as intended, or fail to update their extensions to make them compatible with the latest versions of Elementor and/or Elementor Pro. In some cases, such incompatibilities also result in complaints to Elementor’s support department about issues that were not directly caused by our plugins.

(more…) Read More »

v3.1: Planned Deprecations

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

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

Here are the planned deprecations:

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.

(more…) Read More »

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 \Elementor\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 »

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