For some of you, this may not be entirely new, as Beaver Builder has been out for some time and has grown incredibly. With its popularity, especially among many of my friends and colleagues, I figured it was time to really dive into it and share my findings with my readers.
What you can do with this page builder plugin encompasses much more than I can show you today, but if you haven’t explored it yet, this is a good place to start. You can find more great documentation on their site and they even have a very active Facebook group.
Beaver Builder – A Powerful Page Builder for WordPress
First, let me take you a bit deeper into the plugin with this video:
Video Highlights of The Beaver Builder Plugin
Once you have installed and activated the plugin, you will have some general settings and your actual page builder interface. This plugin works with just about any theme, but I opted to use the Beaver Builder theme and Beaver Builder Child Theme.
If you are just starting your site, you might want to consider using this theme for flawless integration. And if you are building clients’ sites, I would highly recommend the child theme, which would be also a good option for an individual site build.
Page Builder Settings
When you first install the plugin, you get an option to go through a quick tour, which will help you get oriented. There are also some links here that will help you.
There are several modules you can use to build out your site, and we will be looking at those via the page builder. You can also choose which ones you prefer to show and hide. This helps you declutter the page builder menu by hiding the modules you do not need for a specific site.
You can choose which post types you want your page builder to be available on. This is helpful if you are handing off the site to someone else and don’t want the page builder to be available for either posts or pages.
Note that if you have plugins installed that have their own custom post types, they may show up here as well. This could be an events calendar or a eCommerce plugin. For example, I have activated WooCommerce and now products are available to use with the page builder.
You can also control which templates you choose to show or hide in the page builder.
You have the options to activate any of these three icons sets which are used in the icon module— or upload your own icon set.
This lets you set which users can access the building editor tools, such as adding, deleting or moving modules.
Page Builder Interface
As with most page builders, you can choose to create your page or post using the default editor, or by creating a custom page using the page builder.
When you first enter the page builder, you will be asked to choose a template. You can choose either a blank template, where you start from scratch, or any templates that you have created yourself and saved.
Landing Pages and Content Pages Templates
If you don’t want to start from scratch, there are several templates for your landing page, such as your homepage or a signup page. The great thing about these is you just add your content and you can also edit the layout as well. For example, if you don’t want a section or module in the existing template, simply delete it.
And several content page templates:
Page Builder Add Rows
If you started with a blank slate, you can begin by adding row layouts. Simply drag and drop them into the page. Here I have added 1-column, 3-column and 6-column rows to start my layout.
After adding these rows, you have tools to drag and drop the row, edit it, clone it or delete it. Below that are tools to drag and drop the column, change the number of columns, or delete.
The column widget can also be adjusted by just dragging them to the appropriate size. Here I made the middle column wider:
Adding Basic and Advanced Modules
Every module you drop into place on the page has a specific function and its own settings. Here you see the basic modules:
And here are the advanced modules. You can see that by activating WooCommerce, there is now a module for it.
You are also able to add the WordPress widgets, as well as any of your saved rows or modules to save you time re-creating those.
If I was to show you the settings for each module, well, this would be an even longer post. But let me share a couple with you.
Basic Module – Button
Here are the settings to add a button. The General Settings cover quite a bit here.
The Style settings give you some great options for appearance.
And the Advanced settings are very similar throughout the modules.
For example, the Animation may vary depending on the module, but the Responsive Layout Display and Visibility are pretty much the same with most modules.
Advanced Module – Call to Action
In the second example, you can see that this module, again, has its own unique settings. The general settings give you an editor window to create your content for the call to action.
The style options give you some spacing, text size and color choices.
You are able to control the submit button for your call to action.
And the Advanced settings, as mentioned above, are pretty standard for most of the modules, with minor exceptions.
You can see from just these two examples, that the modules give you a lot of control over the content, styles and other features for each of those that were listed as both basic and advanced modules.
If you choose the tools button, you get these options for the template:
Some Final Thoughts on Beaver Builder
As I mentioned in the video, page builders are not for everyone. And although I will admit this is one of the more intuitive ones I have found, they do have a learning curve. So if you are willing to take that time, and really want a custom site for yourself, definitely take a look at Beaver Builder. And if this fits the model for you as a freelance designer, or even an agency, this could be a great asset for creating client sites. It all depends on your needs.
Personally, I have used several times on my sites for various landing pages that I have needed.
We also wrote a post on our other blog about your online store with Beaver Builder and consider split testing with your checkout and product pages.
Of course, as mentioned, I could not go into each aspect of the plugin, but hopefully this gives you a decent grasp on what this plugin can do for you. Yes, it’s drag and drop without knowing code. But remember, you have a lot of power in your hands when using a page builder on your site, so make sure you do it right. And if you are looking for that page builder for your new site, a redesign or a clients site, I highly recommend that you check out Beaver Builder. You will not be disappointed with the talented team that stands behind their product and provides the support you need.