Training / Building with Elementor / Lesson 6 of 9

Global colours and fonts

Your website has a set of brand colours and fonts saved in one place. Using them keeps every page looking like it belongs to the same business.

You'll learn

How your brand colours and fonts are stored, and how to use them properly

Takes

About 4 minutes

You'll need

A page open in Elementor

Watch: “How to Use Elementor’s Global Colors & Fonts”, an official video from Elementor. It shows the same job on their own demo site, so your screen may look a little different. The written steps below are the ones to follow.

1

Spot a global colour

Select a heading, open the Style tab and look at Text Color. If the globe icon is lit, it’s using one of your saved colours.

2

Choose a global colour

Click the globe and pick from the list. These are your brand colours, set up when the site was built.

3

Choose a global font

Beside Typography, click the globe and pick a saved style such as Primary or Text.

4

Avoid picking by eye

Don’t use the colour picker to choose a new shade or pick a different font from the long list. One-off choices make pages look patched together.

5

Leave Site Settings to us

The saved colours and fonts are managed in Site Settings. A change there alters every page at once, so ask us if your branding is changing.

Common mistakes

I picked a custom colour and want the brand one back.

Click the globe and choose the saved colour again.

The colour I need isn't in the list.

Tell us. If it’s part of your brand, we’ll add it for the whole site.

Changing the global font changed the whole site.

That’s what global means. Undo it, or tell us and we’ll put it back.

Still stuck?

Tell us which page it’s on and what you’re trying to do. We can talk you through it or make the change for you.