Global colors & fonts (site styles) in Elementor

Learn how to use Elementor's Global Colors and Global Fonts to update your brand colors and typography across the entire site at once.

Global Colors and Global Fonts are Elementor's system for managing your brand's appearance in one place. When you change a global color, every element on the site using that color updates automatically. This is far more efficient than changing each element one by one.

Quick summary

Click the Elementor logo in the top-left corner of the editor and choose Site Settings. Open Global Colors or Global Fonts. Change a color or font there, click Save Changes, and it changes everywhere on the site that uses it.

What you'll need

The Elementor editor open
Your brand's hex color codes (e.g., #1a2a3a) or font names

How to open Global Colors

Open any page in Elementor.

Click the Elementor logo in the top-left corner of the editor's top bar. On older versions of Elementor, this menu was an icon with three lines at the top of the left panel.

Click "Site Settings", then "Global Colors" (under Design System).

A panel opens showing your global colors. Each color has a name and a swatch, and the canvas shows how the colors look.

You can also get there from the WordPress dashboard: go to Elementor > Editor and click Customize under Global Colors.

Understanding the global color system

Elementor has four built-in global colors: Primary, Secondary, Text and Accent. You can change them, but you can't delete them. When Chykalophia built your site, they may have set these to match your brand, or they may have created custom named colors.

When an element uses a global color (like "Primary"), it is linked to that global setting rather than to a fixed hex code. If you change what "Primary" is, every element using "Primary" updates automatically.

Global Colors and Global Fonts are used by Elementor's classic widgets. Newer V4 elements use Variables and Classes instead, although Variables can be synced to Global Colors and Global Fonts. The steps on this page are for classic widgets.

How to change a global color

Open Global Colors as described above.

Click the swatch next to the color name you want to change.

A color picker opens. Type your new hex code, or click inside the color square to pick a color.

Check the canvas. It shows how the new color looks.

Click Save Changes. Every element that uses this global color now shows the new color, across the whole site.

Changes to global colors affect every page

Changing a global color updates the color on every page of the site, not just the one you have open. Make sure you are happy with the change before you click Save Changes. If in doubt, contact us before making global style changes.

How to open Global Fonts

Click the Elementor logo in the top-left corner of the editor, then click Site Settings.

Click "Global Fonts" (under Design System).

Your global fonts appear. Elementor has four built-in ones (Primary, Secondary, Text and Accent), and your site may have custom ones too. Which one is used where depends on how your site was set up.

How to change a global font

Open Global Fonts.

Click the Edit (pencil) icon next to the font you want to change.

Update the font family, size, and other settings as needed.

Click Save Changes.

Elements that do not use global styles

Some elements may have their own (local) color or font set instead of a global one. These will not update when you change a global style.

To make them use the global color:

Click the element.

Go to the Style tab.

Find the color or font setting (for example, Text Color or Typography).

Click the globe icon next to that setting and pick the global color or font you want.

Common questions

I changed a global color but some elements didn't update — why?

Those elements probably have their own color set instead of the global one, or they may be newer V4 elements, which use Variables instead. On each classic widget, open the color setting, click the globe icon, and pick the global color.

My site was built before Elementor had global colors — can I use them now?

Yes, but it requires some setup work: each element needs to be switched to the global colors instead of fixed hex values. (When Elementor introduced Global Colors, it moved any colors saved in its old color picker into the Global Colors palette.) This is worth doing but takes time. Contact us if you want help with this.

How do I add a new global color?

In the Global Colors panel, click Add Color. Give the new color a name (like "Brand Orange"), set its value, and click Save Changes. Then use it on any element.

What if I want to change the font on just one heading, not everywhere?

In that element's Style tab, click the pencil icon in the Typography setting and choose a font there. That element then uses its own font instead of the global one. Use this sparingly to keep your site visually consistent.

Need a hand?

If you're stuck, email support@chykalophia.com and we'll help. Include your website address and a screenshot if you can.