Rows Can Be Extremely Versatile

Rows are the various column layouts that can placed inside of sections. Much like modules, rows have various settings that can be accessed by clicking the settings icon on the top left of the row. In this tutorial we will be going over just a few of the features and how they can be used to create some very unique layouts. Rows settings in particular can be used to greatly increase the variety of layouts built with the Divi Builder since they create the structure that your modules are housed in.

 

The General Settings

MAKE THIS ROW FULLWIDTH – If this option is enabled, the row will extend the full width of the browser window (similar to a full width section). This is a great way to create cool fullwidth column layouts.

USE CUSTOM WIDTH – You can also assign a custom width to a row. For example if you would like to add some variation to the flow of the page and make a certain row larger than the rest, you can input a custom width value here

GUTTER WIDTH – Gutter width adjusts the distance between columns. There are 4 gutter width sizes, ranging from none to large. Setting the gutter width to 1 will result in no space between columns. When combined with the Fullwidth Row option, this can create effects similar to the FullWidth Portfolio module.

CUSTOM PADDING – If you would like to adjust the padding of the row, you can do so here.

KEEP CUSTOM PADDING ON MOBILE – If you would like your custom padding values to also be used on mobile devices, you can choose to enable them here.

CSS ID – You can assign an CSS ID to the row if you would like to target it in your stylesheet or with anchor links.

CSS CLASS – You can assign an CSS Class to the row if you would like to target it in your stylesheet.

 

Advanced Design Settings

BACKGROUND IMAGE – Background images can be applied to the an entire row.

BACKGROUND COLOR – Background images can be applied to an entire row. By default, rows have a transparent background color.

BACKGROUND VIDEO MP4 – Background videos can be applied to rows. If you would like to apply a background video, you must upload both an MP4 and WEBM video and input the videos here.

BACKGROUND VIDEO WEBM – Background videos can be applied to rows. If you would like to apply a background video, you must upload both an MP4 and WEBM video and input the videos here.

BACKGROUND VIDEO WIDTH – After your videos have been uploaded, you must input the width of your video here. It must be equal to the actual width of the video, otherwise the background position will be incorrect.

BACKGROUND VIDEO HEIGHT – After your videos have been uploaded, you must input the height of your video here. It must be equal to the actual height of the video, otherwise the background position will be incorrect.

PAUSE VIDEO – If you would like videos to be paused when clicked, enable this option.

USE PARALLAX EFFECT – If you would like to use a parallax affect for your row background image, you can enabled here and then choose your desired parallax method.

EQUALIZE COLUMN HEIGHTS – This is a great option, especially useful when you have applied background colors to individual columns. Enabling this option will force all columns in the row to have the same height value.

COLUMN BACKGROUND IMAGE – For each column in a row, you can assign a unique background image.

COLUMN BACKGROUND COLOR – For each column in a row, you can assign a unique background color.

COLUMN PADDING – For each column in a row, you can assign unique padding values.

 

Custom CSS

BEFORE – Input CSS here to be applied :before the main row div.

MAIN ELEMENT – Input CSS here to be applied to the main row div.

AFTER – Input CSS here to be applied :after the main row div.

 

Lets Give Some Settings A Test Drive

Now that we have gone over all of the settings, let’s test out a few in combination to show you what’s possible when each setting is used creatively. In this example I will be touching on the Fullwidth Row setting as an introduction. The option to make a row “Fullwidth” is one of the most versatile options in the set. This will extend the width of the row to the edge of the browser, similar to a Fullwidth Section. Unlike a Fullwidth Section, however, FullWidth Rows can have column structures and they can house any module!

In the example below I have created a 4 column row and added a square image to each column. Next I enabled the “Make Row Fullwidth” to extend the row to the edges of the browser window.

Next I reduced the “Gutter Width” size to “1” to remove the spacing between columns in the row.

Finally I removed the padding above and below the row by changing “Custom Padding” top and bottom values to “0.”

The result is a complete transformation of the row, turning our normal 4 column row of images into a full-width and full-bleed image gallery that looks stunning against the green section below it. This same effect can be created using custom column background colors and text-based modules as well. The possibilities are endless!