CSS variables are part of Divi’s Advanced Units feature update. They offer a fast, flexible way to manage your site’s look, and are especially useful for developers and designers working with custom setups.
With the release of Design Variables in Divi 5, many of the same results can now be achieved directly inside the builder. But still, CSS variables remain incredibly helpful in many scenarios, especially if you’re using a child theme, have styles defined globally, or need advanced control.
Imagine you’ve built a site with dozens of headings, buttons, and spacing rules — then the client says, “Make everything 10% bigger.” Without variables, you’re in for hours of manual updates. With CSS variables or Divi’s native Design Variables, one tweak gets the job done.
Let’s explore how CSS variables work!
👉 Divi 5 is ready to be used on new websites, but we don’t recommend converting existing websites to Divi 5 just yet.
What Are CSS Variables & How Do They Work In Divi 5?
CSS variables let you save values — like colors or sizes — in one place and reuse them anywhere on your site. They are like shortcuts that save you time and keep your design consistent. For example, you could define a variable like –padding: 20px; once, and then use it everywhere to create uniform padding across your website.
In Divi 5, CSS variables become easier to use thanks to new tools like Advanced Units and Design Variables, which bring variable input directly into the Visual Builder. Whether tweaking font sizes, setting colors, or adjusting spacing, Divi lets you tap into variables through input fields in module settings. It’s not just for coding wizards; anyone comfortable with Divi’s interface can start playing with them. The result is a faster, more flexible way to easily manage your site’s styles.
Why Use CSS Variables When Divi 5 Has Presets?
If you’ve been using Divi for a while, you’re probably fond of its preset system, and for good reason. Divi 5’s presets are great for speeding up the design process. But with CSS variables now in the mix, why use them when presets already do so much? Let’s break it down and see how these approaches play together to make your workflow smoother.
First, a quick refresher on presets. Element Presets are your go-to for saving fully styled module designs — like a reusable blurb with custom colors, fonts, and hover effects, ready to drop anywhere on your site. With just a few clicks, your website achieves design consistency without much effort.
Then there’s Option Group Presets, which take it a step further. These let you save modular styles for specific styles — like typography settings or border designs — and mix and match them across different elements. Together, these preset types offer a fast and organized way to manage every recurring aspect of your website.
Presets are powerful for reusability, but they’re static by nature. If a preset is built without referencing a CSS variable, updating a global style means revisiting each preset manually. Although not a deal breaker, this makes site-wide changes less dynamic. That’s where CSS variables come in.
Unlock Site-Wide Control With CSS Variables
With CSS variables, you’ll get global control that’s hard to beat. Define something like –spacing: 40px; once, use it across your site, and when it’s time for a change, update that single line of code, and every instance adjusts instantly. They can also be used to control font sizes. For example, you can set a variable for each heading level (h1-h6) and then adjust the values as necessary to instantly update all of the headings on your site.
CSS variables don’t replace presets or Divi 5’s new Design Variables — they enhance them. Imagine using variables inside your presets for a hybrid setup that’s both reusable and adjustable in one go.
💡 Pro Tip: CSS variables are not automatically responsive. If you’re managing responsive styles (like changing font size on mobile), consider pairing variables with media queries in your Theme Options.
Setting Up CSS Variables In Divi 5
Getting started is simple. To make it easy to follow along, we’ll use the Financial Advisor Starter Site for Divi.
How To Define CSS Variables
There are two easy ways to set CSS variables in Divi 5. You can place them in Divi’s Theme Options or an individual page’s settings. Regardless of your chosen method, your variables must be wrapped in :root for global scope. For example, if you want unified heading styles for your entire website, you can define them by navigating to Divi > Theme Options > Custom CSS:
:root {
--text-size-h1: 72px;
--text-size-h2: 60px;
--text-size-h3: 48px;
--text-size-h4: 38px;
--text-size-h5: 30px;
--text-size-h6: 24px;
}
Alternatively, you can place CSS variables in page settings in Page Settings > Advanced > Custom CSS. Variables defined here will only affect elements on this specific page unless duplicated elsewhere.
Applying Variables In Divi 5
To apply these variables to your headings, open the Visual Builder and navigate to the first h1 heading on the page in the hero section’s Fullwidth Header module.
Next, navigate to the design tab and locate the Title Text settings.
In the Title Text Size field, add var(–text-size-h1).
Once added, the text will update to 72px, as defined in our variables.
The great thing about using CSS variables for your site’s styles is how effortlessly you can update them on the fly. For example, if you find that the variable for h2 is too big, you can revise it in Divi’s Theme Options, which will update it across your site.
This setup lays the foundation for faster, smarter style management. In addition to assigning CSS variables for your headings, you can combine them with presets to make updating styles on your site even easier.
Use CSS Variables For Spacing
CSS variables in Divi 5 can control more than just font sizes. For example, you can use it to get consistent padding or margins across multiple modules. Variables can unify your design, and Divi 5 makes it easy. Start by defining a spacing variable in Divi’s Theme Options:
:root {
--spacing: 40px;
}
Back in the Visual Builder on the home page, we’ll select a row, click on a blurb, locate the design tab, and then the spacing fields.
Place var(–spacing) in the fields and watch as Divi applies the spacing variable to the blurb.
Now that we’ve seen variables in action for text and spacing, let’s take it up a notch by combining them with presets for increased efficiency.
Combining CSS Variables With Presets For Maximum Efficiency
In Divi 5, you don’t have to choose between presets and CSS variables — you can use both. By blending CSS variables into your presets, you get a hybrid approach that blends the best of both worlds: the reusability of presets and the global control of variables.
Let’s walk through a quick example using the Financial Advisor starter site for Divi. Start by defining a variable in Divi > Theme Options > Custom CSS:
:root {
--text-size: 18px;
}
Next, head to the Visual Builder, open the Fullwidth Header module on the home page, and select the Financial Advisor Primary element preset to edit it.
Hover over the preset to reveal its settings. Click the settings icon to change it.
Switch to the design tab and locate the Button One settings. In the Button Text Size field, add var(–text-size).
Once added, you’ll see the button in your Fullwidth Header module update to 18px.
The last step is to click the Save Preset button to update the preset on your website.
Now, when you assign the Financial Advisor Primary preset to another Fullwidth Header on your site, the font size will be set to 18px, as defined in the variable in Theme Options.
You can also use variables in all of your button presets, giving all of the buttons on your site a consistent look. Should you decide to update the font size of your buttons in the future, simply edit the variable’s value, and every button on your website will update automatically.
Achieve Faster Style Management In Divi 5
CSS variables in Divi 5 are about fast, scalable style management that fits your workflow. They don’t just stand alone, either. They can be used with presets for a powerful and flexible setup. Whether you’re fine-tuning font sizes across your site or keeping spacing consistent with one quick edit, variables deliver a developer-friendly way to make designing a Divi site a breeze.
👉 Divi 5 is ready to be used on new websites, but we don’t recommend converting existing websites to Divi 5 just yet. We encourage you to download the Divi 5 Alpha today to experiment with CSS variables on your next Divi project. It’s a small step that pays off big, and you’ll immediately feel the difference. Whether you prefer to work with presets or take a CSS-first approach, Divi 5’s support for variables turns it into a powerful tool for designing websites smarter and faster.
Leave A Reply