Elementor global styles: set up once, design faster forever

Open almost any Elementor site built in a hurry and you'll find the same thing: twelve shades of almost-the-same blue, headings in four different sizes, and buttons styled one by one. It works, until the client wants to change their brand colour and someone has to edit 80 widgets by hand.

Elementor's global styles fix this. Set them up first, use them everywhere, and the site behaves like a design system instead of a collection of pages.

Where they live

Everything below is in Site Settings, opened from the hamburger menu in the Elementor editor. Changes there apply across the whole site, on every page that uses the global values.

1. Global colours

Elementor gives you four system colours: Primary, Secondary, Text and Accent. Add custom colours for the rest of the palette, and give them clear names:

• Ink for text and dark backgrounds
• Surface for light section backgrounds
• Border for lines and dividers
• Brand for buttons and highlights

Name colours by role, not by appearance. "Brand" still makes sense after a rebrand; "Navy" doesn't.

2. Global fonts and typography

Define your font roles once: a heading font, a body font and an accent if needed. Then set the typography for H1 to H6, body text, links and buttons under Typography.

Set responsive sizes at the same time. A 64px H1 on desktop might be 40px on mobile. Getting this right globally means you never have to resize a heading on an individual page again.

3. Buttons and form fields

Under Buttons and Form Fields, set padding, radius, borders and hover states once. Every button widget and form on the site picks them up automatically. It's one of the most overlooked settings and one of the biggest time-savers.

4. Layout and breakpoints

Under Layout, set the content width and the default gap between elements. Consistent spacing does more for a polished look than almost anything else.

Under Breakpoints, you can add extra breakpoints beyond desktop, tablet and mobile, such as Laptop or Mobile Extra. That gives finer control for designs that need it.

Use the globals, not local overrides

Global styles only help if widgets actually use them. When you style a widget, pick the global colour or font (the little globe icon) instead of typing in a value. A widget with a hard-coded colour won't change when the global does.

A quick audit trick: change a global colour to something garish like bright green, click through the site, and see which elements didn't change. Those are the ones with local overrides.

The payoff

On the MRA Consultancy website, all colours and typography live in Elementor's global settings: a deep indigo and dark teal palette, Lato for headings, Open Sans for body text and a fixed type scale. Every page draws from those settings, so the site stays consistent and a brand update happens in one place.

Set up properly, global styles mean:

• New pages look right from the first widget you drag in
• Clients can edit content without breaking the design
• A rebrand is an afternoon, not a week

If you'd like an Elementor site built this way, or an existing one cleaned up, let's talk.