The Best Drag and Drop WordPress Website Builder?

June 18, 2017

The Best Drag and Drop WordPress Website Builder

Introduction

Divi 3 Vs Beaver Builder Vs Elementor

Drag and drop WordPress website builders have been revolutionizing WordPress recently. Presently, this is one of the hottest areas in the WordPress community.

WordPress is already one of the easiest CMS (content management systems) to work with and is popular for its flexibility. With these drag and drop website builders, the user doesn’t need to have extensive technical know-how, or hire an experienced WordPress developer to build attractive and useable websites.

There is no need for backend coding knowledge with page builders. With a few hours of work, you can easily come up with a quality website for any purpose. Whether it is an ecommerce site, a blog, company website – all these can be created with page builders. For the seasoned web developer and designer, it is the myriad of options available for customizing the site that speed up initial web design development process.

Having said that, there are a number of drag and drop WordPress builders available. There are free ones and premium ones. Many page builders also offer both the premium and free versions.

If you are looking for a change, or if you are a first-time user of drag and drop website builders, the decision on which one to pick can be a challenge. In this article, you will get an overview of the three most popular and well-reviewed builders, the pros and cons of each and the final verdict. The three page builders we will look at are Divi 3, Beaver Builder and Elementor.

To be honest, I was going to look at all three of these page builders in great detail. However, I soon realized that this subject is a large one. For this reason, I have decided to break up my review into three articles with me initially looking at Divi 3. However, in part one article, I will also be looking at the other two builders, but not in in the same level of detail – just in case you don’t want to read part 2 and 3!

 

 

Review Matrix

As stated I’m going to be reviewing these three builders: Divi 3, Beaver Builder and Elementor. On the general scale, all three of these page builders offer great ease of use, high number of customizing options, great mobile optimization and are all GPL friendly products. What set them apart are simple aspects, which may affect which builder you find best suited for your use. I’m going to use five basic criteria to measure which one is the most suitable for you.

  • Content Lock
  • Global Sections
  • Save Template Ability
  • Export Templates Ability
  • Access Controls

Divi 3:

Divi 3

I’m starting with Divi 3 from Elegant Themes. To be honest, I’ve had some mixed feelings connected to Elegant Themes over the years. You see, my company has been supporting a number of websites that were made from themes made by Elegant Themes, and this has kept me and my team busy. However, after playing with Divi 3 I’m impressed in what they have developed here also with previous versions of Divi it wasn’t truly a front-end tool however, this has been completely changed with version 3.

The Divi 3 theme and plugin has been in the market since around September 2016. The parent company Elegant Themes has been providing it as a part of all in one Divi themes but then decided to create a standalone plugin than can work with any theme. Coming from such a background, it is no surprise the number of options the user are offered. The Divi 3 builder comes with both the front-end and back-end editing options allowing you to enjoy advantages of both with the choice to stick with your preference.

The front-end aspect was only introduced later in the year. You can use the back-end editor to set up your page structure and later switch to the visual editor to make the fine tweaks on the page.

The Divi 3 user interface is professionally done and it is attractive to use, but it has a different philosophy than the other two page builders. Divi pushes you to develop structure where the other two plugins merely get you to place content on the page first, then you choose what page layout you are looking for.

The page structure is split in form columns fitted in rows, which are then placed in sections. A color scheme is used to bring the whole structure to life. The modules, which get into columns, are in grey and the rows are green in color while the sections are colored blue. This arrangement makes it easy to come up with unique layouts for your structure. Presently, there are nine unique structures of columns set up in multiple rows.

32 Layout Templates

To assist you with the structuring work you have 32 layout templates. These cover about every page type everything from home pages to blog page layouts. Divi 3 also allows for full width settings allowing you to do away with the rows and insert modules directly to sections. With the full width settings, you’re able to add such type of content without changing themes or the template.

The visual editor allows you to preview how the site looks like in different devices. I must tell you I was totally delighted at the quality of UX design connected to the Divi visual editor. There are also settings to control the site’s responsiveness in tablets, desktops and tablets.

