Basics of Beaver Builder – Page Builder for WordPress

Sep 21, 2016 | Web Design Tips, WordPress Plugins, WordPress Wednesday

Beaver Builder – Try Demo.

Looking at another WordPress page builder – Beaver Builder is outstanding and allows you to create dynamic advanced layouts in your WordPress pages and posts. It’s a drag and drop environment with “real-time design.

Full Video Transcript

Hey y’all, welcome to another WordPress Wednesday. My name is Kori Ashton, here at WebTegrity in San Antonio, Texas and today we are going to be looking at a brand new page builder that I’m familiar with. It’s not new to the market by any means; but, Mario and a couple other awesome subscribers have asked me to look into the Beaver Builder and, you know, I’m all about learning new stuff. Y’all seriously surprise me with coming up with some cool ideas for me to take a look at. This is a page builder plugin for WordPress.

So, what that means is a lot of times whenever you’re dealing inside of the dashboard it looks more like a Word document environment and it’s not super easy to make really cool layouts and columns and add cool fancier structure to inner pages. Especially inner pages of your website. A lot of times the theme has a really nice dynamic homepage layout; but, then your inner pages can get a little boring and you might want to spice things up a little bit.

How can you do that easily?

The easiest way to do that is definitely with a page builder. There are a couple out there that I’ve already reviewed that I think are fantastic. There are a few out there on premium themes that have their own type of page builder. The Avada theme has the Fusion builder inside of it. So, it’s the same concept, if you guys can wrap your brain around that.

This one is called Beaver Builder.

This one is interesting, though; because, it has a free version that’s pretty spectacular on it’s own, and then it has an upgraded version. We’re first gonna look at the free version, today. So, let’s jump in here. The free version is Beaver Builder Plugin. The light version.

Now, of course, remember that if you’re running on WordPress.com you’re not able to plug this in. This is only available in a self-hosted version of WordPress.

So, you would go to plugins and you would click “Add New” and you would just go and do a quick search for Beaver Builder or whatever you would like to do there. This is the little guys that you’re looking to install.

Always remember to be sure and check if this has great reviews and be sure that it has a lot of active installs and you also want to be sure that it’s been updated recently and works well with your current version. Now this one says it’s untested with 4.6.1, which is the version I’m currently running; but, it has outstanding reviews and I know I’ve already played around with it, so I know it’s pretty great.

I’m gonna go ahead and install it and then activate it. Once you do that, here you go. This is what it looks like.

I have a lot of students that take my class and they actually tell me, “Listen, I hear WordPress is super easy to use; but, why can’t it just be like drag and drop and you actually see it in almost real time, instead of having to go back and forth between screens and go to the backside and do the edits…then, go to the front side and refresh. It’s just kind of irritating.” Well, Beaver Builder solves that problem for us.

Check this out, you guys.

Let me go to a page that I haven’t activated yet, so you can see what this looks like. Let’s click “Add New”. We’re gonna do a test for Beaver Builder and…

Check this out.

You see this extra tab we have over here? That’s because I have the Beaver Builder activated. So, I’m going to say “Page Builder”. I’m going to click on that and it’s going to allow me to play around with different template styles if you want. They’ve got a couple of layout things. But, I’m going to cancel that for now and show you what it looks like.

Notice, right away. It doesn’t leave me inside of my usual editor dashboard. I don’t have my “Publish” button over here. What it does is it takes me to the frontside of my website. It allows me to build the page, right here, in the live version of the frontside of my website that all my visitors can see. Of course, they can’t see me, right now building this; but, I get to see the header, my sidebar, my footer, my design. I get to see everything else, kind of around my content and I get to see that in the environment as I build this page. So, let’s go ahead and grab a two column layout.

Drag it over and drop it.

Now, I’ve got these two columns to put anything I want to inside of. In order to do that, you’d enter your options over here. Advanced modules or basic modules. If you want a text editor, I can drag it over and drop it in here. I can add a picture if I wanted to. Let’s just go through here and see if I have a cool photo I can add. Insert into post and save.

