In this article we wanted to cover everything that Elementor has included in the recent Version 3.0 beta release. Since Elementor 2.0 was released back in April 2018, the development team behind it has been working hard on bringing the next version of the plugin. It's finally here so we wanted to take a deep dive into the back end of the plugin and see what changes they have implemented.

First, this beta release is coming in two phases. This article is discussing the first phase which was released June 7th 2020.

Information and images in this post are sourced from https://github.com/elementor/elementor/issues/11821

The Theme Of 3.0

The main theme of the 3.0 beta release is a design system. The team is trying to add a collection of global management panels that allow you to change the overall theme and branding of your specific website. These features are primarily to increase the efficiency of workflows, and if implemented properly they'll save everybody a lot of time.

In the GitHub design page, here's how the team defines website design system:

“For those of you unfamiliar with the term, a Website Design System is the single source of truth that groups all the elements that will allow the teams to design, realize, and develop a website.

You have all your website design components built-in - so your entire team is synced and your website is 100% consistent, all the time.”

There were four major changes introduced in Elementor 3.0 beta phase one.

• Global Colors
• Global Typography
• Global Settings (including Site Identity, Lightbox settings and more)
• Site Editor (a Pro feature that will be introduced soon)

Let's do some exploring.

Global Settings

This feature is designed to give you a central location when it comes to editing websites with Elementor. The main idea behind it is to remove the need to toggle between the customiser, theme code, and additional backend files. This page gives you all the tools that you need to make major customizations of your website in one place. A good way to think about this is the WordPress customiser, reskinned, re featured, and in the Elementor editor.

Global Colors

You may be thinking, “don't they already have global colors built in?”

You would be correct in your assumption, but that was fairly limited in what it could do. The default colors setting in the current version of Elementor helped you manage your site's color palette. However, when it came to applying the color palette two elements on the website, you didn't have much control.

Global colors allows you to control where specific (global) colors are applied. under the hood, it uses CSS variables to globally apply colors to specific elements on your website. For example, if you want to change the default color of all icons on the website, you can now do that through the global colors interface.

Officially, here's how the team defines the current version of global colors (which is actually called theme style) and the new integration of global color:

Global Typography

Global typography follows the general ideology presented in the previous section of this article. It allows you to globally specify which fonts you want to apply to specific font elements on your website. For example, if you want to change the general font used in an animated headline, you can do that from this interface. If you want to change an H1 font, you can also do that.

It will allow you to apply all of the styling that you can find in the turn typography settings when editing any type of font in Elementor.

That means that you can change colors, font families, weight, size, and more.

Site Identity, Layout and Lightbox

The site identity is a welcome addition to Elementor as it basically takes all of the things that you can do in the Appearances -> Customize interface and brings them to the Elementor editor. That means that you can stay within the editor to make all necessary changes to your WordPress website.

The listed features stated in the Github Page are Logos, Favicons, and more. You can also globally manage the styling for your page layout and Elementor lightbox.

The continuity means that your workflow will speed up and become more efficient.

Performance Changes

Unfortunately, this version is not focused on increasing the performance of Elementor and decreasing front end page load times. This is a pretty big issue that we would have liked to see addressed.

DOM Improvements Ahead! HTML Wrappers Removal from v3.0 - Elementor Developers

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.

However, the team is moving in the right direction by minimizing the number of classes and div wraps. this makes the Dom smaller, and results in a minimal performance increase:

Tweak: Removed .elementor-inner, .elementor-row and .elementor-column-wrap from DOM output to improve performance (#7351, #7817, Developers Blog Post)

The first section of the photo displays the current markup for a section (That's a lot going on for a simple div container).

The second section shows the new and improved markup for this section.

Definitely a welcome step in the right direction!

Because they are removing some classes, this could result in breaking changes when you update from Elementor version 2.10 to 3.0.

Coming in Phase 2

From Github: Site Editor (a Pro feature that will be introduced soon)

There's pretty much no information about what this is , but it sounds pretty cool and we're excited to see what it has to offer. It looks like this site editor feature is going to be released in the second phase of the 3.0 beta.

What We’d Likes To See (but isn’t happening)

We would have liked to see some additional changes and improvements made to the base editor. For example, many of the widgets could be optimized to result in a faster loading website. The development team behind Elementor has stated that they do plan on improving the current widgets, but that's not the central focus of this version release.

We would have also like to see a lot of mini tweaks such as custom breakpoints, better Web P support and some additional development oriented changes. It's very unfortunate that they're not focusing on performance for a major release and makes us think that we'll need to wait for a version 4 to see necessary improvements.