configure the lines on divi

Configure the lines on Divi: 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.

configure the lines on divi

Configure the lines on Divi 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 videos and grab the videos here.

Background web video

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

Background video height

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 the videos to be paused 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.

Configure the lines on Divi Design parameters

Use the parallax effect

If you want to use the parallax effect for your line background image, you can enable it here and 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 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 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 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 line margin, 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.

Read more: How to create a one-page site with Divi

Configure the lines on Divi 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 row if you want to target it in your stylesheet.

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

Before

CSS input here to apply: before the mainline div.

Main element

CSS input here to apply to the mainline div.

After

CSS entry here to apply: after the mainline div.

Front column

Enter CSS here to be applied: before the specified column div.

Main column element

Enter CSS here to be applied to the specified div column.

Column after

CSS entry here to apply: after the specified div column.

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 removing some 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 set 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, just like a Full Screen (or FullWidth) section. Unlike a Fullwidth section, however, FullWidth rows can have column structures and can contain any module!

I created a 4 column row and added a square image to each column. Next,

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, transforming 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 !

 

For website maintenance service contact us.

Leave a comment

echo "";