Visual Composer vs Beaver Builder

Our comparison of all major WordPress drag and drop page builders proved to be very popular. The article highlighted the best features of free and premium drag and drop page building solutions.

I have no doubt that you will find the comparison article useful, however we thought we would put two of the WordPress community’s favorite page builders head to head and examine their strengths and weaknesses in more detail.

Visual Composer was the WordPress plugin that really defined what drag and drop page builders are and continues to be the best-selling drag and drop page builder for WordPress. Beaver Builder is a newer solution that has gone from strength to strength since its launch in 2014 and is really making a name for itself this year.

How do these great solutions compare? Let’s take a closer look and see.

Visual Composer

Not only is Visual Composer the best-selling WordPress plugin on CodeCanyon, it is also included with a huge number of WordPress themes on ThemeForest. This helps explain why the plugin is being used in over 500,000 websites.

Visual Composer helps you build responsive layouts in minutes using a user-friendly interface. It allows you to create layouts in the backend or frontend of your website. It works with any WordPress theme and has support for WordPress Multisite and WooCommerce.

Over ten language packs are included with the plugin and it has support for the WordPress Multilingual Plugin. A huge array of content elements and pre-defined layouts are packaged with the plugin too.

Visual Composer is compatible with every custom post type available. That means you can use it to modify any blog post, page, and custom post types added through WordPress themes and plugins.

One of the coolest features of Visual Composer is just how flexible it is. There are a lot of developer options available within the plugin and there are over one hundred add-ons available for it on CodeCanyon.

I was one of the first people to test and review Visual Composer and since its launch they have added more features and functionality every single year.

Using Visual Composer

Once Visual Composer has been installed, you will see a new Visual Composer bar in your editing screens. One loads the backend editor, the other loads the frontend editor (this bar is displayed even if you have disabled the WordPress visual editor).

When you load the backend editor, your content area is transformed into a canvas for building your page. A button entitled “Classic Mode” replaces the backend editor button you clicked previously and helps you return to the default WordPress editing mode.

At the top of the interface are five buttons: Three on the left and two on the right.

On the left, the Visual Composer icon takes you to the official plugin website, the plus symbol lets you add elements to your page, and the T icon opens up the template box. On the right there is a configuration icon that opens up a box for adding custom CSS code and a button to switch to the frontend editor.

If you have not yet added any content, you will see an explanation on how to add content quickly. You can choose to add an element, add a text block, or choose one of the pre-defined layouts. For example, you could add a landing page or product page at the click of a button.

In my WordPress drag and drop page builders comparison article I noted that content modules go by many names. Some developers call them modules, some call them blocks, others call them widgets. Visual Composer calls them elements. They all refer to the little blocks of content that help you build your layout.

The number of elements available is impressive. In total, the current version of Visual Composer offers forty-eight content elements (this number includes default WordPress widgets). Seven older deprecated content elements are also available and additional content elements can be added through the use of plugin extensions.

You can create complex pages using these elements. You can add charts, image galleries, videos, maps, post grids, icons, social media sharing buttons, and more.

Adding content elements and then placing them into rows and columns is simple. Rows and elements can be dragged around to where you want to place them. The number of columns displayed in a row can be determined by selecting one of of the eleven column structures e.g. 2/3 + 1/3. Alternatively, you can create your own custom structure.

There are options to delete elements, columns, and rows. New elements can be added to columns and rows by selecting the plus symbol. You can also clone whole rows of content.

A host of settings are available for both columns and rows.

In the general tab there are options use a video background, stretch the row/column, and add custom CSS. The design tab allows you to style the column or row in any way you wish. You can define the margin, border, padding, and colors.

The settings available for individual elements depends on the element being modified. A basic element such as a Facebook like button only lets you select the button type, while more complex elements can have dozens of different options.

Any layout you create can be saved as a template and applied to other pages on your website. Forty-four default pre-made layouts are provided to help get you started. This includes a FAQ template, help template, services template, and multiple templates for your about page.

You can activate the frontend editor by clicking on the frontend button in your post/page editor. If you are logged into your website, you will also see an “Edit with Visual Composer” link in your WordPress admin bar at the top of each page. Clicking on this link will load up the frontend editor for you to edit that page.

