Nowadays, we’re excited to introduce Complex Devices for Divi 5, together with a brand new multi-functional unit box that helps the entire vary of CSS devices, purposes, and variables.

It helps all CSS devices, together with unitless values comparable to unset and fit-content, and purposes comparable to clamp() and calc(), making growing responsive designs with fluid typography more uncomplicated than ever.

You’ll be able to additionally outline CSS variables and reference them right through your designs.

Take a look at the next video to look the brand new function in motion. 👇

Divi’s New Complex Devices Box

We changed Divi’s vary slider and price picker with a brand new multi-functional box. You’ll be able to drag it like a variety slider, make minute worth changes, or kind in any worth and unit.

You’ll be able to additionally make a selection from repeatedly used devices and purposes.

This new box does all of it and comprises toughen for all CSS devices, purposes, and variables.

Leverage Complex CSS Purposes

Divi’s worth fields now toughen CSS purposes! As an example, purposes comparable to calc() and clam() are very to hand.

The usage of clamp(), you’ll create fluid responsive typography with out responsive modifying. clamp(5rem, 10vw, 15rem) scales your textual content easily because the width of the viewport adjustments however guarantees the textual content won’t ever turn out to be too small or too massive.

Within the video instance beneath, textual content scales proportionally at 10% of the viewport width however by no means exceeds 15rem.

The usage of calc(), you’ll create customized formulation to calculate sizes using a mixture of static and relative values.

Within the instance video beneath, I’ve a set menu and need 30 pixels of area on all 4 facets.

If I set the width to 100%, there’s no area on all sides of the menu. If I scale back the width to 90%, it’s higher, however the area on all sides isn’t constant, scaling up and down with the viewport width.

I will repair this the use of calc! calc(100% – 60px) provides me the very best width, with exactly 30 pixels of area on all sides.

Plug In CSS Variables

Divi’s worth fields now toughen CSS variables!

You’ll be able to outline CSS variables within the Theme Choices or on the web page stage and plug the ones variables into Divi’s new box.

As showcased within the video beneath, I will outline my H1-H6 identify textual content sizes the use of CSS variables, then use the ones variables in my default Name Textual content preset and right through my web page. If I ever need to exchange the dimensions of my headings, all I wish to do is head again to the Theme Choices and edit my variables.

Use Any CSS Unit

Divi’s worth fields now toughen the entire vary of CSS devices!

You’ll be able to pair values with all to be had CSS devices, comparable to VW, which scales in response to the viewport width, and REM, which scales fonts relative to the basis font measurement.

Unitless values comparable to fit-content scale the width of any component to suit its content material, and world values comparable to auto, preliminary, and unset are helpful in unsetting values inherited from better breakpoints.

There aren’t any limits in Divi 5!

Check out Divi 5 Nowadays

Complex Devices for Divi 5 is to be had nowadays, and it’s one of the options coming to Divi this 12 months.

You’ll be able to observe alongside as we growth during the ultimate free up of Divi 5 and past, with updates each two weeks. Relying for your priorities, you’ll use Divi 5 now to construct new internet sites or wait till we upload extra options, no matter works right for you.

As defined in Divi 5’s unique multi-phase release schedule, the Divi 5 Public Alpha is like “Divi 5 Lite.” It’s lacking a couple of options and will not be appropriate for present internet sites, however it’s able for use on new internet sites when you favor the revel in to Divi 4.

We would like you to take a look at it, and when you like it, use it; when everybody loves it, we’ll make it authentic.

Sneak Peek: Divi Design Variables

We’re construction options instant. Each and every time we end a brand new function, we begin a brand new one. On every occasion we begin a brand new function, I provide you with a sneak peek.

If you happen to neglected it, take a look at closing week’s function sneak peek, the place I showcased Divi Design Variables. It’s a daring step in a brand new course for Divi and an very important a part of Divi 5’s design gadget, which we’re construction to fulfill the desires of complicated internet designers.

Watch this video for the entire main points. 👇

Extra Divi 5 Updates Are On The Means

2025 is the 12 months of Divi 5. The tedious paintings is at the back of us. We constructed the super-fast basis, and now it’s time for Divi to make its comeback.

When you’re right here for the Divi comeback, do us an enormous want and tell us via liking this video and leaving a remark. It method so much to us to look you cheering Divi on, and it’s very important to feed the set of rules and unfold the phrase.

Don’t overlook to follow us on YouTube and subscribe to the Divi newsletter so that you by no means omit an replace. I’ll see you quickly for some other Divi 5 function announcement, which I promise might be proper across the nook. 😁

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

WordPress Maintenance Plans | WordPress Hosting

read more