In August 2020, the Elementor team introduced the newest version of Elementor, Elementor 3.0. After fixing up all the issues that occurred with the first launch, the team of Elementor released an improved version which is now available in version 3.0.3 for Elementor free and version 3.0.1 for Elementor Pro and includes a whole new way to build and structure a website.
[toc]
Elementor 3.0 is considered to be a major update as it comes with brand new features. In this new version they included:
- Design system
- Site settings
- Theme style
- Brand new theme builder
In this article, we will go through the new features presented by Elementor 3.0 and how could they help save time in getting your website done.
Let’s dive in!
1. Design system
If you are wondering how big brands like Spotify, Apple, and Nike manage to provide a continuous, seamless experience across all platforms you have to look through the Design system. No matter the landing page, website page, banner, or asset you check, they all have the same look and feel. By using the Design System Features you will be able to implement a design system, organizing your workflow, and work with one consistent design language.
1.1. What is a design system?
A design system is the one that structures the base where a team works in order to design a website. For example, if you are building a website that has several pages, landing pages, and blog posts you will want to make sure that all your colors, fonts, and layouts across these pages and posts will stay consistent with one language.
By performing design system capabilities you are able to design and edit new or existing websites fast, cut through workflows and shorten time-to-market while supporting the brand and visual consistency.
1.2. Why is the new Design System important?
With this design system, you have all your website design elements built-in so your team and your website are 100% synched and consistent all the time.
Elementor’s design system features involve also:
- New site settings panel – it also includes site identity, lightbox settings, theme styles.
- Global colors
- Global fonts
Let’s check each of them and see how they will help you construct a more professional website.
2. Site settings
As the name suggests, Site Settings allows you to control your website’s appearance and change f.ex. your color palette, global fonts. and so on. More importantly, it allows you to customize your theme based on your identity and truly make the website your own.
To access Site Settings, go into Edit With Elementor, from your WordPress Admin Dashboard, and then you will find it in the Elementor panel on the left. When you are happy with your changes, remember to update your settings.
2.1. Global Colors
Elementor has 4 global colors that you can choose from but you can also create new ones yourself. In order to create a new global color, open the Global Settings panel by clicking the earth icon on the Elementors settings panel, and select Site Settings.
After clicking on the settings panel, check Global Colors on the design system section.
Click on the Add Color button to place a new global color. If you want to easily identify each global color, you can name them. When you are done with your new global colors, click the blue Update button.
In order to use a global color on a design element, you can add a new widget or edit an existing one. To do that you need to change the color from the style tab as usual and then click on the globe icon and select one of the existing global colors.
You can also use a global color as the background color of a column or section and other design elements of Elementor. If you wish to change the color, you can go to the Global settings panel and choose the new color you would like. The change will be applied to all design features that use the related global color, with just a single click.
2.2. Global fonts
The role of the font is also to represent a brand identity of a given website. Therefore, the font section is a very important step when it comes to website building. When using Elementor, there are some widgets that include typography settings.
In addition to the color scheme, a consistent typography setting, especially the font family would lead to a good website. For certain sections like heading text, you can implement the same typography setting on all pages which contain a heading text. By using a global font you can change the typography of such sections, on all pages at once. Just like a global color. Moreover, 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 from which 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.
In order to use a global font, simply add or edit a widget that has a typography setting option such as the heading widget, button widget, and so on. In this typography section, click on the globe icon and choose the global font you would wish to use.
After this go to the Global settings panel to switch the typography setting of a certain section of pages on your website. The change will be applied to all pages that are used to the associated global font.
2. Theme style
Another feature includes Theme Style, which manages your workflow to get things done quickly. You can also access this feature from the Global Settings panel. This feature allows you to create presets for four different design elements:
- Typography
- Buttons
- Images
- Form fields
Some web developers work with Style Guides. However, with the Elementor theme style feature, you can create presets for four essential elements on the list above. For example, you can start a preset for the button element. With this, you can save time every time you want to add a button element on a page or a section of the page and don’t have to start from scratch.
This feature works differently from Global Colors and Global Fonts as they are not connected to each other. You can make some changes to a certain widget on a specific page and the changes won’t affect the widgets on other pages.
To make a preset, you have to go to the Global Settings panel. Choose the element you want to create the preset of on the theme style block. Once you are done styling up the element click the blue UPDATE button.
3. New Theme Builder
Elementor has become one of the most popular page builder plugins thanks to a Theme Builder feature. This feature lets you compose custom templates for site parts like header, footer, single post template, archive pages, WooCommerce pages, and so on. You can create this without knowing how to code. Everything is drag and drop, with Elementor’s very intuitive editor.
Theme Builder was presented in Elementor 2.0 (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 way, but there will be a brand new interface such as:
In Elementor 2, you will see the following interface when accessing the Theme Builder feature.
The new version of the Theme Builder interface in Elementor 3.0 is better than the old versions because your theme elements are visually previewed as you click each tab on the left panel. From there, you can directly edit the existing custom templates, export, delete, or rename.
To make a new template, you have to click on the blue plus button on the theme part if you want to create the custom template. In addition, you can also click the Add New button on the upper-right corner.
The new Theme Builder feature also includes an immediate display condition edit, which allows you to assign a specific template to other parts of your site quickly. This concept is pretty comparable to WordPress’s Quick Edit default feature, which allows users to edit the theme and make it unique.
The nice thing is that Elementor doesn’t change the creative process of the templates. You can still make a template via the Elementor intuitive editor. When you are done, you can set the display condition like before. With the new Theme Builder, you only change the organization of your templates, not the way you create them.
4. Bonus feature: Performance Improvements
Elementor claims that they are always making performance improvements. But with this new version, they created some major updates to their code and infrastructure. In turn, this resulted in noticeable improvements within the performance.
The number of DOM elements has been reduced which made Elementor way faster. So it will improve your page speed rankings and the overall experience for users on the website.
What are the Changes in Terms of Page Load Speed?
Elementor 3.0 incorporates major improvements to server-side rendering processes and to the way Elementor renders dynamic CSS values.
Elementor now allows you to implement different elements and values on your website. Such would be, for example, creating a template for site posts and displaying each post’s featured image as a background behind the post title.
In addition, Elementor prepares a post that will be sent to the browser, where it scans the post for dynamic values, and if they contain any CSS values it prints that CSS. This process is considered to be “expensive” which means it’s time-consuming and resource-heavy. But, in Elementor 3.0, the time spent on this process is reduced as it is done by storing a list of dynamic values for each post.
When this list has been made, whenever someone visits the post, Elementor goes straight to this list, and in this way, it makes the process faster. All of these changes help the browser render the site a lot faster, thus improving the overall page speed, the user experience, and, ultimately, the Google rankings.
Important Note About Upgrading
Elementor 3.0 is a big, new version and includes some essential infrastructure changes. Before you upgrade to this version make sure you backup your site, as well as if you’re using any 3rd party for Elementor, make sure it has compatibility with Elementor 3.0.
Conclusion on Elementor 3.0
As it was mentioned earlier, this version includes a lot of new and interesting features, and it will truly improve your day-to-day work. If you want to experience the full web creator elements Elementor 3.0 will help you get an insight into it. If you still haven’t upgraded, now is the time to Elementor yourself and improve your business.
Comments are closed.