Get Elementor Pro

IMPORTANT – Elementor 3.0 is a major release, and that’s why we recommend you backup your site before updating.

Every feature release moves Elementor forward, but the major ones produce substantial leaps for our user’s workflow.

Elementor 1.0 in 2016 brought a whole new approach to WordPress visual design. Elementor 2.0 in 2018 included a revolutionary Theme Builder.
Now, in 2020, I’m ecstatic to unveil Elementor 3.0, which comes with not one, but 3 different groundbreaking features: Design System Features, New Theme Builder & significant performance improvements.

It took months of work, and a comprehensive rebuild of our infrastructure, but the hard work paid off. Elementor 3.0 includes both core and Pro improvements and a whole new way to build websites. Read on to discover how this version will revolutionize your workflow, and allow you to create faster, more consistent websites than ever before.

See How Elementor Prioritizes and Improves Website Performance

Design System Features

Manage Your Site's Design System From One Place

How do big brands like Spotify, Apple or Nike manage to deliver a consistent, winning experience across all platforms? 

No matter what landing page, website page, banner or asset you see, they maintain the same look and feel. This is thanks to something called a Design System.

But what if we told you that web creators like you can now offer the same kind of big brand consistency to their clients?

Introducing Design System Features. Implement a design system, revolutionize your workflow and keep your entire team consistent around one design language.

Revolutionize your workflow, and create faster, more consistent websites.

Tweet

What is a Design System?

For those of you unfamiliar with the term, a Design System is the single source of truth that forms the base around which a team designs a website. 

Let’s say you are building a site that includes several pages, landing pages and blog posts. How can you make sure all the colors, fonts, and layout across all these pages and posts remain consistent to one language? This is the role of the design system. 

Implementing design system capabilities enables you to design and edit new and existing websites lightning fast, cut through workflows and shortening time-to-market while maintaining brand and visual consistency.

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

Elementor’s Design System Features include:

  • New Site Settings panel – including site identity, lightbox settings, theme styles and more
  • Global Colors
  • Global Fonts

Let’s explore each of these features and see how they will help you build more professional websites.

Design System Feature #1

Site Settings

Defining the very basic settings of a website can be quite time-consuming.

Juggling Theme code, Customizer, functions.php … forget about it.

We added a new Site Settings panel, showing many site wide configuration tools. This way, you can stay inside Elementor, and have one place to set all of your site settings. Sweet!

Inside any page you edit with Elementor, go to the left panel, and click on the top left icon. You will switch to the Global Settings panel.

Inside the Global Settings panel you will find:

  • Site Identity: Customize your cross-site identity such as Logo, Title, Tagline and even Favicon
  • Layout: Define Elementor’s default layout settings like default content width or default page layout
  • Lightbox: Set all the default styling of Elementor Lightboxes
  • Theme Style: Customize your non-Elementor HTML elements (usually set by the theme) for Typography, Buttons, Images and Form Fields.
  • Global Colors and Fonts (will be explained in detail below)

Design System Feature #2

Global Colors

Version 3.0 introduces a new method of working with site colors: Global Colors.

Global Colors enable you to change the color in one place, and have that color update everywhere you placed it.

Start by choosing your site’s four basic Global Colors. Then, go into any color style in Elementor, and set it to be one of the four colors. You can also add as many custom colors to the Global List, and name them however you like.

Now the magic of CSS variables kicks in. Go back to Global Colors, and change one of the colors. Your entire site’s color scheme changes according to the new Global Color. Mixing and matching colors during your web design process has never been easier.

We built this so you can see the actual Global Color inside the control, removing all guesswork. You’ll also be able to assign a different Global Color from within the control, or create a new Global Color, all using the same color picker inside the control.

Do you offer services for maintaining, updating or redesigning existing sites? Then this is your lucky day! This feature is perfect for making changes to a website’s color scheme without the need to go over all of your pages and posts and edit each one of them individually. From now you can set, edit and remove any global color from one place with few clicks.

Watch Global Colors tutorial >

Design System Feature #3

Global Fonts

Colors and Typography are the building blocks of any website. Using the same logic of Global Colors, we created a whole new method of working with your site’s text styles.

