I have been using the Beaver Builder Plugin and Theme since 2014. The site you’re on right now was designed with this amazing “Design Building Mammal”. The creators Robby, Billy and Justin have not stopped updating this crazy thing. They seem to have more and more powerful updates every few months.
In this post, I’m going to break down some of the basics of the builder and how they work.

Let’s have a look at the backside of WordPress.

beaver builder review
What you will notice is that I created a new page. I have the Beaver builder plugin installed. I also have the theme for beaver builder installed as well. The plugin and the theme go hand in hand and I recommend them both. So I just named the page sample page and have a new tab called Page Builder. When I click on the Page Builder tab it will bring up the front-end editor.

Choosing a Template

Beaver Builder Frontend Editor
It will default to a module that lets you choose a pre-made template like an about page or contact page and so forth. You can also create custom layouts that you can use for later. Another cool thing you can create is Global Row’s and Modules for footers and other special things like advertisements.

Were going to start with a simple company page. We will click on the page and it will load it right into the builder.
Beaver Builder Choose Layout

Editing Objects on the Page

Every object on the screen is completely editable. You can hover over any object and edit it’s preferences.
Editor Beaver Builder
When I hover over the text object I can edit all of it’s preferences. Under the Style tab is the ability to change the font style with most of the Google Font’s baked in. You can adjust the font size and more.
Beaver Builder Edit Fonts
When I click on the row that the text is contained in, I can adjust it’s Style. We can change the background type from Color, Photo, Video, Slideshow and Parallax.
Edit Row Beaver Builder

Adding Columns

Let’s add another picture to the current 3 on the page. I’m going to click on the Add Content button at the top right.
add-content
Add Column Beaver Builder
Then click on Row Layouts and drag 1 Column next to the out side edge of the 3rd picture.
Drag Column Beaver Builder
Now we have 4 columns on the page.
screen-shot-2016-12-06-at-10-23-05-pm

Adding Content

Next we need to duplicate one picture and drag it into the column.
duplicate-beaver-builder
Another way to add a picture to the column is to click on the Add Content button and drag the picture into the column.
screen-shot-2016-12-06-at-10-34-41-pm

Now select a photo from the module under the General tab.
Beaver Builder General Tab
Once you’ve selected your photo from the media library, click the Save button.
screen-shot-2016-12-06-at-10-39-05-pm
screen-shot-2016-12-06-at-10-39-32-pm
You can do really cool things with the photos like cropping. You can click the crop dropdown and change it to a circle. This will make the photo have rounded edges.
screen-shot-2016-12-06-at-10-43-01-pm
screen-shot-2016-12-06-at-10-43-22-pm

Next is margin and padding. You can make fine adjustments using the margin and padding options under the Advanced tab. Modules have Margin and columns have Margin and Padding.
screen-shot-2016-12-06-at-11-04-12-pm

Beaver Builder comes with many other advanced features. I would be here for 3 days making this blog post just to cover them all.
Check out Beaver Builder’s official website here.
Please leave any questions or comments below.

Published by Jason

Jason Smith is the lead developer at VMA and Founder of BritePage.

Leave a Reply

Your email address will not be published. Required fields are marked *