As WordPress has grown in popularity, the need for a more user friendly approach to web design has been on the rise as well. As time has gone on, technology and great minds have managed to come together to produce the infamous drag and drop interface. Now that there are multiple ones on the market, Charlie (new owner here at 87 Studios) and I thought that it might be cool to have a sort of drag and drop shootout. Yee-ha! Ever since the arrival of Divi by Elegant Themes, I have been noticing a lot more interest in drag-and-drop themes and plugins. But the question remains the same: Which one is the best? For this post I'll be looking at three of the most popular drag and drop interfaces, their features, and some pros and cons to each one. From there, my hope is that you'll have a rounded idea of each one to help you make your choice a little easier.
Back in the summer of 2013, Elegant Themes announced that they would be releasing a new theme called, Divi, that would be unlike anything else that they had ever created. They were right. With the release of the Divi theme at the end of last year, and the Divi 2.0 update a few months back, Divi quickly gained attention in the WordPress community. After the release, I decided to purchase the theme to give it a test run. And after some playing around with it, I have to admit that it lives up to its reputation. Though the idea of a drag and drop theme is not new, Divi delivers exactly what you would expect out a drag and drop powered theme, and maybe just a bit more. The page builder allows you to use either a pre-designed layout, or the ability to create a layout from scratch. You then use what they call, Modules, to add different types of content to your website. As far as the page builder goes, the idea of the Divi theme builder is similar to that of many others on the market, but my opinion is that the end result of your designs has a sleeker finish then what you get out of some of the others. With 20 different Column layouts, and over 30 Modules to choose from, the design options given to you are pretty much inexhaustible. If you'd like to read some really in-depth articles and reviews about the theme, be sure to check out a couple of the ones that have been written about Divi:
Many take the phrase "drag and drop" to automatically translate into "easy". Though it's true that Divi does make it somewhat easier for coders and non-coders to build a beautiful and responsive website, the term "easy" may be a bit of an overstatement. The page builder does eventually become easy to use, but that's only after you've spent time learning it. When first starting out with Divi, you should expect it to take a few hours and perhaps a whole day before you really get the hang of it. Designing with it will still be time consuming and will require some visual testing before you get things right where you want them to be. I use Divi, and I love it, but even for a web designer like myself, it took some time to really get a handle on the power and options.
Pros Of The Divi Theme:
- Perfect For Non-Coders. Divi is a great theme for people who want to build a site without code, or for web designers looking for a way to speed up their designs.
- Endless Possibilities. The selection of Section layouts and Module options means that you can create, or recreate, just about any look you like.
- 19 Pre-Designs Layouts And Growing. If you don't want to design from scratch, no worries! The pre-designed layouts will help you get started on the right foot.
- An Evolving Product. Since Divi comes from the ever amazing Elegant Themes WordPress Theme Shop, it will continue to evolve into a better product.
Cons Of The Divi Theme:
- Learning Curve, and Still Time Consuming. Though Divi does have a learning curve, it gets easier to use the longer you explore and test your designs. However, you should realize that building a pixel perfect site will still be time consuming (and may take a bit of coding too).
- Price. Starting price for Divi theme is $69 (not bad initially) but that price is charged annually. The only upside to that is the fact that you get ALL the themes at Elegant Themes for that price. So technically speaking, Divi is only 0.79¢... Maybe that's not so bad after all.
- Page Builder Is Only Available With Divi Theme. Divi is a drag and drop theme, and the page builder in the theme is available solely in Divi.
- The Builder Only Works In The Back-End. As of now, there is no front-end editing with Divi. If that ever became an option, then this theme would blow all others out of the water.
At the end of the day Divi is a great and flexible drag and drag theme, but like any drag and drop interface it will take time to learn it in order to really get the true power out of it.
Themify is a WordPress theme shop that focuses on drag and drop style themes. Not only do they offer a wide selection of themes that are powered by their drag and drop theme builder, but they also sell their Builder Plugin separately. The Builder Plugin has quite a few features (i.e. it's responsive, and SEO optimized), but one stands above all the rest: The front-end editor. The Themify Builder Plugin allows you to visually build your website's pages on the front-end. Unlike the Divi theme that requires you to build pages in the back-end and then preview the final result, the Themify Builder allows you to use the drag and drop interface on the actual page (!) that you want to design. This is a huge time saver! As with nearly all WordPress themes on the market today, you generally have to make your tweaks to design in the back-end, and then you have to preview the end result in real time. This generally leads to more tweaking and more previewing which translates into more time. The Themify Builder Plugin and themes help alleviate this designing headache. The idea behind the Builder drag and drop interface is similar to Divi, only with less of a learning curve. You add Columns to your page, and then you drop in the Modules that you'd like to use within any given column. The other upside to the plugin is that you can use it on other themes outside of what is available in the Themify shop. Therefore, you can build different layouts on pages no matter what theme you're using. (Nice!) There are some drawbacks though... The Themify Builder is easier to learn then Divi because there are fewer features to utilize. Whereas Divi lets you easily create a visual separation on the page (like adding a different background color or image to the sections you create), you don't have that type of functionality with this product.
Pros Of Themify Builder Plugin:
- Easy To Learn. The interface is pretty intuitive so you won't need to spend much time learning how to work it.
- Reasonably Priced. The price for the plugin alone is $49, however, also have the option of buying 2 themes for the same price; the builder plugin is built in to each theme.
- Works On Most Current WordPress Themes. The plugin turns your non drag and drop theme, into a full fledged D'n'D interface. Woo-hoo!
- Nice Choice Of Layouts & Modules. The Themify Builder comes loaded with 8 pre-designed layouts, and 16 modules to choose from .
- Front-End Editor. Need I say more?
Cons Of Themify Builder Plugin:
- Light On Features. Though this drag and drop builder is user friendly, it's not that powerful when compared next to Divi...
- Still Has A Slight Learning Curve. This really isn't that big of a drawback. Every drag and drop theme or plugin has this learning hump, so don't let that deter your choice.
If you're looking for something that simply lets you build a page with a varying layout to sort of shake things up, then the Builder Plugin by Themify is a great option. However, if you need to build dynamic pages with things like fly-in animations, then this really isn't what you're looking for.
We couldn't really have a drag and drop shootout without including the Visual Composer plugin by WPBakery. With over 100,000 sites powered by the plugin, and boasting to be the #1 drag and drop editor on the market, they certainly warranted a closer look. I first tested Visual Composer before their most recent release, and I have to admit, I was pretty underwhelmed... However, this most recent update gave me a change of heart. The most impressive feature about Visual Composer is that you have the option of both back-end and front-end editing. (Have I told you guys that I love front-end editing? Well, I do! *virtual hugs*)
The way that Visual Composer works reflects that of the other two I've talked about so far: Create columns, add modules (or Elements, as they are referred to by Visual Composer), insert your content. Visual Composer comes with over 40 different Elements that you can use to build your pages with. It even supports 3rd party plugins like Contact Form 7 (free plugin) and Revolution Slider (another popular plugin on CodeCanyon). Another nice feature is the ability to edit the background of your individual columns. In this regard, Visual Composer beats out Divi because you have to use CSS to change the background on a specific column within one of the sections. VC does take time to learn. It's easier to learn then Divi, but since it has more functions, it will take more time to learn then the Themify Page Builder. My suggestion would be to read up a bit on all that Visual Composer has to offer and to give it a test run before you buy it.
Pros Of Visual Composer Plugin:
- Price Is Awesome! The price for the VC plugin is only $28. With all the functions available in this plugin, that's a pretty great deal!
- Front-End Editor. Design and tweak in real time. No back-end editing needed, unless you prefer it; it comes with that option too.
- User Friendly. Visual Composer has a style similar to the Themify Builder which makes it easier to learn.
- Add-Ons. The add-ons available means that you can extend the functionality above and beyond that of what even Divi offers.
- Works With Any WordPress Theme. They say that it works with every theme, but since I can't really test that out, I'll just take their word for it. (*wink*)
Cons Of Visual Composer Plugin:
- The Add-Ons Get Pricey and Increase The Learning Curve. The amount of time to learn how to use VC may be increased if you decide to purchase one or more of the 50+ (yes, they have over 50!) Visual Composer Add-Ons. The add-ons do extend and increase the power and functionality of the plugin, but that means you'll have to pay more money.
- Still Might Not Be What You're Looking For. At the end of the day, Visual Composer may not be what you're looking for, but only you would know that...
After a second look at the plugin, I understand the reason for it being called #1. The price is great for what you get out of it, and those add-ons are incredible! (You should really check those out too!) From a personal stand point, I now look at it and see how great this plugin would be to build some engaging Landing Pages, so I may just buy this thing for business use.
So who wins our drag and drop shootout? Well... it's hard to say. When compared side by side, Divi seems the obvious winner over the Themify Builder. For only twenty dollars more, you get a theme with drag and drop capabilities that can become anything you want it to be. However, the simplicity of the Themify Builder will likely appeal to some users. Now, when you look at price and features, I feel that Visual Composer's latest update with the front-end editor means that it beats out the Themify Builder as well. Half the price, but twice the functionality. The hardest comparision, though, would probably be Divi versus VC... The reason? Divi is a theme, while Visual Composer is a plugin. I think Divi definitely wins the top spot as the best all-in-one package. Buying Divi eliminates the need to buy another theme, however, if you already have a theme you like but what to add drag and drop capabilities to it, then Visual Composer is perfect for the job. VC has the better price (under $30), and you can use it on all WordPress themes (this would make it nice for designers who develop multiple sites); the add-ons to Visual Composer also lend as a selling point. My only concern with all the add-ons for VC would be site speed. Divi isn't the fastest loading theme around, but using Visual Composer along with multiple add-ons on any theme – even a fast one like the Genesis Framework – could be similarly affected due to all the scripts that would need to run to create a dynamic type of site. Although, you may be able to side step to that by using a CDN (Content Delivery Network). I've come to believe that there is no so such thing as a "best" drag and drop interface on the market, because what's best for you will depend on what you need. These three products are a great place to start your search. Have you guys used any other drag and drop system that you really like? Is there anything about these three that you think I missed? Be sure to comment below. I'd love to hear your input!