You open a page. You tweak a font. You change a button colour. Everything looks right… until it doesn’t. Another page? Total chaos.That’s the pain of not using Divi’s global styles properly. It’s why so many DIYers end up chasing rogue buttons and mismatched fonts across their sites, wondering how to make Divi pages look the same without manually fixing each one.
But once your global styles are set up right, they save you time, reduce design overwhelm, and keep your site looking like it belongs to one person: you.
What Are Global Styles in Divi?
Global styles are your default design settings. They control fonts, colours, and buttons across your whole site unless you override them. If you’re manually styling every module, you’re doing extra work you don’t need to.
Think of them like your website’s dress code. Set once, apply everywhere. That’s how you make Divi pages look the same — with less effort and more consistency.
What to Set (and Where)
🖋 Fonts
Go to Divi → Theme Customiser → Typography
Set your base font, size, and line height here. This becomes your site-wide default and helps make Divi pages look the same across every section.
🎨 Colours
Go to Divi → Theme Options → Builder → Default Colours
Add your brand colours here so they show up in every module’s colour picker.
A good palette: primary, secondary, accent, and one or two neutrals.
A lighter version of your primary, secondary or accent for backgrounds is a good wildcard.
🔘 Buttons
Go to Divi → Theme Customiser → Buttons
Set your default button font, background colour, border, and hover state.
This avoids the dreaded “why is this one Comic Sans with a red glow” moment and helps ensure all buttons follow the same style — a key way to make Divi pages look the same.
🧱 Headers and Footers
Use the Theme Builder (under Divi → Theme Builder) to create a global header and footer.
This means you only have to update your nav once and it shows everywhere.
🧘 Spacing (And Width)
Divi doesn’t offer a global spacing setting. Choose a consistent rhythm yourself
(for example, 60px top and bottom padding for sections) and stick with it.
Also check your site’s content width under Theme Customiser → General Settings → Layout.
A width around 1080px is standard, but adjust if your site feels too tight or too wide.
Going Deeper: Maximise Your Mobile Width
Want your site to look more contemporary on mobile? This CSS lets your rows use 90% of the screen on smaller devices, instead of the usual 80%. Be aware though; it might not show as 90% when you’re in the Divi builder, so make sure you’re checking on your mobile too:
@media only screen and (max-width: 980px) {
#top-header > .container,
#main-header > .container,
#et_search_outer > .container,
body.single #main-content > .container,
body.page:not(.et-tb-has-template) div.et_pb_row,
body.page.et-tb-has-template .et-l--post div.et_pb_row,
body.single-project div.et_pb_row,
body.single-project div.et_pb_row.et_pb_row_fullwidth,
.et_pb_pagebuilder_layout.single-post:not(.et-tb-has-body) #main-content .et_pb_row {
width: 90% !important;
}
}Why Global Styles Go Wrong
You’ve probably seen it:
- Fonts that randomly switch sizes
- Colours that don’t match your palette
- Buttons that ignore your defaults
It usually happens because you’ve overridden the global style inside a module.
Once that happens, the module stops following your rules and makes it harder to make Divi pages look the same from one to the next.
The Fix
Open the module and find the style you want to fix.
Click the circular reset icon next to that setting to make it follow your global style again.
One More Time-Saver: Presets
Got a particular module or button you love? Save it as a Preset.
You’ll be able to reuse it across your site without restyling everything.
Open the module, click the blue Preset dropdown at the top, and save your current styles as a new preset. You can also set it as the default.
▶️ Watch the short video walkthrough
Presets, combined with strong global styles, are one of the most effective ways to make Divi pages look the same without feeling restricted.
TL;DR: Make Divi Do the Work
If your Divi site feels like it’s barely holding together, start by cleaning up your global styles.
Set your defaults. Reset any rebels. Reuse what works.
You’ll end up with a calmer, more consistent site and a lot less frustration — and yes, it really will make Divi pages look the same in the way you meant them to.
