Udi Dollberg

Breakpoint System Changes in Elementor v3.2.0

As we have published several months ago, we have been working on releasing a highly requested feature – additional custom breakpoints. Core 3.2.0 is another milestone in the road to achieve this goal AND achieve better performance overall in Elementor sites as part of the process. As detailed in our recent blog post, step one of our roadmap is:

Convert hard-coded usage of breakpoints (tablet, mobile, default) to a dynamic system that will utilize registered breakpoints (the two existing ones + future Additional Custom Breakpoints).

In essence, these changes, as well as a lot of UI changes and additions as listed in step 2, are all included in Elementor Core 3.2.0.

(more…) Read More »

Elementor v3.2: Additional DOM Improvements

In Elementor v3.0, we made the first step in optimizing the HTML output of Elementor pages. One of the steps in v3.0 was removing 3 wrapper elements from the Editor’s DOM output: .elementor-inner, .elementor-row, and .elementor-column-wrap.

The Optimized DOM Output feature is optional, and is configured as an Elementor Experiment. The two new wrappers being removed are also included within this experiment and will only be actually removed from a website’s markup if the experiment is active in that website.

In Elementor v3.2.0, we are continuing our optimization efforts and removing two more wrappers:

  • .elementor-image
  • .elementor-text-editor
(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 »

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 »

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 »

Migration of Modules from Pro to Core in Elementor 2.9

In order to support new features in Elementor, we are moving the Link Actions module and the Social Share JS library from Elementor Pro into the Core version.

Link Actions

The Link Actions module allowed attaching Elementor event triggers to button links. For example, a hash could be added to a button link to trigger the opening/closing of a popup.

Up until Elementor and Elementor Pro 2.9.0, Link Actions existed as an Elementor Pro module located in the elementor-pro/modules/link-actions directory. In 2.9.0, we split the Link Actions module up into two separate parts and moved it to the Elementor Core plugin.

PHP

The PHP part of the Link Actions module was moved to the elementor/includes/frontend.php file. The original method, create_action_url, was replaced by a new method called create_action_hash, which accepts two parameters: an action (to perform on click), and additional settings related to the action:
create_action_hash( $action, array $settings ).

PHP Examples:

Deprecated Implementation:

<?php 
\ElementorPro\Modules\LinkActions\Module::create_action_url( 'popup:open', [
	'id' => $settings['popup'],
	'toggle' => 'toggle' === $settings['action'],
] );

New Implementation:

<?php 
\Elementor\Plugin::$instance->frontend->create_action_hash( 'popup:open', [
	'id' => $settings['popup'],
	'toggle' => 'toggle' === $settings['action'],
] );

JS

The JS handler was located at elementor-pro/modules/link-actions/assets/js/frontend/frontend.js. moved to the JS utils folder at elementor/assets/dev/js/frontend/utils/url-actions.js. The handler runs by default on all elementor pages, scans links for actions, and if it finds any, it executes them. The script is mostly unchanged. Feel free to check out the source code in the GitHub repo.

JS Examples – Adding a link action:

Deprecated Implementation:

elementorProFrontend.modules.linkActions.addAction( 'popup:open',() => { 
// Do your action here
} );

New Implementation:

elementorFrontend.utils.urlActions.addAction( 'popup:open', () => 
{ 
// Do your action here
} );

Social Share (now Share Link)

The Social Share library enabled the integration of social sharing capabilities into some Elementor Pro widgets.

The library generates custom share links to a variety of social networks and exists both as an object on the global scope (object name: ShareLink), as well as a jQuery plugin (method name jQuery.fn.shareLink()).

Nothing has changed in the library’s functionality or the way it is used. To familiarize yourself with the library, feel free to visit the library’s source code on Elementor’s GitHub page: https://github.com/elementor/elementor.

Up until Elementor and Elementor Pro 2.9.0, Social Share existed as a library hosted in Elementor Pro (elementor-pro/assets/lib/social-share/social-share.js). In 2.9.0, we changed the file name to better reflect the library’s functionality and moved it to the Elementor Core plugin.

The newly named Share Link library is now located in elementor/assets/lib/share-link/

Read More »