There are key features and advantages that Divi 3 has in the addition to the 32 layouts. You have 46 modules, and they can all be customized to suit your preference and vision. It also offers great design control. You also can save different elements of a template and then use them in other templates. This is a real time saver.

Role Editor

DvVi 3 offers a unique feature of role editor. This means that you can decide which users of the site can add, delete or edit the modules in the builder interface. You have Administrator, Editor, Author, and Contributor roles. This ensures you define which areas the different users can access, use and make changes to.

Undo and Re-do

Undo and Re-do actions Divi 3 allows you to instantly correct a single mistake without having to go through a long process. Divi keeps a long history of actions from your edits, clones and moves. You can correct mistakes or move through actions to check on the suitability of different actions. Assign custom CSS for the experienced developers, Divi 3 allows the opportunity to shape different aspects of the site. Individual modules and parts can be changed by the addition of custom styles.

A/B Split Testing

This is another unique feature provided by Divi 3 builder. A/B splitting is a methodology used by digital marketers to test the suitability of various elements of the site to the audience. Things like headings, keywords etc. – These all matter. With this in-built function, you can create two sets of factors and the response you are looking from the audience. Divi 3 will then automatically rotate the test factors and tell you which one led to the highest response.

The Disadvantages

For all its comprehensive nature, there are several aspects in which this builder lacks. First it uses short code in its structure. (I personally really hate short-codes i.e. connected to there over use.) This makes it difficult to switch themes or change the builder at a future point. When it is disabled for any reason the pages display the short code used.

Divi 3 does not let you use WordPress widgets in the canvas area where you design and customize the layout. This limits you to the provided content modules.

For the average user, this will be enough. But users looking for more versatility may need something more sophisticated. The modules also tend to load a bit slower when compared to other page builders like Beaver Builder.

Finally, the other let down is the lack of an option to remove the data that Divi adds on your site. Depending on the size of the database and your resources, you may end up lacking space.

To Finish My Review of Divi 3

I got to say that I’m impress with what the Elegant Theme team have achieved with their page building system connected to its UX design which is impressive. Also, its amazing value if you take in account what you get for the money but on the other hand I have some worries connected to plan options that offers lifetime updates. We have seen this before in the WordPress community and it normally doesn’t end well. But on the other hand, Elegant Themes are a well-established company in the WordPress area with over 400,000 users!

Also, I’m not a fan of short-codes all over a page, which is what you get if you stop using the plugin on your WordPress website. On the other hand, this objection can be overstated.

Beaver Builder

Beaver Builder

Beaver Builder is premium drag and drop website builder, mostly suitable for agencies and web developers. However, with its simple interface and similarity with the WordPress theme customizer, even a beginner can work without hassle. The interface does not offer much interest, but makes it easy to navigate and understand the different aspects. It is a live front-end editing structure allowing you to see the different elements as your clients will be seeing. It offers an easy way to work around with different kinds of templates and content types. This is because it supports WordPress widgets, posts and custom post types.

It also comes with 30 templates for the landing page and twenty-five content page templates. You can work with the layout templates if you are not looking to have your own designs or use them, but customize them to your preference and need.

The templates are high quality and can be integrated with a range of CSS and JavaScript settings. They also cover a wide range of website types you are guaranteed to find on to match your needs. Saving and duplicating what you have already designed and using the post of page for other content can easily create the layouts for content pages.

The content modules are available in three kinds, the basic modules which are eight, advanced content modules which are 22 and the 12 default WordPress widgets. In reality, you have thousands of content modules to pick from. This is because Beaver Builder allows the addition of any WordPress widget on the canvas giving designers a wide range of options and flexibility. There is also a mobile view added for the newer versions so you can preview the appearance in different devices.

