Elementor global colours and fonts: set them once, save hours

Set your brand colours and fonts once in Elementor’s Site Settings, under Global Colors and Global Fonts, name them by the job they do, and link every widget to them with the globe icon. Then a colour or font change updates the whole site in one place. When we audit an Elementor site that someone else built, one of the first things we check is how many slightly different blues it uses. On a site with a single blue in its brand guide, finding six or seven is normal. Nobody chose that. It happened one “quick fix” at a time.

Global colours and fonts are how you stop it. Set them up properly and a rebrand, a colour tweak or a font change becomes a five-minute job instead of a week of clicking through pages.

Where they live

In the Elementor editor, click the Elementor menu in the top bar and choose Site Settings. Under the design system settings you’ll find Global Colors and Global Fonts.

Out of the box, Elementor gives you four system colours (Primary, Secondary, Text and Accent) and four matching system fonts. You can edit their values and add your own custom ones.

Once a global is set, any colour or typography control in any widget can link to it. Click the globe icon next to a colour or typography setting and pick from your list. From then on, that widget follows the global. Change the global, and every linked widget changes with it.

Site Settings also holds Theme Style, which sets defaults for body text, links, H1 to H6 headings, buttons, images and form fields. Elementor’s Theme Style documentation lists every option. Setting heading sizes and button styles here means new widgets look right the moment you drop them on the page.

Name colours by job, not by shade

The default names, Primary, Secondary, Text and Accent, are vague but at least describe a role. The mistake we see is people adding custom colours called “Blue”, “Light blue”, “Blue 2” and “New blue”. Six months later nobody knows which is which.

Name each colour for the job it does. A typical setup for a professional services site looks like this:

Seven is plenty for most small business sites. If you find yourself wanting a twelfth colour, it’s usually a sign the design is drifting rather than a real need.

Fonts work the same way. Instead of “Montserrat Bold 32”, think in roles: Display heading, Section heading, Body, Small print, Button. Each global font holds a family, weight, size and line height. Set responsive sizes for tablet and mobile inside the global, so headings shrink properly on phones without anyone overriding them page by page.

How inline overrides cause brand drift

Every colour and font control in Elementor can be set two ways: linked to a global, or set directly on that widget. Setting it directly is called an inline override, and it’s where drift comes from.

It goes like this. Someone builds a new page, opens a heading, and picks a blue from the colour picker by eye. It’s close enough. Next month someone copies that heading to another page. Now the off-brand blue is on two pages, and neither follows the global. When the business tweaks its brand colour, those headings stay behind.

Fonts are worse, because the differences are subtle. A heading at 34px instead of 32px, or weight 600 instead of 700, won’t jump out on one page. Across a 30-page site it makes the whole thing feel slightly unkempt, and visitors pick up on that even if they couldn’t tell you why.

The rule we work to: if a colour or font isn’t in the global list, it doesn’t go on the site. If there’s a real need for a new one, add it to the globals first, give it a sensible name, then use it.

Auditing a site that’s already drifted

If your site has been edited by several people over a few years, it’s worth a tidy-up. The quickest way we know:

1. Write down the colours and fonts in your brand guide. If you don’t have one, pick the ones on your homepage that look most “right” (or treat it as the moment to sort out a proper brand identity).
2. Set those as your Global Colors and Global Fonts, named by role.
3. Go through your key pages (homepage, services, contact) and click each heading, button and coloured section. If the globe icon isn’t showing a linked global, relink it.
4. Pay special attention to anything that was copied from another page or imported from a template. Imported templates often bring their own hard-coded colours.
5. Leave low-traffic old blog posts for last, or skip them.

On a mid-sized site this might take a morning. It’s tedious, but you only do it once if you keep the rule afterwards, and it’s a common Elementor clean-up job if you’d rather hand it over.

A note on Elementor’s newer editor

At the time of writing (late 2026), Elementor is partway through a big change. Its version 4 “atomic” editor uses Classes and Variables instead of Global Colors and Global Fonts. A variable is a named value, such as a colour, that you can reuse across the site. Change it once and everything using it updates. The idea is the same as globals, just more flexible.

Most existing sites, including the ones we manage, still use the classic widgets, and the two systems can run side by side. Elementor lets you sync variables to Global Colors and Global Fonts so classic widgets and newer elements share the same brand values. If you’re building something new, it’s worth planning your naming once and using it in both places.

This also ties into how the page is laid out. Our explanation of Elementor containers covers the layout side of the same tidy-up.

What this means if you edit your own site

If you update your site yourself, you mostly don’t need to touch Site Settings at all. Just get into the habit of picking colours from the globe menu rather than the colour wheel. Our guide to editing your Elementor site without breaking it covers the other habits worth having.

Setting globals from the brand guide is the first build step on every site in our web design service, before a single page exists. If your current site has six blues and you’d like it back to one, send us a message.