This August 2020, the Elementor team released the newest version of Elementor: Elementor 3.0. The precise release date was around August 25, referring to the announcement on its official blog post. The first release of the newest version didn’t go the way they expected as some users experienced some issues with their sites after the update. In a matter of hours, the Elementor team fixed the issues and released the newer versions (hats off for the Elementor team for the very fast response). At the time of writing (August 30, 2020), the newest version available is version 3.0.3 for Elementor Free and version 3.0.1 for Elementor Pro.
Elementor 3.0 is arguably a major update given that it comes with some brand new features. The key features introduced offered by Elementor in this version:
- Design System
- Theme Style
- Site Settings
- Brand New Theme Builder
In this article, we will thoroughly cover the new features offered by Elementor 3.0 and how they can help you save much time in getting a website done.
New features on Elementor 3.0?
Elementor 3.0 was released with one main mission: to help professional web designers (and developers) to get their projects done more quickly in a professional, efficient way. The mission is accomplished by offering a Design System, one of the features introduced on Elementor 3.0. This feature (Design System) consists of several components. It allows you to control the typography, colors, site identity, layout, and lightbox from a single place called Global Settings panel.
Meanwhile, the brand new Theme Builder feature allows you to control every single part of your website — header, footer, single post layout, archive, 404 page, WooCommerce pages — in a single screen.
Here are the new features offered by Elementor 3.0. Please note that in this article, we will focus on covering the visible areas. We won’t cover the performance improvements aspect (which is also promised in version 3.0) as it will take complex testing to prove.
This is might is a strange term for you, especially if you only build websites for yourself. What is a Design System?
To make it easier to understand the term, let us tell you a brief story. In the professional world — in some cases — web designers only create the design concept using a design app like Sketch, Figma, Adobe XD, or a similar app. The design concept (often called Style Guide) governs the use of typography, color scheme, the forms of buttons, and other elements of the design. The execution of the design concept is the developer team’s responsibility.
Now imagine if the website consists of tens of pages. How long it takes to revise the pages if there are some revisions of the design concept. Not to mention other parts like the header or footer. This is how a Design System comes into play. You can make the changes to the pages (such as color, typography, and so on) from a single place. A single change will be applied to all pages on the site.
The concept of Design System also makes sure your website has a consistent color scheme and typography. The concept also offers simplicity to build a website, which is great if work for a web agency or a freelance web designer/developer.
The Design System of Elementor itself consists of 2 components: Global Colors and Global Fonts. You can access them via the Elementor Global Settings panel by clicking the three-line icon (the hamburger icon) on the top-left corner of the Elementor editor.
As you can see, the PUBLISH/UPDATE button will turn to blue (from green) as you access the Global Settings panel. The blue UPDATE button indicates you are on the Global Settings panel, while the green PUBLISH/UPDATE button indicates you are on the regular Elementor settings panel.
By the way, Design System is available for both Elementor Free and Pro. Here are the components of the Elementor Design System:
When building a website, selecting an appropriate color is one of the tricky tasks. In web design (and other designs at large), color represents the brand identity. In order to have a color scheme that really represents a brand, designers often make some experiments with color combinations. In the context of web design, it’s not funny at all to edit all pages only to apply the new color as it will consume a lot of time.
The Global Colors feature of Elementor allows you to apply new color in several pages at once from a single place. Even if the pages already published. Or, you can also apply the new color to some parts on a page.
How to use Global Colors
Elementor offers 4 default global colors and you can also create new ones yourself. To create a new global color, open the Global Settings panel by clicking the hamburger icon on the Elementors settings panel. Select Site Settings.
Once the Global Settings panel opens, click Global Colors on the DESIGN SYSTEM section.
Click the ADD COLOR button to set a new global color. To make it easier for you to identity each global color, you can name your new global color. Once done creating new global colors, click the blue UPDATE button.
To use a global color on a design element, you can simply add a new widget or edit an existing one. Change the color from the Style tab just like usual. Click the globe icon and select one of the existing global colors.
In addition to widgets, you can also use a global color as the background color of a column, section, and other design elements of Elementor.
To change the color of a global color, you can simply go to the Global Settings panel and select the new color you like. The change (new color) will be applied to all design elements that use the associated global color. In a single click!
Same as color, a font can also represent a brand identity of a website. Thus, font selection is also a crucial step when it comes to website building. In Elementor, there are some widgets that involve typography settings. From the Heading widget, Text Editor widget, Button widget, Form widget, and so on.
In addition to the color scheme, a good website is the one that has a consistent typography setting, especially the font family. For certain sections — such as the heading text — you can use the same typography setting on all pages that contain a heading text. Using a global font allows you to change the typography of a certain section, say the heading text, on all pages at once. Just like a global color. You can change the typography setting from the Global Settings panel.
The use of Global Fonts is quite similar to Global Colors. You can open the Global Settings panel and select Global Fonts. By default, there are 4 global fonts you can choose from. To edit a global font, you can simply click the pencil icon on the associated global font.
You can set things like the font family, font size, font weight, font style, and so on. Don’t forget to click the blue UPDATE button every time you make new changes.
To use a global font, you can simply add or edit a widget that has a typography setting option such as the Heading widget, Text Editor widget, Button widget, and so on. On the Typography option, click the globe icon and select a global font you want to use.
Now you can go to the Global Settings panel to change the typography setting of a certain section of pages on your site. The change will be applied to all pages that use the associated global font.
Theme Style is another feature to streamline your workflow to get things done more quickly. You can also access this feature from the Global Settings panel. This feature allows you to create presets for four design elements:
- Form fields
As we mentioned earlier above, some web developers work based on a Style Guide. With the Elementor Theme Style feature, you can create presets for four essential elements on the list above. For instance, you can create a preset for the button element. This way, every time you want to add a button element on any page or a certain section of the page, you don’t need to set the styling from scratch. Save time!
Theme Style works in a different way from Global Colors and Global Fonts. They are not linked to each other. You can make some changes to a certain widget on a certain page and the changes won’t affect the widgets on other pages.
To create a preset, you can go to the Global Settings panel. Select an element you want to create the preset of on the THEME STYLE block. Click the blue UPDATE button to update the preset once you are done styling up the element.
Version 3.0 insists the Elementor another mission to become a complete WordPress-based site builder tool, instead of just a page builder. No matter the WordPress theme you use, you will be able to set some essential things like site identity (site name, site description, site logo, and favicon), default background, default layout, and lightbox. If you use Elementor Pro, you can also set custom CSS before you start working on pages.
You can do all things mentioned above via Site Settings, which you can also access via the Global Settings panel.
The Elementor Site Settings feature is pretty similar to WordPress theme customizer (Appearance -> Customize). With this new feature, you can control the essential things of your WordPress-based website via Elementor.
New Theme Builder
One of the reasons why Elementor has become the most popular page builder plugin (with 5 active installs and still counting, of course) is because it comes with a Theme Builder feature. This feature allows you to create custom templates for site parts like header, footer, single post template, archive pages, WooCommerce pages, and so on. You can do so without touching a single line of code. Everything is drag and drop, with Elementor’s very intuitive editor.
Theme Builder itself was introduced in Elementor 2.0 (which was released in 2018). Before version 3.0, Theme Builder can be accessed via the WordPress dashboard by going to Templates -> Theme Builder. In version 3.0, you can still access Theme Builder via the same route, but you will see a brand new interface as follows:
In Elementor 2.x, you will be presented with the following interface when accessing the Theme Builder feature.
The Theme Builder interface in Elementor 3.0 is way better than the old versions. As you can see on the GIF above, your theme parts are visually previewed as you click each tab on the left panel. From here, you can also directly edit the existing custom templates, export, delete, or rename.
To create a new template, you can simply click the blue plus button on the theme part you want to create the custom template for. Or you can also click the Add New button on the upper-right corner.
By the way, the new Theme Builder also offers an instant display condition edit, allowing you to assign a certain template to other parts of your site quickly. The concept is pretty similar to WordPress’s Quick Edit default feature.
The very thing good is, Elementor doesn’t change the creating process of the templates. You can still create the template via the Elementor intuitive editor. Once you are done, you can still set the display condition just like before. The new Theme Builder only changes how you organize your templates, not the way you create them.
The new Elementor Theme Builder is really something else, way ahead.
The Verdict — Elementor 3.0 Review
Elementor 3.0 is a major release. It brings some new features to break the traditional patterns in website creation. You don’t need to go anywhere to create your site as everything has been provided in the same place: The Global Settings panel. From this panel, you will be able to access everything we have covered above, including:
- New Theme Builder
- Site Settings (Site identity, layout, lightbox, background, custom CSS)
- Design System (Global Colors and Global Fonts)
Elementor 3.0 is a great release. It introduces a new creative, more efficient way to create a website with WordPress.
One thing we expected that is not fulfilled by this release. We really hoped the Elementor 3.0 would offer more controls to customize the post content (via the Post Content widget) when we create a single post template. We hoped that we would be able to control the typography of the heading elements (h2, h3, h4, h5). At the time being, we can only control the typography of the main body text.
But overall, Elementor 3.0 is a great release. It introduces a new creative, more efficient, and fun way to create a website. This release puts Elementor way ahead of its competitors.
One last thing. Since Elementor 3.0 is a major release, we strongly suggest you backup your site before updating just in case something wrong happens during or after the updae.