A Row element contains column layouts placed inside a Section, providing structure for your modules. With customizable settings, rows allow you to create unique and versatile layouts in the Divi Builder.
Add a Divi Row
When you load the Visual Builder, Divi automatically adds a Section.
Click on the Green Plus icon
to insert a Row.Choose the Row's Column layout.
{Gif here}
The Divi Row Use Cases
Organizing Columns for Content: For a balanced design, use rows to create multi-column layouts, such as displaying text alongside images, videos, or icons.
Creating Responsive Grids: Design rows with varying column structures to showcase services, team members, or products, ensuring they adapt seamlessly to different screen sizes.
Aligning Call-to-Action Elements: Place buttons, forms, or headings in a single row to create a cohesive call-to-action Row that draws user attention.
Row Settings Breakdown
Once you've added the Row, the row's column's layout will automatically pop up. After choosing the column's structure, the Row's settings window will automatically open. This is where this element's content and design styles are configured. These settings are organized into three groups via the tabs at the top of the module:
The Content tab
The Content tab allows you to choose the Row's column structure, link, background, and admin label.
Column Structure - Choose the Row's column structure.
Link - Make the entire Row module clickable, creating a seamless way to direct users to another page, Row, or external site.
Background - Choose the Row module's background styles.
Admin Label - Choose the Row module's label text to assist you in keeping things organized and easy to understand in the Visual Builder.
The Design tab
All the design styles and options for the Row module are in this tab.
Sizing - Choose the Row module's sizing.
Spacing - Choose the Row module's spacing.
Border - Choose the Row module's border styles.
Box Shadow - Choose the Row module's Box Shadow styles.
Filters - Choose the Row module's filters such as hue shifts, saturation changes, and blending modes.
Transform - Choose the Row module's advanced design effects, such as scaling, rotating, skewing, and translating.
Animation - Choose the Row module's animation styles.
The Advanced tab
The Advanced tab provides tools for experienced designers, including options for adding CSS IDs and Classes, controlling visibility, managing transitions, adjusting element positions, and creating scroll effects.
CSS ID & Classes - Allows you to assign unique CSS ID or reusable CSS classes, enabling advanced custom styling through your child theme’s stylesheet or Divi’s custom CSS settings.
Custom CSS - Allows you to add custom CSS code to fine-tune your Row, enabling advanced styling that perfectly aligns with your vision.
Conditions - Allows you to create dynamic, personalized content, ensuring the right message reaches the right audience at the right time.
Visibility - Choose the Row's visibility based on different devices.
Transitions - Choose how long the Row's animation takes, adding subtle, impactful animations that enhance user experience and make your modules stand out.
Position - Choose precise control of the Row's placement and create dynamic, visually engaging designs.
Scroll Effects - Control how the Row behaves and transforms during scrolling.
What's the next step?
Save your changes and exit the Visual Builder
To save the page design, you can type CMD + S on a Mac or CTRL + S on a PC.
You can also:
Click on the Save button.
Click on the Exit button.
