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. ๐
This is the best announcement so far!
Of course it’s great to have all these options but are we not getting back into having to worry about “coding” again. e.g. 100%-60px? When do I use that? Which selector takes which syntax? What happened to Keep it Simple?
You don’t have to use math functions. But they are supported if you need them. They can save a lot of time.
Hi Nick,
Forgive me for jumping in with a question, but I’m really grappling with a workflow challenge and hoping you might offer some insight. I frequently use tools like Relume for sitemapping and wireframing, which is fantastic for initial design phases. However, the process of then meticulously rebuilding those layouts block-by-block in Divi can significantly slow things down.
My core questions revolve around bridging this gap more efficiently:
Importing/Translating External Layouts: Are there more streamlined ways currently, or perhaps planned for the future, to import or translate layouts designed externally (e.g., from Relume wireframes, design tool exports, or potentially even well-structured HTML) into fully editable Divi sections, rows, and modules, minimizing the need for complete manual rebuilding? (Beyond just using code modules).
Programmatic Interaction & AI Assistance: I’ve explored the idea of speeding up modifications via code. While I understand directly manipulating the exported JSON is complex and likely unreliable (especially using current AI, given the specific schema), I’m curious if Elegant Themes envisions a future with more developer-focused tools or APIs. Is there potential down the road for ways to programmatically interact with layout structures, perhaps enabling faster bulk changes or integrations with external tools or AI assistants (rather than direct AI generation)?
Creating Deep Divi Integrations/Layout Packs: Seeing Relume’s Figma library makes me think about creating similar comprehensive component/layout packs specifically for Divi. To do this effectively seems to require a deep understanding of Divi’s layout structure. Are there developer resources, guidelines, or best practices you could point to for agencies or developers looking to build these kinds of structured layout systems or integrations that work seamlessly with Divi?
I really appreciate any perspective you might have on improving this design-to-Divi workflow.
PS. Divi 5 speed is a dream!
Hello, everyone is doing great job, and I am really excited to see the divi 5.
I have a question, is Divi 5 going to support Tailwind?
I’m afraid Divi 5 doesnโt natively support Tailwind CSS, but you can try using it by manually enqueuing the Tailwind stylesheet in your child theme.