Creating Layouts - Beaver Builder

Rows and columns form the foundation of your Beaver Builder layouts. Understanding how to structure content with these elements is essential for creating professional designs.

Row Configurations

Rows are horizontal containers that hold columns and define the width of your content.

Adding Rows

Open Content Panel

Click the ”+” icon or “Add Content” button

Select Rows Tab

Click the “Rows” tab in the content panel

Choose Layout

Select a column layout (1 column, 2 columns, 3 columns, etc.)

Add to Page

Drag the row to your desired location and drop

Row Width Settings

Control how your rows span the page:

// Row width configuration from row-settings.php
'width' => array(
  'type'    => 'select',
  'label'   => __( 'Width', 'fl-builder' ),
  'options' => array(
    'fixed' => __( 'Fixed', 'fl-builder' ),
    'full'  => __( 'Full Width', 'fl-builder' ),
  ),
)

Fixed Width
Full Width

Fixed width rows are constrained to the max width set in Global Settings (default: 1100px).Use for:

Standard content sections
Maintaining consistent margins
Traditional page layouts

Content Width

For full-width rows, control the content width:

'content_width' => array(
  'type'    => 'select',
  'label'   => __( 'Content Width', 'fl-builder' ),
  'options' => array(
    'fixed' => __( 'Fixed', 'fl-builder' ),
    'full'  => __( 'Full Width', 'fl-builder' ),
  ),
)

Fixed Content

Content stays within max width while background extends full width

Full Content

Both content and background extend edge to edge

Row Height Options

Control vertical sizing:

'full_height' => array(
  'type'    => 'select',
  'label'   => __( 'Height', 'fl-builder' ),
  'options' => array(
    'default' => __( 'Default', 'fl-builder' ),
    'full'    => __( 'Full Height', 'fl-builder' ),
    'custom'  => __( 'Minimum Height', 'fl-builder' ),
  ),
)

Height Types:

Default: Height determined by content
Full Height: Fill viewport height (100vh)
Minimum Height: Set custom minimum height

Use full height for hero sections and landing pages to create impactful above-the-fold content.

Minimum Height

Set a minimum row height:

'min_height' => array(
  'type'       => 'unit',
  'label'      => __( 'Minimum Height', 'fl-builder' ),
  'responsive' => true,
  'units'      => array( 'px', 'vw', 'vh' ),
)

Responsive Values:

Desktop: 600px
Large: 500px
Medium: 400px
Mobile: 300px

Vertical Alignment

Align content vertically within rows:

'content_alignment' => array(
  'type'    => 'select',
  'label'   => __( 'Vertical Alignment', 'fl-builder' ),
  'options' => array(
    'top'    => __( 'Top', 'fl-builder' ),
    'center' => __( 'Center', 'fl-builder' ),
    'bottom' => __( 'Bottom', 'fl-builder' ),
  ),
)

Vertical alignment is particularly useful in full-height rows or rows with minimum height.

Column Structures

Columns divide rows horizontally to organize content side-by-side.

Common Column Layouts

1 Column
2 Columns
3 Columns
Custom

Single column: Full width content

|------------ 100% ------------|

Use for:

Full-width text
Large images
Featured content

Two equal columns: 50/50 split

|---- 50% ----|----- 50% ----|

Use for:

Text + image
Side-by-side content
Feature comparisons

Three equal columns: 33.33% each

|- 33% -|- 33% -|- 33% -|

Use for:

Feature lists
Service offerings
Team members

Custom widths: Any combination

|-- 25% --|---- 50% ----|-- 25% --|
|- 33% -|- 33% -|- 33% -|
|--- 66% ---|--- 33% ---|

Common patterns:

25/75 - Sidebar layout
33/66 - Asymmetric content
20/60/20 - Centered content

Predefined Column Layouts

Beaver Builder includes common layouts:

1 Column (100%)
2 Columns (50/50)
3 Columns (33/33/33)
4 Columns (25/25/25/25)
5 Columns (20/20/20/20/20)
6 Columns (16.66% each)
Left Sidebar (25/75)
Right Sidebar (75/25)
Left/Right Sidebars (25/50/25)
And more…

Customizing Column Widths

Hover Over Column

Hover between two columns

Click Resize Handle

Click and hold the resize handle that appears

Drag to Resize

Drag left or right to adjust column widths

Release

Release to set the new widths

Column Settings

Access column-specific settings:

Click the wrench icon on a column
Configure:
- Background (color, gradient, image)
- Border and styling
- Spacing (margins, padding)
- Text colors
- Custom CSS classes

Responsive Column Behavior

Columns automatically stack on small devices: Desktop (default):

|---- Col 1 ----|----- Col 2 ----|----- Col 3 ----|

Mobile (< 768px):

|-------------- Col 1 --------------|
|-------------- Col 2 --------------|
|-------------- Col 3 --------------|

The small device breakpoint (default 768px) determines when columns stack. Adjust this in Global Settings if needed.

Column Stacking Order

Control how columns stack on mobile:

Open row settings
Go to Advanced → Responsive
Set column order
Columns stack in the specified order

Equal Heights

