There is a moment in almost every website project that repeats reliably: the blue needs to be a shade darker. What takes a minute on a cleanly set up website turns into a search operation across forty pages on one that has simply grown. The difference is made right at the beginning.
Where the central defaults live
In the Elementor editor, click the hamburger menu at the top left and choose Site Settings. There you will find, among other things, Global Colors and Global Fonts.
Whatever you store here then appears as a named default in every colour picker and every typography setting. If a widget uses that default instead of a fixed value, it stays permanently linked to it. Change the default later and the widget changes with it.
That is the whole trick. And it still gets skipped most of the time, because at the start it is quicker just to type in a colour value.
How many colours make sense
Elementor creates four default colours. In my projects I work with six to eight — more is almost never needed, and fewer gets tight.
A division that has proved itself:
- Primary — your main colour, for buttons and highlights.
- Secondary — the second brand colour, used sparingly.
- Text — the type colour for running text. Rarely pure black; a very dark grey is more pleasant to read.
- Heading — often the same as text, sometimes a shade darker.
- Background — the page background.
- Surface — a slightly offset tone for cards and highlighted areas.
- Border — for lines and dividers.
- Accent — for notices or warnings, if needed.
Give them meaningful names. “Primary” and “Surface light” will still tell you something in a year; “Colour 5” will not.
A word on contrast
Check text colour against background colour for sufficient contrast before you commit to them. For normal text, a ratio of at least 4.5 to 1 counts as the lower limit. There are free checking tools for this that take seconds.
This is not a formality. Light grey text on a white background looks elegant on your calibrated monitor and is simply unreadable on a phone in sunlight. And since accessibility requirements for websites are increasingly becoming binding, it is also the side you want to be on.
Setting typography centrally
Under Global Fonts you define font family, size, weight, line height and letter spacing for the recurring text roles — primary, secondary, text, accent — and under Theme Style you additionally set the defaults for H1 to H6 and body text.
Two recommendations from practice:
Two font families are enough. One for headings, one for running text. Every additional one costs loading time and makes the design restless. Often a single family in two weights is plenty.
Do not forget line height. For running text a value around 1.6 usually sits well; headings tolerate considerably less, around 1.2. Line height decides more about readability than font size does — in detail here: setting line height correctly in Elementor.
The most common mistake
It looks like this: somebody sets up global colours — and then types the colour value into the widget by hand anyway, because the colour picker happens to be open.
The colour is right, the result looks identical, and the link is missing. At the next colour change, that one widget gets left behind.
Make sure you pick the global value in the colour picker, recognisable by the small globe icon, and not the free colour value next to it. The same distinction applies to typography.
When the website already exists
Converting after the fact is legwork, but it pays off. Do not go page by page, go by element type: first all the buttons, then all the headings, then the surfaces. That keeps your eye on the same pattern and you make progress considerably faster.
Use the opportunity to tidy up. Usually it turns out that a website with a supposed four colours actually contains eleven slightly different shades of blue.
Elementor Pro: global colours and fonts exist in both versions. Pro extends them to the header area, footer, popups and post layouts — the same defaults then apply there too. View Elementor Pro
Why the effort pays off
One hour at the start saves you days later. I have taken over client projects in which a colour change would have taken three days, because every colour was stuck to every widget individually. In a cleanly set up project the same change is one edit in one place.
How to structure a website from the outset so that it stays changeable is one of the focal points of my Elementor training.
Tags