The backend and frontend editor work in a similar way. You will see the same buttons at the top of the page to add elements and open the template box. At the right hand side you will see a button that returns you to the backend editor and an update button to save any changes you have made.

The guides button allows you to modify your page. You can do everything you can in the backend editor, such as edit elements and move columns and rows.

Clicking on the screen icon lets you change your view from desktop mode to the landscape and portrait mode of tablets and smartphones. This is useful for seeing how your page will look on mobile devices.

I have always found the backend editor of Visual Composer to be much easier to use than the frontend editor. I can build professional designs in minutes using the backend editor, but with the frontend editor I feel that moving things around is more clunky and less fluid. It still works like it should, but it just does not feel as user-friendly to me.

However, I know from reading the comments of other Visual Composer users that many prefer using the frontend editor to the backend editor, so it is perhaps a matter of which interface you are used to using (the frontend editor was introduced in Visual Composer much later so I have more experience with the backend editor).

Visual Composer Settings

The Visual Composer Settings area lets you modify many different features and options.

In the general settings page you can define what types of post types Visual Composer will be active on. Any additional custom post types added through your theme, or through plugins, will be listed here. You can also disable responsive content elements and enable Google fonts subsets.

The central part of this page allows you to control access to Visual Composer for each WordPress user group. You can define whether a user group sees Visual Composer, whether they see Visual Composer and the default editor, and whether they only see Visual Composer (i.e. disable the default editor).

On the design options page you can change the default colours of content elements. You can also modify the margin at the bottom of elements, the spacing between columns, and the mobile screen width.

Custom CSS code can be added without the need to modify core plugin files.

A product license is provided when you purchase Visual Composer. It is valid for one website and ensures continued support and automatic updates through your admin area.

Shortcodes provided by third party plugins can be mapped to Visual Composer content elements.

In the about page there is a welcome page that informs you of the latest additions to the plugin. There is also a frequently asked questions page that has links to many great tutorials and a resources page that links to a knowledge base, video academy, and the social media accounts of the developers.

Advanced Grid Builder

Visual Composer lets you add new grid elements for the following content elements: Post grid, post masonry grid, media grid and masonry media grid. These are the content elements that can be used to display blog posts, galleries, and other content on your website.

The video below walks you through exactly how the grid builder works. I recommend watching it to get a better understanding of how it all comes together as when you first visit the grid builder page, it is not clear how it can help you.

Visual Composer Pricing

Visual Composer retails at only $34. There are no yearly renewal fees. Once you have purchased the plugin, you can receive support and updates indefinitely.

Please note that in order to qualify for support and automatic updates, you need to enter your license key in the settings area.

Technically, Visual Composer is not GPL friendly. Despite the fact that WordPress does not allow usage to be restricted, the developers ask all customers to buy a regular license for each website they use Visual Composer on.

Thankfully, the plugin still functions correctly without entering your license key. There is therefore nothing stopping you from using the plugin on every website you own.

Beaver Builder Drag and Drop Page Builder

Like Visual Composer, Beaver Builder helps you build professional pages easily using a drag and drop interface. One of the biggest differences between the two solutions is that all editing with Beaver Builder takes place on the frontend of your website.

All layouts are responsive and the visual editor is compatible with blog posts, pages, and all other custom post types. Due to its support of shortcodes and widgets, Beaver Builder works well with most other WordPress plugins. For example, you could easily integrate items from other plugins into your layouts, such as forms, tables, and galleries.

Beaver has good support for WooCommerce and the WordPress Multilingual Plugin and should work with just about any WordPress theme. It also has support for WordPress Multisite, but unfortunately this feature is not included in the standard license of Beaver Builder (more on pricing options later).

The feature of Beaver Builder that really stands out for me is its page template system. It allows you to create large detailed pages in seconds. All you have to do is select the page template you want. For example, you can create a business contact page at the click of a button.

The higher priced licenses of Beaver Builder also come packaged with the Beaver Builder WordPress theme.

Using Beaver Builder

Beaver Builder integrates with WordPress in much the same way as Visual Composer. Once the plugin has been activated, you can load the editor by clicking on the “page Builder” tab in your post editor.

Alternatively, if you are logged in, you can click on the “Page Builder” link in your WordPress admin bar at the top of every page.

When the page builder is first activated, an overlay displaying layout templates will be shown. As the name suggests, home templates are designed to be used on the home page of your website.

