If you have been suffering from the latest Elementor updates you are in luck because the 3.0 version of Elementor is finally a worthwhile update with some features and improvements.
Global site settings
Now there is a site settings panel that shows lots of settings for the whole site, so that without leaving Elementor you have one place to configure all the settings of your site.
On each page you are editing with Elementor you can go to the left panel and by clicking on the top left icon you can go to the global settings panel.
In this global settings panel you will find:
- Site identity: To personalize the identity of your website, that is, the logo, title, description and even the favicon.
- Layout: Defines the default structure settings for Elementor, such as the default width for content or the default page structure.
- Lightbox: Configure all the default styles of the Elementor pop-up lightboxes.
- Theme styles: Here you can customize all the HTML elements that are not from Elementor (usually configurable in the theme), such as fonts, buttons, images and form fields.
- Global colors and fonts (this is explained below in detail)
Global Colors
Version 3.0 of Elementor incorporates a new method of working with the colors of the site, the global colors.
With the global color settings you can change all colors from a single site, and have the colors you modify changed automatically in all modules where they are.
The first thing is to choose the basic global colors for your site, and then go to any Elementor color style and set it to be one of the four main colors.
You can also add as many custom colors as you want to the global list, and name them as you like.
When you change one of the colors in the global colors it will change the entire color scheme of your site according to the new global color setting. It couldn’t be easier, and without touching a single line of CSS code.
You can also assign a different global color from each control, and create a new global color, all using the same color picker within each control.
If you are designing websites for customers, this is a joy, because you can make changes to the color scheme of a website and have them applied to all pages and entries instead of having to edit them one by one.
From now on you can set, edit and remove any overall color from a single site, in a few clicks.
Global fonts
Colors and typographies are the fundamental basis of the design of any website. And if we use the same logic we have seen above of the global colors, we should be able to change the typographies in a quick and easy way.
In Elementor 3.0, with the global font settings, all font settings can be configured globally.
Now you will be able to globally configure all the font settings on your website, included:
- Font family.
- Font size and scale.
- Font weight.
- Font transformation.
- Font style.
- Font decoration.
- Line height.
- Font spacing.
- Adjustments for adaptation to mobile devices.
You can also apply these settings to each widget containing text, and customize your global fonts beyond the basic list.
Once you’ve set up your site’s font, you can make changes that will affect all text areas on your site, from the global font settings, and see exactly which global fonts have been applied to which parts.
Theme builder
Elementor’s Theme Builder is a React based application, which provides an overview of the site, including all parts of the site: header, footer, global page template, global entry template and much more. Each part of the site is intuitively accessible, making the task of designing a complete web site much easier.
The new Theme Builder will allow you to take a look at the whole structure of the site visually. See which parts are active and which are not, manage which template applies to the different areas of your website, and have easy access to change, update or add content as you like.
Each part of the website has an automatic preview of the image and a screenshot of the actual template. This allows you to get a visual “bird’s eye view” of your entire site, so you can identify the exact template you want to edit.
How does it work?
To start building your site with the new theme builder, click on the burger icon at the top left of the editor, and then click on “Theme Builder“. You can also access it from the top administration bar and using a shortcut CMD / CTRL + Shift + E. This is applicable from anywhere on your site.
You will now see all the essential parts that are needed to create a complete site.
If it’s a new site, and you don’t have any parts yet, click on any part and build it from scratch. It’s advisable to start with a new header (just to keep the overview…)
After building the header, you can go on to design additional parts of the site and insert them into any page you wish.
Performance and speed improvements
This time there have been some important updates to the code and infrastructure of Elementor, which were really needed, that have resulted in some important performance improvements.
The number of DOM elements has been reduced, and now Elementor displays pages faster.
This will improve the speed of the pages and the overall user experience on your site.
Elementor 3.0 includes significant improvements in the server-side rendering processes and in the way Elementor renders dynamic CSS values.
Elementor allows you to incorporate dynamic elements and values into your website. For example, you can create a template for the entries of the site and decide if you want to show the highlighted image of each entry as a background behind the title of the entry.
In the background, when Elementor prepares an entry to be sent to the browser, it scans the entry for dynamic values, searches for them and, if they include any CSS values, prints them out. This process is “expensive” – meaning that it consumes time and resources.
In Elementor 3.0 the time spent on this process is substantially reduced. This is done by storing a list of dynamic values for each entry. Once that list has been created, every time someone visits the entry, Elementor goes directly to this list, making the process faster and more efficient. The dynamic values affected by this optimization include background images, colors and more.
This improvement brings with it a substantial reduction in server loads, time to the first byte and, as a result, a much faster loading time for site visitors.
Well, and this is what Elementor 3.0 has to offer, have you tried it? Why did these changes need to be made?
Would you prefer to see a summary of the new features on video? Here it is…
And, remember, you can now get Elementor Pro at a significant discount.
Read this post in spanish: Elementor 3.0: Ajustes, colores, tipografías globales y mejoras de velocidad ¡hacía falta!
