WordPress Beaver Builder Quick Start Guide

Beaver Builder editor with quick start button selected.

Here’s a quick intro to using Beaver Builder. If you haven’t used Beaver Builder before, it’s a page builder for WordPress that makes building sites extremely easy. Plus it works well with WordPress plugins, WordPress standards, and is easy to extend.

This quick intro is very high level and designed to get you off the ground and building out sites with the builder.

Two Editors

Pointing out difference in editors.

Beaver Builder adds a new page builder menu in the WordPress admin bar. Use the “Builder” button to edit your pages. If there are multiple options such as the in the bottom part of the screenshot, then choose what you want to edit. Editing the header, footer, or custom post types is something available in Beaver Themer.

Builder Bar

Beaver Builder Toolbar Buttons

Once editing a page, you’ll see the builder bar at the top of the page. This is how you add content or mark a page as done.

Adding Content

Window for adding content.

When adding content, you’ll get a menu that includes a lot of pre-built modules, rows, and templates. Find what you want and drag it onto the page where you want it.

Need more modules? Get Ultimate Addons for Beaver Builder. More modules are always better; well almost always.

Adding Content – Tips

How to get around the adding content window.

Modules are grouped which can be handy if you want to slim down the list, or better yet just use the search. These can help you find the right module quicker.

Adding Content – Additional Views

Different views of the adding content window.

Each tab at the top has its own features. Rows for setting up multi-column rows, templates are any saved templates previously created, and saved includes any saved rows or modules previously created. These may be empty at first, but once you save something, you can find it here. More on that later.

Row

Highlighting a row.

Rows. You have to have rows. They are the foundation of your page. Typically it’s one row per section of a page.

Columns

Pointing out a module.

Columns. You have to have columns too. From one to six, you can setup the columns as you need them. The example above has three equally sized columns. Each row can have a different number of columns.

Module

Modules go in a column. The module will then expand to fit the column width. One column? One wide module. Three columns? Your widget will then fill up one column or 33% of the row.

Row & Module Controls

Overview of controls

Each row, column, and module has controls. These allow you to move, duplicate, or remove them. There are also settings for each individual item and special actions. The settings let you customize the appearance.

Column Options

Showing column controls.

Columns have settings too but they can be hard to find. Hover over a module and click the “Column Options” icon to reveal column options. This is where things like “Equal Heights” can be set and column background colors or photos.

Settings Configuration

Callout module configuration settings.

Each row, column, and module has its own settings. Row and column settings are pretty much the same on all rows or columns, but each module has its own unique settings. Here’s where you set things like links, colors, text, or whatever options the module has.

Settings Configuration Actions

Module setting buttons

Each row, column, and module has buttons at the bottom. Save and cancel are pretty standard, but “Save As…” is where you can save a row or module for re-use later. This is very handy if you want to re-use similar settings on another page but don’t want to re-set it up from scratch.

Example, you create a testimonials block and you want it to look the same on all pages but have different content. Set it up once, save it, and then re-use it.

You also have the option of saving rows or modules as “Globals” meaning it’s exactly the same on every page. Change one global module on the site, all instances of that item on the site change too.

Spacing – Padding vs Margin

Showing the difference between padding and margin.

At some point, you’ll need to know the difference between padding and margin. Maybe not now, but eventually you will.

Other Handy Features

There’s so much more in Beaver Builder too, but I don’t want to overwhelm anyone who’s just trying to get started. My advice is to get the basics down, then start digging into more advanced things later. Things like adding animations, Parallax, or hiding and showing rows or modules base on device. There’s a lot more good stuff in Beaver Builder that you’ll eventually get to, but for now, just get started building!