How to Set Up a Professional Design System in Elementor
🚀 This tutorial is sponsored by MotoPress WordPress Hotel Booking plugin, an all-in-one property management suite for rental property websites.
If you build websites with Elementor, you’ve probably faced this situation: a client calls and says,
“Can you update all the colors, all the fonts, and all the buttons across the entire website?”
If you haven’t built your site on a solid design system, that request can quickly turn into a nightmare — especially if the site has dozens (or hundreds) of pages. In this guide, you’ll learn how to create a professional design system in Elementor using global fonts, global colors, and theme style settings — so you can update your entire website design in just a few clicks.
Why You Need a Design System in Elementor
A design system is the foundation of a scalable, consistent, and easy-to-manage website. It ensures that every color, font, and button follows a single set of design rules.
When a client asks for brand updates, you simply adjust your global settings, and the entire website updates automatically — no more manual edits on every page.
Elementor makes this process straightforward through its Global Fonts, Global Colors, and Theme Style features. Let’s break down how to set it all up.
Step 1: Create a Style Guide Page
Start by creating a dedicated Design Style Guide page inside Elementor.
You can do this by opening the Elementor Finder (Cmd + E or Ctrl + E) and creating a new Template. Use the Elementor Canvas layout to have a clean, full-width workspace.
This page will act as your visual overview of the entire design system — showing all your titles, paragraphs, buttons, and color palettes in one place. It’s especially useful when you or your clients want to preview how design elements look together.
😎 You can even download a ready-made global style guide template from the WP Roads Free Resources page, which includes pre-configured settings for fonts, colors, and layouts.
Step 2: Set Up Global Fonts and Typography Hierarchy
Go to Site Settings → Global Fonts.
Here, create custom typography styles for all the key text elements on your site:
- 3XL: Hero and homepage titles (used for H1 in hero sections)
- 2XL: Main page titles (H1 on standard pages)
- XL / L / M / S / XS: Secondary headings (H2–H6)
- Subtitle: Section subtitles and smaller headings
- Navigation & Buttons: Font styling for menus and button text
- Text Base / Big / Small: Body text in different sizes
This hierarchy ensures every text element has a consistent purpose and can be modified globally later on.
Pro tip: Use fluid typography with clamp() values to make font sizes scale smoothly across devices. You can generate perfect clamp values using tools like Min Max value, that you can find in my free resources — simply paste the CSS value into Elementor’s “Custom Size” field for each font style.
Step 3: Apply Global Fonts to HTML Elements
Once your font styles are defined, go to Site Settings → Theme Style → Typography.
Assign your global typography values to the respective elements:
- Body:
Text Base - H1:
2XL - H2:
XL - H3:
L - H4:
M - H5:
S - H6:
XS - Buttons:
Navigation & Buttons
Now every heading and paragraph across your entire site inherits its style automatically. When you change a font in one place, it updates everywhere.
Step 4: Set Up Global Colors and Palette
Head to Site Settings → Global Colors.
Here, you’ll define the color palette that powers your entire website. A good starting point includes:
- Primary Color: Main brand color
- Secondary Color: Accent or call-to-action color
- Text Color: Standard body text
- Titles Color: Headings and major text elements
- Border Light / Border Dark: For containers, cards, and forms
- Background Light / Background Dark: For sections or full layouts
- Text Light / Titles Light: For light text over dark backgrounds
- Text Soft Gray: For muted paragraphs or footers
You can create color palettes easily using tools like Coolors or extract tones directly from your images with ColorZilla, a free Chrome extension.
This technique helps your website’s visuals and photos feel cohesive — the palette and imagery “talk” to each other.
Step 5: Apply Global Colors to Typography, Buttons, and Forms
Now go back to Theme Style and apply your color system:
- Typography: Assign the global text and titles colors.
- Links: Use your secondary color for links and primary for hover.
- Buttons: Set background to your primary or secondary color, text to white, and borders to light or dark variations.
- Forms: Use text soft gray for labels, border dark for outlines, and light backgrounds for input fields.
You can preview all of these in real-time on your Style Guide page. Any change you make here will update instantly across all pages and templates.
‼️ Note: if you apply a global box shadow to buttons in Elementor, this is going to be applied also in places where you don’w want it to appear! Example: in the filters for the loop grid, in the tabs of the Tab widget, and in other parts of the website.
Step 6: Create Global Image Styles (Optional)
Elementor also allows you to apply global design settings to images — such as border radius, box shadow, or hover effects — under Theme Style → Images.
Use this feature carefully, as it applies to every image on your site (including logos). For more advanced, flexible control, consider using CSS variables within a lightweight custom stylesheet.
Step 7: Use Your Global Styles in Page Design
When you start building a page, every new heading, text, and button will automatically adopt your global styles.
For example:
- Changing the H1 from “Personal Chef in Paris” to any other phrase will still inherit your 2XL title font and global title color.
- Every button you add will match your predefined style — without any manual adjustments.
If you later decide to refresh the entire brand — new fonts, new color palette — you only need to update your global settings. Your entire site will adapt in seconds.
Conclusion: Build Smarter with Elementor Global Styles
By setting up Elementor global fonts and Elementor global colors, you transform your workflow.
No more inconsistent pages or time-consuming manual edits — just a clean, scalable design system that keeps your Elementor websites consistent and easy to maintain.
If you want to explore an even more advanced approach, check out my upcoming tutorial on building a CSS framework for Elementor, where I’ll show how to manage spacing, borders, and visual consistency using custom variables and classes.
Ready to level up your workflow?
Head over to WP Roads WordPress Tutorials for more advanced Elementor tutorials and free design resources to supercharge your next WordPress project.
