You build your basic website design system in Divi 5 by setting global styles in the Theme Customizer. You define your core layout, colors, typography, and buttons once, then reuse that system everywhere you design.
Divi 5 still uses the same Theme Customizer as Divi 4, so if you’ve seen it before, it will look familiar. This guide focuses on the minimum you need to set up a simple, solid design system.
Where you setting global styles in Divi 5
Divi 5 has a few different "layers" of design control:
Theme Customizer – sets your basic website design system: layout, site background, typography, buttons, and some global colors.
Theme Options – handles things like logo, performance, basic SEO settings, and more.
Divi Builder / Theme Builder – handles per-page designs and advanced templates.
In this article, you work only in the Theme Customizer to set a clean baseline.
Step 1: Open the Theme Customizer
Log in to your WordPress Dashboard.
Go to Divi → Theme Customizer.
The Customizer opens with a live preview on the right and a list of panels on the left, such as General Settings, Header & Navigation, Footer, Buttons, Blog, Mobile Styles, and Color Scheme.
You’ll work mainly in General Settings, Buttons, Mobile Styles, and Color Scheme.
Step 2: Set up the Site's Identity
In the Theme Customizer, click General Settings → Site Identity
Set:
Site Title - Usually, it is the business name. The Site Title is being used in search results, and it helps crawlers to identify your website.
Tag Line - A short and brief description of your website
Site Icon - The Site Icon is what you see in browser tabs, bookmark bars, and within the WordPress mobile apps. It should be square and at least 512 by 512 pixels.
Step 3: Set layout and background styles
You start your basic website design system with layout and background.
In the Customizer, click General Settings → Layout Settings.
Set:
Website Content Width – controls how wide your content area is.
Sidebar Gutter Width – controls the space between the main content and the sidebar (if one is being used).
Website Gutter Width - controls the space between columns (inside of a row). This only applies if the Row's Layout Style is set to Block.
Section / Row Height – control the amount of padding each Section and Row has.
Primary Color - sets the Primary Color. This is usually used in the button's text color, call to action background color, and more.
Secondary Color - sets the secondary color.
Go back and click General Settings → Background.
Choose:
A Background Color for the site (usually a light neutral).
Or a Background Image if you want a boxed layout feel.
Keep it simple here. You’ll design more specific backgrounds later in the Divi Builder.
Step 4: Define your core colors
Consistent color is a big part of your basic website design system.
In the Customizer, go to General Settings → Layout Settings (same panel as before).
Find the Primary and Secondary colors.
Set Primary to your main accent color (buttons, links, key highlights).
Set Secondary to a supporting accent.
These two become global colors that Divi uses across many areas. When you change them here later, elements that use those colors update automatically.
Still in General Settings → Typography, set:
Body Link Color – usually your primary accent.
Body Text Color – usually dark gray or near-black for readability.
Now your links, text, and accents follow the same color logic everywhere.
Step 5: Set global typography (body and headings)
Next, you decide how the text looks across the entire site.
In the Customizer, go to General Settings → Typography.
Start with body text:
Body Font – pick a clean, easy-to-read font.
Body Text Size – choose a base size that feels comfortable on desktop (often 16–18px).
Body Line Height – increase slightly so paragraphs breathe.
Body Text Color – should already match what you set earlier.
Then set headings:
Header Font – you can reuse the body font or pick a contrasting font for headings.
Header Text Size – adjusts overall heading scale (H1–H6).
Header Line Height and Style – tweak letter spacing and weight so headings stand out.
Divi modules use these defaults for titles and text, so every new page you build will follow your typographic system unless you override it.
A simple rule for a beginner design system:
One font for body, one font for headings.
Clear contrast between heading size and body size.
⚠︎ Note: The font-related options, such as the font family and colors, can also be changed from the Global Variable Manager.
Step 6: Style your global buttons
Buttons carry your calls to action, so bake them into the basic website design system.
In the Customizer, go back to the main panel and click Buttons.
Open Button Style and set:
Button Text Size
Button Text Color (often white)
Button Background Color (often your primary accent)
Border Width
Border Color
Border Radius
Font, icon, and letter spacing
Open Button Hover Style and set a simple, clear hover effect:
Slight color change, border change, or subtle background shift.
These settings apply to Divi’s default buttons site-wide, so your CTAs look consistent by default, even before you tweak anything in the builder.
Step 7: Save and test your design system in the builder
When you’re happy with your basic website design system:
Click Publish at the top of the Customizer to save your changes.
Exit the Customizer.
Create a new page and click Use Divi Builder.
Add a few standard modules:
Text module with headings and paragraphs
Button module
A simple layout with sections and rows
You should see:
Fonts and colors match what you set in the Theme Customizer.
Buttons using your global button style.
Spacing and text sizes that feel consistent across the page.
If something looks off, go back to Divi → Theme Customizer, tweak, and publish again. Over time, this basic website design system becomes the stable foundation for everything you build in Divi 5.