With Global Fonts, every typography settings can be set globally. You can now configure 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 Responsive Settings.

You’ll be able to apply these settings to every widget that contains text, and customize your own Global Fonts beyond the basic list.

Once you set your site’s typography, you’ll be able to make changes that affect all the text areas that you set with Global Fonts.

You can also see exactly which Global Fonts was applied.

Watch Global Fonts tutorial >

The New Theme Builder

Your Entire Site Visualized & Organized in One Place

Although Elementor’s Theme Builder has become the industry leader in terms of visual full website design, we decided to make it even better. 

Introducing the new Theme Builder, a single place to manage your ENTIRE site in a visual and intuitive way.

The Theme Builder is a React based application, which provides an overview of the site, including all the site parts: header, footer, global page template, global post template and more. Every part of the site is intuitively within reach, making the task of designing a complete website that much easier.

The new Theme Builder will allow you to glance over your entire site structure visually. See which parts are active and which are not, manage which template applies to different areas of your website, and have easy access to change, update or add content as you please.

Each site part gets an automatic image preview and a screenshot of the actual template. This lets you get a visual ‘birds-eye-view’ of your entire site, so you can pinpoint the exact template you wish to edit.

Watch Theme Builder tutorial >

How It Works

This next paragraph is going to turn you into a ‘super-Elementor-builder’, ahead of most web creators, so I suggest you pay special attention.

To start building your site using the new Theme Builder, click on the hamburger icon on the top left of the editor, then click on ‘Theme Builder’. You can also access it from the top admin bar and using a shortcut CMD / CTRL + Shift + E. This is applicable from anywhere in 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 it doesn’t have any parts yet, click on any part and build it. We suggest starting with a new header (just to stay ‘on top’ of things…)

After you build the header, you can move on to designing additional site parts, and insert them to any page you’d like.

New Theme Builder: Finally, a Visual Birds-Eye-View of Your Entire Website.

Click to Tweet

Bonus Feature: Performance Improvements

We are always making performance tweaks and improvements, but this time, we’ve made some major updates to our code and infrastructure, and those resulted in some noticeable performance improvements.

We’ve reduced the number of DOM elements, and made Elementor render your web pages faster.

This will improve your page speed rankings and the overall experience for users on your website.

What Changed in Terms of Page Load Speed?

Elementor 3.0 includes significant improvements to server side rendering processes and to the way Elementor renders dynamic CSS values.

Elementor allows you to incorporate dynamic elements and values in 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.

Behind the scenes, when Elementor prepares a post to be sent to the browser, it scans the post for dynamic values, fetches them, and if they include any CSS values, prints that CSS. This process is “expensive” – meaning it’s time consuming and resource-heavy.

In Elementor 3.0, we substantially reduced the time spent on this process. This is done by storing a list of dynamic values for each post. Once that list has been created, whenever someone visits the post, Elementor goes straight to this list, thus making the process faster and lean. Dynamic values affected by this optimization include background images, colors, and more.

This improvement brings with it a substantial reduction of server loads, time to first byte and, as a result, much faster loading time for site visitors. Noticed a performance improvement in one of your sites? Let us know in the comments.

At Elementor, we consider site performance a high priority subject, and we will continue to improve on that front in upcoming versions.

Important Note About Upgrading

Elementor 3.0 is a major version, and includes some substantial infrastructure changes. Before you upgrade to v3.0, please make sure you backup your site, and if you’re using any 3rd party addon for Elementor, make sure it has compatibility for Elementor 3.0.

Please make sure you upgrade to the core version of Elementor 3.0 before upgrading the Pro 3.0.

For more answers to 3.0 related questions visit our 3.0 FAQ page.

Time to Take 3.0 for a Spin!

As we mentioned, this version is packed full of goodies, and we believe it will truly impact your day-to-day work. Let’s summarize:

The Design System Features helps you work more consistently and efficiently.

The new Theme Builder is a powerful visual tool for managing every part of your website without code.

Our Performance Improvements will improve your site load time.

Elementor 3.0 will help you get an edge as a professional web creator. If you still haven’t,  upgrade now to Elementor Pro and make 2020 the year your business skyrockets!