Whitelabel Agency Version
Whitelabel Agency Version by WP Beaver Builder
Page builders have been the talk of the WordPress community for a while now. These tools have been popular for a long time, but with the introduction of the new Block Editor, many have wondered how relevant they still are.
While the Block Editor is an intriguing new feature, however, nothing beats page builder plugins when it comes to designing custom pages and posts. The Beaver Builder WordPress plugin is a perfect example of the benefits this kind of tool offers – being both easy to use and surprisingly powerful.
In this post, we’ll take a close look at Beaver Builder. We’ll discuss its key features and pricing, then show you how it works in action, so you can decide for yourself if this is the right page builder solution for your website.
Let’s jump right into our new and improve, updated guide to the Beaver Build WordPress page builder!
Why You Might Need a WordPress Page Builder
Unless you’re brand new to the platform, you’re probably familiar with the Classic WordPress editor:
While functional, this was always a bare-bones system. Almost all of your content was added to a single field, including text, media, and so on. Creating unique layouts and adding cool features was possible, but often required coding know-how and/or some additional plugins.
Recently however, WordPress developers put out a brand-new version of the editor now powered by Gutenberg:
This change was a long time coming, yet it’s also nothing particularly new. The Block Editor is a streamlined version of a page builder – a solution that’s been popular with WordPress users for some time.
While every WordPress page builder is different, at a basic level they’re almost all based on the same fundamental concept. They provide you with a selection of pre-built elements, and enable you to build content out of those pieces. The goal is to make it easier and more intuitive to build content with unique layouts and features, even if you have no design or coding experience.
However, it’s worth noting that the Block Editor is a very limited feature. It lets you design posts and pages in a more visual fashion, but offers a small library of blocks and little support for complex layouts. This is why it’s still worth looking into your other page builder options – such as the plugin we’ll be discussing throughout the rest of this post.
Beaver Builder Basics
Beaver Builder is one of the most popular page builder plugins out there, and for good reason. It’s simple for beginners to pick up, yet comes with a wide range of options to play with. At a fundamental level, it’s a drag-and-drop system for creating posts and pages – just like any other page builder. However, it offers a lot of additional functionality as well.
Some of this plugin’s key features include:
- A large library of content ‘modules’, ranging from basic options (such as text and image modules) to more advanced functionality (Call To Action, map, and gallery modules, etc).
- A custom editing interface that enables you to build pages, posts, and custom post types visually, and see your changes immediately.
- The ability to create complex multi-column layouts and adjust sizes, spacing, and more.
- Pre-built sections and page templates that let you kick-start the design process, which you can modify as needed.
- The option to create and save your own templates for later use.
- Options for adding custom HTML and your own CSS classes, for more advanced users.
Of course all of this functionality does come at a cost. While there is a Beaver Builder Lite version available for free, it offers only a few basic modules, and doesn’t include many core features such as templates and import/export options. However, the lite version is useful for giving this page builder a test run, and seeing if you like how it works.
If you’re planning to use Beaver Builder in earnest, you’ll want to pick up a premium license to get access to the full package. These start at $99 for use on unlimited websites, and one year of support:
This particular tool does require an upfront investment. The initial cost can pay out in saved time and a more effective website over the long term, though, so it’s not a bad deal if it’s within your budget.
How to Get Started with the Beaver Builder
When you’re on the fence about whether or not to pick up a new plugin for your website, the best thing to do is learn everything you can about it. When it comes to page builders, this includes what they look like, how they work, and what options they provide.
With this in mind, let’s take a walk through what it’s like to pick up Beaver Builder, and start using it to create posts and pages. Naturally, this first thing you’ll need to do is install and activate the plugin.
In addition, you’ll want to activate your license key if you purchased the premium version (which we’ll be using in this tutorial). Then, you can get right to work.
Step 1: Access the Beaver Builder Editor
When you install the plugin, you’ll see a new Beaver Builder tab in your dashboard. This is where your custom content will be saved – for example, if you create your own unique templates.
You can also create content with the page builder by going to Beaver Builder > Add New. Alternatively, you can simply go to Pages > Add New (or the equivalent for posts and custom post types). You’ll see a new option:
This means you can either create your content in the default WordPress editor, or in the page builder. Let’s hit the Launch Beaver Builder button:
As you can see, you’ll be taken to an entirely new interface. Here, you can create content and see exactly what it will look like on the page.
Step 2: Select a Starting Template
It’s worth noting that you don’t have to use templates if you don’t want to. You can build your pages and posts entirely from scratch, by adding whatever modules you like. The easiest way to learn is by starting with a template, however, which is what we’ll be demonstrating here.
In the menu on the right side of the editor, select the Templates tab at the top, and you’ll see plenty of options. Simply click on a template or drag it onto the page, and you’ll see the full version:
This provides you with a starting layout, along with placeholder text and images. Fortunately, every element here can be replaced and modified at will, so you can create something unique to your website.
Step 3: Edit Individual Modules
Each individual element in the Beaver Builder editor is a self-contained module. To see what we mean, you can hover over a piece of text, an image, or a feature on your starting template. You’ll see the module outlined in blue, and if you click on it, you’ll see a new menu:
This is the settings box for that module. It contains all the customization options for the selected piece of content. Exactly what it includes, therefore, will depend on the type of content you’re working with.
For example, the Photo module enables you to change which file is used, and add a caption and/or link. You can also switch over to the Style tab to modify the image’s alignment, border, and more:
Most modules also feature an Advanced tab, where you can tweak its margins, make it visible only on certain types of devices, add custom HTML, and so on:
As you can see, customizing your Beaver Builder modules is a cinch. It will take a little experience to get familiar with the options each type of module offers, but once you do, you’ll find yourself adding in your own content in no time.
Step 4: Customize Your Content’s Organization and Layout
Along with making changes to individual modules, you can also customize your page as a whole. One of the ways to do this is by adding and removing modules. To add a module, simply select one from the editor’s main menu, and drag it into place on the page:
On the other hand, you can remove modules by hitting the X that appears when you hover over them. You can also drag modules up and down or side to side, in order to rearrange them at will.
In addition, you’re able to change your page’s overall layout. To see an example of this in action, hover over a module and hit Edit Column > Column Settings:
Here, you can find options pertaining to all modules in the particular column. You can modify the column’s background color and spacing, for example, and even add a border.
Now hover over the page’s background, and select Row Settings in the top-right corner:
You’ll see a similar menu, but this time the options apply to the relevant row of modules. You can set the row to fixed or full width, customize colors, and make many of the same changes you have available with columns.
Finally, select the editor’s main menu again and navigate to the Rows tab:
This is where you can add new rows and columns to your page, enabling you to change its layout dramatically. In addition, this is the first place you’ll want to go if you’re creating a page or post from scratch. You can determine your content’s layout first, then add in modules wherever you like.
Step 5: Expand the Page Builder’s Feature Set (Optional)
It’s worth noting that there are lots of other features and options in Beaver Builder – we’ve only scratched the surface here. However, we’ve walked through the key functionality you’ll need to understand in order to get started. After, the hands-on approach is the best way to learn the ropes.
Before wrapping up, though, we should point out that there are a few ways you can get more out of this particular page builder. First, there’s an official Beaver Builder theme, which you get for free with the top two licensing tiers:
You can use Beaver Builder with whatever theme you like. However, this one is built from the ground up to function alongside the page builder. It provides a basic framework that you can shape into many different types and styles of websites.
There’s also an optional add-on, the Beaver Themer:
With this extra plugin, you can also use Beaver Builder’s drag-and-drop page builder on your site’s headers and footers, archive pages, 404 and search pages, and more. This enables you to design nearly your entire website using the same system.
At $147 it may not fit into every budget, but it’s a useful addition for a website you intend to monetize, or for developers and designers working on multiple sites.
Choosing a page builder for your website is a big commitment. Changing the way you create and design content down the road can cause compatibility issues, so it’s best to start out with a tool you know you’ll be happy to use for the long run.
Fortunately, Beaver Builder is a solid option for both beginners and more advanced users. Plus, it’s easy to get started with as you’ve seen above.
Have you ever used Beaver Builder, and what was your experience like? Share with us in the comments section below!
Readmore: WP Beaver Builder
- 1 Whitelabel Agency Version
- 2 Whitelabel Agency Version by WP Beaver Builder
- 3 Step 1: Access the Beaver Builder Editor
- 4 Step 2: Select a Starting Template
- 5 Step 3: Edit Individual Modules
- 6 Step 4: Customize Your Content’s Organization and Layout
- 7 Step 5: Expand the Page Builder’s Feature Set (Optional)