WordPress page builder plugins provide some of the easiest ways to build fully-optimized landing pages in WordPress without code. You can also use them to build content pages, blog posts and even an entire website when you use the right companion theme.
In this post, we're going to review Beaver Builder, one of the most popular page builder plugins available for WordPress. We've also reviewed its two biggest competitors Elementor and Divi, if you're interested.
What is Beaver Builder?
Beaver Builder is a freemium page builder plugin built for WordPress. Its lite version is available in the official plugin directory and has over 300,000 active installations as well as a 4.8 (out of 5) average star-rating.
You can do a lot with this version of the plugin, but we're going to focus on the premium version for the purpose of this tutorial.
Key Features of Beaver Builder
- Drag-and-Drop Frontend Editor – This page builder uses a frontend editor that allows you to drag-and-drop modules, rows and sections into place and view your changes in real time.
- 25+ Content Modules – Add key website components to every page you build with over 25 content modules at your disposal. They include basic components like text, images and headings as well as more sophisticated ones like calls to action, pricing tables, subscription forms and WooCommerce products.
- 40 Landing & Content Page Templates – Beaver Builder has 16 premade landing page templates, as in homepage designs, and over 20 content page templates, as in about, contact and team pages, to choose from. While this may seem low when compared to the plugin's competitors, they vary in style and layout and prevent you from being overwhelmed by too many options.
- Dozens of Pre-Built Rows – The editor has dozens of pre-designed and pre-laid out rows you can use to expedite the building process without using a full template.
- Beaver Builder Theme – This plugin's Pro and Agency price tiers come with the Beaver Builder theme. It's designed to integrate with the Beaver Builder editor flawlessly to give you more control over the way your website looks and behaves by giving you theme options, page templates (available for Page Attributes in the WordPress editor) and a multitude of settings in the live theme customizer.
- Beaver Themer – While not an official feature of Beaver Builder, Beaver Themer is designed to integrate with Beaver Builder and the Beaver Builder WordPress theme. It's a premium add-on that allows you to customize key elements of almost any WordPress theme, including the 404 page, page layouts, blog post layouts, search pages and more. It's the perfect alternative to the Beaver Builder theme if you already have a theme and want to utilize the Beaver Builder to its fullest potential.
- Developer-Friendly – Beaver Builder has created a well-documented module boilerplate developers can use to create their own modules for the editor. There's also an Editor Mode you can enable that lets clients change content while preventing them from making changes that could potentially break page designs.
- Library – Expedite the design process in the future by saving and reusing modules, rows and even entire page layouts.
Getting Started with Beaver Builder Pro
Beaver Builder Pro works in the same way as any other premium plugin, which means to install it, all you need to do is download the ZIP folder from your account on the developer's website, and upload it to your WordPress site.
It doesn't act as a premium add-on to Beaver Builder Lite, so you can safely remove that version from your website if you're already using it.
There aren't many settings you'll need to configure right off the bat other than activating your license key. You can enable or disable specific modules to control whether or not they appear in the editor. You can also enable the editor for posts as only pages are selected by default.
There's a User Access section in the settings that allows you to choose which user types have access to what, the “what's” being builder access, unrestricted editing, global elements, the backend admin screen, etc.
Free Font Awesome icons are enabled by default, but you can also integrate Font Awesome Pro icons if you have a premium subscription to the service.
Lastly, advanced users can use the Tools section to clear Beaver Builder's cache using popular cache plugins as well as enable the plugin's debug mode.
How Does Beaver Builder Handle Page Building?
While Beaver Builder has its own theme, the editor is designed to work with virtually any WordPress theme, including MH Magazine. It's only enabled on pages by default, so you'll need to go into the aforementioned settings to enable it for posts.
When you add a new page or post or edit an existing page or post, you're taken to the WordPress editor as usual. Here, you can click a button to activate the Beaver Builder editor.
Before we get there, however, let's talk about page templates. Competing WordPress page builder plugin Elementor provides you with two page templates that allow you to override your theme's default page layout. They are Canvas, a blank page template that does away with your header, sidebar and footer, and Full Width, a template that stretches the content area across the entire page.
Beaver Builder doesn't have these types of templates. The closest thing it has is a Blank Page template you can import in the editor itself (not in the Page Attributes section of the WordPress editor), but this leaves the content area blank while keeping your header and footer.
If you want true blank page and fullwidth templates with Beaver Builder, you'll either need to purchase a plan that comes with the Beaver Builder theme or use a third-party theme that offers them natively.
The drawback comes to those with themes that do not offer these types of templates. It limits what you can do with an otherwise comprehensive editor.
Speaking of which, let's get down to the nitty gritty of this article.
The Beaver Builder Editor
Source: Owned by the author
When you fire up the Beaver Builder editor on a new post or page, you can either build from scratch module by module or import a template. Either way, every page built with Beaver Builder is made up of rows comprised of columns filled with modules.
The editor starts with a blank page by default, which begins with a one-column row. From here, you can either drop-in a module to stick with the one-column design, choose a different row template or import a template.
There are nine row templates. Most have one to six column structures while others use one or two sidebars. If you don't want to use a full landing page template or build from scratch, you can import pre-built rows for calls to action, FAQ's, features, hero sections, lead generation, teams and more.
Let's talk about the row, module and page settings you can configure within the Beaver Builder editor itself. First of all, if you look at the screenshots in this section, you'll notice the editor displays its settings in a pop-up window rather than a side panel. This allows you to view your page as it'll appear on the web without having to constantly remove a side panel from view.
The settings for rows are what you'd expect if you've ever used a page builder. There are settings for width, height, alignment and color, the latter of which can be adjusted for text, links and headings.
Source: Owned by the author
The background settings are extensive and begin with type, of which there are seven: none, color, gradient, photo, video, slideshow and parallax. The settings will change depending on the type you choose, but you can configure an overlay for each. You can also add a border as well as top and bottom shapes.
The Advanced Settings tab is reserved for margin, padding, visibility and animation settings. Developers can also add unique ID's and classes here.
Module settings have a clean UI, which are divided into General, Style and Advanced sections. The General section deals with settings related to the type of module it is, such as text, icon and link settings appearing for the Button module.
The settings in the Style and Advanced sections are similar to those found in the collection of settings for rows, only the Style section changes depending on the type of module you're styling.
Beaver Builder's 25+ content modules are divided into six categories:
The Basic and Media categories include key staples in web development, such as text, headings, images, buttons and sliders.
The Actions category features all of the modules you'll need to build highly-optimized landing pages. With these modules, you can add things like calls to action, subscription forms and contact forms to your page.
The Layout section features modules that use unique layout designs, such as one for pricing tables and one that uses an accordion design.
The Info category features modules for countdowns and number counters while the Posts category gives you ways to promote your posts outside of your Blog, homepage and widget areas.
Beaver Builder is a powerful page builder plugin and the biggest competitor to fellow WordPress page builders Elementor and Divi, though its user interface is a lot faster than either of these page builders.
Speaking of which, Beaver Builder has a clean UI and utilizes user-friendly pop-up boxes over a side panel. It also features a conservative number of page templates and pre-built rows that are easy to sift through.
The premium Beaver Themer add-on is also available to those who wish to use the editor's capabilities for their 404, search and archive pages as well as other key theme elements.
The only major drawback of this plugin is its price. While pricing for Elementor Pro and Divi start at $49 and $89 respectively, pricing for Beaver Builder starts at $99. Plus, you'll need to upgrade to the next tier at $199 to gain access to the Beaver Builder theme.
The real kicker is the fact that Beaver Themer is a premium add-on you'll need to pay an additional $147 for on top of Beaver Builder. Elementor's Theme Editor is included in that $49 starting price for comparison, and its own proprietary Hello theme is free.
Fortunately, Beaver Builder offers a 40% discount on annual renewals for all plans, including the Beaver Themer. Plus, even the cheapest tier offers unlimited site licenses, so you can use it for every site you have without having to purchase a different license for each one.
You can get started with Beaver Builder by installing the lite version from the official WordPress plugin repo, or by purchasing a premium subscription.
- Beaver Builder Landing Page Templates: Owned by the author
- Beaver Builder – Row Settings: Owned by the author