Introducing CSS Grid For Divi 5

by | Sep 19, 2025 | Etcetera | 0 comments

It is a giant one. We constructed the most productive CSS Grid builder, and it’s to be had for Divi 5 nowadays. It’s higher than Elementor 🙉. It’s higher than Bricks 🙈. Whether or not you need to grasp the grid or just use Divi’s new grid templates, you’ll love this replace.

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

CSS Grid For Everybody

Divi 5 is a some distance cry from its predecessor. We have now been turning Divi right into a internet design powerhouse, with new options like Flexbox, Advanced Units, Presets, and Design Variables. CSS Grid is the following giant step ahead.

On the similar time, we don’t need current customers to really feel misplaced or buried in new settings. We struck the proper steadiness between giving complex customers the essential gear whilst making grid layouts obtainable to novices.

Grid Templates For Each and every Instance

If in case you have by no means heard of CSS Grid and don’t have any need to be informed the fine details of grid layouts, don’t fear—you don’t wish to. Experience the brand new pre-built grid templates!

The wonderful thing about the usage of grid templates is that the grid is managed on the container stage, and as you upload new pieces, they comply with the grid mechanically. It’s a lot more intuitive and unlocks a brand new number of designs.

See also  New Starter Site for Insurance (Quick Install)

Divi has grid templates for each and every scenario, and making use of them to current content material is simple.

Whole Keep watch over for Grid Mavens

If you’re a seasoned CSS Grid knowledgeable, Divi’s grid choices don’t grasp you again. You’ll be able to get directly to the purpose, manually outline your column and row grid templates, and create numerous grid layouts the usage of offset enhancing, which I will be able to contact on later.

In fact, you’ll be able to forgo the interface and observe grid laws the usage of the Customized CSS panel, too; no matter works right for you.

Intuitive Grid Choices For Internet Assemblers

If you’re someplace in between, then Divi 5’s grid builder actually shines.

We reworked CSS Grid parameters into settings to create vertical or horizontal grids, customise column and row dimensions, grid route, part alignment and justification, and extra.

Moreover, the sizing possibility workforce comprises new column and row choices that will let you alter a person grid merchandise’s width, top, and place within the grid.

Grid Offset Enhancing

Considered one of Divi 5’s grid builder’s most original facets is the offset editor, which you’ll be able to use to create repeating non-symmetrical grid patterns on the container stage. Let me come up with a real-world instance.

I created a weblog template within the video under the usage of Divi 5’s Loop Builder; every column is a loop merchandise stuffed with dynamic content material. Once I allow the grid format taste at the guardian container, the columns mechanically comply with the grid.

I will be able to alter the collection of columns, input customized column or row patterns, trade the space sizes, and do many different issues.

See also  WordPress Co-founder Matt Mullenweg Stocks the Long term of the Open Internet at WP Engine’s DE{CODE} Developer Convention

As well as, I will be able to use the offset editor to use laws to express pieces within the grid.

As an alternative of a typical column trend that repeats on every row, I will be able to create offset patterns through, as an example, having each and every 4th merchandise span two columns, beginning at the second one and 3rd merchandise. Those offset patterns give Divi 5’s pre-built row templates such a lot selection.

CSS Grid Demos (Loose Obtain)

You’ll be able to create impressive layouts the usage of CSS Grid that have been by no means imaginable earlier than. If you need inspiration, take a look at those shocking layouts our design group created the usage of the most recent model of Divi 5.

You’ll be able to download them for free and check them out your self.

Check out Divi 5 As of late

CSS Grid for Divi 5 is to be had nowadays and is one of the options coming to Divi this yr.

You’ll be able to practice alongside as we growth throughout the ultimate free up of Divi 5 and past, with updates each and every two weeks. Relying to your priorities, you’ll be able to 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 authentic multi-phase release schedule, the Divi 5 Public Alpha is like “Divi 5 Lite.” It’s lacking a couple of options and is probably not appropriate for current internet sites, but it surely’s in a position for use on new internet sites should you favor the enjoy to Divi 4.

We would like you to check out it, and should you like it, use it; when everybody loves it, we’ll make it respectable.

Have You Attempted Customized Attributes For Divi 5?

When you ignored it, we not too long ago launched the brand new Custom Attributes, which let you upload any characteristic, similar to alt, identify, rel, and aria-label, to features and maximum sub-elements.

See also  My Pointers for Designing Nice Web page Imagery [With Canva, HubSpot, + 3 More Tools]

Divi has had make stronger for explicit attributes, similar to elegance and ID, however now you’ll be able to upload any characteristic to any part. That is particularly essential for accessibility, permitting you to, as an example, upload alt textual content to pictures, and roles and labels to non-semantic features like an icon-based button.

Watch this video for all of the main points. 👇

Extra Divi 5 Updates Are On The Means

2025 is the yr 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.

In case you’re right here for the Divi comeback, do us an enormous desire and tell us through liking this video and leaving a remark. It way so much to us to peer 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 pass over an replace. I’ll see you quickly for every other Divi 5 characteristic announcement, which I promise will likely be proper across the nook. 😁

The publish Introducing CSS Grid For Divi 5 seemed first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more

0 Comments

Submit a Comment

DON'T LET YOUR WEBSITE GET DESTROYED BY HACKERS!

Get your FREE copy of our Cyber Security for WordPress® whitepaper.

You'll also get exclusive access to discounts that are only found at the bottom of our WP CyberSec whitepaper.

You have Successfully Subscribed!