Beaver Builder 2.0 – A Guide

This guide replaced our guide on using WooThemes’ Canvas as that theme is no longer under development and we now consider BeaverBuilder’s Agency theme + BB itself to be the natural successor to Canvas.

For each page and post within WordPress you get a basic text editor. It’s much like working within your favourite word processing application: you can write/insert and format your text, insert images and videos very easily! This is often just fine for blog posts and even many pages. However in some cases you want to do more than just basic text and images: you might want to set up multiple columns of text or images or you might want to create completely separate rows with colour-banded backgrounds.

To accomplish this, you need a page builder. Page builders are everywhere now for WordPress, so how do you pick which one to use? We had some pretty high demands before we’d use one, namely:

  • Rapid development
  • Ease of use (after all, we want our clients to be able to make edits easily)
  • An aesthetically pleasing interface
  • SPEED. Give us all the speed. If your framework is slowing down your site, you’ve got a problem.

There’s the ubiquitous “Visual Composer” that gets bundled with a ton of themes out there, but goodness it’s cumbersome and just not pleasant to work with. I know, a lot of people love it, but I’ve never been able to get any joy from it.

Divi was one we enjoyed for a bit, it’s powerful and pretty, and we still have a license for it, but we still got frustrated with many of its quirks.

We had heard of Beaver Builder before but, honestly, the name put us off for a long time. I don’t remember what it was that finally got us to give it a real shot, but since we did we haven’t looked back. Beaver Builder offers a sleek interface where you can iterate very quickly, on top of that it’s just a pleasure to work with. It’s not cumbersome or frustrating, it works beautifully and does its job very well. On top of that, it doesn’t bog down a website. We’re still able to get excellent page speed results with it, even when using a variety of advanced modules.

We found Beaver Builder to be the only option to provide all of the above features in one package. Beaver Builder has very quickly became our favourite tool for WordPress development.

Installing Beaver Builder: in the WordPress admin, choose Plugins > Add new, search for “BeaverBuilder” and install and activate it. This will get you the ‘lite’ version of BeaverBuilder, which is great for basic separated row and multi-column layouts. More advanced functionality is available with the BeaverBuilder paid editions. But we recommend trying out the lite version and seeing if that’s enough for you to work with.

We also recently gave Beaver Builder a coveted spot on our “Recommended Resources” page because not only do we believe in it, we use it for every website we build (even this one).  But how easy is it to use? How exactly do you use it? You’re in the right spot. Here’s a very quick walkthrough of using Beaver Builder.

For the purpose of this example, I used the Beaver Builder Agency version – the one we use in-house – but you’ll find many of the same features and versatility in the free version available on the WordPress.org plugin directory.

 

Create a New Page

Create a new page

Go to Pages -> Add New

Set up the page

Add the title and click on “Page Builder”

Exploring Beaver Builder Menu

Beaver Builder Menu

Here is the beaver builder interface. Under “Modules” you can click the dropdown to see other types of modules available.

Pick a type of module

The Beaver Builder modules show up under “Standard Modules” and WordPress Widgets show up on their own (yes, you can add widgets anywhere!)

Any additional modules from expansions, like PowerPack, will show up here as well.

Row Setup – Column Layouts

Here you can select the column layout for a row. Just click and drag a layout you want to use to the spot you’d like to use it.

Templates = Design Ideas and Saved Time!

The Templates section has a bunch of pre-made landing pages (and some content pages) you can pick from. These are all layouts that can be created within Beaver Builder. They’re great for getting design ideas or for getting a headstart on a similarly-designed site.

Saved Modules and Rows

If, during your building, you click “Save As” on any Row or Module settings, you’ll be able to refer back to those modules and rows – complete with content – in the “Saved” section. This can be great for repeating similar content. You can also use “Global” modules and rows for content you want to update simultaneously across the site.

Adding Content

Adding Content

Click and drag a module onto the page to add it. In this example I dragged a “Header” module into the page and put in some content for it.

Next we’ll look at styling the header.

 

The Style Tab

The style tab lets you change the styles for the module you’re editing. In this case we’ll change the heading to an H1 heading and center it.

Changing Row Settings

Changing Row Settings

By hovering over a row you’ll display the row settings controls. Click on the wrench to open the row’s settings dialogue.

Row Settings

In this case, as with many headers, we want to make the row full width. Beaver Builder gives you the option to make the row itself full width while leaving the content at a fixed width. This is fantastic for things like full-width backgrounds.

Speaking of backgrounds…

Scroll down and you’ll find the background settings for the Row. We’re going to change this one to a photo background.

Add the photo

Once you’ve selected “Photo” you’ll be given a section to select the photo you want to use.

Select the photo you want to use

Highlight the photo in the WP Library, or add photos to the library, and click “Select Photo”

More row changes..

Want a full-height hero section? There’s an option right in the style section to do that.

Content Alignment

When you’ve got a full-height row, you can select the content alignment.

If you’re not using a full-height row, this is done by adding padding above or below the content area.

Saving the settings

Click on the “Save” button to save the changes. Notice how the changes are executed live behind the window.

Clicking “Save As” here would let you save the row to use again and again.

Deleting a row

Hover over the row and click the X in the controls to delete a row (or any module, or column).

Confirm Deletion

Beaver Builder is pretty good about not letting you delete things too hastily. You can’t undo changes, so heed its warnings.

Page Templates

Loading a pre-built template

First, open up the Beaver Builder menu by clicking the + button in the top right.

Click on “Templates” button

 

Click on the template you want to use

Once you click on the template it will be loaded on the live site behind you.

Editing Content

Changing content

Changing content is as easy as clicking on it!

Make your changes

Make the changes you want to the content and click “Save”. Typically those changes are made live behind the window.

Voila, you’re done!

Now to save your work, click “Done”

Publish your work

You can save the work just in Beaver Builder, Discard the work, or publish it to the actual website.

 

Allen is a self professed geek and technology lover. He's always playing with one of his various websites, and loves helping customers with theirs. He can often be found with a coffee (light roast, please) in his hand and a smile on his face... or with a plate of bacon. Mmm, bacon.

Leave a Comment