Beaver builder page builder – Does it stack up to Gutenberg?

By December 13, 2019Learn WordPress

Choosing between Beaver Builder and Gutenberg

This video we’re gonna talk about beaver builder and we’re gonna go through how you would build a page with beaver builder firstly if you’re choosing beaver builder right now you’re wondering what builder to choose I probably I’d skip over build beaver builder I’d go for Gutenberg personally but if you’re sort of stuck with beaver builder this is the video for you to help you help you get a bit of an overview sort of knowledge of beaver builder so firstly a bit of housekeeping here so in the plugins I’ve disabled Gutenberg activated, so that’s gonna disable Gutenberg for us.

Then I’ve got the beaver builder plug-in light activated. With the light plug-in I don’t have things like save module save template you know all that really cool stuff that you can kind of save components out and reuse them on other pages and save templates and drop that into it to a page so we don’t have those features will will dance over them a little bit to give you a flavor for that for it but I am stuck with the light version here.

Let’s create a new page and we can call this page anything.

launching beaver builder

If we go to the beaver builder tab and that automatically has launched Beaver Builder. We’re in beaver builder and beaver builder is a layer on top of WordPress. A layer of abstraction.

To get out of beaver builder we go into WordPress admin here and we can go into the current page or we can go to the dashboard so I’ll just go edit page to break back out of beaver builder.

Now I’m back in WordPress with the default tiny MCE editor.

Launching beaver builder again.

Adding content to the page with beaver builder

Okay, here we are the + icon in the top right corner is the main start the main sort of start button for for beaver builder. This is going to give you access to columns, modules which is content so another word for modules would be a Content modules, text editor and if you’ve got the premium version then you’ll see a lot more modules here as well.

To drag the rows, click and drag. It sort of disappears for a while which can be almost look like a bug, then you just move the cursor while still holding down the click button and you’ll see that we actually do have an object there, ready to be dropped into a position you choose to let go of the selection.

Now, that we have this sort of structure, we can remove if we don’t want. The idea is that we drag content in these modules in these cells. I call them cells or boxes. We go over to modules and then we just grab a text add text editor module throw that in there and this is where the content would go.

If you want you can fullscreen. Click the little icon.

Configure content properties with beaver builder

There’s also other properties on this module so we can change the font the style text shadow and then in advanced we’ve got some spacing properties and visibility and animation and it gets a bit more sophisticated here with the HTML element as well so that’s their the basic properties.

On the text element what other modules do we have in the free version here we’ve got audio, photo, video and HTML code so we can drag a photo over there and select a photo. It’ll take us to our media library in which we can upload a media image if we need and pop that in.

Then we’ve got things like widths so we can adjust the width to be whatever we want so if we’re not happy with a 50/50 sort of two-column scenario we want to want that slightly more obscured slightly more weighted to the to the left for the content and have a smaller image we can just drag this module here.

beaver builder max-width content width

What I when I’m looking at this what the first thing I see is wow we’re really crammed in here why can’t we just make this bounding area larger so for that I’d be looking in the spanner here to see what sort of properties we have so the spanner obviously represents settings. Settings that we can adjust so let’s go maybe forwards so I don’t think my themes gonna support that but the maximum width that my theme, which is a default WordPress theme is supporting here is is 1100 pixels wide. Which isn’t that wide this error is… I mean this restricted width here that we’re experiencing is a direct result of my theme that I’m using.

This is the default TwentyTwenty WordPress theme and it’s really designed to work with Gutenberg and what I’m seeing here is I’m seeing entry-content div and the direct child of the entry-content div, which is this one here. It’s going to be set to 58 REM which is what’s causing me this restricted width issue.

If I turn that off then I’ll get the expected 1100 max pixel width. That’s what’s happening here. So for the point of this demonstration we’ll just continue on launching beaver builder.

beaver builder duplicate content

We can also duplicate elements here so just by clicking this icon here we can duplicate.

beaver builder responsive mode

Let’s click the content to bring up the content properties and you’ll notice this button here this little monitor icon actually represents responsive editing so we can access tablet and mobile views from from clicking this little icon here which is cool.

beaver builder first impressions

When you first load up beaver builder. I’ve noticed a lot of people are a bit confused. They rollover one element and they get this blue box pop up, then you roll over another element and you get another blue box pop up and the other one turns gray… and they’re like, well what does that mean?

beaver builder bounding boxes

That’s kind of confusing and I realized that the color meanings can be described like this: so blue is the hover color so when you’re hovering over something it’ll be blue and the gray colors represent the parent of the object that you’re hovering over. That’s all the colors mean.

beaver builder column settings

Also one of the gotchas that I experienced with beaver builder was setting background colors so and it was because I found this icon here to be I don’t know I just couldn’t wouldn’t expect to see edit columns there’s column settings in here so and if this icon just does not say that to me I’d expect it to be a wheel or something you know this the cog wheel or something like that but anyway in you’ve got column settings in here which are pretty is we can adjust more widths

if we go down further we can set the color of text we can also set background colors. I should have a color property here.. okay there it is.

It’s just a bit confusing the interface is not what I’d enjoy interacting with on a daily basis.

There are some really important settings sort of hidden away in this icon here.

beaver builder reusable modules and page templates

I mentioned before one of the best features of beaver builder is actually with the premium version of beaver builder.
For instance, If we were to want to save this module here to be reused on another page. That would there in the premium version. There is a save as button here which allows you to save this as a reusable module so that way you don’t have to rebuild it every time you want to add it to a new page. That’s a really handy feature. You’ll be able to add it to your page from a section in here templates or modules. There will be something something down here called save modules which you can access quite easily and add to the page so I mean if you are going to go down the beaver builder Road I definitely recommend getting the premium version for the for the ability to save whole page template and for the saved modules.

beaver builder or Gutenberg?

Gutenberg can save reusable blocks natively. There’s no premium version. It’s built into WordPress so I choose Gutenberg over beaver builder any day of the week. It’s made by WordPress. It’s always going to run smoother and better than beaver builder.

The clients we work for love Gutenberg and they’ve find it really intuitive. Beaver builder however, I’ve seen some clients have gotten really confused… just based on the look of beaver builder and the usability of it