Global colors, fonts and site settings are values you define once in your page builder and link every element to, so one change updates the whole site; set them up before designing pages and keep the list small. Without them, a site edited by a few people over a couple of years ends up with five slightly different blues, headings in three sizes that were meant to be one, and buttons that each have their own padding. Nobody chose that. It happened one widget at a time, because changing a color on a single element is always quicker than going to the global settings.
Global styles are the fix. You define colors, fonts and a few other settings once, link elements to them, and change the whole site from one place. This guide explains how global styles work in Elementor and similar builders, how to set them up and how to keep a site consistent as it grows.
Key takeaways
- Set global colors and fonts before you design pages, or as the first step when adopting a template kit.
- Name values by role, such as primary, text or accent, rather than by appearance.
- Keep the palette and type scale small. A few well-chosen values are easier to apply consistently.
- Avoid one-off values on widgets. Each one is a place that will not update when the brand changes.
- Align the theme’s settings with the builder’s so they do not fight.
What global styles are
Design teams often talk about design tokens: named values such as “primary color” or “heading font” that every design refers to, instead of repeating raw values like a hex code. Change the token and everything using it changes.
Page builders implement the same idea with global settings. In Elementor, these live in site settings, which in recent versions you open from the editor menu rather than the WordPress dashboard. Behind the scenes, the builder outputs these values as CSS variables, and each linked widget uses the variable instead of a fixed value.
Typical global settings include:
| Setting group | What it controls |
|---|---|
| Global colors | Named colors such as primary, secondary, text and accent, plus your own custom colors |
| Global fonts | Named type styles with family, weight, size and line height |
| Typography | Default styles for body text, links and headings H1 to H6 |
| Buttons | Default button text, colors, border, radius and padding |
| Images | Default border, radius and hover effects |
| Form fields | Default label and field styles |
| Layout | Content width, default gaps between elements, breakpoints |
| Site identity | Site name, logo, favicon |
| Background | Default page background |
| Custom CSS | Site-wide CSS, available in some plans |
Exact names and groups vary by version, and some items are part of paid plans. Template kits usually ship a full set of these values as their global kit styles.
Planning your tokens
Before touching the settings, write down what you need. A short list is better than a long one.
Colors
Name colors by their job, not their look. “Primary” stays meaningful when the brand changes from blue to green; “Blue” does not.
| Role | Used for | Notes |
|---|---|---|
| Primary | Main brand color, key buttons | Must contrast with text placed on it |
| Secondary | Supporting brand color | Optional; some sites do without |
| Text | Body copy | Usually a dark neutral, not pure brand color |
| Accent | Links, highlights, small details | Use sparingly so it stands out |
| Background light | Section backgrounds | A neutral that alternates with white |
| Background dark | Footer or contrast sections | Text on it needs to be light enough |
| Border | Dividers, card outlines, form fields | A quiet neutral |
Check that text and buttons have enough contrast against their backgrounds. Our guide to choosing a color palette for a business website covers this in detail.
Fonts
Most sites need one or two font families and a small set of named styles:
- Primary or heading style: the font for headings.
- Secondary style: subheadings or small labels, if different.
- Text style: body copy.
- Accent style: buttons, captions or navigation, if they need something distinct.
Then decide a type scale for headings H1 to H6 and body text, with sizes for desktop, tablet and mobile. Elementor lets you set responsive values per breakpoint. See font pairing for websites for choosing families and checking licenses.
Spacing and layout
Decide the content width and the default gap between elements, and stick to a few spacing values for section padding. If your version supports spacing variables or classes, use them for repeated values.
Setting up global styles step by step
- Open site settings. In recent versions of Elementor, open any page in the editor and look for site settings in the main menu. Check the current documentation if you cannot find it.
- Set global colors. Edit the system colors (often primary, secondary, text and accent) and add custom colors for backgrounds and borders. Give custom colors role-based names.
- Set global fonts. Edit the system font styles and add any extra named styles you planned.
- Set typography defaults. Assign body text, link colors and heading styles H1 to H6, using the global fonts and colors you just created.
- Set button, image and form field defaults. Link their colors and fonts to globals rather than typing raw values.
- Set layout values. Content width, default gaps and breakpoints. Changing breakpoints later affects every responsive setting, so decide early.
- Check the theme’s settings. If the theme also sets typography and colors, set them to match or to neutral values so the builder is the single source.
- Save, then check several pages at desktop, tablet and mobile widths.
Keeping widgets linked
In Elementor’s style controls, color and typography fields show whether they are using a global value. In recent versions this appears as a globe icon or a named swatch. When you pick a global, the field shows its name. When you type a custom value, the link is broken and the widget keeps that value even if the global changes.
Good habits:
- Pick from the global list first, every time.
- If a global is not quite right, change the global, not the widget.
- If you need a new value, add it as a new global with a clear name, then use it.
- When copying styles between widgets, check that the pasted values are still linked.
- Review older pages periodically for unlinked values, especially on pages edited by several people.
Template kits that were built well already link their widgets to the kit’s globals, which is why importing the global kit styles first matters. Our guide on installing a template kit covers that order.
Global styles and template kits
When you import a kit, its global kit styles replace or add to your site settings. A few things to know:
- Importing global styles changes existing pages that use the same globals. Test on staging if the site already has content.
- Rebranding a kit should start in site settings: change the kit’s primary color to yours and every linked element follows.
- If a kit looks wrong after import, the global kit styles may be missing or inactive. See template kit import problems.
Working with a team
When several people edit a site, global styles only help if everyone uses them. This matters most on sites that change hands often, such as club and community sites run by volunteers.
- Write a short style note listing each global color and font and what it is for.
- Agree that new colors or text styles are added as globals, not on widgets.
- Limit who can change site settings, since a change affects every page.
- Before a redesign, change globals on a staging copy and review the whole site.
Troubleshooting
| Problem | Likely cause | Fix |
|---|---|---|
| Changing a global does not affect some elements | Those elements use custom values | Relink them to the global |
| Fonts differ between editor and live site | Theme styles or cached CSS overriding | Align theme settings; regenerate Elementor CSS; clear caches |
| Heading sizes inconsistent across pages | Some headings styled individually | Reset them to use the typography defaults |
| A color looks different in sections | Overlays, opacity or blend settings on the section | Check background overlay and opacity settings |
| Mobile text too large | Desktop size used without responsive values | Set tablet and mobile sizes in the global font styles |
FAQ
How many global colors should a site have?
Enough to cover each role, usually a handful. If you keep adding near-identical shades, consolidate them.
Can I export global styles to another site?
In recent versions, Elementor’s import and export tools can include site settings as part of a kit. Check the current documentation for what is included.
What happens to my global styles if I change themes?
Elementor’s site settings are stored with Elementor, not the theme, so they usually stay. The new theme may add its own styles, which you will need to align.
Bottom line
Global styles turn a page builder site from a collection of individually styled widgets into a system. Plan a small set of role-named colors and fonts, set them up before designing pages, link every element to them, and change the globals rather than the widgets. When the brand changes, or a template kit needs rebranding, you will be editing one panel instead of every page.