As WordPress has rapidly grown in popularity over the past decade, the way bloggers, website owners, and designers use WordPress has changed in many ways.
One of the best aspects of WordPress is the vast community of users and developers. Not only is WordPress itself being constantly improved, but developers are also making continual and significant improvements in the way we’re able to use WordPress thanks to third-party themes and plugins. And it’s the many millions of WordPress users creating the demand that leads to this constant improvement.
Although there are countless ways that WordPress has improved over the years, possibly the most significant impact for the typical user is related to the advancements in WordPress page builders and theme builders.
When I started using WordPress in 2007, I designed and coded a custom theme for each of my websites/blogs. Although I’ve continued to use WordPress for all of my sites, it’s been several years since I’ve coded a theme. As the quality of available themes and plugins progressed, it got to the point that it was easier and more efficient to make use of the tools that are available.
Today, there are a number of WordPress page builders that allow anyone to create custom layouts for pages and blog posts, and in some cases, complete themes, without the need to code.
These page builders open up a lot of possibilities, making it faster, easier, and much cheaper for the average WordPress user to get a website that meets their needs.
We’ll cover all of the details related to these three page builders with the goal of helping you to decide which one is right for you.
Table of Contents:
Overview | Intro to Divi | Intro to Elementor | Intro to Beaver Builder | Pre-Designed Templates | User Interface | Content Modules | Design Customization | Saving Designs | Standout Features | Theme Building | Code | Page Load Speed | Pricing and License Details | Choosing the Right Option for You
Before we jump into the details of the page builders, let’s take a quick introductory look at each one.
|# of Sites Covered by Basic License||Unlimited||1||Unlimited|
|Lifetime Pricing||$289||Not Available||Not |
|# of pre-designed templates||1,200+||300+||50+|
|Quality of pre-designed templates||10/10||9/10||8/10|
|Ease of Use||8/10||9/10||10/10|
|Standout Feature||A/B Testing||Popup Builder||White Label (require |
|Performance Rank||1 (tie)||3||1 (tie)|
|Minimal Impact on Site When Deactivated||No||Yes||Yes|
Intro to Divi
Divi is the flagship product of Elegant Themes, one of the most popular WordPress theme shops. Divi is both a theme and a plugin. If you’re using the Divi theme, the Divi Builder is a part of the theme, so you won’t need a separate plugin. The Divi Builder plugin was created to make the drag-and-drop builder usable with any theme.
If you’re starting from scratch, it makes sense to use the Divi theme. However, if you have an existing site and you’re looking for a page builder that you can use without changing themes, the Divi Builder plugin will give you that option.
Intro to Elementor
Elementor is an extremely popular page builder. Part of its popularity is due to the fact that a free version is available. While the free plugin does give you some control over the layout of your pages, it’s very limited in terms of its features and functionality. For the purposes of this article, we’ll be talking about Elementor Pro, which is the paid version.
Like Divi, Elementor also gives you the capability to design and customize your entire theme, not just a page or a post.
Intro to Beaver Builder
Beaver Builder is another leading page builder. Like Elementor, Beaver Builder offers a free plugin with limited functionality. Again, for the purposes of this article, we’re looking at the paid version with full capabilities.
Beaver Themer is an optional add-on that makes it possible for you to control the layout and design of your theme, not just pages and posts.
Although each of these page builders will allow you to have complete freedom over the design and layout of your site, you might want to make use of templates or pre-made designs. In most cases, you would be using the template as a starting point and then customizing it according to your needs and preferences.
Divi offers the best selection of templates, and they are continually adding to that collection. Currently, there are more than 160 full website packs available and more than 1,200 pre-made designs or pages.
The website packs included multiple different types of pages (like home, about, blog, shop, and more). Although Divi is one theme, it’s like having 160+ different themes at your disposal.
Not only does Divi have a huge selection of templates, but they are also beautifully-designed. If you’re using Divi, it’s easy to create a site that will look great.
Elementor currently offers more than 200 page templates and more than 100 block templates. The block templates can be really helpful for speeding up your design of custom layouts. You can insert pre-made blocks for things like FAQ sections, pricing tables, email optin forms, contact forms, and more.
There are some packs of page templates that could be used to create an entire site with a consistent theme. However, Divi has much more to offer here. Elementor’s template library is also not quite as easy to browse as Divi’s.
Even though Elementor does not offer as many templates as Divi, they still have a great collection, and the available templates are well designed.
Beaver Builder Templates
Beaver Builder comes with 50+ pre-designed templates that are ready to use. The templates are categorized as landing page templates and content page templates, and you can easily browse the template collection to choose one that you want to use.
The templates provided by Beaver Builder can definitely help to speed up your design process, but the available selection falls short of what Divi and Elementor have to offer.
Beaver Builder offers landing page and content page templates, but you won’t find themed packs of templates that make it easy to build a full website.
The User Interface
The user interface will have a huge influence on how much you like or dislike a page builder. Let’s take a look at how each one works.
|Inline Text Editing||Yes||Yes||Yes|
|Sidebar Control Panel||No||Yes||Yes|
|Easy Integration of Templates||Yes||Yes||Yes|
|Save and Re-Use Your Own Designs||Yes||Yes||Yes|
The Divi Interface
There are two different ways that you can use the Divi Builder. It’s possible to use it from the back end of the WordPress dashboard, but it can be tricky since you’re not really seeing what you’re designing.
You’ll probably find the visual designer (designing on the front end) to be easier and more efficient, so that’s what we’ll focus on in this article.
When you open the Divi Builder to design a page, you’ll see the screen shown below, which allows you to build from scratch, use a pre-made design (one of their designs or one that you have saved), of clone an existing page.
Divi uses sections, rows, and modules. The sections are the major parts or chunks of a page. Each section will include at least one row, but they may have many rows. The row will stretch horizontally across the screen and can include several columns. Modules are the smaller building blocks that make up the design and fill in the rows and columns.
If you choose to build from scratch, you’ll be asked to start by inserting a row and you’ll be able to choose from several different types of rows (based on the number and size of columns that you want).
After inserting a row, you’ll be asked to choose a module.
We’ll take a look at the specific modules that are available a little bit later, but think of these as the building blocks of your page. In each row/column you’ll insert a module, and all of the elements can be moved later by dragging and dropping.
Once you have some content entered, you’re free to move things around or continue making changes. When you hover your mouse, you’ll see gray options for modules, green options for rows, and blue options for sections.
The Divi interface is pretty easy to use, but there is a bit of a learning curve. In my opinion, both Elementor and Beaver Builder are a little easier to use when you’re first getting started.
The Elementor Interface
The user interface for Elementor is much different than Divi’s interface. When you’re designing or editing a page in Elementor, you’ll see the page to the right and the Elementor panel to the left.
If you’ve ever used Thrive Architect, Elementor will feel pretty similar in some ways.
The main building blocks in Elementor are sections, columns, and widgets. Sections are basically the big chunks of the page and each section can include multiple columns or a single column. Widgets go inside columns and sections and are used to control the content of the page.
If you want to use one of the pre-made templates from Elementor, simply click on the folder icon (shown below) and it will open up the template library.
To add a section with multiple columns, click on the + icon and you’ll be presented with some different layout options.
When you want to add a widget, you’ll select the widget from the Elementor panel, drag it to the right, and drop it where you want it.
When a widget is selected, the Elementor panel on the left will change to show the options for that widget. At the top, you’ll see 3 tabs: content, style, and advanced.
When you’re working with text, you can simply highlight the text in the visual editor and make changes.
Elementor allows you to adjust layouts quickly and easily simply by clicking and dragging.
You can also re-arrange the content by dragging and dropping entire sections, columns, or widgets.
Overall, the Elementor user interface is well-designed and easy to use.
The Beaver Builder Interface
Beaver Builder has developed a reputation for being very easy to use, and the user interface plays a huge role in its ease of use.
As you’re editing with Beaver Builder, you’ll see the options panel to the side.
The primary building blocks in Beaver Builder are rows, columns, and modules. Each row can include a single column or multiple columns, and then modules are the specific elements that make up the content of the page.
Rows, modules, and pre-designed templates can be accessed from the options panel. If you want to add a row or module to your page, you’ll simply drag and drop it.
Customizing layouts with Beaver Builder is very simple. You can drag and drop modules to move them around to different areas of the page or simply click and drag to adjust the size of rows, columns, and modules.
One of the ways drag-and-drop page builders can be frustrating at times is related to selecting the right element. Sometimes it’s challenging to know if you are selecting the row, column, or module, and this can slow down the design process. However, Beaver Builder really excels here. Personally, I find Beaver Builder to be better than any competitor in terms of clearly identifying the different building blocks of the page and making it easy to select and edit the right one.
Each page builder will offer slightly different options in terms of the modules/elements/widgets that you’re able to use as the building blocks for your pages (I’m going to refer to them as “elements” here).
Most page builders will list the number of elements available, but I would suggest that you don’t get too caught up in comparing page builders based on the number of elements. One page builder may include the functionality of two elements in one, and it’s also possible that there are some elements that you’ll never use.
Divi, Elementor, and Beaver Builder all give you the ability to create the basic pages with the elements that are most commonly needed. However, there are a few elements that are not offered by all three of these options.
I recommend thinking about the elements that you are most likely to need, and make sure that they are included in any page builder that you choose, but don’t get caught up in worrying about having every possible option available to you.
Divi, Elementor, and Beaver Builder all include many of the same elements, but the table below shows the elements that are not available with every option.
|Social Media Follow||Yes||Yes||No|
|Table of Contents||No||Yes||No|
|Video Slider/Media Carousel||Yes||Yes||No|
Keep in mind that just because a page builder does not have a dedicated element doesn’t mean that you can’t include that type of content. For example, Divi does not have an “icon” element but you can use icons in your design through the “image” element.
Overall, Divi and Elementor both offer more modules or elements than Beaver Builder. However, Beaver Builder scores higher in terms of ease of use, so it’s really a matter of deciding what is more important for you.
Each of these page builders gives you plenty of options when it comes to creating a custom design.
Design Customization in Divi
Within the sections, rows, and modules, you’ll see three different tabs (click on the gear icon to open):
- Content – basic formatting options like a text editor.
- Design – spacing, size, borders, animation, and more.
- Advanced – custom CSS for that specific module, show or hide the element based on the user’s device, control scroll effects, and more.
The details of each tab will vary a little depending on the specific module that you’re using, but in any case, you’ll have plenty of options for customizing the design with the options on the “design” and “advanced” tab.
Design Customization in Elementor
To customize the design in Elementor, click on the widget that you want to edit and look to the Elementor panel on the left. You’ll see 3 tabs:
- Content – basic formatting options like a text editor.
- Style – some very basic design options.
- Advanced – some design elements (like margins, padding, background, and borders) are included here, as well as things like motion effects.
At the top of the Elementor panel, you’ll see the name of the widget that you’re working with. In the case of the screenshot below, it says “edit testimonial” (red/pink background), so I know that I am changing the settings for the correct widget.
To change the settings or design of an entire section, click on the white dots on blue background above the section.
To work with a column, hover over the column and click on the gray icon in the corner.
Design Customization in Beaver Builder
When you have a module selected in Beaver Builder, you’ll see three tabs (click the wrench icon to open):
- General – the basic content of the module, like a text editor.
- Style – design options like fonts, colors, style, and spacing.
- Advanced – animations, breakpoints, and more.
Rows have two tabs: style and advanced.
Divi, Elementor, and Beaver Builder all give you three tabs that include the different options and settings for editing and styling the content on your site, so the approach is pretty similar for each.
There will be times when you want to use the same layout or design for multiple pages. Obviously, it’s much faster to save and re-use an existing design as compared to starting from scratch each time. Let’s see how each page builder handles saving designs and layouts.
Saving in Divi
Divi allows you to save and reuse specific elements of your design or the entire page. Saving individual elements can be helpful for things like button styles that you want to reuse throughout your site.
To save an individual element, click on the gear icon, then click on the three dots at the top right, and then click “save to library”.
One option you’ll see is to save it as global. A global element will be updated throughout the entire website if you make a change. For example, if you’ve used the same button in 10 different places on your site and you saved it as a global element, you can change the color once and it will update across your site.
If you want to save an entire page, you’ll need to leave the visual builder. Click on the purple circle at the bottom of the screen, then click on the wireframe icon, and then click on the icon to save to the library.
When you want to used a saved element, simply click on “add from library” and you’ll be able to select the one that you want.
Saving in Elementor
Elementor allows to save individual widgets or sections to reuse later, or you can save the entire page layout as a template.
To save the entire page layout to your templates library, go down to the green “publish” or “save” button at the bottom of the Elementor panel and click the arrow. Then, click on “save as template”.
To save a section, right click on the blue box above the section and click “save as template”.
When you save a widget, it will be a global element. To save a widget, simply right click on the widget as select “save as a global”.
When you want to re-use one of your saved templates, all you need to do is click the icon to open the templates library and then select “my templates”.
Saving in Beaver Builder
Beaver Builder allows you to save your layout as a template or to save modules for re-use later.
To save a layout as a template, open the tools menu at the top and select “save template”.
When you’re ready to use one of your saved templates, go to the templates library and you’ll see an option to view your saved templates.
If you want to save a row, column, or module, open up the settings for the building block that you want to save, and click on “save as”. You’ll have the option to make it a global element that can be edited once and updated across the site.
When you want to re-use a saved row, column, or module, go to “saved” in the options panel and you’ll see the saved elements that are available. In the screenshot below, you can see the module that I saved and named “testimonial”.
What features separate these three page builders?
Divi’s Standout Features
We’ve already looked at some of the things that make Divi special, like a huge selection of beautiful templates, but there are a few other interesting features that haven’t been mentioned yet.
Magic Color Manager
Divi uses color theory to create a unique color palette suggestion for you.
Test different designs and/or content with specific goals to see which design is most effective.
Elementor’s Standout Features
What makes Elementor unique?
In addition to designing custom page layouts, Elementor also includes a popup builder. You can create any type of popup, including email optin forms that integrate with leading email marketing providers like MailChimp, MailerLite, ConvertKit, and more.
The popup builder is a really great feature because it may allow you to replace a separate plugin used for creating and managing popups.
Beaver Builder’s Standout Features
Beaver Builder focuses on ease of use, so the features are slightly more limited than Divi or Elementor. However, ease of use can be more important than a list of features that you may or may not use.
Developers may appreciate the white label functionality of Beaver Builder, although this feature is only included with the Agency license. This allows you to change the name Beaver Builder in the WP dashboard to whatever you want, so it can look more customized for your clients.
While the focus of this article has been mostly about page building, each one of these options also allows you to create a full, customized theme, including headers and footers.
Divi Theme Builder
With the release of Divi 4.0 in 2019, Divi was expanded to become a full theme builder. You’ll have the same type of creative control over aspects of your site like the header, footer, post templates, category pages, and much more.
Elementor Theme Builder
Elementor is not a theme itself, but it does allow you to have full control over your theme. You can work with areas that normal page builders often won’t touch, like the header and footer.
With Elementor, you can work with single posts, post archives, 404 error pages, search pages, and more.
Beaver Builder offers an optional add-on called Beaver Themer. While Beaver Builder allows you to edit the layout of your pages, Beaver Themer gives you more control over things like page/post templates, header, and footer.
The current price of the Beaver Themer add on is $147, which allows use on an unlimited number of sites.
Drag and drop editors may be loved by users, but developers aren’t always as keen on them because of the potential for code bloat or inefficient code. A skilled developer will always be able to create cleaner code than a page builder, so when we’re evaluating the code created by Divi, Elementor, and Beaver Builder, we need to keep that in mind. But we do want to consider the potential impact of the coding.
Let’s take a look at how each one of these page builders does.
|Clean Code While Activated||Yes||Yes||Yes|
|Usable Content After Deactivated||No||Yes||Yes|
The code created by Divi is pretty clean.
But the problem with Divi can’t be seen in that code. Divi uses a lot of shortcodes to control the layout, and the problem comes when/if you deactivate Divi. The page becomes a jumbled mess of shortcodes.
That may not be a big issue with a single page, but if you have many pages that have been built with Divi, you’ll have a lot of cleanup work to do. For that reason, if you use Divi, you should plan to stick with it.
Like Divi, Elementor creates code that is pretty clean.
The difference between Elementor and Divi is that when you deactivate Elementor, your page will still be functional. It may not look the best, but it still functions.
Here is how the sample page looks when Elementor is deactivated.
Beaver Builder Code
Like Divi and Elementor, the code produced by Beaver Builder appears to be pretty clean.
Like Elementor, the page content is still usable if you deactivate Beaver Builder.
While the page may not look the best after Beaver Builder is deactivated, it’s still usable (unlike Divi).
Page Load Speed
Visitors don’t want to wait for slow loading pages, so page load speed is always important. Because page builders tend to add more code as compared to a custom hand-coded design, it’s important to know how your page’s loading time will be impacted by using a page builder.
In order to compare these three page builders, I created a demo page with a similar layout using each plugin (see the demos for Divi, Elementor, and Beaver Builder), and then tested the speed of each page. While these data can be useful, keep in mind that this is simply one test. If you were to conduct the same test on your own site, it’s possible that the results would be different.
The demo pages were create for the purposes of testing page speed. Don’t judge the design capabilities of these plugins based on the very simple demo designs.
|Fully Loaded Time||2.2 seconds||2.7 seconds||2.0 seconds|
|Page Size||617 BK||768 KB||498 KB|
The result of this test shows Divi winning in some areas and Beaver Building winning in other areas, but those two are very close. Elementor finished in third place in each aspect of the test.
Pricing and License Details
Now that we’ve looked at all of the details related to how these page builders work, let’s talk about how much they cost.
Each one will give you multiple options when it comes to pricing. One of the major factors that you’ll need to consider is the number of sites that need to use it. Both Divi and Beaver Builder allow use with an unlimited number of websites, but pricing for Elementor will be influenced by the number of sites.
Divi is a bit different than Elementor and Beaver Builder in terms of pricing. The only way to get access to Divi is to purchase a membership to Elegant Themes. As a member, you’ll get access to everything offered by Elegant Themes, which currently includes two themes and three plugins. Aside from Divi, you’ll also get access to their Extra theme (magazine-style blogging theme), Monarch (a social sharing plugin), and Bloom (a plugin for creating email optin forms and popups).
You may or may not use these other themes and plugins, but the pricing is very competitive even if you only plan to use Divi.
Elegant Themes offers two different membership options: yearly access and lifetime access. Both plans give you full access to everything, and both plans allow you to use the themes and plugins on an unlimited number of websites. The only difference is the price that you’ll pay and the length of the membership.
Yearly access costs $89 per year. You can cancel any time, or continue to pay the yearly fee in order to get product updates and support.
The lifetime plan costs $249 as a one-time payment. If you purchase the lifetime plan, you’ll be able to use the Elegant Themes products on an unlimited number of sites forever, without the need to pay anything in the future.
While both options are priced very well, the lifetime plan represents an incredible value if you plan to use Divi for several years. And if you plan to use it for several years on multiple websites, it becomes an even better deal.
In my opinion, the lifetime access from Elegant Themes may be the best value you’ll find anywhere in the WordPress community.
Elementor offers a limited version for free, and then they have three different paid plans that you can choose from. Each of the three paid plans offers support and updates for one year.
- Personal: $49 for 1 site
- Plus: $99 for 3 sites
- Expert: $199 for 1,000 websites
These three plan are the same in terms of features and functionality. Each plan will give you full access to everything that Elementor offers. The only difference is the number of sites.
Like Elementor, Beaver Builder also offers a free plugin that you can try. They also offer three different paid plans. Each plan from Beaver Builder allows you to use it on an unlimited number of websites, but the details of the plans vary in a few ways.
- Standard: $99
- Pro: $199 – includes Beaver Builder theme and multi-site capability
- Agency: $399 – includes Beaver Builder theme, multi-site capability, and white labeling
The white labeling feature of the agency plan can come in handy if you work on websites for clients. You can remove all of the Beaver Builder branding in the dashboard for your clients.
Each of the three plans from Beaver Builder comes with one year of support and updates.
Conclusion on Pricing
Each of these three options offers very reasonable pricing, but there can be a significant difference depending on your situation.
For example, if you’re only going to be using it with one website, Elementor comes in well below the price of Divi or Beaver Builder ($49 as compared to $89 or $99).
Divi becomes an even better value if you look at the long-term pricing. If you’re managing five sites, you could pay $995 over the next five years with Elementor or Beaver Builder. Divi could cost you just $249 if you purchase the lifetime access.
As you can see, the best pricing will depend on your situation. Most people who manage a blog or website will have multiple websites at some point, so the unlimited use of Divi and Beaver Builder is very nice. Overall, Divi gets high marks for the long-term value of the lifetime license.
Choosing the Right Option for You
Divi, Elementor, and Beaver Builder all have plenty to offer. There are many other page builders out there but we’re talking about these three because they’re often considered to be among the top options. Each of them is more than capable of getting the job done, but the purpose of this article is to help you choose the best one for yourself. With that in mind, here are some things that you should consider:
- How many websites do you own or manage?
- Do you plan to change page builders in the future?
- Are you looking for something that’s easy to start using right away, or are you open to a page builder that has more of a learning curve?
- Are pre-designed templates important to you?
Divi May Be Right for You if…
- You like the idea of having a huge collection or pre-designed websites and pages as a starting point.
- You don’t plan to change to a different page builder in the future.
- You don’t mind a slight learning curve.
- You own or manage multiple websites.
Divi’s collection of more than 100 pre-designed websites and more than 800 pre-designed layouts/pages can drastically speed up your design process. They have designs for a huge variety of industries and types of websites that you can start using right away. Not only are they already done, but they look great. Whether it’s your own website or a client’s website, these templates are a huge selling feature for Divi. Of course, you can also customize them, so you don’t sacrifice control by using a pre-made design.
While an Elegant Themes membership is a great value in any situation, it becomes an even better value if you manage multiple websites and if you’re open to the higher one-time payment for lifetime access.
While Divi is pretty easy to use, it’s not quite as easy as Elementor or Beaver Builder. There is a little bit more of a learning curve that comes with using Divi, but that may or may not be a big issue to you.
Unfortunately, the shortcodes used by Divi can create a mess if you ever switch to another page builder. As a result, you’re more likely to be locked in as a Divi user.
Elementor May Be Right for You if…
- You’re looking for a powerful page builder that’s easy to use.
- You like the idea of having a large selection of pre-designed templates.
- You want a page builder that produces clean code and doesn’t lock you in.
Elementor has a lot to offer. It might not rank quite as high as Beaver Builder in terms of ease of use, but it’s not far behind (better than Divi in that area).
Elementor offers more widgets/elements/modules to create your own custom designs as compared to Beaver Builder.
While Divi has the best collection of templates and pre-made designs, Elementor is not lacking in that area either, with more than 300 templates available.
Unlike Divi, Elementor will not create a mess with shortcodes if you decide to deactivate it and move to a different page builder.
Beaver Builder May Be Right for You if…
- You’re looking for a quality page builder that is very easy to use.
- You want a page builder that creates clean code and won’t lock you in.
- You’re ok with a page builder that doesn’t have all of the features of Divi or Elementor.
Beaver Builder is loved by many WordPress users because it’s extremely easy to use and requires virtually no learning curve. It may not offer quite as many widgets/elements/modules as Divi or Elementor, but it has all of the basics covered and it meets the needs of most users.
If ease of use is more important to you than a long list of features, Beaver Builder may be the right choice.
Like Elementor, Beaver Builder leaves your site with clean code if you de-activate it, so you’re not locked in.