Elementor 3.0: Things You Need To Know About New Design System & More

Maintaining the same look throughout your whole website is integral for building your brand identity. Thankfully, Elementor 3.0 comes with a new Design System which let’s you maintain a consistent and uniform design throughout your site.

Design System

Released on August 23rd, Elementor 3.0 is the third major update to empower all WordPress users to create websites faster, without any coding. It comes with an improved new theme builder, global site settings and a new Design System feature. In this blog post, we will walk you through everything you need to know about this new Design System and more.

Table of Contents

What Are Design Systems & How Do They Help Your Brand?

A Design System is the theme around which you build your website to reflect your brand identity. Think of big brand names like Amazon, Nike, Apple or even Spotify. A part of their strategy to build a unique brand identity is using a consistent design.

Now, with Elementor, you can create consistent designs for your website with the new Design System. This feature lets you apply changes to all parts of your site with a few clicks. Let’s take a deep dive into how this new Design System works and find out how you can use them to build your brand identity.

Features Of The New Design System In Elementor 3.0

The new Design System in Elementor lets you apply global colors and fonts everywhere on your site. This way, you can save time by applying changes globally instead of on individual pages.

To apply global colors and fonts to your website, create a new post or page in Elementor. Then navigate to Settings→ Site Settings from your Elementor Editor. You should see a section called ‘Design System’ at the very top. From here, you can apply global colors and fonts to your website.

Design System Elementor

Global Colors: Apply A Consistent Color Scheme To Your Whole Website

To set global colors for your website, click on the ‘Global Colors’ option. By default, you should be able to see Primary, Secondary, Text and Accent global colors. You can set your preferred global colors for them or even add a new global color as shown below.

Elementor 3.0: Things You Need To Know About New Design System & More 1

You can now apply these global colors anywhere on your website. For instance, you can apply these global colors on the ‘Button’ widget by clicking on the element. You can then pick the global color instead of the custom colors from the ‘Style’ tab.

Design System Elementor

This way, you can make sure that your website has a consistent color scheme.

Global Fonts: Use The Same Font Style And Typography Everywhere

To set global fonts for your website, click on the ‘Global Fonts’ option. By default, you should be able to see Primary, Secondary, Text and Accent global fonts. You can set your preferred global fonts for them or even add a new global font if you want.

Design System Elementor

You can now apply these global fonts by clicking on any text or heading widgets. Then, choose the global font style from the ‘Style’ tab.

Design System Elementor

As you can see, the new Design System in Elementor is a great way to apply global changes to colors and fonts. This gives your website  a more uniform, streamlined appearance. In this way, you can build your brand identity by maintaining a consistent look and feel for your website.

If you want to learn more about this new Design System from Elmentor 3.0 and see how it works, then check out this video tutorial below

Advanced Theme Styles And More Site Settings

As you may already know, WordPress themes often come with their own default styles. These may disrupt the uniform design of your website if you choose to switch between themes. But, with the ‘Theme Style’ feature, you can apply global changes to your website. You can change your website’s typography, buttons, images and more.

Design System Elementor

This feature works amazingly well with the global font and colors from the new Design System. To get started, you first need to head over to Elementor→ Settings from your WordPress dashboard. Then, disable the default colors and fonts by checking the boxes under the ‘General’ tab as shown below. You can now apply your global colors and fonts no matter what theme you are using.

Design System Elementor

Next, go back to your Elementor Editor. From the ‘Theme Style’ section in Site Settings, you can apply global changes for each page in your website. For example, you can change the font color for body text, headings, links and more from the ‘Typography’ section.

Design System Elementor

There are several other more settings that can help you create a uniform look for your website. You will see options to change background colors, site identity elements, lightbox, layout and much more. Play around with these options to create a website that reflects you and your brand.

More Improvements With Elementor 3.0

Elementor 3.0 also comes with other improvements to enhance your website designing experience. Below, we take a quick look at some of the other things that are new with Elementor 3.0.

A New, Enhanced Theme Builder With Elementor Pro

The Theme Builder from Elementor Pro was first introduced with the release of Elementor 2.0.  Since then, it has completely revolutionized the way WordPress users can design their website.. 

With Elementor 3.0, this powerful Theme Builder gets a new, much more user friendly interface. Website designers can now get a quick overview of their site including, headers, footers, single posts and pages, and more. This new interface makes it easy for creators to instantly switch between different parts of their site

Design System Elementor

You can even preview your changes from within your Theme Builder.  You will get to see an automatic image preview and screenshot of each of the templates that you customize. This way, you can manage and customize every part of your website all in one place.

Design System Elementor

Performance Improvements For Better User Experience

Every new release or update of Elementor attempts to enhance user experience. Elementor 3.0 is no exception, and comes with some updates in their codes and infrastructure to increase page speed rankings

Wrapping Up

Have you tried out Elementor 3.0 yet? Let us know what you think of the new Design System and other features in the comments below. For more fun updates and tutorials, join our Facebook Community and connect with other web creators like yourself who are using Elementor to build their websites.

Picture of Tanaz


Tanaz is a content creator who has a passion for writing--be it for tech products, book reviews, or film recommendations. She has a Bachelor's degree in Business Administration with a major in Marketing. Her hobbies include blogging, reading, and obsessing over all things Disney

Share This Story

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.