How Elementor’s Theme Style and Design System Options Work Together

A design system enables web creators to maintain consistency across a site by establishing a set of common design standards and elements. This is especially useful when a site is large or when a team of creators may be simultaneously working on the site. This design system may be in the form of a written documentation which might include a color and typography style guide, a list of common icons or imagery to be used sitewide, and other brand elements that will form a consistent and coherent website. Designers and content creators can then refer to the design system guide when designing a page, writing content, etc. 

But even this type of design system has its limitations. Web creators must constantly go back and forth between the guide and the work they are doing, adjusting each element, one at a time. 

A common thought that might go through a creator’s head while adding a simple heading to a page: “What was the hex value of the H3 heading again? And what font-weight was it? 500? No, I think that was for H2 headings, 400 was for H3 headings, wasn’t it?” The creator then rummages around to find the style guide in either a physical or an online folder, finds the style information, and begins the process of changing the color and the font-weight. Multiply this process by just the number of headings on a site, and then add all the other elements to that process, and it quickly becomes a consistent, but time-consuming design process.

There Is A Better Way To Use A Design System

A design system that is built into the web creation product itself is a huge leap forward from merely referencing a written guide. Imagine our web creator built the entire design system right into Elementor from the start of the project. If an element needed a specific combination of color and typography that had been designated as a standard brand combination, and that combination was a simple one-click option to be chosen when editing the element, that would be a massive time-saver over the previous manual guide reference process.

Equally Important – Future Sitewide Changes

Now imagine in the old way of referencing a design system guide, that the company is undertaking a complete brand makeover, and it’s the web creator’s job to change every color, font family, font weight, etc. across the entire site. This could be an enormous undertaking, and many elements would likely be missed in the process, causing a strange, incoherent design in odd places here and there.

With the design system built into the site design product itself, however, this kind of change can literally take minutes. Elementor makes it easy to make a change in one place, and have that change reflected throughout the entire site. The combination of Elementor’s Theme Style options and Global Colors & Typography embodies this design system methodology.

FAQ

Q: I’m confused. What is the difference between Theme Style and Design System’s Global Colors / Globlal Fonts? Don’t both control colors and typography cross-site?

A: Although Theme Style and Global Colors & Typography are related, they do serve different functions. Theme Style sets fallback style definitions for HTML tags like

, , and so on. They are not Elementor-specific, but are as general as possible. This is the baseline setting for the site, that comes into play only as a fallback, if no specific element definitions were set.

Global Colors and Global Fonts are additional style layers that use CSS variables. This layer sits on top of the Theme Style layer and take precedence. It provides the building blocks for your entire site’s design system. Assign the colors and typography of the four predefined global settings and add any additional global color and typography settings as you’d like, giving each a name. For any element you use in Elementor, you can quickly select one of your predefined settings from your global design system. 

In the future, just one change to the global settings will affect all instances across your site. If any element, either within Elementor or outside of Elementor does not have a global setting assigned to it, then it will default to the settings defined within the Theme Style. So as you can see, both Theme Style and Design System’s Global Colors & Global Fonts are much needed features, so make sure you pay attention to both.

Q: That helps clear things up, but could you give me a specific example?

A: Sure! Edit any Elementor page and set an H2 heading’s color and its typography to the global Secondary style that you’ve previously assigned via Site Settings > Design System > Global Colors and Global Fonts. Now, do the same for any other element on this page, and all pages, that you wish to have this same color or text style. Want your buttons to have the same color as your H2 headings? Great, just select the Secondary color for each of your buttons. 

Now, set your H3 headings to a different color and text style, using one of your other predefined global settings. Let’s say you created a new global setting called Complementary. Want some of your column backgrounds to have the same color? Ok, assign the Complementary global color setting you created to those column backgrounds as well. 

Do this to any other elements, as needed.

In the future, if you ever decide to change one of your site’s colors or typography settings, you’ll be able to do it once, and know exactly which elements will be affected across your site. With one simple change in the global settings, every element that is using that particular setting will instantly change across your site. 

Q: Ok, I get that, and it’s really cool But I have some pages that aren’t edited with Elementor? What about their headings, buttons, and column backgrounds? What styles will they inherit? 

A: That’s where your Theme Style settings come into play. Even though those pages are not Elementor-edited pages, the Theme Style you set within Elementor’s Global Settings will still be in control. The elements on those pages will still inherit the styles you set in Theme Style since they have not been assigned any Global Colors or Global Fonts styles. In this way, Elementor is capable of controlling your entire site’s styling, even on pages that aren’t edited with Elementor! 

Note: If, by some chance, you have any elements that you’ve not set their styling either in the Design System > Global Colors  or Global Fonts or in Theme Style, then that element’s styling will be inherited from either the theme or the browser, or from some other unknown source such as a plugin that might be setting an element’s style. So for full control, don’t leave anything blank in Theme Style. Set all possible options there, so you know your settings will be the default fallback for any settings not controlled by the Design System’s Global Colors or Global Fonts options.

Q: Before Global Colors were released, the color picker had the ability to save colors. This was a small way to maintain design consistency by always having my brand colors available in every color picker. Those no longer exist in the new color picker. Did I lose all my hard work of adding my brand colors to the color picker?

A: Your hard work did not go to waste. When upgrading to Elementor 3.0, which is when the new Global Colors and updated color picker were introduced, the upgrade process automatically added your saved colors into the Global Colors palette. You can easily choose them from the dropdown list for any element’s color option, without ever even opening the color picker now!