Therowsare thesecond largest construction blockwithin the Divi builder and can be used in various ways.

Rows representdifferent column provisionswhich can be placed inside thesections.

Like the modules, rows have several configurations that you can access by clicking on theadjustments iconin the upper-left corner of the row.

Therow optionsare especially powerful because they allow youcreate a wide variety of designsbecause they define the structure where the modules are located.

How to add a row to your page

1. Edit or create a new pagefrom the WordPress Desktop →Pages → All pages.

2. If the pagealready has the Divi Builder enabled, click on the linkEdit with Divi.
   

This will open theVisual Builder.

2- Ifdoes not have the Divi Builder enabledopen it with the default WordPress editor by clickingEditand then click on the buttonUsing the Divi Builder.

Add a new row

Click ongreen button (+)to add a new onerowto your section.

You will see a pop-up box where you can choose the layout ofcolumnsfor that row.

How to add a background video

Click on the fourth tab, theVideo.

Click on the sign+ greyto open the media library, where you can select a video already uploaded or upload a new one.

Background Video Options

Mp4 vs Webm- It is recommended to upload both versions (mp4 and webm) as not all browsers support the webm format. Uploading both ensures that the video is played across all devices and browsers.

• Width of background video- Define the width of the video by writing a numerical value.

• Coverage of background video- Define the height of the video by writing a numerical value.

• Pause the video when another plays- Activate this option if you want the background video to be paused when another video is played. By default, the video is paused when it is not in view. If you want it to continue playing, turn off this option.

How to add a background pattern

Click on the fifth tab, thePattern.

ClickAdd background patternand choose the type of pattern you want from the drop-down menu.

Fund Pattern Options

• Pattern color- Select the color from your site palette or use the dropper to choose a new color.

• Transform pattern- You can move the pattern horizontally or vertically, rotate or reverse it.

• Pattern size- You can select the size: real size, cover, adjust, stretch to fill or custom size. If you choose customized, you can define thewid widthandhighof the pattern using a slider or numerical values.

• Origin of repetition- Define where the pattern will be repeated.

• Horizontal and vertical displacement- Adjust the position of the pattern on the horizontal and vertical axis.

• Repeat of the pattern- Choose how the pattern will be repeated: horizontal, vertical, etc.

• Pattern melting mode- Defines how the pattern visually interacts with the layers below. You can choose from 16 merge modes from the drop-down menu.

How to add a background mask

Click on the sixth tab, theMask.

ClickAdd background maskand select the mask type from the drop-down menu.

Background Mask Options

• Color of the mask- Choose the color from the site palette or use the dropper.

• Transform mask- You can move, rotate, reverse or reflect the mask.

• Mask aspect ratio- Defines the width/high ratio.

• Mask size- You can choose: real size, cover, adjust, stretch to fill or custom size. If you choose customized, the options forwid widthandhighof the mask.

• Mask melting mode- This defines how the mask layer interacts with the layers below it. Select one of the 16 merger modes available from the drop-down menu.

Administration label

Here you can add a tag that will appear in the builder in the backend, both in structure and layer view.
Very useful for easily identifying rows in large designs.

Design tab

Here you will find all the style options for the row:

• Size

• Spacing

• Edge

• Box Shadow (Box Shadow)

• Filters

• Transformations

• Animation

Size

This group of options defines the size (width and high) of the Row. You can set a maximum width, maximum height and a minimum height for the Row.

Click the arrows to choose the module alignment (left, center or right). By default, a Row is aligned to the left.

Use custom gutter width- You can adjust the size of the spaces (cannons) between each column when enabled.

Match column heights- When enabled, each column will have the same height, irrespective of the content. The height of the highest column will be used.

Width- Define the width of the Row. By default, the width is 80% of the Row width. For more information, see the official documentation.

Maximum width- Defines the maximum Row width. By default, the maximum width is 1080px. For more information, see the official documentation.

Line-up line-up- If a value is set for Maximum Width or Width, Row alignment can be configured with these three options:

• Aligned to the left

• Centrating

• Aligned to the right

Minimum height- Defines the minimum value for the height of the Row. For more information, see the official documentation.

Height- Define the height of the section. For more information, see the official documentation.

Maximum height- Defines the maximum height value that the section can have. For more information, see the official documentation.

Spacing

Addmargins (outside)orfilling/padding (in)with numerical values.

Click on thechainto keep the values above/down or left/right values equal.

Default values:

• Margin:0

• Filling:

  • Upper:27px

  • Lower:27px

  • Left/right:0p

Edge

Add full edges or only on one side. Adjust:

• Edge width(minimum 1px for viewing)

• Edge color

• Edge style: solid, dotted, double, etc.

• Rounded corners: enters a numerical value. You can link/unlink the values of each corner.

Box Shadow (Box Shadow)

Add shade to the module and customize:

• Horizontal Shadow Position- Defines the horizontal position of the shadow.
  

• Vertical Shadow Position- Defines the vertical position of the shadow.
  

• Shadow Blur Intensity- Defines the intensity of shadow blur. The greater the value, the greater the blur, and the shadow will look wider and dim.
  

