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
Open the hamburger menu (three lines) in the top-left of the Elementor editor. Go to Global Colors or Global Fonts. Update a color or font there, and it changes everywhere on the site that uses it.
What you'll need
Intermediate 10 minutes- 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 hamburger menu (three horizontal lines) in the top-left corner of the editor.
Click "Global Colors" (or "Style" → "Global Colors" depending on your Elementor version).
A panel opens showing your current global color palette. Each color has a name and a swatch.
Understanding the global color system
Elementor's default global colors have names like Primary, Secondary, Text, Accent. 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 does not store the actual hex code — it stores a reference to the global. If you change what "Primary" means, every element using "Primary" updates automatically.
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 drag the color picker.
Click the checkmark to confirm.
Watch the preview update — any elements using that global color should change immediately in the editor.
Publish any open pages to make the changes live.
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 publishing. If in doubt, contact us before making global style changes.
How to open Global Fonts
Click the hamburger menu in the Elementor editor.
Click "Global Fonts" (or "Style" → "Global Fonts").
A panel shows your font roles: Primary (usually headings), Secondary (usually body text), Text, and Accent.
How to change a global font
Open Global Fonts.
Click the pencil icon next to the font role you want to change.
Update the font family, weight, size, and other properties as needed.
Click the checkmark to confirm.
Elements that do not use global styles
Some elements may have individual (local) color or font overrides. These will not update when you change a global style. You can identify them because they use a specific hex code rather than referencing a global color name.
To make them use the global color:
- Click the element
- Go to Style
- Find the color or font setting
- Clear the local value and select the global color from the palette instead
Common questions
Related guides
- Changing colors & fonts
- The Theme Builder, explained
- Copying & pasting styles
- Common Elementor mistakes to avoid
- A tour of the Elementor interface
Need a hand?
Learn more
Using the Elementor template library
Learn how to browse and import pre-built page and section templates from the Elementor template library to speed up your editing.
The Elementor Theme Builder, explained
Understand what the Elementor Theme Builder is, what it controls, and when to use it versus editing regular pages.