Today, we are excited to introduce Advanced Units for Divi 5, including a new multi-functional unit field that supports the full range of CSS units, functions, and variables.

It supports all CSS units, including unitless values such as unset and fit-content, and functions such as clamp() and calc(), making creating responsive designs with fluid typography easier than ever.

You can also define CSS variables and reference them throughout your designs.

Check out the following video to see the new feature in action. 👇

Divi’s New Advanced Units Field

We replaced Divi’s range slider and value picker with a new multi-functional field. You can drag it like a range slider, make minute value adjustments, or type in any value and unit.

You can also select from commonly used units and functions.

This new field does it all and includes support for all CSS units, functions, and variables.

Leverage Advanced CSS Functions

Divi’s value fields now support CSS functions! For example, functions such as calc() and clam() are very handy.

Using clamp(), you can create fluid responsive typography without responsive editing. clamp(5rem, 10vw, 15rem) scales your text smoothly as the width of the viewport changes but ensures the text will never become too small or too large.

In the video example below, text scales proportionally at 10% of the viewport width but never exceeds 15rem.

Using calc(), you can create custom formulas to calculate sizes utilizing a combination of static and relative values.

In the example video below, I have a fixed menu and want 30 pixels of space on all four sides.

If I set the width to 100%, there’s no space on either side of the menu. If I reduce the width to 90%, it’s better, but the space on either side isn’t consistent, scaling up and down with the viewport width.

I can fix this using calc! calc(100% – 60px) gives me the perfect width, with precisely 30 pixels of space on either side.

Plug In CSS Variables

Divi’s value fields now support CSS variables!

You can define CSS variables in the Theme Options or at the page level and plug those variables into Divi’s new field.

As showcased in the video below, I can define my H1-H6 title text sizes using CSS variables, then use those variables in my default Title Text preset and throughout my website. If I ever want to change the size of my headings, all I need to do is head back to the Theme Options and edit my variables.

Use Any CSS Unit

Divi’s value fields now support the full range of CSS units!

You can pair values with all available CSS units, such as VW, which scales based on the viewport width, and REM, which scales fonts relative to the root font size.

Unitless values such as fit-content scale the width of any element to fit its content, and global values such as auto, initial, and unset are useful in unsetting values inherited from larger breakpoints.

There are no limits in Divi 5!

Try Divi 5 Today

Advanced Units for Divi 5 is available today, and it’s one of many features coming to Divi this year.

You can follow along as we progress through the final release of Divi 5 and beyond, with updates every two weeks. Depending on your priorities, you can use Divi 5 now to build new websites or wait until we add more features, whatever works best for you.

As outlined in Divi 5’s original multi-phase release schedule, the Divi 5 Public Alpha is like “Divi 5 Lite.” It’s missing a few features and may not be suitable for existing websites, but it’s ready to be used on new websites if you prefer the experience to Divi 4.

We want you to try it, and if you love it, use it; when everyone loves it, we’ll make it official.

Sneak Peek: Divi Design Variables

We’re building features fast. Every time we finish a new feature, we start a new one. Whenever we start a new feature, I give you a sneak peek.

In case you missed it, check out last week’s feature sneak peek, where I showcased Divi Design Variables. It’s a bold step in a new direction for Divi and an essential part of Divi 5’s design system, which we are building to satisfy the needs of advanced web designers.

Watch this video for all the details. 👇

More Divi 5 Updates Are On The Way

2025 is the year of Divi 5. The tedious work is behind us. We built the super-fast foundation, and now it’s time for Divi to make its comeback.

If you’re here for the Divi comeback, 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. 😁

The post Introducing Advanced Units For Divi 5 (Including CSS Functions & Variables) appeared first on Elegant Themes Blog.