So, now I’ve got my image on the left side and let’s say that I want to add content and put some text on the right side…and click “Save”.

These boxes here as you edit them look exactly like our dashboard that we’re used to. Having a visual and text nerd code mode. You’ve got all these different options that you’re used to. So, you would treat this the exact same. As though it were an actual dashboard area. You can put everything in here side by side. Instead of having a button that says “Publish”, you’ve got a button that says “Done”.

It gives you a few options:

  • “Do you want to go ahead and publish these pages?”
  • “Do you want to save and exit?”
  • “Do you want to discard changes and exit?”
  • Or “Cancel”.

So, for now, I’m gonna go ahead and publish my changes. It’s that simple.

You have a drag and drop environment, as well. So, if we wanted to continue making changes to this, we would click “Page Builder”. Now, we’re in here and it activates the opportunity for us to hover over things and make changes.

So, if I wanted this image to move to be a full width, I can just drag it up to create a new row. Now, it’s going to expand out to the full width of my page, allowing me to put something else in here or if I wanted this text to now go full-width, I can now drag and drop it, as well, and it would enter in and go full-width. Then, I can just remove these things. I don’t know. I’m pretty impressed so far with the ease of use and a lot of our students here at WebTegrity have asked repeatedly for the opportunity to see it in a live a environment as you’re building your pages and this really accomplishes that for you.

Let’s take a look at a couple of the other things. Obviously, this is the “Light” version of the plugin.
If you wanted to pay (and we’ll get to the price here in a second).

If you wanted to pay for the premium version, here’s what you get…I challenge you to come over here and try this demo, you can just click that button and you don’t have to give them any information.

You’re literally just gonna come over here, click “Try Demo” and it’s going to open this up for you to go play with. So, I was impressed with what you get for the price tag here. Again, they let you just kind of see a layout that’s already created and let you click on, drag and drop, and make changes to any of this.

You can easily do that.

What you get inside of the paid option…This is what you get with the free option. You still get the rows and columns. You still get all the basic modules; but, what you get in the paid option are all these advanced modules that allow you to have the count down that you see happening here.

These types of little functions. A menu, a number counter, add in your posts. So, all your blogs can sit inside of a page, which is really cool and you’ve got a couple different layout options there. You can put in a sidebar, slideshow, social media buttons, if you wanted something like that.

It’s literally just a drag and drop into things.

Do we want it to be a custom URL?

You can do that.

If you want the alignment on the left. You even have advanced options for adding in extra padding. All this looks pretty cool. It allows for the social media sharing options to be there, so they can like this page, tweet this page, or plus this page. Those types of things really are extremely valuable and a lot of times, especially if you’re running on a free theme, you don’t have cool options like this. So, adding in even the light version of this page builder could definitely get you somewhere.

Here’s what we want to look at now…

So, what does it cost?

This is where it becomes a little bit of a gut punch. The standard price, the lowest price you can get for this is the $99. Now, remember, there is a free version that’s pretty spectacular on it’s own; but, this paid version allows you to have all those premium modules and some templates in there, which is pretty outstanding.

And then, of course, it kind of goes up from there. What’s cool though, is that it’s unlimited sites. So, please be aware of that. It’s not just on one website.

The second you pay for the premium version of this plugin, you can put it on as many websites as you’re building. So, if you think of it that way, the value is pretty extraordinary. You get fantastic support, as well.

So, any questions that you might have about this, I want to challenge you to connect with Beaver Builder, first.

These guys offer incredible support for their plugins and I’m not their support team.

But, if you have questions about functionality or how to do more advanced things. How to do more layouts? Put those in the description box below. I’ll try to do another video on the Beaver Builder.

I’m pretty impressed with it, you guys. Even the free version is pretty spectacular.

Plug it in. Try it on your website. Let me know what you think.

I’ll talk to you soon. Have a great WordPress Wednesday. Bye, y’all.

Buy Beaver Builder Pro

Learn more about other Page Builders for WordPress :

Visual Composer

Here’s an interesting video on the Pro’s & Con’s of Page Builders