So, you are looking for a new page builder plugin, right? Is it Beaver Builder or Divi?
You have done some preliminary research and have found out that the Divi Builder and Beaver Builder are the most popular choices. You may also have some experience in using one of these page builder plugins.
Now you want to find out which page builder plugin 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 page builder plugins and compare them head-to-head to help you find the best page builder plugin.
Read on to find out which is the best page builder plugin for WordPress.
The WordPress PageBuilder User Interface
The Divi Builder Interface
You can access the Divi Builder interface both from the backend and the frontend. To access the builder interface from the backend, go to Posts > Add New. On the resulting page, click the “Use The Divi Builder” button. This will open the Divi Builder interface, which looks like the following –
Divi 3.0 (which we've already reviewed here) Builder 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 Divi Builder 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 builder loads, you can start customizing the page with Divi Builder.
Like the backend interface, you can add a new section, choose the column structure, and enjoy complete access to all the module settings options.
You can drag and drop the modules, rows, columns and also copy, paste, delete, or edit these according to your requirements.
Beaver Builder Interface
There are two ways to access Beaver Builder – from the backend and the frontend. For the backend method, log in to your dashboard first. Then, go to Posts > Add New, and click on the “Page Builder” button. This will bring the Beaver Builder interface.
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.
Beaver Builder 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 Beaver Builder 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
Divi Builder comes with 46 content modules.
Among these, you will find the regular ones likes the text, search, accordion, button, CTA, audio, video, custom code, and divider along with advanced choices like counter, optin, portfolio, login, map, person, pricing table, testimonial, and video slider.
Click on your desired module to add it to the post. At this point, you have to configure the module settings.
Divi Builder provides you with three sections for this purpose – Content, Design, and Advanced.
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 Divi Builder now? Click on the button below to visit ElegantThemes website.
Beaver Builder divides the modules into two categories –
- Basic Modules and
- Advanced Modules
The basic modules include the text editor, heading, HTML, button, image, video, and so on. The other category contains more advanced modules like the CTA, content slider, countdown timer, menu, posts slider, tabs, etc.
Beaver Builder offers three sections to manage a module – General, Style, and Advanced. 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.
The next part of our Beaver Builder vs Divi review will deal with available page templates.
You can see a more clear demo of the the BeaverBuilder features below.
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 Builder Page Templates
Divi Builder comes with several 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.
Beaver Builder Page Templates
Beaver Builder 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.
Divi vs Beaver Page Builder Settings
Setting up Divi Builder is very straightforward.
Once you install and activate the plugin, go to Divi > 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 > Divi Library page. There are separate buttons to manage the layout category and to import or export the layouts. Go to Divi > Divi Role Editor to define how much access different user roles will have.
The settings options for Beaver Builder 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 Beaver Builder. In Templates, you can decide which templates will be available in the builder interface.
The Icons section enables you to decide which icons should be available in the builder. The available options include FontAwesome, Foundation, and Dashicons.
You will also find separate sections to clear the cache and remove all plugin data upon uninstallation.
Additional Features of Beaver Builder and Divi
Divi Builder comes with several other exciting features. For instance, the Divi Builder 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.
On 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.
On the other hand, Beaver Builder 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 Beaver Builder 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 page builders 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.
- Take some time to get used to,
- Frontend editor takes some time to load.
- 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.
- More expensive than the other page builders,
- No undo, redo, or history option .
Pricing of Divi/BeaverBuilder
You have to be an Elegant Themes member to use the Divi Builder plugin. There are two plans available for you – Yearly Access and Lifetime Access. Both plans offer unlimited access to all the themes and plugins developed by Elegant Themes. You will get timely updates, premium support, and a 30-day money-back guarantee as well.
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.
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 Beaver Builder theme and multisite-compatibility.
Lastly, Agency is priced at $399 and enjoys all the features of Pro along with complete white labeling permission.
Which Page Builder should You Choose?
Now we come to the (difficult) part where we need to make a choice among these page builders.
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 Builder if you want complete control over the layout. Once you get used to the available options, Divi Builder can be a very powerful tool allowing you to create any type of layout you want.
- Go with Beaver Builder if you want to get started quickly. As this page builder doesn’t use any shortcodes, you can easily scrap the current design and try a new one with a few mouse clicks.
Final Words: Beaver Builder vs Divi Builder
Divi Builder and Beaver Builder are two of the most popular page builder 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.
So, which one have you chosen? Let us know in the comments below.