Make columns the same height:

Open row settings
Enable “Equal Heights”
Columns match the tallest column’s height

Equal heights only apply when columns are displayed side-by-side, not when stacked on mobile.

Nested Layouts

Create complex layouts by nesting rows within columns.

Why Use Nested Rows

Nested rows allow you to:

Create complex grid layouts
Have different column configurations within sections
Build intricate designs without custom code
Maintain responsive behavior

Adding Nested Rows

Add Parent Row

Add a row with your desired column structure

Add Content to Column

Click the ”+” icon inside a column

Select Row

Choose “Row” instead of a module

Choose Layout

Select a column layout for the nested row

Add Content

Add modules to the nested columns

Nested Row Example

Parent Row (2 columns: 33% / 66%)
│
├── Column 1 (33%)
│   └── Module: Image
│
└── Column 2 (66%)
    └── Nested Row (2 columns: 50% / 50%)
        ├── Column A (50%)
        │   └── Module: Heading
        │   └── Module: Text
        │
        └── Column B (50%)
            └── Module: Button
            └── Module: List

Nested Row Best Practices

Limit Nesting Depth

Avoid nesting more than 2-3 levels deep. Excessive nesting can complicate maintenance and affect performance.

Test Responsively

Nested rows add complexity to responsive behavior. Always test on mobile devices.

Use Consistent Spacing

Maintain consistent padding and margins across nested structures for visual harmony.

Consider Alternatives

Sometimes a single row with more columns is simpler than nested rows.

Complex Grid Example

Create a complex grid using nested rows: Layout Goal:

|---- A ----|---- B ----|---- C ----|
|---------- D ----------|---- E ----|
|---------- F ----------|---- G ----|

Implementation:

Row 1: 3 equal columns (A, B, C)
Row 2: 2 columns (66% / 33%)
- Column 1: Module D
- Column 2: Module E
Row 3: 2 columns (66% / 33%)
- Column 1: Module F
- Column 2: Module G

Full-Width Sections

Create impactful full-width designs:

Full-Width Row

Basic full-width configuration:

// Set row to full width
'width' => 'full'

Result:

Background extends edge to edge
Content follows content width setting

Full-Width Content

Make content span full width too:

// Set both to full width
'width'         => 'full',
'content_width' => 'full'

Result:

Background extends edge to edge
Content extends edge to edge

Be cautious with full-width content. Text lines that are too long can be difficult to read. Consider using max-width on text modules.

Full-Width with Background

Common full-width patterns:

Pattern 1: Full Background, Fixed Content

'width'         => 'full',
'content_width' => 'fixed',
'bg_type'       => 'photo',
'bg_image'      => 'hero-background.jpg'

Use for:

Hero sections
Image backgrounds
Colored sections

Pattern 2: Full Background Video

'width'         => 'full',
'content_width' => 'fixed',
'bg_type'       => 'video',
'bg_video'      => 'background-video.mp4',
'bg_overlay'    => 'rgba(0,0,0,0.5)'

Use for:

Dynamic hero sections
Landing pages
Engaging intros

Pattern 3: Edge-to-Edge Gallery

'width'         => 'full',
'content_width' => 'full'
// Add gallery module

Use for:

Photo galleries
Portfolio displays
Image sliders

Breakout Sections

Create sections that break out of the standard width:

Set default rows to fixed width (1100px)
Add full-width rows for emphasis
Alternate between fixed and full for visual interest

Example Layout:

[Fixed Row - Header]
[Full Width Row - Hero]
[Fixed Row - Content]
[Full Width Row - Features]
[Fixed Row - Content]
[Full Width Row - CTA]
[Fixed Row - Footer]

Spacing and Alignment

Control spacing within your layouts:

Row Spacing

Global default spacing:

// From global-settings.php
'row_margins' => array(
  'default' => '0',
  'unit'    => 'px',
),
'row_padding' => array(
  'default' => '20',
  'unit'    => 'px',
)

Column Spacing

Space between and within columns:

'column_margins' => array(
  'default' => '',
  'unit'    => 'px',
),
'column_padding' => array(
  'default' => '',
  'unit'    => 'px',
)

Custom Row Spacing

Override global spacing per row:

Open row settings
Go to Advanced → Spacing
Set custom margins/padding
Use responsive values for different devices

Module Spacing

Default spacing between modules:

'module_margins' => array(
  'default' => '20',
  'unit'    => 'px',
)

Use consistent spacing throughout your site. Set global defaults and only override when necessary.

Aspect Ratio

Maintain consistent proportions:

'aspect_ratio' => array(
  'type'       => 'text',
  'label'      => __( 'Aspect Ratio', 'fl-builder' ),
  'help'       => 'Use the forward slash notation: width/height.',
  'responsive' => true,
)

Common Ratios:

16/9 - Widescreen
4/3 - Traditional
1/1 - Square
21/9 - Ultra-wide
9/16 - Portrait (mobile)

Example:

/* Aspect ratio applied to row */
.fl-row-content-wrap {
  aspect-ratio: 16/9;
}

Layout Templates

Save and reuse complex layouts:

Saving a Layout