Fourteen unique home page layout templates are available. Alternatively, you can choose to use a blank page.

Content layout templates help you build common pages quickly. For example, there are layouts for your about page, your contact page, and your blog page.

In total, there are thirteen content templates to choose from. You can, of course, save any page you create manually as a template and use it elsewhere on your website.

Beaver Builder has a user-friendly interface that doesn’t take long to understand.

In the admin bar there are links at the top right: Templates, Tools, Done, and a help icon. At the right hand side are drop down menus for row layouts, basic modules, advanced modules, and WordPress widgets.

The templates button loads up the layout templates box I highlighted earlier.

Clicking on the tools box brings up a few options. Duplicating the page will generate a copy of the post/page/post-type with the same layout. There is an option to save your layout as a template too.

Selecting “Edit Global Settings” will load up the “Page Builder Settings” box. From here you can modify settings for the default page heading, rows, modules, and the responsive layout.

Clicking on the done button lets you publish the changes you made or save them as a draft. If you choose to discard the changes, all of the modifications you made will be lost and the page will revert to the last saved version.

The help icon brings up options to take an interactive tour, watch a seven minute tutorial video, and jump to the Beaver Builder knowledge base or forums.

I recommend taking the tour when you load Beaver Builder up for the first time. It will give you a good overview of how everything works.

The first option in the right-hand side menu is row layouts. You can choose to have one to six columns of content. Left and right sidebars can also be added.

All you have to do is select the columns or sidebar you want and then drag it into the content area. It works really well.

You can delete, duplicate, or move rows. You can also modify row settings.

Deleting a column will automatically reduce the number of rows in that particular row. For example, reduce it from three columns to two etc.

The same settings are available for rows and columns. You can adjust width, text, change from a background color to background photo, modify your background settings, and define your border. In the advanced tab you can modify margins and padding, your responsive layout, and CSS selectors.

You will save your changes as soon as you click the save button. I found everything worked perfectly. For example, by default the width of a two column row will be 50% each, but if you adjust one to 70% in width, the other column will automatically change to 30% in width.

There are five basic content modules: Heading, photo, separator, text editor, and video.

As you would expect, you simply drag and drop the content modules into your page into the column and row you wish. Once you do so, you can modify the settings of that content module. Just like Visual Composer, the settings that are displayed depends on the content module you are modifying.

You may be a little confused after adding your first content module as the menu at the right-hand side of the page disappears. To make the menu return, you need to click on the “Add Content” button at the top of the page.

Twenty-two advanced modules are available. This includes post accordions, sliders, pricing tables, and subscription forms.

Twelve default WordPress widgets are available too. This brings the total number of content modules to thirty-nine.

Once you have created your page, you should save the draft or publish the page. I also recommend saving your layout as a template.

Beaver Builder Theme

The Beaver Builder theme is included with the pro and agency versions of Beaver Builder (more on pricing plans later). The theme is essentially a blank canvas that lets you create the website you want.

Over the last few years WordPress has been encouraging theme developers to integrate the WordPress theme customizer into their design. The adoption rate has been slow, with most theme developers still using their own theme settings page.

However, the developers of the Beaver Builder theme have embraced the theme customizer. Every single theme option and setting can be found there. This ties in nicely with the Beaver Builder WordPress plugin as it means that all changes you make to your website can be previewed in real time.

There are a huge amount of configuration options available. You can modify your header, footer, widgets, colors, and more. An import and export tool is included too.

I was pleased with the number of options that were on offer and found it very easy to change colors, backgrounds, and fonts.

It is clear that the Beaver Builder theme was built for users of the plugin as the theme itself is very basic. It allows you to customize a huge amount of settings of your design, but there are few options for changing the structure of your website. In that respect, the theme feels dated to me.

There are, however, ten different theme presets available. These presets will change the color scheme of your website.

While the Beaver Builder theme is a nice addition, it lacks the features and extras that most modern WordPress themes offer. For the extra money that Beaver Builder wants for this theme, you would be better off buying an all-in-one WordPress theme such as Divi as it offers so much more.

Page Builder Settings

The settings area for the Beaver Builder plugin is displayed on one page. Ten sections are displayed in the menu.