• Intensity of Shadow Expansion- Defines the force with which the blur expands. As this intensity increases, the shadow becomes denser. Higher density results in a more intense shadow.
  

• Color of Shadow- Defines the color of the shadow.
  

• PShadow of the Shadow- Defines whether the shadow will be inside the module oroutside outside outsideof him.
  

Filters

You can adjust the Row:

1. Matiz (Hue)- Defines the angle of the nuance of a color.
   
2. Saturation- Defines how intense color saturation should be.
3. Brightness- Define how bright the colors should be.
4. Contrast- Defines how marked clear and dark areas should be.
5. Invest- Reverses nuance, saturation and brightness according to the specified value.
6. Sepia- Define a warmer appearance, with yellow/brown tones.
7. Opacity- Defines how transparent or opaque the background should be (color, gradient, image, etc.).
8. Blur (Blur)- Defines the amount of Gaussian blur applied to the module.
9. Melting Mode (Blend Mode)- Refers to how the module is mixed with the layers below it. By default, "normal" is selected.

Note: Any of the above-mentioned filters will also affect the internal elements of the row: columns and modules.

Transform

• Climbing
• Move
• Rotate
• Sesgar
• Points of origin.

Navigate with the Tab key to access each option. Configure each option by entering numerical values or dragging and expanding the box or circle.

You can block these values so that they are always identical by clicking the string icon in the lower-right corner.

Animation

Here you can apply animation to the module. Once you choose a style, you can adjust the following options:

• Duration of animation:Defines the time it takes for the animation to complete a cycle.

• Delay in animation:Defines the time you wait since the animation is applied to an item before it starts. Animation can begin afterwards, immediately from the beginning, or immediately and in the middle of the animation.

• Initial opacity of animation:Defines the initial opacity value.

• Animation speed curve:Define the method of accelerating your animation. Accelerating and slowing down creates a softer effect than a linear curve.

• Repeat of animation:By default, animations are played once. To make a continuous loop, choose the Loop option.

Advanced Tab

In this tab you will find useful options for experienced web designers, such as custom CSS.

Here you can apply custom CSS to your module, as well as custom classes and IDs to use advanced CSS properties or specific CSS code using the module class.

ID and CSS Classes

Assign a specific ID or CSS class to this module, useful for applying custom CSS using your child theme stylesheet.

Custom CSS

• Free CSS:Write free CSS using the selectorselectorto point to this module. Example:selector h1 {color: network;}

• Module elements:You can also add custom CSS in this tab for module-specific sections.

Conditions of Use

This tab allows you to choose when to display the section, based on conditions as if the user has already bought before, which browser he uses, operating system, etc.

You can add one or more conditions.

Visibility

• Deactivate in:Defines row visibility. You can hide it on phones, tablets or desktops by ticking the appropriate box.

Horizontal Overflow

Defines what to show when content overflows horizontally:

• Visible

• Scroll (scrolling bar)

• Hidden

• Automatic (decide browser)

Vertical Overflow
Defines what to show when content overflows vertically:

• Visible
• Scroll
• Hidden
• Automatic

Transitions

Controls the duration, delay and speed curve of the animation when passing the cursor (hover).

• Duration of transition- Defines the duration (in milliseconds) of the animation transition when passing the cursor.
  

• Delay in transition- Defines the delay in the transition of animation when passing the cursor (in milliseconds).
  

• Transition speed curve- Defines the speed curve of the animation transition when passing the cursor.
  

Position

Defines the position of the row:

• Relative(default value):Positioned according to normal flow and shifted according to vertical and horizontal offset values. It does not affect other elements.

• Absolute:Removed from normal flow; it is positioned relative to the nearest positioned ancestor or the initial container.

• Fixed:Removed from normal flow; positioned relative to the browser window, useful for "sticky" rows.

• Vertical Offset:Vertical position of row.

• Horizontal Offset:Horizontal position of row.

• Z-index:Defines the stacking order. Rows with higher z-index overlap with lower value.

Effects of Scroll

Defines how the section behaves when scroll. You can make the "sticky" row (fixed) at the top, bottom or both.

You can also activate vertical movement by adjusting the speed of the element (faster or slower) without affecting nearby elements.

The shooting effect allows you to choose when the scroll effect is triggered: when the top, middle or bottom of the element is visible.

Let's try some configurations

Now that we review all the options, let's try some combinations to show what is possible using each adjustment creatively.

In this example, I will start with the full-width row option (Fullwidth). This option is one of the most versatile.

This option extends the width of the row to the edge of the browser, as a full-width section. But unlike a Section, Fullwidth rows can have column structure and contain any module.

In the example, I created a row of 4 columns and added a square image to each column.

Then, I reduced the channel width (Gutter Width) to 1 to remove the space between the columns.

Finally, I eliminated the upper and lower padding by setting the value of Padding Top and Padding Bottom to 0.

The result is a complete transformation of the row, turning our normal 4-column row into a full-width image gallery, which looks spectacular on the green section below.

This same effect can be achieved using custom background colors for columns and text modules. The possibilities are endless.