So, you are looking for a new pagebuilder plugin, right? How do you choose between Beaver Builder vs Divi when these are the most popular products around?
You have done some preliminary research and have found out that the these two are the most touted choices for building websites. You may also have some experience in using one of these pagebuilder plugins.
Now you want to find out which of these popular plugins is the best. And most of all, which is worth your money?
In that case, you have come to the right place. In today’s post on CollectiveRay, we are going to explore all the important features of these pagebuilder plugins and compare them head-to-head to help you find the best one for you - and where you should spend your money.
Read on to find out which is the best pagebuilder plugin for WordPress.
|Price||$89 (includes all ET plugins and themes)||$99|
|Frontend / Backend||Both||Both|
|Target Audience||Developer / Designer / User||Web Developer / Designer|
|Pre-made templates / layouts||100+||50+|
|Cool Feature||A/B Testing||Beaver Themer|
|What we liked||Very powerful solution for creating any type of layout||Simple user interface|
|Superior layout management options||Content remains intact even after deactivating the plugin|
|Attractive pricing with access to lots of other themes and plugins||Unique editor mode for clients|
|Allows you to use WordPress widgets in the layouts|
|What we didn't like||Takes some time to get used to||More expensive than the other pagebuilders|
|Frontend editor takes some time to load.||No undo, redo, or history option|
|Website||Visit ET (20% OFF)||Visit BB|
Why use Beaver or Divi?
If you're relatively new to the WP world, you might not know the full history of pagebuilders and how they have come about.
Essentially, up to a few years ago, WP had the ability to create either pages or posts. Both of these content items are very similar in nature.
They supported mostly texts and images and your run-of-the-mill website content such as video etc.
If you wanted anything fancier, you had to use plugins and / or shortcodes as necessary.
Now, shortcodes were great, because they allowed you to insert specific features and functions wherever you wanted to in a page.
But they still had their limitations - you still had to install a bunch of different plugins to be able to achieve and use multiple different elements in a page. If you wanted sliders, Call-To-Action buttons, videos, image galleries, and other stuff, you had to keep adding more and more plugins.
This brought with it another problem - the more products you add to your installation, the heavier your website would get and the more it was prone to security vulnerabilities coming from the various items you had to install.
This was a problem.
There was another problem. You could not create a page or post visually. You had to design a page using shortcodes and after several iterations of changes, you would arrive to a result which was close to what you desired.
Eventually, developers and WP vendors started realizing that most people wanted the ability to design and define their own pages without constraints - not use templates, which made all websites look the same.
And thus, the concept of page builders came about.
This is essentially the core of such a feature - the ability to drag and drop different elements to design and define a page or post in a way that YOU want.
We're not too sure who came up with the first pagebuilder product, but definitely ElegantThemes have been one of the vendors to make this concept very very successful.
As soon as people saw the potential, all of the major vendors started jumping on the bandwagon.
Today, most of the major vendors will bundle some sort of visual page builder into their themes - if they don't have one themselves, they will partner with somebody who has to embed this feature.
So what about Divi and Beaver Builder?
ElegantThemes have been in this niche so long that they've really understood what people want and have given it to them - their product is one of the most popular around, with more than 400,000 sales. They are focused towards those users who want to create a website but are not really bothered with what's going on under the hood - they just want things to work and don't want to get technical about it or mess around with any code.
ElegantThemes Target Audience:
People who want to get a website designed and up and running without involving a developer or knowing much about code.
- Small business owners
- Affiliate website owners
- Content writers who are doing websites
- Web designers
- Digital marketing agencies
If you had to take a look at the below image, Divi is targeted towards the designer.
Beaver Builder has a different sort of user. While ElegantThemes targets those who are less "technical", BB goes after those users who are designers and developers at heart. Divi has some limitations which these developer types find frustrating, and BB identifies and fixes these issues nicely.
This has allowed this product to take off nicely with those who identify more as developers.
Continuing on the image above, BB would be more at home with the developer.
BeaverBulder Target Audience:
Web developers and designers who like to tinker around with the code, be in full control of what's going on what to be able to tweak things to make them work the way they want to, not the way the vendor designed it.
- Web developers
- Web designers who want to tinker with code
- Digital agencies
With that introduction out of the way, let's start digging into each individual product, so we can see the features, functions, PROS and CONS of using either of these two items.
Let's start by discussing the User Interface of both of these products.
The WordPress PageBuilder User Interface and User Experience
The Divi Interface
ElegantThemes have been working on their product for quite a number of years at this point. With a strong community supporting them, giving them plenty of great feedback - these guys know how to stay on the pulse of their users.
They have built an interface which is entirely focused on a great User Experience.
They haven't build hoards of fans by accident. Their strict focus on the design and usability of their product has been one of the key aspects of making this builder so successful.
Have a look at this short intro video (2 minutes). This is from the very first version of Divi (2015), many things have changed since then, but it's great to get a quick summary of the possibilities.
But let's take an actual look at the UI.
You can access the Divi interface both from the backend and the frontend of your website. So whether you prefer working on the frontend, or the backend of your site, it's your choice.
There are different reasons for doing both. Play around in the backend if you're more of a developer type who likes to have easy access to the code and other backend features.
Work in the front-end if you're more of a designer / creative type who is more into what things will look like rather than how they work.
The front-end real-time editor, now allows you to design and actually visualize the page you are working on on the fly.
This is frankly, a great feature, because you don't have to "guess" or refresh the front end to see the result of the design you are working on.
You can see it as you design it.
This is what ElegantThemes are calling "A new visual experience".
They have recently been working to creating a new version of the Builder (which was released as version 3.0). The crux of this version was that rather than having two separate "views" a backend view and a live view, the two will actually blend into one and the same thing. The back-end editor actually shows the live version as you are working.
This is a complete WYSIWYG (What You See is What You Get) experience.
Have a look at the below image - see that design in the backend? This is exactly what it will look like when published.
To access the pagebuilder from the backend, go to Posts > Add New. On the resulting page, click the “Use The Divi Builder” button. This will open the interface, which looks like the following
Divi 3.1 (which we've already reviewed here) allows you to create separate sections for various parts of the page. It supports three types of sections – standard, full-width, and specialty.
For the standard and full-width sections, you can choose a column-based structure. There are lots of combinations including two, three, four-columns in different sizes. The specialty section features nine specially created column structures. You can add multiple rows inside a section to have multiple column structures.
Once you have chosen a layout, you can add modules to the individual columns. You will find separate options to provide the module content, configure the design options, and provide custom CSS.
You can reposition the modules, columns, rows, and sections by dragging and dropping these into their desired locations. There are dedicated buttons to delete, duplicate, and open the settings section for each of these items. It is also possible to undo, redo the last actions and revert to the previous actions by using the history feature.
To use the pagebuilder from frontend, visit the page you want to edit and click the “Enable Visual Builder” button.
Depending on the page content, it may take a while to load the interface (bear with us, the front-end editor is quite heavy and needs time to download and render).
Once the fronted pagebuilder loads, you can start customizing the page.
Like the backend interface, you can add a new section, choose the column structure, and enjoy complete access to all the module settings options.
Of course, a designer without drag and drop is dead in the water, but of course this product handles D & D very nicely.
In fact, not only is it, drag and drop - but it also maintains responsiveness as you are designing.
Given that you'll be working on the actual live blocks of contents and elements, you'll be dragging the actual pieces of content.
And of course, everything is still fully responsive.
Have a look at the following short demo of live, responsive blocks.
You can drag and drop the modules, rows, columns and also copy, paste, delete, or edit these according to your requirements.
PS. The above offer is only available through CollectiveRay.
So what about ElegantThemes competitor? Does it have the same flexibility? Does it work in real-time in the front-end?
Read the rest of this article to find out the answer to these questions.
How to use Beaver Builder
Not wanting to be left behind the in the race to pagebuilder domination, BB has come out with all guns blazing.
Or teeth gnashing, if we want to keep the Beaver analogy. 😀
BB offers both editing in the frontend and in the backend, so it does not lag behind in that regard.
It can be used on pages, posts and most other WP custom types, as long as they have been enabled.
By clicking on the Admin tab for the relevant custom, type you'll see the builder being loaded so you can use it to design your content.
Before we continue, you might want to view the following short video (2 minutes) about using BB.
Essentially, in the backend method, after you log in to your dashboard first, go to Posts > Add New, and click on the “Page Builder” button. This will bring up the pagebuilder interface - something similar to the below.
The first step is to choose a template for the page. You can choose any of the ready-made templates or get started with the blank one to create your own template. Once you have chosen the template, the next step is to choose the row layout.
You can choose the row layout from the left sidebar. Open the sidebar by clicking the “Add Content” button on the top-left menu of the page. The menu also offers a few other buttons to change the template, open the tools, section, publish the page, and a dedicated help button.
BeaverBuilder offers several column structures including one, two, three, four, five, or six columns, and rows with left, right, or both sidebars.
Just drag the row layout into your desired position in the page.
The next step is to add modules to the columns. You will find the modules in the left sidebar.
Choose the module you want to use and drag it to the desired column in the page. At this point, you will be provided with the module settings window. There are multiple sections to manage the content and style of the module.
You can drag and drop the rows and modules to change their positions. There are separate buttons to delete, duplicate, or open the settings for any row or module. It is also possible to change the column structure of a row.
To access the pagebuilder from the frontend, visit the page you want to edit and click the “Page Builder” button. This will open the same interface as creating the page from the backend.
You can work with the existing design or choose a new layout. All the other options like adding various rows, modules, widgets, and managing them are exactly the same as the backend.
Would you like to see a free live demo of BeaverBuilder now? Click the button below. (Opens in a new window)
The Available Modules for Beaver Builder / Divi
This plugin currently comes with 46 content modules, but given the scale of development, you might probably see more as of when you are reading this article.
Among these, you will find the regular ones like:
- custom code,
Advanced choices of elements include:
- pricing table,
- testimonial, and
- video slider
Of course, these are not the only modules available, but if we kept listing them, given that there are more than 46 supported elements, we would be here for ever.
Let's just say, you're unlikely to come across any elements which have not be catered for.
Still, if you do, you can actually opt for 3rd party elements developed specifically for module. With version 3.1, an API has been developed and released, to you can expect custom elements and modules to start popping up all over the place.
Fun times ahead!
Let's see what fancy stuff other developers will come up with. Stay tuned.
But enough about that, let's have a look on how to actually use a module:
Click on your desired module to add it to the post. At this point, you have to configure the module settings.
The pagebuilder provides you with three sections for this purpose:
- Design, and
The Content section includes all the options regarding the content of your chosen module.
Design allows you to choose the color, font, background style, border, margin, and padding for the module.
Lastly, Advanced includes dedicated fields for adding custom CSS ID, class, and for applying custom CSS before or after the module or to the main content.
Would you like to read more information about this plugin now? Click on the button below to visit ElegantThemes website.
PS. Offer is only available from the above link.
BB divides the modules into two categories –
- Basic Modules and
- Advanced Modules
The basic modules include:
- text editor,
- video, and so on.
The other category contains more advanced modules:
- content slider,
- countdown timer,
- posts slider,
The plugin offers three sections to manage a module –
- Style, and
Among these, the General section allows you to configure the settings related to the module type.
The Style section enables you to choose the color, alignment, font, and other styles for the desktop and mobile versions.
Advanced includes options to set up the visibility, animation along with dedicated fields for adding CSS class and ID.
You can see a more clear demo of the BeaverBuilder features below.
The next part of our Beaver Builder vs Divi review will deal with available page templates or pre-defined layouts. This is something which is bound to make your life as simple as it can get and allow you to design brand new websites in a matter of hours, even minutes, instead of weeks.
See below what we mean!
Built-in Page Templates
Built-in page templates essentially are there to shorten your design / development time. By having these in place, you only have to tweak the content and the design slightly and you're good to go!
Divi VisualBuilder Page Templates (aka Layouts)
The new version 3.0 comes with several (more than 100) ready-made templates to help you get started as quickly as possible. You can use a template by clicking the “Load From Library” button in the post editor. This will open a list of the available templates.
You will find professional layouts for the landing page, coming soon, about me, contact us, team, maintenance page along with several variations for the homepage, blog, shop, and portfolio pages.
It is possible to use these layouts as they are or customize these according to your requirements.
Of course, one may have quite a large number of templates (or as ET calls them) page layouts, but the real meat is whether or not they are actually any good and usable to create your own designs.
Essentially, the basic idea is this - you load a pre-defined layout, then you customize the text, imagery and other content to suit your business and - voila - you've got an amazing "designed" website without requiring any real design knowledge.
This is great power in the hands of those who want to get things up and running quickly but are not very comfortable with code or design per se.
Just an FYI - there are more than 250 layouts available at the time of writing this article.
Let's have a quick browse at what is available in terms of layouts.
Complete Website Packs
This right here is a killer-feature which we think is great for the target audience which this product is aimed for. Given that we mentioned the audience to be, people who to get something off the ground quickly, the availability of complete website packs is truly a blessing.
Essentially, these are a bundle of the essential 7 to 8 individually designed pages required for somebody to just launch a full site in a matter of minutes.
Have a look at how Nick Roach from ET describes the value that the layouts bring to this product.
The pages are actually customized for the specific niche / industry, having the essential elements required for that specific kind of business.
All you would need to do as a user is import the design and change the content to suit your own specific requirements.
Here are some of the niches which are available as website packs. As of now, there are 31 layout packs available with a total of 250 pages designed.
- Restaurant Landing Page - this is a pack consisting of 8 pages to provide anything which a restaurant or food-based business to launch their online presence, including the hours or operation in the footer for easy access by customers.
- Design Agency - the design agency pack is a 9 page bundle of creatively and professionally designed pages for an digital or design agency. Of course, prominence is given to work and style, showcasing the skills of the business in a way which converts
- Fashion Landing Page - one industry which surely needs to look great online, is a fashion blog. This layout pack of 8 pages focuses on allowing the blogger to brand their image as necessary. It's all great for use by photographers and other visual businesses.
- Travel Agency - the design here has strong focus on the user visiting the site taking action, pushing and urging the current viewer to call or book now with attractive Call To Action buttons.
- Wedding Home Page - a perfect way to quickly launch a wedding showcase. It of course focuses very much on the aesthetics and a number of other custom features specific to weddings.
- SaaS Company - another type of business, typically startups, which typically has little time to waste and needs to get up and running quickly. This layout pack gives them all they need to get up and running and get the necessary information out there.
There are plenty of other layouts available including but not limited to:
- Learning Management System
- Coffee shop
- Farmers Market
- Yoga or Fitness Studio
- Photo Marketplace
- Web Agency
- Interior Design Company
- Digital Payments business
- Pottery and craft studio
- SEO Agency
- Business consultancy
- Design conference
- Food recipies
- Law Firm
- etc, etc.
As time goes by, ET keep adding more and more layouts to their library to cater for specific niches. Even if you specific industry has not been catered for right now, you will definitely be able to customize one of the existing layouts and designed to suit your needs.
Beaver Builder Page Templates
BB also comes with lots of professionally designed templates. You will be asked to choose a template when creating a new post. It is also possible to change the current template by clicking the “Templates” button.
There are two types of layouts –
- Landing Pages and
- Content Pages.
Landing pages include templates for physical products, apps, professionals, restaurant, technology, fashion, photography, mobile, music, automotive, and so on.
Content Pages include templates for the necessary website pages like the about us, services, portfolio, team, contact, FAQ, blog, etc. Most of these templates are available in different styles. As the templates are provided with an image, you can easily choose the best one according to your requirement.
Let's have a bit of a deeper look at what's available for you as a customer of BB.
BB has designed a number of landing page templates which are ready to use. Amongst these we can find:
- Small business template - based on the Probiz template, this will help you create a presence for a small business quickly.
- Fitness, Gym or Sporty template - fitness and sport is always a hot niche and The Body Factory template is designed specifically for clients in this industry. Yoga, Gym, or any physical fitness industry works well with this.
- Magazine, Blogger, Fashion blogger template - Another ever smoking hot industry, the Fashion Freaks template is just right as a high-end designed look and feel screaming class, sophistication and luxury.
- Lawyer, Law Firm Template - another hot niche, lawyers and law firms are lucrative clients, who demand a presence which is able to convert high-paying clients. The professional web presence can be easily adapted to other practice-based industries.
We'll only mention briefly the rest of the templates
- Photography portfolio template
- DJ / Musician / Band template
- Restaurant / Cafe template
- Full-screen layout template
- Creative, web agency template
- eBook template
- Education or University template
- Cars / Automotive template
- Mobile App template
- General business template
- Construction template
- Coming soon template
We highly recommend that you have a look at the demos available with each of these templates, to see how easily it is to get started with these templates.
While templates of full websites are fantastic, sometimes we still want to tweak or create specific pages. For this reason BB also has a number of content pages which have been designed and ready-to-use.
Here are some of the pages which are available for use:
- About Us (several versions)
- Our services
- Photo portfolio
- Design portfolio
- Our Team (several versions)
- Contact (several versions)
- Pricing (several versions)
- Blog (several versions)
Of course, we only expect these to grow over time.
Click on the link below to go directly to the templates page.
Setting up this plugin is very straightforward.
Once you install and activate the plugin, go to Plugin Options, and provide your username and API Key in the “Updates” section to receive automatic updates.
You will find a list of all custom layouts in the Divi Library page. There are separate buttons to manage the layout category and to import or export the layouts. Go to Divi Role Editor to define how much access different user roles will have.
Beaver Builder Settings
The settings options for BB are located in the Settings > Page Builder page. Provide your license key in the License section to enable automatic update for the plugin.
In Modules, you can enable or disable the modules. Post Types allow you to define which post types can use BeaverBuilder. In Templates, you can decide which templates will be available in the pagebuilder interface.
The Icons section enables you to decide which icons should be available in the interface.
The available options include
- Foundation, and
This is an example of how BB allows you to customize and tinker with all of the options you need. If you're not happy using FontAwesome, choose something ou like.
Finally, you will find an option to uninstall Beaver Builder. This functions actually remove all BBB related data from your WordPress database - so take backups before you use it and make sure you know what you are doing.
The plugin from Elegant Themes comes with several other exciting features. For instance, the PageBuilder Library enables you to save customized modules and layouts so that you can use them again in the future. What’s more, it is also possible to import or export these items to and from other websites.
The superior layout spacing options also demand special mention. These options make it a lot easier to apply the exact spacing you want between the rows, elements, and sections. You will find dedicated options to define the margin, padding, vertical and horizontal spacing. It is also possible to set up the row and column widths.
In some instances, you may have to use the same module in multiple places. You can easily copy and paste any module, row, or column to other posts or pages. What’s more, you can mark these as global items. This allows you to make the changes to a single global item, and the changes will automatically be applied to the other places too.
PS. The above offer is only available through the above link from CollectiveRay
On the other hand, BB also has some tricks up in its sleeves. First of all, the live frontend editing is really impressive. It offers an intuitive experience where you can edit the page and get the exact output without any guesswork. It also allows you to use the default WordPress widgets and custom widgets in your layouts.
The editor mode will be handy when delivering a project to the client. This mode allows you to limit the abilities of the client to make sure that she is not making any unwanted change in the core layout.
Another significant feature of BB is that the page content remains intact even after you deactivate the plugin. You will lose the styles, but the page will still display the content. In contrast, most other pagebuilders will leave you with a mess of shortcodes when you deactivate that plugin.
Pros and Cons
- Very powerful solution for creating any type of layout,
- Superior layout management options,
- Attractive pricing with access to lots of other themes and plugins - buying it is a no-brainer, excellent value
- Many great designs, with plenty of customisation options,
- Extensive documentation and great, responsive support
- Take some time to get used to,
- Frontend editor takes some time to load and adding modules to pages is much slower than BB
- You are limited to the modules available and developed by ET (although version 3.1 now supports a developer API, which means developers will start to integrate their plugins with it)
- Cannot remove the data it adds to the database, making moving away from Divi a pain
- Simple user interface,
- Content remains intact even after deactivating the plugin,
- Unique editor mode for clients,
- Allows you to use WordPress widgets in the layouts.
- Fast, snappy, responsive UI which is easy to understand interface
- Large selection of professional templates to help you get started with your design
- Supports WP native widgets so you can use anything plugins available for WP in BB
- More expensive than the other pagebuilders
- No undo, redo, or history option which makes it a hassle if you make a mistake
Pricing of Divi vs Beaver Builder
You have to be an Elegant Themes member to use their plugins - and access comes at the below rates.
There are two plans available for you – Yearly Access and Lifetime Access.
The yearly access plan is priced at $89 per year. On the other hand, the lifetime access allows you to enjoy all these benefits for a one-time payment of $249.
Fortunately, there is an EXCLUSIVE to CollectiveRay 20% offer going on right now, until so get yourself a bargain today. While you're at it, might as well get the Lifetime Access given this limited time period discount.
Both plans offer unlimited access to all the themes and plugins developed by ElegantThemes.
You will get timely updates, premium support, and a 30-day money-back guarantee as well.
Beaver Builder offers three pricing plans. The Standard plan is priced at $99, which allows you to use the plugin on one website, gets you one year of support, and access to premium modules and templates.
Pro is priced at $199, which includes all the benefits of the standard plan, plus the BB theme and multisite-compatibility.
Lastly, Agency is priced at $399 and enjoys all the features of Pro along with complete white labeling permission.
Which Pagebuilder should You Choose?
Now we come to the (difficult) part where we need to make a choice among these pagebuilders.
As you have noticed, both plugins offer tremendous value for the money. They deliver an excellent user interface and makes it a lot easier for you to create custom layouts.
As both plugins have their use cases, you need to find out which one meets your requirements the most. Let me help you with that –
- Choose Divi if you want complete control over the layout. Once you get used to the available options, it is a very powerful tool allowing you to create any type of layout you want.
Final result: 5 out 5.
- Go with Beaver Builder if you want to get started quickly. As this pagebuilder doesn’t use any shortcodes, you can easily scrap the current design and try a new one with a few mouse clicks.
Final result: 4.5 out 5
Final Words: Beaver Builder vs Divi
Divi and Beaver Builder are two of the most popular pagebuilder plugins right now. Unless you have used both plugins extensively, it is really challenging to choose one over the other. This comparison post should help you make that decision.
We are of the opinion that ElegantThemes gives you more value overall, given that you are actually getting access to a ton of themes and plugins, but BB is also a great choice.
So, which one have you chosen? Let us know in the comments below.