The first section is an option to enter your license key in order to receive remote updates and support. The plugin will still function correctly if you do not enter your key.

All basic and advanced modules can be disabled from the modules section.

You can also disable WordPress widgets for selection, however there is no option to disable widgets on an individual basis.

In the template section you can enable all templates, enable core templates only, enable user templates (i.e. the templates you saved), and disable all templates.

There are also options to edit page builder templates in the admin area and to override core templates.

All post types available on your WordPress website are displayed in the post types section. You can disable any post types that you do not want Beaver Builder to be active on.

Three different icon sets are included with the plugin. These can be disabled in the icons section. There is an option to upload your own icon set too.

In the editing section you can define the WordPress capability level required in order to edit Beaver Builder.

White labelling is available to those who purchase the agency license of Beaver Builder. You can enter your own branding and define your own company icon.

I spoke earlier about what happens when you click on the help icon in the page builder. You can disable this icon if you wish. Alternatively, you can disable individual items. The URL for the help video, knowledge base, and forums, can be defined too.

If you have transferred your website to a new hosting plan, you may need to clear the plugin’s cache.

I was pleased to see an uninstall option included with Beaver Builder. Clicking on the uninstall button will remove the plugin and all the data associated with it.

As you can see, Beaver Builder has a lot of useful options to configure on the settings page. The one thing that I think it really needs is the ability to modify permissions on a user role basis (it’s something that Visual Composer has).

Beaver Builder Pricing

The developers of Beaver Builder have adopted the popular pricing strategy of three different license options. The options are standard, pro, and agency.

All licenses permit you to use Beaver Builder on an unlimited number of websites for as long as you like. Support and updates are provided for a year and subsequent years are available at a discounted rate of 40% of the original price (though you can continue to use the plugin if you do not renew).

The support team will also help you create custom modules for your website too.

A standard license for Beaver Builder retails at $99. This license provides a full copy of the Beaver Builder plugin, but does not include the Beaver Builder WordPress theme or support for WordPress Multisite. To receive those two additions, you need to upgrade to the pro license that costs $199.

The most expensive license is agency. That retails at $399. It offers everything that the pro license does, but also offers white label features. You are permitted to replace all references to Beaver Builder with your own company name and the ability to modify the core page templates of Beaver Builder.

Unless you need support for WordPress Multisite, I believe the standard license at $99 gives you everything you need as the Beaver Builder theme is not worth paying $100 more.

Visual Composer vs Beaver Builder: Summary

As you have seen, Visual Composer and Beaver Builder both have their strengths and weaknesses. I personally do not feel there is much between the two solutions as far as creating layouts goes as both can be used to create great looking websites.

If you prefer creating layouts on the frontend of your website, I believe Beaver Builder slightly edges it since the interface is more fluid (though there is not a huge amount between them).

If you prefer to create layouts in the backend of your website, Visual Composer is the one for you since Beaver Builder does not offer this functionality.

After creating layouts with both solutions, I came to the conclusion that I prefer creating layouts in the backend using Visual Composer. This could partly be due to me having more experience with the plugin, but I felt I could create the pages I wanted quicker using Visual Composer. However, I believe it really comes down to your own preference as to which interface you prefer as although Beaver Builder may not look as professional, I found its simple interface a pleasure to use.

To help you decide, let us quickly recap the pros and cons of both plugins.

Visual Composer Pros

• Significantly cheaper than Beaver Builder
• Lets you create layouts in the backend and frontend of your website
• Has a larger range of content modules on offer
• Offers many developer options and there are a vast array of WordPress plugins available that add additional functionality

Visual Composer Cons

• The plugin is not GPL friendly and the developers expect you purchase a license for Visual Composer for each website you own (though technically you can use the plugin on multiple websites anyway)
• The frontend editor could be a little more polished

Beaver Builder Pros

• Has a user-friendly interface that is very easy to understand
• Can be used on an unlimited number of websites
• Has a good variety of content modules and widgets

Beaver Builder Cons

• More expensive than Visual Composer
• You can only edit layouts on the frontend of your website
• The higher priced pro and agency licenses do not justify their additional cost (particularly as multisite support comes standard with Visual Composer)

I hope you have found this comparison article useful. To find out more about these WordPress plugins, please visit the information pages for Visual Composer and Beaver Builder.

Thanks for reading.

Kevin