Designing Nested Rows & Columns Using WordPress & Divi

When it comes to creating flexible layouts in WordPress – Divi is at the top of its class. However, occasionally we come across something that Divi hasn’t quite got right (in our opinion)… yet!*

*We say “yet” because Divi is always developing and adding new features. 

One of those things is the use of nested rows and columns.

Within the standard Divi Builder, there’s a whole host of different row layouts, from one to six columns at varying widths. This is great. Then there’s the Speciality Row, which allows you to insert up to nine nested row and column layouts.

On the left, standard Divi row options with up to six columns. On the right, Speciality Section with nine layouts.

Where this falls down for us a little is the flexibility within the speciality sections.

Once you’ve added a Speciality Section, you can add further rows, with up to three columns per row, within whichever part of the layouts above are shown in green. In the orange sections, you can add modules.

Whilst this feature is fantastic, what it doesn’t give us is the option to have more than one column that contains a row within it.

When we first started working on the 2023 relaunch of the Official Toyah Willcox Website, we had designed a ‘hero’ section for the top part of the homepage. We wanted this to be split into three sections – one large section on the left and two smaller sections on the right. We also needed this to be easy to update by the website’s administrator.

And as simple as this layout looks… it wasn’t straightforward to build.

Here’s what we did…

In our original design for the website, we wanted to have one row on the right and a two rows on the left.

1. Create and design the three sections

We designed the main (left hand) section and smaller (right hand) sections using single column, single row layouts.

We couldn’t use a standard row or speciality section for this, because we needed to use multiple modules within each section, with the ‘hero’ image as a background.

2. Save each section of the hero area into Divi Library

Once we were happy with the design and layout of the three sections, we saved them to the Divi Library.

For best practice, as we’re not going to be maintaining the content, we named the row, and the modules.

3. Install Divi Library Shortcodes plugin

The Divi Library Shortcodes plugin allows you to insert a pre-built item from your Divi Library into almost anywhere on your website.

Once installed, it will give all of your Divi Library items a shortcode.

4. Insert the three hero sections using the Divi Library Shortcodes plugin

Next, we created a standard row with two columns.

Into the left hand column, we added a Code module and pasted the shortcode assigned to our larger hero section. Then we added the two smaller, right hand, hero sections using the same method, one above the other in the right hand column using two Code modules.

5. Now we needed to get the styling right

We hard-coded the large left-hand hero area to be a height of 600px, which then meant the 2 smaller areas on the right would have to be 300px in height each so that the total height would equal the same on both sides. Note: This can be transferable to any layout – you can have the large block as 800px in height which means the 2 smaller ones would be 400px in height, or you can mix and match different sized smaller sections (like 800px on one side plus a 500px and 300px on the other) as long as the total height equals the same height as the larger section.

To create the gaps between the hero areas, we used transparent borders (we did this because using padding or margins would push the blocks out of alignment). We decided that a .5vw gap between all the areas looked the best. So to start we would make the gutter width 1 in the row settings so that they are all next to each other. Then in large area’s module settings we added a border of .5vw to whatever side is touching the 2 smaller areas (so if the smaller areas are on the left of the larger one we would add the border to the left side of the larger area and vise versa).

Diagram showing the sizing and spacing settings we used for our Divi nested rows.

The borders for the smaller areas are a little different though. To ensure that they were equally sized we had to share the .5vw gap between them both, so each smaller area had a transparent border of .25vw. The sides of the areas that needed the border on them depended on which one was on top of the other. The smaller area on top needed a .25vw transparent border on the bottom side of the code module, alternatively the area on the bottom needed the border to be on the top side of the code module so that they would meet in the middle and both create a total gap size of .5vw (while still being equally sized).

Summary

You can create relatively simple layouts using Divi – but they’re not always part of the standard suite of options.

Check out the rest of our Divi Design Tips Blog here to see what else we’ve been creating.