Some key features and advantages for Beaver Builder have already been mentioned. For one, its compatibility with WordPress widgets and its ease of use. Other major features include; it’s lightweight code footprint makes it performance-friendly. Beaver Builder runs on Bootstrap, which makes support many features without bloating. The design and structure of the plugin also ensures you do not have to worry about it taking up your resources. It aids your SEO efforts. Beaver Builder uses practices such as code compression and schema.org markup to improve the chances of your site getting better ranking in search engines.

This plugin is also translation ready. Beaver Builder is among the few website builders that supports translation plugins like WPML, which enables your site to be translated in other languages.

This is helpful for sites looking to attract a global audience.

Beaver Builder also supports WordPress multisite capability. For professionals and agencies, this is a function that can offer great control over the multiple sites you are managing. This ability is only available in the Pro and Agency packages. The agency package is also available with a network wide control package making it possible to make changes across the network.

When it comes to WooCommerce support, Beaver Builder supports the creation of a storefront type of site. You can easily create an online store by dragging and dropping the various categories and products.

Beaver Builder has been around for some time now and this has enabled to build a great support structure for users of the plugin aside from response to users’ issues, they have seamless updates with little to no bug issues.

The cons of using Beaver Builder

It is difficult to find fault in this website builder, but there are a couple of issues which affect your general experience.

First off, you cannot save the page or discard any changes made without the interface closing down. The exiting and getting back can slow down the process. This is made worse by the fact that you do not have any undo and redo buttons as close competitors do. This means a mistake can be costly especially when discovered after you have made significant progress.

The content plugins have also taken a minimalist approach making them dull and plain. There is little much you can do through the customizing setting when compared to the rich features offered by other drop and drag Website builders. This can be an issue for someone with little or no design skills.

Finally, the cost of the builder is prohibitive to many creators of their own site. Much worse is the agency prices with the only unique feature being the multisite installation. The Beaver Builder lite version is stripped down of many features and cannot compete favorably with other free versions.

Elementor

Elementor Pro

The newest WordPress website builder of these three has made up for time by the kind of impact it has created on the market. Like Beaver Builder, it is a front-end editor with a beautiful interface, which is also easy to use.

Top features include support for posts, pages and custom posts types, mobile responsive features which include unique mobile editing controls the other builders lack, works with other WordPress widgets, in-built template system that supports importing and exporting, twenty-eight elements templates available in addition to the 12 default WordPress widgets, greater design control and ability to nest columns.

The pros of Elementor include a fast and light nature which not only aids fast loading times. It also allows fast live editing faster than what is seen on Beaver Builder.

Of the three, Elementor offers the best value for the money for most use-cases. Elementor was launched in June 2016 and quickly became the best free website builder with features similar to the premium builders. Its Pro version still comes at the very affordable $49. (I can see what they are doing here i.e. building a large following. However, I can’t see how they are making money from just charging $49 for their pro version. I just worry that their support is going to be quickly overwhelmed.)

It has additional features which excluding the number of templates, match what the other top website builders offer on the major aspects.

The only one that offers quality mobile responsiveness with the addition of mobile editing controls it also has rich elements reducing the need for customizing and addition of custom CSS.

The Pro version offers WooCommerce support and both version support translation.

The major con of Elementor is the fact it has a smaller number of content modules compared to most of the premium website drag and drop builders. Another major con is the fact that Elementor does not come with its own theme. This makes it hard to create full screen templates. You are forced to find your own solution when it comes to creating full width page designs.

Finally

These three are without a doubt, presently the best drag and drop WordPress website builders on the market.

Each has a unique appeal and may sit better in different circumstances. However, in terms of value for money, ease of use and the quality of website, Elementor slightly edges.

However, if you are looking at a professional level tool that has a great community you can’t really go wrong with Beaver Builder.

The big surprise to me was how good Divi was to use, also if you really looking for a totally free but powful solution you can’t really go wrong using Elementor being that it is totally free which makes it amazing value. However, personally I would still use Beaver Builder.

 

The Best Drag and Drop WordPress Website Builder? was last modified: by