How to Add and Organize Rows and Columns in BeaverBuilder

Page structure in BeaverBuilder is based on rows and columns, allowing you to control layout, spacing, and responsiveness. Here’s how to add and organize them effectively.

Step 1: Open a Page in BeaverBuilder

• Log in to your WordPress dashboard.

• Go to Pages > click Beaver Builder under the page you want to edit.

Step 2: Add a New Row

• Click the blue plus (+) icon in the top-right corner.

• Go to the Rows tab.

• Choose a row layout:

  • 1 column for full-width content

  • 2 or more columns for side-by-side layouts (great for text + image or buttons)

• Drag the row into your page where you’d like to place it.

Step 3: Add Modules to Columns

• After placing your row, drag modules (like text, images, or buttons) into each column.

• Each column can contain one or more modules.

Step 4: Adjust Column Widths

• Click the wrench icon on a row to edit settings.

• Under Column Settings, drag the divider handles to resize each column.

• You can also enter percentages manually (e.g., 70% / 30%).

Step 5: Reorder or Duplicate Rows and Columns

• Hover over a row or column to reveal move/duplicate icons.

• Drag to reposition.

• Use the duplicate icon to copy layouts quickly.

Step 6: Style and Customize

• Click the wrench icon on any row or column to open settings.

• Under the Style tab, you can customize:

  • Background color or image

  • Padding and margins

  • Responsive settings (mobile stacking, visibility)

Best Practices:

• Use consistent padding for clean spacing.

• Stack columns vertically on mobile for readability.

• Use rows to separate distinct content sections (e.g., header, features, testimonials).

Step 7: Save and Publish

• When you’re finished, click Done > Publish to make your layout live.