Rows are the different column arrangements that can be placed inside sections. Like modules, rows have various settings that can be accessed by clicking the settings icon at the top left of the row. In this tutorial, we'll go over some of the features and how they can be used to create some very unique layouts. Lines settings in particular can be used to greatly increase the variety of layouts created with Divi Builder, because they create the structure in which your modules are hosted.
Content settings
Background color
Background images can be applied to an entire row. By default, the lines have a transparent background color.
Background picture
Background images can be applied to an entire row.
MP4 background video
The videos backgrounds can be applied to lines. If you want to apply background video, you need to upload MP4 and WEBM video and enter the videos here.
Web background video
The videos backgrounds can be applied to lines. If you want to apply background video, you need to download MP4 and WEBM video and enter the videos here.
Background video width
Once your videos are uploaded, you need to enter the width of your video here. It must be equal to the actual width of the video, otherwise the position of the background will be incorrect.
Height of background video
Once your videos are uploaded, you need to enter the height of your video here. It must be equal to the actual height of the video, otherwise the background position will be incorrect.
Video pause
If you want videos to pause when clicked, enable this option.
Column background color
For each column in a row, you can assign a unique background color.
Column background image
For each column in a row, you can assign a unique background image.
Admin Label
This will change the module label in the generator for easy identification. When using the WireFrame view in Visual Builder, these labels will appear in the module block of the interface Divi Builder.
Design parameters
Use the parallax effect
If you want to use parallax effect for your line background image, you can enable here then choose the parallax method you want.
Column parallax effect
Here you can choose whether or not to use the parallax effect for the background image of a specific column in your row.
Make this line full width
If this option is enabled, the line will span the full width of the browser window (similar to a full width section). This is a great way to create some cool full width column layouts.
Use custom width
You can also assign a custom width to a line. For example, if you want to add variation to the page feed and make one row bigger than the rest, you can enter a custom width value here
Use the custom gutter width
The width of the gutter sets the distance between the columns. There are 4 gutter sizes, starting from 0. The definition setting the gutter width to 1 will result in no gaps between columns. When combined with the Full Width option, this can create effects similar to the Portfolio Full Screen module.
Equalize column heights
This is a great option, especially useful when you've applied background colors to individual columns. Enabling this option forces all columns in the row to have the same height value.
Custom Padding
If you want to adjust the fill of the line, you can do it here.
Custom Margin
If you want to adjust the margin of the line, you can do it here.
Custom column padding
If you want to adjust the padding of a specific column in your row, you can do so here.
Custom column margin
If you want to adjust the margin of a specific column in your row, you can do so here.
Advanced settings
CSS ID
You can assign a CSS ID to the row if you want to target it in your stylesheet or with anchor links.
CSS class
You can assign a CSS class to the line if you want to target it in your style sheet.
CSS column ID
You can assign a CSS ID to a specific column in your row if you want to target it in your stylesheet or with anchor links.
CSS class column
You can assign a CSS class to a specific column in your row if you want to target it in your style sheet.
Avant
CSS entry here to apply: before the main line div.
Main element
CSS entry here to apply to the main line div.
After
CSS entry here to apply: after the main line div.
Front column
Enter CSS here to apply: before the specified column div.
Main column element
Enter CSS here to apply to the specified div column.
Column after
CSS entry here to apply: after the div column specified.
Visibility
This option allows you to control the devices on which your line module appears. You can choose to deactivate your module on tablets, smartphones or desktops individually. This is useful if you want to use different mods on different devices or if you want to simplify the mobile design by eliminating certain elements from the page.
Putting the tutorial into practice
Now that we've gone through all of the settings, let's test a few to show you what's possible when each setting is used creatively. In this example, I'll cover the Full Screen Row setting as an introduction. The option to create a "Full Screen" row is one of the most versatile options of the set. This will extend the width of the line to the edge of the browser, similar to a Full Screen (or FullWidth) section. Unlike a Fullwidth section, however, FullWidth rows can have column structures and can contain any module! In the example below, I've created a 4 column row and added a square image to each column. Next, I enabled "Make this line full width" to extend the line to the edges of the browser window.
Then I reduced the "Gutter" size to "1" to remove the spacing between the columns in the row.
Finally, I removed the fill above and below the line by changing the top and bottom values ​​with a "Custom Fill" option to "0".
The result is a complete row transformation, turning our normal row of 4 columns of images into a full width, bleed image gallery that looks stunning compared to the green section below. This same effect can also be created using custom column background colors and text-based mods. The possibilities are limitless !
