I’ve been using both frontend page builder for WordPress for a few months now, and I thought it was a good opportunity to do a head to head – Elementor VS Beaver Builder.
I’ll be comparing all the free features that come stacked with these two powerful plugins, so you can get an educated decision as to which page builder is more suitable for what you are looking for. This week I will be comparing Elementor free and Beaver Builder lite, both free plugins. In the next few weeks, I hope I’ll get around to compare the pro plugin versions of the two.
In case you don’t feel like reading the whole shebang, here is the TLDR;
- ‘How easy it is at first use’ winner: Tie
- ‘Row layout control’ winner: Beaver Builder
- ‘Text Editor’ winner: Tie
- ‘Headline’ winner: Elementor
- ‘Photo module’ winner: Elementor
- ‘Video module’ winner: Beaver Builder
- ‘Button module’ winner: Elementor
- ‘Other widgets’ winner: Elementor
- ‘Background options’ winner: Elementor
- ‘Revisions’ winner: Elementor
- ‘Templates’ winner: Elementor
Elementor: 7 wins, Beaver Builder: 2 wins
1. How easy it is at first use
So my first criterion is the very basic use of the plugin. You activate it, add a page, and click on Beaver Builder’s ‘Page Builder’ tab, or Elementor’s ‘Edit with Elementor’ button. The first initial steps are crucial, as they determine your initial impression of the ease of use and the UI for the builder.
Beaver Builder First Use
The first thing you see when you reach the Beaver Builder editor is the popup telling you about the paid template library. We will get to that feature later on, but this initial popup seemed to me a bit redundant. I get that they want to convert me to pro, but this is my first time on the plugin.
The editor itself is quite beautiful, with no unnecessary interruptions. It doesn’t take long at all to figure out how to work this builder, and the fact that you had a nice X button to remove the side panel was very handy. The drag and drop feature is nice, but it does present a small one-second loading icon, which I would prefer not to have. The modules do not have icons, which is also a downer. When I’m designing a page I like to do it like Photoshop or Paint where I can quickly choose the modules according to their icon and without having to read it.
Elementor First Use
Elementor also has a nice looking interface. Each module, or widget, does have an icon, which is nice. However, this makes for a larger side panel that Beaver’s. I found I had to search for the right widget to find the right one. The big plus here for Elementor is in terms of drag and drop, because when I dragged the module it didn’t have any loading time at all, and instantly appears the second I dropped it. This might seem trivial, but when using a lot of modules it can be annoying to get the time-lag and hiccups.
Winner: Tie. This was a close race because the first use of both plugins was great. Elementor almost won because of the instant drag and drop, which in my book is a big, big thing.
2. Row Layouts
If you think about it, a page builder is first and foremost a grid of rows and columns. This is why this is such a crucial factor when comparing page builders.
Beaver Builder Row Layouts
Beaver Builder offers 6 column structures (1-6), as well as structures with a left, right or both sidebars. This is enough in my opinion and can allow you to create a wide array of structures and layouts. All you have to do is fill them up with modules. After you set the column number you can grab one of the sides of the columns and drag it left and right to change its size. This is a feature also available on Elementor, but not on other builders like Divi, so it’s a huge plus. The drag, delete and duplicate buttons are also very easy to understand and learn how to use.
After you set the column number you can grab one of the sides of the columns and drag it left and right to change its size. This is a feature also available on Elementor, but not on other builders like Divi, so it’s a huge plus. The drag, delete and columns settings buttons are also very easy to understand and learn how to use. The row settings appeared as a popup, in contrast to Elementor’s left panel. This is really a matter of taste, but I prefer Beaver here because this way I can drag the settings to another place.
Elementor Row Layouts
To add a new row (or section as it is called in Elementor) you need to click on the bottom button “Add New Section”, and choose the layout. Again, here I prefer Beaver’s option because the button changes the look of the page. In Elementor you can add up to 10 columns, but this is not considered by me as a real advantage because six is enough. What is great is the ability to duplicate and add other columns, which is not available in Beaver Builder. The section and column settings sometimes ran out of my fingers, and with Beaver Builder it was easier to pick and choose the settings.
Winner: Beaver Builder. While Elementor had some advantages, the laying out of the rows was more intuitive and less intrusive on the page design with Beaver Builder.
3. Text Editor
This is one of the most basic modules which allows you to add text, images and other content with the WordPress TinyMCE visual editor.
Beaver Builder Text Editor Module
In the lite version of Beaver Builder this module gets an ever larger role because the free plugin doesn’t offer the headline module. You are actually supposed to do everything with this module: add headlines, text, images etc. This sort of makes the whole use of a page builder redundant, because if I wanted to design with the TinyMCE I would use WordPress without a page builder.
Elementor Text Editor Widget
There is really not that much to say about this widget because it really is a standard editor everyone is used to using.
Winner: Tie. This is not a very complex module, but it does come in handy, especially if you want to add a bulk of content to the page.
4. Headline Module
This is going to be a short comparison, simply because the heading module does not exist in Beaver Builder. I’ve used Beaver Builder way before Elementor, and it always struck me as odd that they didn’t include the heading module in their free plugin. When you design pages in WordPress this is a very basic module to have.
Beaver Builder Headline Module
This feature is not available in the lite version of Beaver Builder, so it doesn’t appear in this comparison. In the next comparison of Beaver Builder Pro VS Elementor Pro, we will include it.
Elementor Headline Widget
Elementor’s Headline widget is quite impressive, especially the fact that you can set different font sizes and styles according to the device used. This is great in terms of creating mobile responsive pages and is not available on Beaver Builder.
Winner: Elementor. This is a huge win for Elementor, because not only is this module not available on Beaver Builder, but it show pretty spectacular capabilities on Elementor.
5. Photo Module
The photo, or image module is also very important in any page builder you are using.
Beaver Builder Photo Module
This module is very easy to use and is fairly basic. You can choose to crop the image by various categories like landscape and panorama, and here to I had a short lag and loading icon I didn’t like to see.
Elementor Image Widget
Elementor’s Image widget is really great, I love it. In the style, you can actually control the size of the image easily with a right and left scale. This is a feature I have not seen in any of the page builders I have looked into, and I’ve used over 10 page builders for WordPress. You also get box shadows, background overlays, and extended caption style control. This is really one of my favorite modules in Elementor. You can also use a preset of image sizes, which worked faster for me than in Beaver’s crop feature, showing no lag at all.
Winner: Elementor. With the scaling options, the Elementor Image widget was more flexible. It was also faster, and allowed to design the caption, something not available on Beaver.
6. Video Module
Today video is becoming more and more apparent as a vital part of every page design. The video module is different than the video background, and this can confuse a lot of users at first.
Beaver Builder Video Module
The Beaver Builder video module is simple, but works great. You can choose to add MP4 or WebM video from your media library, or embed videos from any other website.
Elementor Video Widget
Elementor only allows you to upload videos from YouTube or Vimeo. To upload videos from the library, you are going to have to use the media library.
Winner: Beaver Builder. Embedding from other players and not just YouTube or Vimeo is a big plus. The ability to add videos from the media library is also an advantage.
7. Button Module
The button is part of what I consider are the five must-have modules, which include: text editor, image, video, headline, and button modules. Without it you are very limited in terms of the page designs you can reach. The fact that Beaver Builder decided to exclude this module along with the headline module is puzzling to me.
Beaver Builder Button Module
Again, this is not available, so I have nothing to compare.
Elementor Button Widget
Elementor, on the other hand, offers one of the best button widgets I have ever encountered. I did a lot of test creating various buttons, and the results are really great. You can build buttons large or small, wide or narrow, control the border radius and distance between the text and the frame, and create a unique button design quite easily. I use buttons all the time when I’m creating landing pages, so I can’t stress enough how usefull this widget is.
Winner: Elementor. Beaver Builder doesn’t include a button widget on their free plugin.
8. Other Widgets
There is strength in numbers, no doubt about it. Even though most users don’t use most of the modules that come with the plugin, it sometimes can save a lot of time if you need a module like a testimonial and don’t have to work hard to create it with custom code. It also saves you from installing dozens of plugins that each do a single functionality like sliders.
Beaver Builder Modules
Beaver Builder, on the lite version, comes with 5 basic modules: Audio, HTML, Photo, Text Editor and Video.
The equivalent of the modules are Elementor’s widgets, which include 28 different widgets on the free plugin: Columns, heading, image, text editor, video, button, divider, spacer, Google Maps, icon, icon box, image box, image gallery, image carousel, icon list, counter, progress bar, testimonial, tabs, accordion, toggle, social icons, alert, SoundCloud, shortcode, HTML, menu anchor and sidebar.
From the list above, at least 10 of them are crucial to me personally. I cannot live without accordion, social icons, shortcode and Google Maps. I use them on almost every new site I create.
Winner: Elementor. The rich variety of widgets available on the free plugin is really amazing. I don’t fully understand why the developers decided to include so much in the free page builder, but who am I to argue?
9. Background Options
Backgrounds for rows and columns play an important role in page builder web design. You need to be able to set different types of backgrounds, as well as make those mobile responsive. This is exactly what I tested for both page builders.
Beaver Builder Background
In Beaver Builder, you can easily set color, image and video backgrounds. You also have the option to add background overlays. Beaver Builder allows to set the visibility of rows and columns, allowing you to hide content from users not signed in.
In Elementor, you can also add color, image and video backgrounds, and they have recently added gradient backgrounds and background overlays. You also get background box shadows, which add a shadow effect to the whole section or column. You can also set border-radius, which is not available on Beaver Builder. You can set padding and margin settings per device, a feature which is not available on Beaver Builder.
Winner: Elementor. There are a lot of features that simply are not available on Beaver Builder and add important capabilities to Elementor users.
When you are designing at full speed, site after site, you don’t think about backing up your design in the process. It is only when the power fails and you lose hours work, that you start hating yourself for not backing up. This is why the revisions feature is so important for me personally, and I know for many other site builders as well.
Beaver Builder Revisions
I know the Beaver Builder developers have long discussed adding this feature, but have not yet done so.
Elementor includes a revision history feature, meaning every time you save your page, a revision is saved. This is great for backup, and also lets you compare previous versions of the design and switch back and forth between alternatives.
11. Beaver Builder VS Elementor In Terms of Templates
I love templates! I use them all the time. I used to design all my landing pages for my clients from scratch, but no more. Today I pick a template I love and just customize it. If a client wants something more unique I can also get inspiration from landing page sites and recreate them with a page builder, but most of the time I use templates that come with Divi, Elementor, Beaver Builder or other builders I am using.
Beaver Builder Templates
Again, this feature is only available on Pro Beaver, which we will be covering in the next weeks.
Elementor’s Template Library is one of its strongest features. You can insert a pre-set design, from 20 available designs. You can also save your own design for later use, and import export it to other sites as well.
Winner: Elementor. Simply doesn’t exist in Beaver’s free page builder.
Beaver Builder VS Elementor – Who is the winner? Both page builders are great, but as we’ve seen, the free version of Beaver Builder doesn’t really stack up to Elementor’s rich features. I am sure the comparison I make of Elementor Pro and Beaver Builder Pro in the next weeks will show a harder competition between the two.