Exploring Divi 2.4: Why Rows Are Now the Most Versatile Part Of Divi, And How You Can Use Them Effectively

Last week we introduced Divi 2.4, the biggest upgrade in Divi history and a giant leap forward for our most popular WordPress theme. There are so many great features to explore in this update that it was hard to describe them all on the release post, which is why we have decided to do a 2-week series of informational blog posts that will aim to teach you how to take full advantage of Divi 2.4 and its new options. In part seven of this series, we explore Divi’s new Row and Sections options, and I show you why Rows are now more versatile than ever.

Learn All About Divi 2.4 Here

A New Generation Of Divi Layouts

If you are a Divi user, you know that the layouts built with the Divi Builder are broken up into three elements: Sections, Rows and Modules. Sections are your largest organizational element, used to separate big blocks of content on the page. Inside of each section are placed Rows of columns, and inside each column can be any number of Modules. These are the building blocks of your page. Modules are the content, but Rows control how that content is arranged. Using different combinations of column layouts, you can create a vast array of layouts.

That has always been the case in Divi. In Divi 2.4, however, we have introduced a ton of new options to Rows which greatly increase the range of layouts that can be created. Rows and their new layout options are the key to unlocking dynamic and unique looking pages. In this article, we will be exploring the new Row options added in Divi 2.4, as well as discussing how these new options can be used together to create some really cool designs. Let’s get started!

A Look At The New Options

In previous versions of Divi, rows didn’t have any settings. What made each row unique was merely the column structure you chose for it. Divi 2.4 introduces Row Options, which you can now access by clicking the settings icon to the top left of any row on your page.

There are dozens of new settings, broken up into different categories:

New General Settings

Here you will find general layout settings that affect the overall row structure. We tend to place settings into the General Settings tab when we think they will be used often and can be easily understood by new customers.

Fullwidth Rows – The fullwidth row options is incredibly powerful. In the past, the only way to extend an element across the entire width of the browser was to use a Fullwidth Row. That meant that you were limited to our smaller collection of Fullwidth Modules. That is not longer the case in Divi 2.4. Now any row can be made fullwidth, and any module can be used inside of these new fullwidth rows.

Adjustable Gutter Width – This new option lets you adjust the spacing that exists between each column in your row. This spacing can either be increase or decreased, and it can even be decreased down to nothing (allowing your modules to touch edge-to-edge). This works great with image modules, or modules that have background colors/images.

Custom Row Widths – In addition to extending a row the fullwidth of the screen, you can also define a custom width. For example, you could make a single row bigger or smaller than the rows around it, depending on the content you are trying to display. This is a great way to add variation to your page, creating a better rhythm for your content.

Custom Padding – Every row has padding above and below it. This is part of Divi’s natural structure, separating elements to improve hierarch and readability. This spacing can be adjusted to fit your content when needed.

Mobile Padding Adjustment – By default, custom Row padding will not be applied to mobile devices. Large padding values that look good on Desktop often wont look great on a smartphone, but you can choose to apply these padding values if desired.

CSS ID – Much like all Divi Modules, Rows now allow you to assign custom CSS ID’s, which can be targeted using anchor links or styled in your Child Theme or ePanel CSS.

CSS Class – Rows can also have custom CSS Classes applied to them, which can be used to add custom styling in your stylesheet.

All New Column Settings

Depending on the type of row you add, and how many columns the row contains, you will find a range of new column settings within the Advanced Design Settings tab. Here you can adjust styling for each individual column within the row.

Column Background Color – Individual columns within each now can now have their own background color applied to them. When you open up the row settings popup, you will see options for each column depending on how many columns are in the row you are editing.

Column Background Image – Much like background colors, each column can also have a background image.

Column Padding – Adjusting the padding for columns is especially useful for rows that are full width. Adding additional padding around the columns can give the content within each column more room to breathe as their sizes are increased with the width of the browser.

Advanced Design Settings

Inside the Advanced Design Settings you will find a ton of new options that allow you to adjust every aspect of your row’s appearance. We separate these into their own tab to ensure that the General Settings are not too crowded. If you want extra control over your row’s design, you can venture into this new tab.

Background Image – Much like Sections, rows can now have a background image. This will place an image behind the modules in your row.

Background Color – Background colors can also be applied to rows.

Background Video – Finally, video backgrounds (previously only available to Sections) can now be used for individual rows within a section.

Parallax Mode – If you apply a background image using the setting above, you can apply a parallax affect to this image. Parallax mode creates an illusion of depth by moving background image at a slightly slower speed than the speed at which you are scrolling (much like an object behind another object would move, if you pivoted around it).

Equalize Column Heights – This is a wonderful new option that will make your designs look balanced without having to worry about to amount of content in each of your columns in any row. Once this option is enabled, all rows will be “equalized” and their heights will all be made the same. Each column takes on the height of the tallest column in the row. This is especially useful when you have applied a background color to each of your columns.

Custom CSS

Much like Sections and Modules, Rows now have Custom CSS options available under the Custom CSS tab. Here, CSS-savvy developers can can do absolutely anything that is not already possible using the row design options. Using Custom CSS within a row will never be lost when you update your theme, and therefore it is a great alternatively to using a Child Theme.

Combine These Options For Some Amazing Results

When combined, all of these new row options open up some very interesting design possibilities. Let me go over just a few examples of how to apply these new settings in your new website design.

In this example above, 3 blurbs have been placed inside of a 3 column row. We have enabled to “Make Fullwidth” option to extend the row the entire width of the browser. Next we have removed the spacing between each column by setting the “gutter spacing” option to the lowest setting. Next we applied a custom background color to each column, which has been matched to the fullwidth image below it to create a beautifully seamless transition. Finally, we have enabled the “equalize column heights” option to ensure that each of our columns and their custom background colors fit together perfectly. The end result is something entirely new and refreshing.

Rows can now be used to create your own fullwidth image gallery! In this above example, we have placed 3 image modules into 2 different rows with the “fullwidth” setting enabled. Next we removed the padding from each row by setting the “padding” options to “0.” Finally, we removed the spacing between each column entirely by lowering our row’s gutter spacing setting to the lowest value. This causes the edges of each image to touch and the width of the row to extend the entire width of the screen.

The same gallery grid effect can be combined with text and image sliders as well. In the above example, we created a mix and match of image modules, image gallery modules and text modules to create gutter-less and fullwidth media display.

Sometimes your design just needs a little more room to breath. In this example, we have used the row’s padding options to increase the padding on the top and bottom of the row. This places a great deal of space above and below the blurb module, which has been centered inside of a single column.

When you add column background images into the mix, even more possibilities become available. In the example above, an empty column has been utilized with a custom background image. When made fullwidth and paired with a CTA module on either side, we are able to achieve a checkered effect that responds beautifully on mobile.

The Possibilities Are Endless

When I say that Rows have become the most versatile part of the Divi Builder, I mean it! As you begin to experiment with Divi 2.4’s new row options and expand your layout vocabulary, you will also start to unlock new and creative uses for each module. When placed inside of rows of different widths and padding, each module can take on a different personality. Together, you can begin to build a variety of layouts that are vastly superior to anything you have been able to build in the past. I hope this gives you some inspiration for your next website, and I hope you enjoy playing with Divi’s new row options! Have fun 🙂