Colors and Typography are the building blocks of any website. Elementor’s global colors & Fonts enable you to change your colors and fonts all in one place, and have it update everywhere you placed it across your entire site.
Hey there, it’s Aviva from Elementor.
Today I’ll show you how to use Elementor’s Global Colors and Fonts design system feature.
Colors and fonts are the building blocks of a web designer’s work and are assigned to elements consistently throughout your site.
Elementor’s Design System feature does exactly that. It allows you to create a go-to color palette as well as a collection of font styles, which you can assign to elements globally, and all from one place.
This will save you valuable time while maintaining consistency across your site, in the smartest way possible, making editing easier and a lot more fun!
So let’s dive in and see it in action.
In this pre designed website we have several common colors and font styles that repeat throughout the page, and in fact, the whole site.
From the Elementor Panel, on any page, click the hamburger menu on the upper left. Click Site Settings. You’ll notice the Header color here is blue, indicating that you are now editing globally, across your site, and not just for this page. Under Design System, you’ll see Global Colors and Global Fonts.
Click to open the Global Colors. The first four colors in Global Colors are the Elementor base colors, which can be edited and renamed. The hex color code shows up right here for easy reference.
If you’re upgrading from a previous version of Elementor, your existing base colors will be displayed in this section. Previously saved color picker colors will be here as well, below the base colors.
Let’s go ahead and change this color here…and here. Check out how it updates across the page, as well as the whole site!
Let’s add a new color, like this, which we can edit and rename. We can delete added colors, but keep in mind that deleting a Global Color will cause any widget with this color style applied to inherit a default color.
Similar to Global Colors, Global Fonts consist of the typography used routinely throughout our site. Here again, we have the four Elementor base styles, which we can edit and rename.
Let’s change a few of our Global Font styles. As you can see, they too update simultaneously.
I already added another style below before, called Navigation, and we can add more font styles to our site, and edit and name them as well. Added styles can be deleted, however, once again, keep in mind that deleting a Global Font will cause the text with this style applied to inherit its typography settings from another source.
Right below the Font Styles is where you can add a Fallback Font Family, for instances where the chosen font is not available. It is preset with the default of Sans-serif, which we’ll leave as is.
Now let’s take a look at how to use the Global styles directly from our widgets. Update to save changes, and close out of Site Settings.
Select a Heading widget and click the Style tab.
The blue color of the Global icons indicate that there is a Global setting applied. Hovering over them displays the name of the Global Style applied, for quick reference.
Click the Globals icon to change the text color from Primary to the new color style we added. You can also go back to Global Colors by clicking the Global colors cog.
To use a new color all together, simply click the color swatch to open the color picker. Note that clicking the color swatch exits the global mode. The settings are copied to Custom mode and the value is now detached from the global reference. Choose your color, and if you’d like to save it, use the plus icon to add it to the Global Colors. You’ll be prompted to name it; then click Create. I’ll set the color back to its original setting to stay consistent.
Updating typography within a widget is a similar process. Click the Global icon to change the typography to the font style we created before. And here too, you have the option to go directly to the Global Fonts settings.
Click the pencil to Create a new Font style. To save the style, click the plus icon, and give your style a descriptive name for future easy reference. Then Click Create. We’ll set the font style back to its previous setting to keep everything uniform.
Let’s go back to Global Settings via the widget shortcut. Our new Global styles are right here. Awesome!
Now that we’ve learned how to use Global Colors and Fonts to define and organize our website’s colors and fonts, let’s also see how they can be applied to Theme Style, giving you even more control in maintaining consistency across your site.
Theme style allows you to take over the global design layer, normally handled by the theme. So, no matter which theme you use, with Theme Style, you can set fallback styles for various HTML elements, such as Backgrounds, Headings, Buttons, Form Fields and images without leaving the editor.
Before we continue, we’ll need to go to the Elementor Settings page and disable Elementor default Colors and Fonts, which are styles that get assigned to the widgets by default. Disabling them ensures that the Theme Style settings we apply affect the relevant Elementor elements, which in this case will be our buttons. Make sure to click Save Changes and Refresh the page back in the Editor.
Drag in a button widget and type in your button copy. Next we’ll use Theme Style to design it, by giving it a fallback style so that all buttons on your site will look the same by default.
Back in the Site Settings panel, under Theme Style, click Buttons. Set the typography and text color using your predefined Global Fonts and Colors. You can change any other Button settings as well. As you can see, the button picks up the Theme Style settings in real time. Update and exit the Site Settings.
Now let’s drag in a new button. Check out how it comes in with our Theme Style settings. Nice!
And of course, if you would like to make a change to a specific button, just click directly on the widget and adjust the styles from within.
Be sure to watch our dedicated video on Theme Style for a complete explanation of its abilities, so you can use it together with Global Colors and Fonts.
And that’s all there is to Global Colors and Fonts. Now you can define colors and font styles globally across your site and create your own design system. And you can use them quickly and consistently to make changes to your site, and speed up your workflow.
Thanks for watching. For more tutorials, subscribe to our Youtube channel.
