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 600.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]

The lines are the different column layouts that can be placed inside the sections. Like modules, lines have various parameters accessible by clicking on the settings icon at the top left of the line. In this tutorial, we'll review some of the features and how they can be used to create very unique layouts. Line settings in particular can be used to greatly increase the diversity of layouts created with Divi Builder because 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 line. By default, lines have a transparent background color.

Background picture

Background images can be applied to an entire line.

MP4 background video

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

Web background video

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

Width of the background video

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 the 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 single background color.

Column background image

For each column in a row, you can assign a single 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.

Start promoting your blog

Download dozens of Logos, banners, website templates and many other marketing tools to market your WordPress Blog. [Recommended]

seciton design divi builder.png

Design parameters

Use the parallax effect

If you want to use a parallax effect for your line background image, you can activate here and then choose the desired parallax method.

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 line.

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 nice full-width column layouts.

Use custom width

You can also assign a custom width to a line. For example, if you want to add a variation to the page feed and zoom a line to the rest, you can enter a custom width value here

Use the custom gutter width

The width of the gutter adjusts the distance between the columns. There are 4 gutter sizes, starting from 0. Setting the width of the gutter on 1 will not result in any space between the 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 have 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 fill of a specific column in your line, you can do it here.

Custom column margin

If you want to adjust the margin of a specific column in your line, you can do it here.

advance option column divi.png

Advanced settings

CSS ID

You can assign a CSS ID to the line if you want to target it in your style sheet or with anchor links.

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]

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 style sheet 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 disable your module on tablets, smartphones or desktops individually. This is useful if you want to use different modules on different devices or if you want to simplify mobile design by eliminating certain elements of the page.

Putting the tutorial into practice

Now that we have reviewed all the parameters, let's test some of them to show you what is possible when each parameter is used creatively. In this example, I will approach the Full Screen Line setting as an introduction. The option to create a "Full Screen" line is one of the most versatile options in the set. This will extend the width of the line to the edge of the browser, as for a full screen section (or FullWidth). Unlike a Fullwidth section, however, the FullWidth lines can have column structures and can contain any module! In the example below, I created a row at 4 columns and added a square image to each column. Then, I enabled "Skip this line in full width mode" to extend the line to the edges of the browser window.

example design divi.jpg

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]

Then, I reduced the size "Gutter" to "1" to remove the spacing between the columns of the line.

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 on "0".
modification of the filling.jpg

The result is a complete transformation of the row, transforming our normal row of 4 image columns into a full-width, full-bleed image gallery that looks amazing compared to the green section below. This same effect can also be created using custom column background colors and text-based modules. 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