Skip to Main Content

How to configure lines on Divi Builder

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 701.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

Rows are the different column layouts that can be placed inside sections. Just like the modules, the rows have various parameters accessible by clicking on the parameters icon at the top left of the row. In this tutorial, we will go over some of the features and how they can be used to create very unique layouts. Row settings in particular can be used to significantly increase the diversity of layouts created with Divi Builder, as they create the structure in which your modules are hosted.

line module divi builder.png

settings parameters line divi.png

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

Background videos can be applied to lines. If you want to apply background video, you need to download MP4 and WEBM video and grab the videos here.

Web background video

Background videos can be applied to lines. If you want to apply background video, you need to download MP4 and WEBM video and grab 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 Divi Builder interface.

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

seciton design divi builder.png

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 regulates the distance between the columns. There are 4 gutter sizes, starting from 0. Setting the gutter width to 1 will not result in any gaps between columns. When combined with the Full Width option, this can create effects similar to the Full Screen Portfolio 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.

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

advance option column divi.png

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.

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

example design divi.jpg

Then I reduced the "Gutter" size to "1" to remove the spacing between the columns in the row.

removing spaces between columns divi.jpg

Finally, I removed the fill above and below the line by changing the top and bottom values ​​with a "Custom Fill" option to "0".
modification of the filling.jpg

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 !

This article features 0 comments

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
6 shares
Share2
tweet1
Save3