Skip to main content

​
Quick Start Guide

This guide will walk you through creating your first page with Beaver Builder. You’ll learn the basics of the interface, how to add content modules, and how to publish your page.
Before starting, make sure you’ve installed Beaver Builder on your WordPress site.

​
Creating Your First Page

1

Create a New Page

From your WordPress admin dashboard, go to Pages > Add New. Give your page a title (e.g., “My First Beaver Builder Page”).
2

Launch Beaver Builder

Click the Beaver Builder button in the WordPress admin bar at the top of the screen, or click the Beaver Builder button on the page edit screen. The page will reload with the Beaver Builder interface.
3

Understand the Interface

You’ll see several key elements:
  • Top Bar: Contains tools, templates, and the Done button
  • Right Panel: Shows available modules and content blocks
  • Canvas: The main editing area where you’ll build your page
  • Overlays: Hover over elements to see editing options (gear icon, duplicate, delete)

​
Understanding Rows and Columns

Beaver Builder uses a row and column layout system. Before adding content, you need to add rows and columns:
Layout Structure:
  • Rows are full-width containers that hold columns
  • Columns sit inside rows and hold your content modules
  • Modules are the actual content elements (text, images, buttons, etc.)

​
Adding Your First Row

1

Add a Row

Click the + (plus) icon in the top right corner, or click anywhere on the empty canvas. Select Add Row from the options.
2

Choose a Column Layout

A panel will appear showing different column layouts (1 column, 2 columns, 3 columns, etc.). Click a layout to insert it. For this tutorial, select a 2 column layout.
3

View Your Row

The row will appear on your page with two equal-width columns, indicated by dashed blue outlines.

​
Adding Content Modules

Now let’s add some content to your page using Beaver Builder’s modules.

​
Adding a Heading Module

1

Open the Modules Panel

Click the + icon in the top right, or click the Modules tab in the right panel.
2

Find the Heading Module

Scroll through the modules or use the search box. Look for the Heading module.
3

Drag the Module

Click and drag the Heading module into your left column. Drop it when you see a blue highlight.
4

Configure the Heading

The module settings panel will open automatically. Enter your heading text (e.g., “Welcome to My Website”). Choose a heading tag (H1 is good for main titles). Click Save in the top right of the settings panel.

​
Adding a Photo Module

1

Select the Photo Module

From the Modules panel, find the Photo module.
2

Add to Page

Drag the Photo module into the right column next to your heading.
3

Upload or Select an Image

In the settings panel, click Select Photo. You can upload a new image or choose from your existing media library. Select an image and click Save.

​
Adding a Text Editor Module

1

Add Below the Heading

Drag a Text Editor module and drop it below the Heading module in the left column.
2

Enter Your Content

The WordPress text editor will appear. Type or paste your content. You can format text, add links, and more using the editor toolbar.
3

Save the Module

Click Save to add the text to your page.

​
Adding a Button Module

1

Insert Button Module

Drag a Button module below your text editor.
2

Configure Button Settings

  • Text: Enter button text (e.g., “Learn More”)
  • Link: Add the URL you want the button to link to
  • Style: Choose a button style from the Style tab
  • Click Save when finished

​
Working with Your Layout

​
Moving Modules

To move a module, hover over it and click the ⋮⋮ (drag) icon that appears in the module’s toolbar. Drag it to a new position.

​
Editing Modules

1

Hover Over a Module

Move your mouse over any module to reveal its toolbar.
2

Click the Settings Icon

Click the ⚙ (gear) icon to reopen the settings panel and make changes.
3

Save Changes

Remember to click Save after making edits.

​
Duplicating and Deleting

  • Duplicate: Hover over a module/row and click the duplicate icon to create a copy
  • Delete: Hover and click the × (X) icon to remove an element
Deleted elements cannot be recovered unless you use the History panel (undo/redo). Be careful when deleting content.

​
Adding More Rows

To create more complex layouts, add additional rows:
1

Click Between Rows

Hover between existing rows or at the bottom of your page. A + icon will appear.
2

Add Row

Click the + icon and select your column layout.
3

Populate with Modules

Add modules to your new row just like before.

​
Row and Column Settings

Customize the appearance of your rows and columns:

​
Row Settings

1

Access Row Settings

Hover over a row and click the ⚙ (gear) icon in the row toolbar.
2

Explore Options

  • Style: Set background colors, images, or videos
  • Advanced: Add custom CSS, spacing, borders, and more
  • Responsive: Control visibility on different devices

​
Column Settings

Column settings work similarly - hover over a column and click its gear icon to adjust width, background, spacing, and alignment.

​
Previewing Your Page

Before publishing, preview how your page will look to visitors:
1

Open Tools Menu

Click Tools in the top bar (the hamburger menu icon).
2

Select Preview Layout

Choose Preview Layout from the menu.
3

View Preview

Your page will display without the Beaver Builder editing interface. Click the × to return to editing.

​
Responsive Editing

Beaver Builder makes it easy to optimize your page for different screen sizes:
1

Enable Responsive Editing

Click Tools > Responsive Editing or use the responsive icons in the top bar.
2

Switch Device Views

Toggle between desktop, tablet, and mobile views to see how your page appears on different devices.
3

Make Device-Specific Changes

Some settings (like spacing, font sizes, and visibility) can be customized per device.

​
Publishing Your Page

When you’re happy with your page, it’s time to publish:
1

Save Your Work

Click the Done button in the top right corner. Choose Save or Publish.
2

Publish Layout

If this is a new page, you may need to publish it from the WordPress edit screen. Click Publish in the WordPress editor.
3

View Your Published Page

Click View Page to see your published page live on your site.
The difference between Save and Publish:
  • Save keeps your changes in draft mode
  • Publish makes your page live to visitors
  • You can work on draft changes without affecting the published version

​
Using Undo and Redo

Made a mistake? Beaver Builder tracks your changes:
  • Undo: Press Ctrl+Z (Windows) or Cmd+Z (Mac)
  • Redo: Press Ctrl+Shift+Z (Windows) or Cmd+Shift+Z (Mac)
  • Access history through Tools > Keyboard Shortcuts to see all available shortcuts

​
Next Steps

Congratulations! You’ve created your first page with Beaver Builder. Here’s what to explore next:

Explore More Modules

Try other modules like Callout, Call to Action, Icon, Number Counter, Video, and more.

Use Templates

Save time by using pre-built templates. Click Templates in the top bar to browse options.

Advanced Layouts

Create complex layouts using nested columns, the Box module for flexbox/CSS grid, and custom spacing.

Global Settings

Customize default colors, fonts, and styles that apply across all your Beaver Builder pages.

​
Tips for Success

Best Practices:
  • Save your work frequently while editing
  • Use the preview function to check your page before publishing
  • Test your page on different devices and browsers
  • Keep your layout simple and focused on user experience
  • Use consistent spacing and styling throughout your page

​
Getting Help

Need assistance as you build?
  • Keyboard Shortcuts: Press ? while in the builder to see all shortcuts
  • Community: Join the Beaver Builders Facebook Group for tips and support
  • Documentation: Visit docs.wpbeaverbuilder.com for detailed guides
  • Support: Premium users get expert support from the Beaver Builder team
Happy building! 🎉

Build docs developers (and LLMs) love

Get started for freeTalk to us