A new major update of Elementor has been released. We moved from version 2.x to version 3.0. This new version comes with a new way to create websites using WordPress and Elementor. We'll try to convert these new features.
What Are The Main Additions On Elementor 3.0?
Elementor 3.0 comes with 3 mains additions which are: Design System Features, New Theme Builder, and significant performance improvements.
Design System Features
Have you ever wondered how big companies do to perform that well no matter the platform they're into ? All what they create looks consistent and have the same design. That's possible thanks to what is named "Design System". According to UnxDesign.cc, the Design System is :
The single source of truth which groups all the elements that will allow the teams to design, realize, and develop a product. So a Design System is not a deliverable, but a set of deliverables. It will evolve constantly with the product, the tools and the new technologies.
UX Collective
Implementing a design system, keep your entire team consistent around one design language and also revolutionize how your team works and ensure a faster workflow.
Create Amazing Websites
With the best free page builder Elementor
Start NowElementor 3.0's Design System Features include:
- Global Colors
- New Site Settings panel
- Global Fonts
Let's see in deep how this will help you build better professional Websites.
Global Colors
Elementor 3.0 adds a new way to work with site colors. That new method is named Global Colors.
The Global Colors helps you to change the color from one location, and have that color updated everywhere it's used.
You'll start choosing the basic Global Colors for your website. Then, go into any color style in Elementor, and define it to be one of the four colors. Note that you can add as many custom colors on the Global List.
It's now that the CSS variables come in. Head back to Global Colors, and change one of the colors. Your entire site’s color scheme changes according to the new Global Color. Have you ever experienced something that easier?
You’ll also be able to design a different Global Color from within the control input or create a new Global Color, all using the same color picker inside the control input.
Site Settings
Creating the first design settings for a website consumes a lot of time. You'll have to juggle between the theme code, Customizer, functions.php. That's enough reasons to justify your headaches.
The new Site Settings shows various configuration tools. That way, you'll keep doing all theses task from one single place.
To get started, within any page you edit with Elementor, on the left side panel, click on the top left icon. That will make you switch to the Global Settings panel.
Within that Global Settings panel you will find:
- Layout: To Configure Elementor’s default layout settings, such as default content width or default page layout.
- Site Identity: Customize your cross-site identities, like the Logo, Title, Tagline and even Favicon.
- Theme Style: Customize HTML elements not related to Elementor (usually set by the theme) for Typography, Buttons and Form Fields.
- Lightbox: Define the default styling of Elementor Lightboxes
- Global Colors and Fonts: Let you configure the global colors and fonts that apply to your website.
Global Fonts
The Colors and Typography are part of the building components of any website. Using the same logic of the Global Colors feature, this is a new method of working with your site’s text styles.
With the Global Fonts, every typography settings can apply globally. You can now set up all your site typography settings globally, including Font Family, Font Size & Scale, Font Weight, Font Transform, Font Style, Font Decoration, Line Height, Letter Spacing, and even Responsive Settings. You'll also be able to set these settings to every widget that contains a text, and customize your own Global Fonts.
With a Typography correctly designed, you'll be able to apply these changes globally.
Entire Site Visualized & Organized in One Place
While the well-known Theme Builder has become the industry leader in terms of having a full overview of the website design, this new UI goes even further. The new Theme Builder now gives you an overview of an entire website in a very intuitive way.
That Theme Builder provides an overview of the site, this includes all the site parts: header, footer, global page template, global post template and more. Every part of the site can be previewed, making the task of designing a complete website a lot easier.
Performance Improvements
While an application grows, it's obvious that the developer should care about the performances. The updates made on Elementor 3.0 are made to ensure a nice code infrastructure which has resulted in remarkable performance improvements.
There has been a lot of DOM element purging, which makes Elementor renders faster. This should definitely improve your page speed rankings and the overall experience for users on your website.
Concretely, What Has Changed In Term Of Page Speed?
Elementor 3.0 provides significant improvements for the server-side rendering processes and to the way Elementor renders dynamic CSS values. This allows you to incorporate dynamic elements and values throughout your website. For example, you can create a template for site posts, and decide you want to display each post’s featured image as a background behind the post title.
On the background, when Elementor prepares a post to be sent to the browser, it parses the post for dynamic values, retrieves them, and if they include any CSS values, it prints that CSS.
With Elementor 3.0, the time spent on this process has been substantively reduced. Thanks to dynamic values that are stored for each of your posts. Once that list has been stored, whenever someone visits the post, Elementor goes straight to this list, thus making the process faster. Dynamic values affected by this optimization include background images, colors, and much more. This improvement brings a noticeable reduction of the server loads.
Summary on Elementor 3.0 Update
As we mentioned above, this version comes with interesting goodies that should truly impact your day-to-day work. We've been through :
The Design System Features which helps you to work more consistently and efficiently.
The new Theme Builder is a powerful visual tool for managing every part of your website from one single place.
Performance Improvements for a better user experience.
Elementor 3.0 will certainly take you to the edge as a professional web creator. If you haven't yet, upgrade now to Elementor Pro. You should also consider reading our post explaining why Elementor is certainly the best free Page Builder on WordPress.
