To set global colours and typography in Elementor, open the editor, go to Site Settings, then Global Colors and Global Fonts. Define your Primary, Secondary, Text and Accent colours plus any extra brand colours, and set heading and body fonts with sizes for each device. Then pick these globals (the globe icon) on every widget instead of custom values. Change a global once and every page updates.
- Globals are the single source of truth for your brand colours and type.
- Always pick a global from the globe icon instead of typing a hex code.
- Set heading sizes for desktop, tablet and mobile in Typography settings.
- In the Atomic Editor (Elementor 4), globals become Variables and Classes in the Design System panel.
- Five to seven colours and two fonts are enough for most brands.
Why use global colours and fonts?
Imagine a site with 30 pages where every button was coloured by hand. The client rebrands from green to blue, and someone has to open every page and change every button. With globals, you edit one colour and the whole site updates in seconds. Globals also stop small inconsistencies (three slightly different greys, four heading sizes) that make a site look amateur.
How do you set global colours?
- Open any page in Elementor and go to Site Settings.
- Click Global Colors.
- Edit the four system colours: Primary (main brand colour), Secondary, Text (body text) and Accent (buttons and links).
- Add custom colours such as Dark Background, Light Background and Border, with clear names.
- Save.
| Name | Use for | Example |
|---|---|---|
| Primary | Headings, key shapes | #0A2540 |
| Accent | Buttons, links, highlights | #10B981 |
| Text | Body copy | #334155 |
| Light background | Alternate sections | #F1F5F9 |
| Border | Cards, dividers, inputs | #E2E8F0 |
Live 1-to-1 WordPress and Elementor lessons on your own site, from $40. Every lesson recorded. Beginners welcome.
How do you set global typography?
- In Site Settings, open Global Fonts and set Primary (headings), Secondary, Text (body) and Accent (buttons).
- Choose a font family, weight, size and line height for each.
- Open Typography in Site Settings and set sizes for H1 to H6 and body text.
- Switch to tablet and mobile and reduce heading sizes (for example H1 from 56 px to 34 px on mobile).
- Save and check a few pages.
Want to use a custom or local font? See how to change fonts in WordPress and Elementor, including hosting Google Fonts locally for speed and privacy.
How do you apply globals to widgets?
In any widget’s Style tab, click the globe icon next to a colour or typography setting and choose the global. A globe shown in colour means it is linked. If you type a custom value, the link breaks and that widget will not change when you update the global. To fix old pages, select widgets and reassign globals, or paste style from a correctly linked widget.
What changes in Elementor 4?
The Atomic Editor replaces Global Colors and Fonts with a Design System panel (since 4.1). You create Variables for colours, fonts and sizes, then Classes that combine them (for example a “btn-primary” class). Assign the class to any element and it inherits the whole style. Default Styles (4.3) let you style every H2 or paragraph tag site-wide in one place. The principle is the same as globals, just more powerful.
For a broader look at reusable design, read Elementor Components.
Want to learn Elementor faster, live and 1-to-1?
I teach WordPress and Elementor 1-to-1 over Zoom or Google Meet, on your own website, at your pace. Lessons start at $40, every lesson is recorded so you can rewatch it, and you get a short checklist afterwards. Beginners, business owners, students and freelancers are all welcome. See lessons and prices or book a free intro call.
Frequently asked questions
Where are global colors in Elementor?
In the editor, open Site Settings and choose Global Colors. In the Atomic Editor, use the Design System panel and Variables.
Why did my widget not change when I updated a global color?
The widget uses a custom value instead of the global. Click the globe icon and reselect the global.
How many global colors should I use?
Usually five to seven: primary, accent, text, one or two backgrounds and a border colour.
Can I set different font sizes for mobile?
Yes. Switch to mobile view in Typography settings and set smaller sizes for headings and body text.
What are Variables in Elementor 4?
Reusable values for colours, fonts and sizes in the Atomic Editor, used inside Classes to style elements consistently.
Sources
Live 1-to-1 WordPress and Elementor lessons on your own site, from $40. Every lesson recorded. Beginners welcome.
More WordPress guides
Guide, 4 min readHow to Create a Blog Page With Elementor (Loop Grid and Archive)
Guide, 4 min readHow to Create and Customize Buttons in Elementor (2026)
Guide, 3 min readHow to Create a Landing Page in Elementor (Step by Step)
Guide, 4 min readElementor Sections, Columns and Containers Explained (2026)Rather have an expert run your WordPress site?
Tanvir H is a Bangladesh-based WordPress and Elementor web designer with 7+ years of experience, 650+ projects and a 4.9 client rating. New websites, redesigns, fixes, speed, security and SEO, handled by one expert who explains everything in plain English and works with clients worldwide.
