There are three element types offered by Divi Builder to make it easy for you to design a page or theme builder template: section, row, and module. In the previous article, we covered about Divi Builder section. You can read it to learn more. In this article, we will cover the row element. Both section and row are the required elements. You need both elements to add modules (the actual design elements to build your design).
In Divi Builder, a row can be added to a regular section and specialty section. When adding a new regular section in Divi Builder, you will be asked to add a row.
On a row, there are columns. You can use the columns on a row to place the modules you need on your design. When adding a new row, you can select the column structure according to your needs. There are 20 predefined column structures offered by Divi Builder.
How to Add a New Row in Divi Builder
In Divi Builder, the row element is represented in green. So, to add a new row, you can simply click green plus icon on the canvas area. You can then select the column structure on the appearing dialog.
As you can see in the screencast above, you can add a module right after you add a row. If you prefer to style up the row first and add the modules later, you can simply close the panel. If you added a module to the wrong place on your page, you can move it. You can even move a row from a section to another section, as long as the sections have the same type (regular section, for instance). To make it easy to move a row, you can switch to the Wireframe View mode.
Deleting a Row
To delete an existing row, you can simply hover your mouse over the row you want to delete and click the trash can icon on the row handle (the green handle).
Customizing a Row
Just like other elements in Divi Builder, the customization process of a row is also made via the settings panel. You can click the gear icon on the row handle to open the settings panel.
If you selected the wrong column structure, you can change it from the row settings panel. Simply select the new column structure from the dropdown menu on the Column Structure option.
There are 3 tabs on the row settings panel you can open to customize the row. Each tab hosts setting blocks where the offered setting options lie.
Content Tab
- Link
You can open the Link block under the Content tab to add a link to the row you are customizing. There are two link types you can add: static link and dynamic link.
- Background
You can open this block to set the background of the row you are editing. You can either add a solid color background, gradient color background, image background, or video background. Especially for the image background, you can apply a parallax effect.
- Admin Label
You can open this block to add an admin label to the row. What is an admin label? You can think of it as a row name. The admin labels will appear when you switch to the Wireframe View mode. They make it easy for you to identify a certain row on a long page that consists of a stack of rows.
Design Tab
There are 7 setting blocks you can open on the Design tab.
- Sizing
You can open this block to set the width and height of the row. By default, the width of the row is set to 80%. You can change the width on the Width option. If you want to use the pixel unit instead of percent, you can type it manually (i.e. 900px). While to set the height, you can do so on the Height option. You can also set gutter width and row alignment from this block.
A little note. If you want to have a full-width row, you can set the Width and Max Width values to 100%.
- Spacing
You can open this block to set the margin and padding of the row.
- Border
You can open this block to set the border of the row. From the border style, border size, border color, and border radius. Border radius itself refers to the tilt level of the corner sides (top-right, top-left, bottom-right, bottom-left) of the row.
- Box Shadow
You can open this block to apply a box shadow to your row. There are 7 box shadow styles you can choose from. After selecting a box shadow, you can then set the shadow color, blur length, horizontal position, and vertical position.
- Filters
You can open this block to add CSS filters to your row. From here, you can also add a blend mode if you want it.
- Transform
You can open this block to apply a 2D or 3D effect to your row. Simply select the transform effect you like (by clicking the tab) and use your mouse to set the transformation level.
- Animation
You can open the Animation block to set the entrance animation of the color. After selecting an animation style, you can set the animation duration, delay, and other settings available.
Advanced Tab
You can go to the Advanced tab to make some advanced settings like adding a custom CSS, set visibility, applying scroll effects, and so on. There are 6 setting blocks you can open on this tab.
- CSS ID & Classes
You can open this block if you want to add a custom CSS to the row via the Code module.
- Custom CSS
From this block, you can directly add a custom CSS instead of via the Code module. You can simply paste your CSS code to the available fields.
- Visibility
If you want it, you can disable a row on a certain device type (desktop, tablet, or smartphone). You can do so from the Visibility block. Simply tick the device type you want to disable the row on. You can also set the vertical and horizontal overflow from this block.
- Transitions
From this block, you can set the transition speed and transition delay of the row. You can also set the transition speed curve from this block.
- Position
You can open this block to set the position of the row. By default, the position of the row (and other elements on Divi Builder) is set to static (Default). You can change it if needed. There are 3 position options you can set:
Relative: If you select this option, the row will follow the normal flow of the page. This option offers top, bottom, and right properties. Also, you can set the Z index.
Absolute: If you select this option, there will be no actual space created on the page for the row. You can think of it as a floating row on top of other rows that take up actual space.
Fixed: If you select this option, the row will break the normal flow of the page and it has no actual space on the page.
- Scroll Effects
If you want to apply more animation affects to a row, you can open this block.
Customizing Columns on a Row
When adding a regular section on Divi Builder, you will be asked to add at least one row. When adding a row, you can select a column structure according to your needs. As mentioned earlier, there are 20 column structure options you can choose from. Is it possible to change the column structure of a row? Yes, you can change the column structure of a row.
To change the column structure of a row, you can click the gear on the row handle to open the settings panel. On the settings panel, select a new column structure you want from the dropdown menu on the Column Structure option. You can even add a new column by clicking the Add New Column button.
Each column on a row can have individual stylings. Say you have two columns on a row. If you want it, you can apply a different background, entrance animation, and so on, on each column. You can click the gear icon to customize a column. You can make the customization just like you made on the row.
Resizing a column on a Row
If you want to resize a column on a row, you can also do so. Unfortunately, Divi Builder offers no drag and drop operation like Elementor does to resize a column. To resize a column on a row, you need to add a custom CSS.
First, select a column you want to resize and click the gear (as shown on the screenshot above). Once the panel turns into the column settings panel (from row settings panel), go to the Advanced tab and open the Custom CSS block. Paste the following CSS code to the Main Element field.
width: 10%!important;
You can replace the width value (10% in this case) with your own value. You can also use the pixel unit (i.e. 500px) instead of percent.
Saving a Row into Library
For time efficiency, you can save a row (that you have customized, complete with the modules) into a Divi Builder library. The ability to save an element (including row) is useful enough when you are creating a long page whereby you need to add the same content on different pages (such as features list, pricing table, team members, and so on).
To save a row into library, you can click the arrow icon on the row handle.
Give your row a name and click the Save to Library button. You can also set a category if you want it.
To use a row you have saved to the library, simply click the Add From Library tab when you are adding a new row and select the row you want to use.
Locking a Row
Once you are done customizing a row — and the modules inside it — you can lock it. Doing this will prevent you from accidentally edit it. To lock a row, you can click the three-dot icon on the row handle and select Lock.
A locked row (and other elements) is marked with a red padlock. You can click the padlock to unlock the locked row.
You can also copy and duplicate a row from the row handle.
The Bottom Line
Working with Divi Builder, you have to familiarize yourself with row. It’s a design element offered by Divi Builder to make it easier for you to set the layout of the page you are working on. A row can be added to a regular section and specialty section.
The concept of row in Divi Builder (and other page builder plugins in general) is great to help us design a page more easily.
