When it comes to drag and drop page builders, WordPress users are spoiled for choice. The market is highly competitive with many great free and premium solutions available. These products will help you to create professional looking pages in minutes with ease.
These WordPress plugins can be used with any WordPress theme to design beautiful pages.
What sets Beaver Builder and Divi apart from many alternatives is that in addition to page building, they both include themes. These themes act as a blank canvas for creating unique pages and extend the functionality which is available through the plugin.
In this article I would like to delve deep into both solutions and show you exactly what Beaver Builder and Divi have to offer. I hope you find it useful. 🙂
The Beaver Builder Interface
Beaver Builder is a front-end drag and drop page builder. Once activated, Beaver Builder converts your website pages into a canvas for you to make customisations.
The plugin supports posts, pages, and most custom post types. In the WordPress editor page you will find a new “Page Builder” tab. Clicking on the tab will load Beaver Builder for the page in question.
Alternatively, if you are logged in, you can load the Beaver Builder interface on the front-end of your website by clicking on the “Page Builder” link in the WordPress admin bar.
If you are familiar with the WordPress theme customizer, you will feel right at home with the Beaver Builder interface as it has the same dull grey colour scheme that we have come to associate with WordPress. Visually, it does not look very professional, but the layout is practical and that is what counts.
The interface is easy to understand.
At the top of the page you will see a navigation bar that displays a series of buttons: Templates, Tools, Done, and Help. Layouts and modules are all displayed down the right-hand side of the page in a sidebar. When this sidebar is closed, an “Add Content” button is added to the top navigation bar that allows you to load the sidebar again.
In the content sidebar you will see options for row layouts, basic modules, advanced modules, WordPress widgets, saved rows, and saved modules. All you have to do is drag and drop the content you want into the canvas area.
Content can be easily moved around into different columns and rows. The widths of rows and columns can be adjusted and you can duplicate content at the click of a button.
From a productivity point of view, Beaver can be frustrating if you are making many changes to your page as there are no undo and redo buttons for you to change back any changes you make (despite being requested by users). This can prove to be a real pain as if you want to undo the last change you made to your page, you need to revert back to the last saved layout. It is therefore vital that you save your page regularly.
Clicking on the done button at the top of the page loads up a menu for you to publish your changes, save changes and exit, and discard changes and exit.
Bizarrely, there is no option to save your page or discard changes without exiting. Whatever option you choose, the page builder interface closes down.
In order to improve the experience of designing pages, they need to introduce user-friendly undo and redo buttons and a way to save changes and discard changes without exiting the Beaver Builder interface.
Beaver Builder provides a large selection of layout templates to help you create professional looking pages. If you do not want to start with a blank canvas, you can choose from one of thirty landing page templates and twenty-five content page templates.
You can use the unaltered version of these layouts or use them as a starting point for your own custom layout.
Any layouts you create in Beaver Builder can be saved via the tools menu and reused elsewhere. At present, you can only save the full layout of a page. There is no functionality to save part of the page as a layout.
The quality of the layout templates is high.
You will find landing pages for different genres of websites such as blogs, shops, and businesses. You can use these for your home page or for specific pages on your website.
Content page templates help you quickly create professional looking designs for common pages such as your about page, services page, and contact page.
In the tools menu you can save your page as a template. Duplicating the layout will create another post or page with the same layout.
The lack of undo and redo buttons is frustrating, but on the whole Beaver Builder is a pleasure to use. The simplicity of the interface means that it does not take long to get the most from Beaver Builder and jumping between menus is smooth with next to no loading times.
The Divi Builder Interface
Divi originally launched as an all-in-one WordPress theme with a back-end drag and drop page builder. The page building functionality was later released as a standalone WordPress plugin called Divi Builder and in late 2016 Elegant Themes introduced a visual builder. It means you now have the best of both worlds. You can choose to either customise your content in the back-end or front-end of your website.
Posts, pages, and custom post types, are supported by Divi. You can load Divi by clicking on the “Use the Divi Builder” button which is displayed in the WordPress editor.
Once Divi Builder has been loaded in the editor, you will see a “Use Visual Builder” that will take you to the front-end editor.
Alternatively, you can load up the front-end editor at any time when you are logged in by clicking on the “Enable Visual Builder” link in the WordPress admin bar.
Let's start with the back-end editor.
Once activated, the Divi Builder interface replaces your main content editing box. The first thing you will notice is how professional it all looks. The interface is colourful and well presented.
The Divi interface is perhaps not as self-explanatory as Beaver Builder, therefore I recommend spending some time playing around with it when you first activate the plugin. Move things around and familiarise yourself with what all the buttons and menus do.
At the top right-hand side of the Divi Builder box there is an import and export button, a settings button, and a button that minimises the Divi Builder box.
Underneath are buttons to save your layout to library, load a layout from library, and clear your layout. To the right are buttons for undoing changes, redoing changes, and seeing your history.
The colourful design of the Divi interface helps you see how your page is structured. Modules, which are grey in colour, are structured inside columns, which in turn are placed inside rows, which are green in colour. All rows are placed inside sections, which are blue.
This simple colour scheme lets you see your page layout at a glance.
The undo and redo buttons means that mistakes can be corrected quickly. Elegant Themes expanded this functionality further by displaying a history of all the changes you have made since you last saved your layout. I love this feature as you can quickly jump back and fourth between your changes to see which layout you prefer.
Right clicking on the interface brings up a useful menu with many options. You can rename any part of the structure, save to library, split test, collapse, expand, and more.
The library system is fantastic. You can save the full page layout or individual parts such as a section, row, or column. You can browse your library at any time and load it into your page wherever you want.
Professional predefined layouts are included to help you get started. Thirty-two layouts are available. There are home page layouts, portfolio layouts, blog layouts, and more.
My one complaint about this area is that there are no previews of these layouts. This means that in order to see whether the layout is suitable you need to add the layout to your page. At the very least a preview thumbnail is needed to address this.
Divi makes creating unique layouts simple. You can insert a wide combination of column structures into rows using halves, thirds, and quarters.
A fullwidth section lets you eliminate the row and insert modules directly into the section. This effectively reduces the spacing around the modules.
Nine unique structures are available via the speciality section link. These structures contain columns that span multiple rows.
I believe that the back-end editor is still the best way to start modifying a page with Divi, however once you have structured your page, Divi's visual builder is a great way of tweaking the page to ensure everything looks the way it should.
The visual builder is a joy to use.
Hovering over a module, column, row, or section, will generate the settings menu. You can move content around and customise everything just like you can in the back-end.
When you click on text, a small text editor will appear that lets you change the text and text formatting.
At the bottom of the page is a button with three dots. Clicking on the button opens up a navigation menu at the bottom of the page.
On the left-hand side are options to zoom out of the design and switch from desktop view to tablet view or phone view.
In the centre there are buttons to save to library, load from library, clear layout, adjust page settings, view editing history, and export and import layouts.
A save button is displayed at the right-hand side of the page.
Elegant Themes has been continually refining Divi over the last few years. They have made a lot of subtle changes to the back-end editor and have done a great job with the visual editor.
Once you understand all the tools that are at your disposal, you will be able to create complex pages in seconds.
Beaver Builder Content Modules
The content sidebar makes adding new content modules to your page simple. All you have to do is drag and drop a content module or widget into the exact area of the page you want to place it.
Beaver Builder features eight basic modules, twenty-two advanced modules, and twelve default WordPress widgets. This means that you have a total of forty-two modules at your disposal as soon as you activate Beaver Builder.
Default content modules include audio, photo, content slider, posts carousel, testimonials, and more.
In practice, if you install Beaver Builder on a live website, you will see more than forty-two modules as Beaver Builder allows you to add any WordPress widget into the canvas area.
There are tens of thousands of WordPress plugins that offer widget functionality, therefore the possibilities with Beaver Builder are limitless.
Once you have dragged a module into your canvas area, you can adjust settings, change its design, apply custom CSS selectors, and more.
Beaver Builder allows you to save modules for future use. This is a great feature as it allows you to customise a module as you see fit and then insert it into other pages later.
The developers of Beaver Builder have taken a minimal approach to the design of their content modules and left styling the modules to the user.
Whether this a good thing or not depends on your perspective. The vast number of layouts that are included with Beaver Builder highlight what can be achieved with the plugin, but out of the box the modules may be perceived as being plain as they lack colour and styling.
All modules have a style tab that allow you to change colours, spacing, borders etc. The problem is that styling options are quite limited so it can be difficult to improve the look of modules.
Divi Builder Content Modules
Forty-six content modules are available in Divi. Modules include portfolio, call to action, video slider, gallery, and more.
Clicking “Insert Module” in the canvas area will load up the module list. The process of adding new modules is not slow, but Beaver Builder is much quicker in this task as you simply drag and drop modules from the content sidebar.
You can add any default content module and any configured modules you have saved to your library.
In the module settings box you can modify the module and preview the module in different devices.
There are a host of design options in this area too. Everything from colours, to sizes, to spacing, can be adjusted using sliders and selection boxes.
Like any drag and drop page builder, you need to customise each module you add to your page, but out of the box modules look quite colourful. Design is subjective, but I believe that the design of Divi's modules look great. Colours and fonts and spacing all tie in together well.
Unfortunately, Divi does not let you insert WordPress widgets into the canvas area, therefore you are restricted to using the content modules on offer.
This is one area where Divi needs to improve upon as alternatives such as Visual Composer have hundreds of extensions available for them and others, such as Beaver Builder, open up a whole world of possibilities by allowing WordPress widgets to be used.
Configuring Beaver Builder
The general settings page for Beaver Builder is located under your settings menu in the WordPress admin area. The settings page is divided into nine sections.
The welcome tab has some tips to help you get started and the license tab allows you to get automatic updates and support. All modules are enabled by default, but you can disable ones selectively in the modules tab if you wish. Likewise, you can disable Beaver Builder for certain post types and set whether certain types of icons are available.
In the templates tab you enable and disable core templates and user templates. There are options to edit templates and export template data too.
The editing tab lets you control what users are allowed to edit using Beaver Builder. All you have to do is set the cabaility required to use Beaver Builder.
This is very useful if multiple people work on your website. For example, you may want to restrict Beaver Builder to administrators, editors, and authors, so that contributors and subscribers cannot use it.
Configuring Divi Builder
General settings for Divi can be found under a dedicated Divi menu. Three different settings pages are available (more settings pages are displayed if you are using Divi theme).
In the plugin options page you can enter the API keys for the newsletter services MailChimp and Aweber, your Elegant Themes username and API key for plugin updates, and your Google API for displaying Google maps.
All of the layouts you have saved can be viewed and edited in the Divi library page. You can sort library items by type, assign them to categories, and export them for importing later.
Whereas Beaver Builder relies on WordPress's predefined role system, Divi allows you to specify exactly what each user group can and cannot do with Divi. In my opinion, this is a better way to handle user roles.
You can change roles for the Divi Builder interface, library settings, modules, exporting, and more. All settings can be backed up and restored using the export/import system.
The Divi setting area is great looking and easy to use, though there are some important settings missing. For example, you can not specify which post types Divi works with and there is no uninstall funtionality.
An option for uninstalling Divi is something that should be mandotory of all WordPress themes and plugins so that no unnecessary data is left clogging up the website's database.
The Beaver Builder Theme
The Beaver Builder theme is provided with the Beaver Builder pro license ($199) and agency license ($399).
It is a minimal design that was developed upon the Bootstrap framework. This child-theme compatible WordPress theme works perfectly with Beaver Builder.
The Beaver Builder theme purposely has a basic design. Consider it a blank canvas for you to create your own unique design.
You will find a lot of great customisation options in the design. Everything is controlled inside the WordPress theme customizer so you can see changes being made to your website design in real-time.
Options are divided into the following categories: Presets, general, header, content, footer, widgets, code, settings, menus, additional CSS, and export/import.
You can change every aspect of your design through the customizer. This includes layouts, colour schemes, spacing, content, and more.
I recommend taking the time to go through each section so that every aspect of your design is how you want it to be.
The Beaver Builder theme is bound to be popular with developers as it gives them a blank template to create website designs.
Non-designers can create cool designs with Beaver Builder too if they are willing to spend time going through each part of their layout and customising it.
The Divi Theme
Divi was initially launched as an all-in-one theme. It was not until late 2015 that Elegant Themes released the Divi Builder plugin. This development meant that Divi's drag and drop page building features could be used with any WordPress theme, not just with Divi.
The heart of Divi theme is in the WordPress theme customizer. It is here that you modify your website design and change how it looks.
You will find eleven categories in the customizer: General settings, header and navigation, footer, buttons, blog, mobile styles, colour schemes, menus, widgets, static front page, and additional CSS.
Divi theme is very easy to use. You can switch off key features at the click of a button and change features using sliders, selection boxes, and drop-down menus.
Many theme settings are outside of the WordPress theme customizer. There is a dedicated theme options page with general settings and settings for navigation, layout, ads, SEO, integration, and updates.
It makes sense for many of the settings in this area to be positioned outside of the WordPress theme customizer as it is a better place to place things such as API keys, SEO settings, and header code.
I do think, however, that many of these options would be better located in the customizer. For example, the website logo, the 468×60 banner ad, and the navigation controls. In short, if it is related to your website design, the options for it should remain within the WordPress theme customizer.
Divi theme has more theme options than the Beaver Builder theme, but there is not as big a difference as you would imagine.
Both of these themes place the WordPress theme customizer at the heart of their designs so that you can see the changes you make in real-time. Both start you off with a minimal design and encourage you to customise everything yourself.
Be aware, however, that neither the Beaver Builder theme or Divi Theme provide complete skins for your website. Predefined layouts are available within the page building interface, but the theme starts you off with a blank canvas.
This is something that Beaver Builder is planning on addressing as they are developing a templating system that allows you to apply a layout to your whole website. It will be known as Beaver Themer.
The feature is still some time away from being completed. Once it has been released we will update this article accordingly.
The Cost of Beaver Builder and Divi
Beaver Builder and Divi are both GPL friendly products so you can use them on as many websites as you wish.
There are three different licenses available for Beaver Builder. Each license gives you full access to the Beaver Builder plugin and all modules and templates.
The standard license retails at $99 whilst the pro license retails at $199. The latter adds support for WordPress multisite and includes the Beaver Builder theme.
The agency license retails at $399. This license allows you to remove all references to Page Builder and Beaver Builder in the admin area and brand the plugin as if it was your own.
A year of support is provided with each license and there is a 30 day money back guarantee for those that are not happy with it. If you choose to renew your license after one year, you will receive a discount on your renewal of 40% if you renew within two weeks of your license expiring.
Elegant Themes recently simplified their license options for customers by reducing their plans from three to two.
You can choose to join Elegant Themes at the cost of $89 per year or pay a one off fee of $249 for lifetime access. Both plans grant you access to all Elegant Themes and plugins and provide full support and updates.
With eighty-seven WordPress themes and three feature rich WordPress plugins, an Elegant Themes membership offers fantastic value for money.
A 30 day no fuss money back guarantee is provided when you join for peace of mind.
Drag and drop page building WordPress plugins are a great way of creating professional looking pages in minutes. Both Beaver Builder and Divi are great solutions that can be used to create beautiful websites.
The differences between these two products are subtle, but depending on your requirements, these dfferences can be significant.
If you want versatility, go with Beaver Builder as its support of WordPress widgets creates unlimited opportunties for expanding the features and functionality that can be added to your pages.
If you want value for money, you should buy Divi as Elegant Themes grants you access to ninety quality WordPress products at a price that is cheaper than Beaver Builder retails on its own.
Beaver Builder is arguably easier to use, but Divi has more customisation options.
Whilst both solutions give you access to professional looking layouts, neither the Beaver Builder theme or Divi theme currently comes with theme skins to let you change your website design at a click of a button.
Beaver Builder Pros
- Fast loading and easy to understand interface
- Great selection of professional predefined templates
- Support for WordPress widgets means the number of modules available to you is unlimited
Beaver Builder Cons
- The lack of undo and redo buttons makes mistakes costly
- Content modules look quite dull and uninspired
- Pro license is not worth the extra money unless you need multisite support
- Features a back-end and front-end editor
- Beautiful designs, many great customisation options, and an extensive documentation area for support
- Membership offers fantastic value for money
- Adding modules is much slower than Beaver Builder
- You are limited to the content modules available
- No option to remove the data Divi adds to your database
Be sure to check out my comparison of Beaver Builder and Visual Composer and my list of the best drag and drop WordPress page builders.
Thanks for reading.