Divi 5 Sizing System & Color Palette Variable Generator

I am excited to introduce the Variable Generator for Divi 5.

At the core of Divi 5’s design system are variables and presets. With advanced units, you can create fluid, responsive sizing systems using clamp(). With relative colors, you can create mathematically beautiful color systems using HSL. When you set everything up correctly, it makes managing your website so much easier.

But, setting up all your color and number variables takes time, and learning clamp() can be intimidating.

That’s where the new variable generator comes in, allowing you to spin up an entire sizing and color variable system automatically in a few clicks. It’s easy for beginners because Divi does the work for you, but it also offers all the controls you could ever ask for, allowing CSS experts to fully customize their systems.

There’s much to explore, so let me jump into the builder and give you the full tour. 👇

Generate A Stunning Relative Color Palette

The Divi 5 color palette is global by default. Instead of creating a static color palette, each color you add is a color variable. When you use those color variables throughout your website, you can update each color once in the variable manager, and the changes apply to your entire site. That’s the beauty of variables.

What’s more, you can create color relationships using Divi’s relative color system. Instead of manually creating a set of light-to-dark shades of your primary color, you can create a relative color based on it and adjust its lightness. When you adjust the primary color, all related colors are automatically updated. The color scheme of your entire website can be adjusted based on a single color variable.

It’s simply amazing, and now, Divi does all the hard work for you!

Using The Color Palette Generator

In the variable manager, hover over the color group and click the “Generate Color Palette Variables” button to open the variable generator.

Divi takes your website’s primary color and automatically generates a color system relative to it. You can tweak the secondary color relationship, choose how many color shades you want, and you’re done!

Once saved, the variable generator will update your website’s base colors (primary, secondary, body text, header text, and link) and generate a spectrum of light-to-dark and transparent colors based on your primary and secondary colors.

The beauty of these color variables is that every variable is relative to the primary color, and when you change the primary color, everything else follows suit.

Generate An Entire Fluid Sizing System

The color palette generator is just the tip of the iceberg. The variable generator goes deep!

With a few clicks, the variable generator will create an entire fluid and responsive sizing system, including sizing variables for text size, spacing, gap, width, border radius, and more. The system Divi generates will work great out of the box, but you can also tweak every aspect.

Using The Sizing Variable Generator

In the variable manager, hover over the numbers group and click the “Generate Fluid Sizing Variables” button to open the variable generator.

Next, choose your desired variable type from the variable type menu. The sizing variable generator can generate the following systems:

1. Font Size – Font size variables can be used to create headings and body text that scales with screen size.
2. Spacing – Spacing variables can be used for margin and padding settings, creating spacing that scales with screen size.
3. Gap – Gap variables can be applied to the horizontal and vertical gap settings of your flex containers to create varying gap sizing that scales with screen size.
4. Radius – Radius variables can be applied to border-radius settings to create rounded corners that get more or less rounded based on the screen size.
5. Border Width – Border width variables can be applied to border width settings to create widths and scale with screen size.
6. Clamp (Generic) – If you want to generate your own generic clamp-based variables, the clamp variable generator makes it simple.
7. Size (Generic) – Generate generic sizing variables for anything not covered by the overarching systems mentioned above.

For beginners, you don’t need to worry about configuring anything. Just choose how many variables you want, and then click the “Add Variables To My Site” button.

The Beauty Of Fluid And Responsive Clamp Variables

By default, all sizing variables generated by Divi use clamp to create sizes that adapt to all screen sizes. You don’t need to use responsive editing at all.

The preferred size scales with the viewport size, clamped to minimum and maximum values to prevent things from getting too big or too small.

For the Pros: Customize Everything!

The default sizing systems that Divi generates work great out of the box, but if you want control, you have it.

Open the customization sidebar to reveal all the settings you could ever ask for.

1. Choose from different scaling functions.
2. Define your website’s minimum and maximum width to tailor clamp functions to your website.
3. Customizing each individual variable manually.
4. Build static non-clamp-based variable systems.
5. Change variable suffixes and prefixes.

Try Divi 5 Today

Complete site editing is now available for Divi 5. Give it a try and let us know your thoughts.

We rebuilt Divi from the ground up and packed it full of dozens of your most requested features. Forget everything you thought you knew about Divi, because Divi 5 is an entirely different beast.

Have Your Tried Nested Option Presets?

In case you missed it, we recently released Nested Option Presets.

Divi 5’s preset system is the most powerful class-based design system of any WordPress page builder. In fact, Divi 5 presets encapsulate far more than just CSS; they are stackable, nestable global components.

Additionally, Divi offers the unique concept of option presets that allow you to create shared styles for subcomponents and option types, and to nest them within broader element presets. It’s almost like using a CSS preprocessor and importing mixins; it just makes your website design system so much easier to manage.

Now, presets are even more powerful, since you can apply option presets to nested options and nest option presets inside other option presets. 🤯 Sub-options that previously didn’t support presets, such as Call To Action > Button > Border, no longer have that limitation.

Watch this video for all the details. 👇

More Divi 5 Updates Are On The Way

The features keep coming, and we aren’t slowing down anytime soon!

If you are enjoying these updates, do us a huge favor and let us know by liking this video and leaving a comment. It means a lot to us to see you cheering Divi on, and it’s essential to feed the algorithm and spread the word.

Don’t forget to follow us on YouTube and subscribe to the Divi newsletter so you never miss an update. I’ll see you soon for another Divi 5 feature announcement, which I promise will be right around the corner. 😁