Beaver Builder Rows

Beaver Builder offers a range of row layouts that help you organize your content effectively. These rows can be customized and filled with various modules to create a dynamic and engaging website. Here’s a detailed explanation of each row type in Beaver Builder and how to use them, complete with examples.

Understanding Beaver Builder Rows

Rows in Beaver Builder are the structural backbone of your page layout. They allow you to divide your content into columns and organize it in a visually appealing way. Here’s a breakdown of the available row types and how to use them:

Row Types

1. 1 Column

  • Purpose: Create a full-width section with a single column.
  • Usage: Drag the 1 Column row to your page and fill it with content modules like text, images, or videos.
  • Example: Use a 1 Column row for a full-width hero section at the top of your page with a large background image and a headline.

2. 2 Columns

  • Purpose: Split the section into two equal columns.
  • Usage: Drag the 2 Columns row to your page and add content modules to each column.
  • Example: Use a 2 Columns row to display an image on one side and text on the other for an about section.

3. 3 Columns

  • Purpose: Divide the section into three equal columns.
  • Usage: Drag the 3 Columns row to your page and add content modules to each column.
  • Example: Use a 3 Columns row to showcase services with icons and descriptions in each column.

4. 4 Columns

  • Purpose: Create four equal columns in a section.
  • Usage: Drag the 4 Columns row to your page and add content modules to each column.
  • Example: Use a 4 Columns row to display a team section with photos and names of team members.

5. 5 Columns

  • Purpose: Split the section into five equal columns.
  • Usage: Drag the 5 Columns row to your page and add content modules to each column.
  • Example: Use a 5 Columns row for a product features section, with each column highlighting a different feature.

6. 6 Columns

  • Purpose: Divide the section into six equal columns.
  • Usage: Drag the 6 Columns row to your page and add content modules to each column.
  • Example: Use a 6 Columns row to display logos of partners or clients.

7. Left Sidebar

  • Purpose: Create a layout with a main content area and a sidebar on the left.
  • Usage: Drag the Left Sidebar row to your page, fill the main content area with modules, and add widgets or additional content to the sidebar.
  • Example: Use a Left Sidebar row for a blog page with recent posts in the sidebar.

8. Right Sidebar

  • Purpose: Create a layout with a main content area and a sidebar on the right.
  • Usage: Drag the Right Sidebar row to your page, fill the main content area with modules, and add widgets or additional content to the sidebar.
  • Example: Use a Right Sidebar row for a product page with related products in the sidebar.

9. Left & Right Sidebar

  • Purpose: Create a layout with a main content area flanked by sidebars on both sides.
  • Usage: Drag the Left & Right Sidebar row to your page, fill the main content area with modules, and add widgets or additional content to both sidebars.
  • Example: Use a Left & Right Sidebar row for a comprehensive resource page with navigation links in the sidebars.

Examples of Using Rows in Context

Example 1: Full-Width Hero Section (1 Column)

  1. Drag the 1 Column Row: Drag the 1 Column row to the top of your page.
  2. Add Background Image: Click on the row settings, go to the Background tab, and add a background image.
  3. Add Text Module: Drag a Text Editor module into the row and add a headline like “Welcome to Our Website.”
  4. Customize Text: Style the text to make it stand out, using large font sizes and contrasting colors.

Example 2: About Section (2 Columns)

1. Drag the 2 Columns Row: Drag the 2 Columns row to your page.

2. Add Image Module: Drag a Photo module into the left column and upload an image.

3. Add Text Module: Drag a Text Editor module into the right column and add your about text.

4. Adjust Layout: Adjust the spacing and alignment to ensure both columns are balanced.

Example 3: Services Section (3 Columns)

1. Drag the 3 Columns Row: Drag the 3 Columns row to your page.

2. Add Icon Modules: Drag an Icon module into each column and select relevant icons for your services.

3. Add Text Modules: Below each icon, drag a Text Editor module and add descriptions of your services.

4. Style Section: Customize the colors, fonts, and spacing to create a cohesive look.

Example 4: Team Section (4 Columns)

1. Drag the 4 Columns Row: Drag the 4 Columns row to your page.

2. Add Photo Modules: Drag a Photo module into each column and upload team member photos.

3. Add Text Modules: Below each photo, drag a Text Editor module and add team member names and titles.

4. Enhance Design: Style the text and images to ensure a professional appearance.

Example 5: Blog Page (Right Sidebar)

1. Drag the Right Sidebar Row: Drag the Right Sidebar row to your page.

2. Add Posts Module: Drag a Posts module into the main content area to display recent blog posts.

3. Add Sidebar Content: Drag widgets or additional modules like a Search bar or Categories list into the sidebar.

4. Configure Layout: Adjust the width of the sidebar and main content area as needed.

By understanding and utilizing these row layouts, you can create a structured and visually appealing website with Beaver Builder. Experiment with different rows and modules to see how they can enhance your site’s functionality and appearance. Happy building!