WordPress is the most popular program for building websites (especially for small businesses). It’s easy to use and enables beginners and experienced coders alike to take their sites out into the world.
According to a recent survey by W3Techs, 61.6% of all websites that use a CMS use WordPress, accounting for 34.7% of all websites worldwide. By comparison, the second most popular CMS, Joomla, holds only 3% of the market share.
One of the handy tools to use when building websites for your clients or for yourself are page builders. You can think of them as a skeleton on which you can build your site layout, while making updates and content editing easy, even for non-technical users.
In this article, we’ll cover three of the most popular WordPress page builders: the Elementor, WP Bakery page builder, and Beaver builder. When considering which of these to use, it’s important to consider the conditions your site requires.
Things to consider when choosing a page builder
In today’s ever-changing and challenging environment, for any business website, there are multiple aspects to consider such as suitability for its target audience and business strategy, SEO optimization, speed, user-friendly and mobile-friendly.
From a beginner’s perspective, in order to meet some of these requirements and ease of use, we will test each WordPress visual page builder through the following key conditions.
Ease of use and customization
Availability of regular elements
Responsiveness and final layout of the elements
Semantics of Generated Code
Website speed and page builder speed
Quality of documentation
Compatibility with popular plug-ins
Full version price
Create page builder comparison framework
When comparing features on the official page builder website, it usually looks and sounds great, but it can be hard to find unbiased information about the page builder itself. Comparing multiple page builders will help to see the initial sales information and to see the conditions of the page builder.
In order to compare the three biggest competitors in a set of predetermined criteria, we decided to check the results by developing a single-page website based on the same design.
To do this, we selected an advanced template StartFlow from Themeforest, and used the home page as our single page website example.
Since the chosen design contains many dynamic and animated elements, such as rotation, digital counters, and newsletter subscriptions, we found it to be an ideal choice for page builder comparison.
Without further explanation, let’s see how WPBakery page builder, Beaver builder and Elementor page builder perform.
WPBakery page builder
WPBakery Page Builder is one of the most popular page builders for WordPress and is usually included in WordPress Premium Themes. You may have also heard of Visual Composer, a page builder plugin built by the same author.
Despite the common misconception that WPBakery and Visual Composer are the same plugin, the two are actually completely different products and sold on different platforms. So what exactly are WPBakery and Visual Composer?
Visual Composer was the first page builder plugin originally developed by this author and sold at Envato. However, after making several updates, the developers noticed that they had a more powerful tool than the page builder. In order to keep the strong brand name, the name Visual Composer was used for another new product – it could be extended from a page builder to a full-fledged website builder.
The old version of Visual Composer was then renamed WPBakery Page Builder and continued to be sold in the Envato marketplace, and continued to be developed and updated in the same way.
The WPBakery page builder itself is now limited to a visual editor for the content area of the page (both front-end and back-end editors), which is the plugin used by many paid themes. The Visual Composer editor, on the other hand, not only edits the page content section, but also provides front-end visual editing of the entire site such as the header, footer, and sidebar. The technology used in the latter is a bit more advanced. If you want to know more, you can read this article.
In this review, we’ll be checking out the WPBakery page builder. We’ll start with the default launcher theme that Visual Composer also uses, which can be downloaded for free from the official Visual Composer website.
WPBakery page builder ease of use and customization
To make it easier for beginners, WPBakery includes over 80 predefined page templates for building layouts in its free theme. However, for the sake of comparison, we decided to use a blank starter theme to really test its core functionality.
The WPBakery page builder comes with a back-end and front-end editor, both of which are suitable for beginners. The front-end editor is very intuitive and provides a good user experience. We used it to build the sample site.
The starter theme comes with a fairly simple header and footer, so we needed to update it with custom CSS. If you want a more complex header, you may run into problems.WPBakery doesn’t have the option to build custom blocks for the header and requires a coding aspect to build the header.
Similar to the header, the WPBakery footer is simple. If you want a more complex footer, you can pay extra for add-ons or build them using coding.
Availability of regular elements in WPBakery page builder
WPBakery is equipped with more than 50 common elements. However, they lack some of the comment elements that are often used on websites. In our example, it is a rotation. There are several ways to solve the problem, either by using plugins or by developing custom elements for the builder.
WPBakery comes with a variety of third-party extension plugins, but they are not free. For the purposes of this project, we used Ultimate Carousel, a free plugin for the WPBakery Page Builder, to create the rotas, but needed some custom CSS to complete the design.
There are some customization options for building custom elements that don’t require writing code, such as services.WPBakery makes it easy to create new elements using existing elements.
However, there is no easy way to do this when elements from the same column need to be used multiple times on the page.WPBakery only saves the column, not the elements in it.
Responsiveness and final layout of elements in WPBakery page builder
Responsive websites are a necessity today. As some reports say, in 2018, 58% of website visits will come from mobile devices, so it’s vital to make sure your website looks and works well on mobile devices.
WPBakery has done a good job here. All of the columns scale well, but if you want truly responsive optimization, you’ll need to add some custom CSS. for example, rearranging the order of images and text on mobile devices. This can easily be done with CSS, but it’s not the plug-and-play functionality that the WPBakery page builder offers.
Semantics of the code generated in the WPBakery page builder
The semantics of a website is an important aspect of proper SEO and we shouldn’t ignore it. One of the options we really like in the WPBakery page builder is the ability to influence the semantics of a website.
Due to specific design requirements, some areas of semantically correct headers will use H2 tags, but specific headers are better suited as H3 tags due to the style guide defined. Fortunately, WPBakery supports changing the semantics of various parts of the text.
We can easily add style classes to H2 tags to make them look like H3 tags, satisfy end users by providing more visual hierarchy, and satisfy search engines by following the semantic hierarchy.
Website speed and WPBakery page builder speed
Google PageSpeed Insights defines the website experience in three ways: fast for load times of less than 1000 milliseconds; average for load times between 1000 milliseconds and 2500 milliseconds; and slow for load times of more than 2500 milliseconds. Fast pages account for about 10% of search results, average pages account for 40%, and slow pages account for 50%. So your site should be at least average speed.
With each plugin used in WordPress increasing the number of files and consequently the load time, it is necessary to check how the page builder affects the overall site speed.
According to Pagely’s speed tests, the WPBakery page builder was deemed faster than 98% of the sites tested, which earned it a B score and a load speed of 401ms.However, the final site speed also depends on the design itself and the optimization techniques used in development.
Our test site was not optimized in any way and had a load time of 2.4 seconds. According to Google PageSpeed Insights, it falls in the average speed site range.
WPBakery page builder document quality
One aspect to consider when choosing a page builder is the quality and usability of the documentation, as well as the size of the community. High-quality documentation can help you understand how the builder works in a positive way, as well as the options available to you when building custom elements from a more technical approach.
The page builder is widely distributed and has a large community. If the documentation doesn’t cover everything you need to know, it’s likely that someone in the community has the same question and has found the answer.
WPBakery doesn’t seem to put much effort into standard documentation in written form. However, there is a video academy that does a good job of explaining each element, so we applaud that.
Using WPBakery to build our test site was both easy and intuitive. We did have to search the documentation to see if there was a rotating element, but unfortunately we didn’t find it in the documentation.
WPBakery compatibility with popular plugins
Depending on the needs of the project, you will need to ensure that the page builder you choose is compatible with other plugins that you may need.
For example, if the site is going to be multilingual, you will need a plugin that will translate the site while maintaining compatibility with the page builder.
In addition, if you plan to use WooCommerce (a WordPress solution for building e-commerce stores) to build your store, then compatibility is crucial when choosing a page builder.
Finally, don’t forget about SEO.SEO is becoming more and more important every day and should be one of the main aspects to consider when building a website.Yoast is one of the most popular SEO plugins available in both free and premium versions. While most page builders are compatible with Yost, always keep compatibility in mind when choosing an SEO plugin.
The WPBakery page builder has WPML compatibility, allowing us to create a multilingual site at any time.
Since the inner pages on our test site had a store design, we needed to check for compatibility with WooCommerce. We decided to build just one page for testing. Fortunately, the WPBakery page builder was compatible with the plugin, which allowed us to easily build the store.
When we find that SEO is important, we want to make sure that the page builder is compatible with one of the most popular plugins for SEO, Yoast. Similar to WPML and WooCommerce, WPBakery is fully compatible with Yoast. It’s easy to set up and there are no conflicts.
WPBakery Full Version Price
WPBakery is currently available on the Envato Marketplace for $64. The license includes an installation, which is sufficient in our opinion. You have the option to purchase an additional 6 months of support for $22.13, but for the purposes of this test, it is not required.
WPBakery page builder summary
WPBakery is a great page builder, especially for beginners, so it’s not surprising that it has over 4,300,000 installs.
During the development of our test site, we were very pleased with the speed of the builder, the user experience around it, and the customizability options.
It is always possible to build custom elements using custom code, even if not all the elements you need are available. If you are not comfortable writing custom code, look for other plugins to meet your needs.
If you wish to add a plugin, remember to consider how the plugin will be added to the page load, the security of the plugin, and how often it will be updated. Make sure to also understand the behavior of the plugin on the front end and back end.
To complete the overall design, we had to use custom CSS with a total of 100 lines of code. The changes are mainly size and color changes, which are easy to learn for beginners.
Beaver Builder is another popular advanced WordPress drag and drop page builder. It uses only front-end editing, which is useful for beginners but frustrating for users who prefer back-end editing. It’s ease of use and intuitive user interface make it popular.
As we did with the WPBakery page builder, for the purposes of this review, we will use the Beaver Builder Getting Started theme and build our test site on it.
Beaver Builder Ease of Use and Customization
Despite our preference for a back-end editor, the front-end editor of the Beaver generator was a good experience. The overall interface is nice and logically structured, and the front-end editor is very powerful and perfect for beginners.
With the drag-and-drop feature, it’s easy to build pages by simply dragging elements onto the layout.
Similar to the WPBakery page build, customization options for headers and footers are limited. If you want to implement more complex headers and footers, you must use the header.php and footer.php files. Or, if you are not satisfied with this, you can install an add-on called Beaver Themer, which provides more options for customizing the header, footer and sidebar.
Using the customizer and options you can easily change the general options of your website. They are logically structured and easy to find, compared to WPBakery Page Builder.
Availability of Beaver Builder regular elements
Beaver Builder contains over 30 elements and over 30 starter templates. However, there is always a need for some customization.
What we like about Beaver Builder is that you can build your own custom elements or extend existing ones, then save them and use them in other parts of the page or in new layouts. This feature really comes in handy when working with service elements and sections with text and images, thus speeding up the work.
Similar to the WPBakery page builder, Beaver Builder also lacks the rotation elements we needed to complete our test design. However, the Beaver Builder comes with a content slider element for minimizing customizations to create a customer testimonial rotation.
If you need more complex elements and aren’t happy creating them from scratch, we recommend using Beaver Builder’s Ultimate Addons, which come with a number of modules that simplify page building.
Responsiveness and final layout of elements in Beaver Builder.
The authors of Beaver Builder have put a lot of effort into providing customization options to improve responsiveness. For mobile, tablet or desktop screens, each element, column or row has its own responsive options.
Columns scale well and do not require extensive reordering, thus minimizing the need for custom CSS to create a seamless experience for mobile devices.
Semantics of the code generated in Beaver Builder
In addition to the ability to create semantically correct H1, H2, etc. tags, what we really like about Beaver Builder is its Beaver Themer plugin and the ability to automatically and neatly output header and footer schema markup.
After deactivating the plugin, we are confident that the semantics of the built site is of utmost importance and that the code output is clean.
Site speed and Beaver Builder speed
According to Pagely’s speed tests, Beaver Builder outperforms 94% of the sites tested, with a performance score of “A”. However, it is slower than WPBakery with 665ms page load time.
In the background, the editor runs very fast and provides a good user experience. However, an unoptimized website using the same assets as before would not end up as well as WPBakery. According to Google Page Insights, we settled on a site loading time of 2.8 seconds, pushing it towards a “slow” site experience.
Beaver Builder document quality
The first thing that strikes you when you look at the Beaver Builder is its guided tour for first-time users. In a few seconds you can adjust the options and get a brief overview of how to use it.
For more specific questions, there is detailed documentation that covers everything you need. Because the user interface is so intuitive, we didn’t have to use documentation to build test layouts.
In addition to the regular documentation, there are other courses available. Some of the courses are somewhat free, and the premium courses range in price from $89 to $199. While it’s great that there are free and advanced courses, Beaver Builder is very easy to use and the basic documentation will cover all your questions.
Beaver Builder’s compatibility with popular plugins
As with most advanced page builders, Beaver Builder is fully compatible with WooCommerce for building eCommerce stores, WPML support to make your site multilingual, and Yoast support.
Beaver sits on the front end while Yost sits on the back end, requiring you to copy content from the front end to the back end in order to utilize Yoast and test your site.
Additionally, what we like about Beaver Builder is its compatible documentation and list of recommended plugins. Whether you need a custom menu, a custom contact form, or a backup plugin that will work perfectly with the builder, they have the corresponding plugins listed.
Beaver Builder Full Version Price
Unlike the uniquely priced WPBakery page builder, Beaver Builder offers three different packages for you to choose from.
Starting at $99, you’ll get Beaver Builder, which can be installed on an unlimited number of websites, unlike WPBakery’s single install license. Unfortunately, at this level, Beaver Builder doesn’t offer an introductory theme.
The Pro version costs $199 and offers everything you’ll find in the standard version, with the additional benefits of an introductory theme and a multisite option.
The most expensive package costs $399 and gives you access to the multisite options as well as white labels that allow you to change the names of all instances in the page builder and replace or modify the core template.
For the purposes of this test, we used the Pro version to test the starter theme and create a consistent startup environment similar to WPBakery.
Beaver Builder Summary
Regarding the user experience of building websites, Beaver Builder is better than WPBakery. The options are clearly and logically organized, and when you are a first-time user, it takes less time to learn how to use the builder.
The elements themselves are very powerful and can do almost everything we need. In comparison, with WPBakery we need 100 lines of CSS code. In Beaver Builder, we use only 8 lines of CSS code.
We like the fact that the code in Beaver Builder is clean, semantically correct and the code files are compressed.
On the other hand, we were a little dissatisfied with the final site speed when we used the same assets to build the layout in both builders. It was slower than the unoptimized site built with WPBakery, although it could have been optimized using different techniques.
The initial price of Beaver Builder seems high compared to WPBakery. However, the price is reasonable if you consider WPBakery to be a one-time use license and Beaver Builder offers numerous licensed sites.
Elementor page builder
Elementor is a page builder with over 3,000,000 installs and is one of the most popular WordPress page builders available today. It offers both free and premium options.
Its free version includes over 30 elements as well as the drag and drop functionality we used to build our test site.
Elementor’s Ease of Use and Customization
When designing with the Elementor page builder, we use the free version of the page builder on the default Hello Elementor theme.
” Hello Elementor” is the fastest Elementor theme, with a loading time of less than 1 second. However, despite this, the theme is rather empty and doesn’t offer many startup options for building websites, which may not be useful for beginners.
Unlike Wpbakery, Elementor is faster and simpler for beginners. The only problem we found when building grids is that the free version is extremely limited. We were unable to add a few lines of CSS to the free version.
The advantage of Elementor is that it allows you to write text directly on the front end where the text is located. This speeds up the process of entering content and saves time when working on the front end.
Our favorite feature is the detailed documentation for developers, where you can find everything you need to create custom elements or widgets as well as documented PHP hooks.
However, when we ran this test from a beginner’s perspective, we again found the option to customize headers and footers to be missing, just like the page builder before it.
One thing we found in Elementor was uncontrolled scrolling. When we were at the bottom of the page, the scroll bar pulled us to other parts of the page. It was really annoying after a few minutes of testing. It’s nice to have both a front-end and back-end editor, but scrolling issues can get in the way of effectively implementing larger projects.
Usability of Elementor regular elements
As mentioned earlier, Elementor comes with over 30 basic elements in the free version, which is standard compared to the first two page builders we examined in this article.
Similar to the previous builder, there are no rotating elements that are critical to completing our design. elementor does have a great community, which makes things easier due to the large number of themes and add-ons made specifically for elementor.
Responsiveness and final layout of elements in Elementor
The responsiveness and final layout of the elements is nice, and while making our test site responsive and mobile-ready, we found no major issues. For example, we were able to define text size, margins and element padding for mobile devices, tablets and desktops respectively.
One of the features we particularly like is the image responsiveness adjustment. You can define different images for each resolution, which is useful.
The overall grid scaling is really nice and we didn’t need to do much customization to ensure a perfect look on mobile devices.
Website speed and Elementor speed
The builder itself is fast, and from that perspective, it offers a great user experience. On the front end of the page, according to Pagely’s comparative analysis, it beats other page builders with a load time of 489ms.
Our own comparisons confirm its speed on the front-end and back-end. According to Google Page Insights, the speed of our test site (using the same assets as the previous builder) ended up with a load time of 1.6 seconds, putting us in the forefront of “average” sites.
Of course, when building a real site, proper optimization techniques need to be implemented. For the purposes of this review, we were really surprised at Elementor’s speed without any optimization.
Elementor’s documentation quality
Elementor documentation is probably the best documentation we’ve seen to date. It includes video tutorials to build a knowledge base for beginners as well as detailed documentation for developers.
Because the interface itself is so intuitive, we didn’t find any basic requirements documentation that required jumping to the sample website we built.
Elementor’s compatibility with popular plugins
Like Beaver, Elementor has a great list of compatible plugins. It supports Yoast, Adobe fonts, Google Fonts and WooCommerce, which is crucial for our test site.
Once installed, all plugins work seamlessly.
Elementor Full Version Pricing
Similar to Beaver Builder, Elementor comes with three premium packages and a free version. The individual license costs $49 per year and includes over 30 elements and 300+ Pro templates. What really sets it apart is the WooCommerce builder and the pop-up builder.
If you want to develop 3 websites it will cost you $99 per year.199 per year to install it on 100 websites.
Elementor is specifically integrated into the marketing department and offers many integrations with popular marketing tools and form builders in its Pro version.
Elementor Page Builder Summary
Compared to Beaver Builder and WPBakery page builders, Elementor has provided the fastest output to date. This is an important factor when choosing a page builder.
However, the user experience with Elementor is not as satisfying as when using Beaver Builder. Similar to Beaver Builder and WPBakery, custom elements were required to complete our design.
One thing we really liked was the ability to customize from a back-end perspective and the detailed documentation provided to developers.
Final comparison of the 3 generators
When we compare these three page builders through a simple one-page web development, we can conclude that each of them has its advantages and disadvantages. So how do we decide which one is best?
After comparing the three builders, we came to the conclusion that Beaver and Elementor are better choices for page builders than WPBakery.
Beaver Builder performs well in almost every aspect, except for the not-so-good loading time of the final website pages. However, if you use some optimization techniques to speed up your site, Beaver Builder is still a good choice.
When looking at semantics, another important aspect, Beaver Builder and Elementor are better than WPBakery because they produce 100% clean code.
Elementor excels in developer documentation and guides on how to do more back-end customizations, making it an ideal choice for experienced users.
Beaver Builder provides the most intuitive UI and is a pleasure to use. It takes less time to build test layouts with Beaver Builder than with Elementor or WPBakery.
WPBakery is a third option, especially for beginners. Our recommendation is to use Beaver or Elementor.
Table 1: Page Builder Comparison (scale 1-5, 1-minimum, 5-maximum)
|WPBAKERY PAGE BUILDER||BEAVER BUILDER||ELEMENTOR PAGE BUILDER|
|Ease of Use and Customization||3||5||4|
|Availability of Common Elements||4||4||4|
|Responsiveness of the Elements and Final Layout||3||5||5|
|The Semantics of the Code Generated||2||5||5|
|Compatible with Popular Plugins||5||5||5|
|Page Builder Speed||3||5||4|
|Final Website Speed||2.4s||2.8s||1.6s|