Build Layout

Create your row structure and add content

Save as Template

Click Tools → Save Template

Name Template

Give your template a descriptive name

Save

Click save to store the template

Using Saved Templates

Open content panel
Click “Templates” tab
Find your saved template
Drag to page

Template Types

Page Templates: Entire page layouts
Row Templates: Single row configurations
Module Templates: Configured modules

Templates save the structure and settings but not the actual content (text, images). This allows you to reuse designs with different content.

Layout Examples

Landing Page Layout

Row 1: Full Width (100vh height)
  └─ 1 Column - Hero content

Row 2: Fixed Width
  └─ 3 Columns - Feature boxes

Row 3: Full Width (Colored background)
  └─ 2 Columns (50/50) - Image + Text

Row 4: Fixed Width
  └─ 4 Columns - Testimonials

Row 5: Full Width (Gradient background)
  └─ 1 Column - CTA button

Blog Post Layout

Row 1: Fixed Width
  └─ 1 Column - Post title and meta

Row 2: Fixed Width
  └─ 1 Column - Featured image

Row 3: Fixed Width
  └─ 2 Columns (66/33)
      ├─ Main content
      └─ Sidebar (nested rows)
          ├─ Author bio
          ├─ Related posts
          └─ Social sharing

Portfolio Layout

Row 1: Full Width
  └─ 1 Column - Portfolio header

Row 2: Full Width
  └─ 4 Columns - Portfolio grid
      (Each column has image + overlay)

Row 3: Fixed Width
  └─ 2 Columns (40/60)
      ├─ Project details
      └─ Project images (nested gallery)

Best Practices

Plan Your Layout

Sketch your layout before building. Understanding the structure beforehand saves time.

Use Consistent Widths

Stick to your max-width setting. Consistency creates a professional appearance.

Test Responsive Behavior

Always preview your layout on mobile devices before publishing.

Don't Over-nest

Keep nesting to 2-3 levels maximum. Excessive nesting complicates maintenance.

Use Semantic Structure

Choose appropriate container elements (section, article, etc.) for better accessibility.

Maintain Visual Hierarchy

Use row backgrounds and spacing to create clear content sections.

Troubleshooting

Columns Not Aligning

Check for custom margins/padding
Verify column widths add up correctly
Clear cache and reload

Content Overflowing

Check responsive settings
Reduce content or adjust column widths
Use responsive typography

Gaps Between Rows

Review row margin settings
Check global spacing defaults
Look for theme CSS conflicts

Mobile Stacking Issues

Verify breakpoint settings
Check column order settings
Test on actual devices

Next Steps

Learn how to configure global settings for consistent site-wide defaults

Getting Started

Core Concepts

Building Pages

Extensions

Integrations

​Row Configurations

​Adding Rows

​Row Width Settings

​Content Width

Fixed Content

Full Content

​Row Height Options

​Minimum Height

​Vertical Alignment

​Column Structures

​Common Column Layouts

​Predefined Column Layouts

​Customizing Column Widths

​Column Settings

​Responsive Column Behavior

​Column Stacking Order

​Equal Heights

​Nested Layouts

​Why Use Nested Rows

​Adding Nested Rows

​Nested Row Example

​Nested Row Best Practices

​Complex Grid Example

​Full-Width Sections

​Full-Width Row

​Full-Width Content

​Full-Width with Background

​Pattern 1: Full Background, Fixed Content

​Pattern 2: Full Background Video

​Pattern 3: Edge-to-Edge Gallery

​Breakout Sections

​Spacing and Alignment

​Row Spacing

​Column Spacing

​Custom Row Spacing

​Module Spacing

​Aspect Ratio

​Layout Templates

​Saving a Layout

​Using Saved Templates

​Template Types

​Layout Examples

​Landing Page Layout

​Blog Post Layout

​Portfolio Layout

​Best Practices

​Troubleshooting

​Columns Not Aligning

​Content Overflowing

​Gaps Between Rows

​Mobile Stacking Issues

Next Steps

Build docs developers (and LLMs) love

Row Configurations

Adding Rows

Row Width Settings

Content Width

Row Height Options

Minimum Height

Vertical Alignment

Column Structures

Common Column Layouts

Predefined Column Layouts

Customizing Column Widths

Column Settings

Responsive Column Behavior

Column Stacking Order

Equal Heights

Nested Layouts

Why Use Nested Rows

Adding Nested Rows

Nested Row Example

Nested Row Best Practices

Complex Grid Example

Full-Width Sections

Full-Width Row

Full-Width Content

Full-Width with Background

Pattern 1: Full Background, Fixed Content

Pattern 2: Full Background Video

Pattern 3: Edge-to-Edge Gallery

Breakout Sections

Spacing and Alignment

Row Spacing

Column Spacing

Custom Row Spacing

Module Spacing

Aspect Ratio

Layout Templates

Saving a Layout

Using Saved Templates

Template Types

Layout Examples

Landing Page Layout

Blog Post Layout

Portfolio Layout

Best Practices

Troubleshooting

Columns Not Aligning

Content Overflowing

Gaps Between Rows

Mobile Stacking Issues