Tuesday 26 January 2016

15 Drag-and-Drop WordPress Builders to Break Free from Coding in 2016

Today, you can find over 30 drag-and-drop builders on the market, but many of them come with issues impeding the workflow. To secure you against the wrong choice, I picked 15 of the most reliable solutions and did it not by intuition. Compiling this set of tools, I analyzed different aspects of each of them, from functionality to customer support. And now I’d like to offer you to choose the right drag-and-drop builder based on the results of my analysis.





In fact, not only do non-tech savvies choose web design tools of this kind, many people who have good knowledge in coding also use them to speed up their workflow. Here are the major advantages that users can take from drag-and-drop page builders.
  • Instead of messing with the code, it’s possible to add multiple elements to a blank web page by simply dragging and dropping them into it.
  • Elements can be rearranged and customized the way you like only with a few clicks of a mouse.
  • You can preview all the changes on the page live, in the same way your visitors will see it. What’s cool, you are free from switching back and forth between your website back-end and front-end.
  • In addition to elements, many tools of this kind come with some extras, e.g. pre-built templates and add-ons.
  • With drag-and-drop website builders, you can build high-converting pages of different types including homepages, blog, contact, about, product pages, and others.
As you can see, these tools are helpful assistants for web developers and designers. So, if you are one of them, this selection may come in handy for you. Before introducing some cool drag-and-drop WordPress builders to you, I’d like to list their main features. In such a way, you will be aware of the things to take into account in order to make a smart choice.
  • Built-in Elements. Build unique, visually appealing and feature-rich layouts with a variety of built-in elements (often referred to as modules, widgets and blocks). They include accordions, call-to-action buttons, sliders, galleries, tabs, icons, animated counters, and much more. With their help, you will have an opportunity to implement all your creative ideas.
  • Predefined Templates. For faster development, you can skip the procedure of building a layout from scratch and customize ready-made templates according to your preferences.
  • Responsive. It can let you design layouts that can be automatically scaled to dimensions of any viewport, from retina HD displays to narrower screens of smartphones and tablets.
  • Translation-Ready. Support for WPML allows you to translate the on-page text into different languages and, therefore, help you reach an international audience.
  • Multisite Support. You can configure the page builder for all your sites at once and in one place.
  • WooCommerce Compatibility. With its help, you can drag and drop products into your pages to build an online store.
  • Extendibility. This feature allows you to extend the default functionality of your drag-and-drop page builder with various add-ons, e.g. maps, videos, countdowns, etc.
Now as you know the main things to keep in mind while choosing drag-and-drop builders, learn more about each tool from this selection with the help of easy-to-scan checklists.

Free Drag-and-Drop WordPress Builders

Let’s start with freebies. Here are the most popular drag-and-drop WordPress builders available at no cost.

MotoPress Content Editor


  • Built-in Elements – yes
  • Predefined Templates – yes
  • Responsive – yes
  • Translation-Ready – yes
  • Multisite Support – yes
  • WooCommerce Compatibility – yes
  • Extendibility – yes
  • Premium Version – yes (starting at $29)
Among free drag-and-drop WP builders, MotoPress seems to be the most optimal solution. It comes with 30+ built-in content elements, e.g. galleries, CTA buttons, YouTube & Vimeo video embeds, etc. The plugin also supports custom post types. Its functionality can be extended with your own shortcodes and advanced add-ons such as a video slider, video lightbox, image hotspot, countdowns and even a white label option. The latter allows you to rebrand designs built with MotoPress as your own artworks without any third-party help. It’s also possible to create your own add-on if you like. With its help, you can build both simple and advanced sites with a parallax effect, video backgrounds, and much more.
* * *

Live Composer


  • Built-in Elements – yes
  • Predefined Templates – no
  • Responsive – yes
  • Translation-Ready – yes
  • Multisite Support – yes
  • WooCommerce Compatibility – yes
  • Extendibility – yes
  • Premium Version – no
Live Composer is supplied with 30+ modules for different purposes, e.g. navigation, comments, testimonials, products, tabs, social links, thumbnails, etc. Each module features styling options to create a unique look. With this tool, you’ll also get an access to 550+ Font Awesome icons and the entire library of Google fonts. Live Composer allows you to build your own 404 page, search results page, and different category pages for different post types. To extend the plugin’s functional potential, there are both premium add-ons (48 Linecons icons, before / after image slider, gallery grid, etc) and freebies (47 animations, video embed option, previous / next post links, etc). Some users complain that video background of row doesn’t play on Android devices.
* * *

MiniMax Page Layout Builder


  • Built-in Elements – yes
  • Predefined Templates – no
  • Responsive – yes
  • Translation-Ready – no
  • Multisite Support – no
  • WooCommerce Compatibility – no
  • Extendibility – yes
  • Premium Version – yes (starting at $35)
  • Ratings – 3.1 out of 5 stars
  • Downloads – 9,000+
  • Support – they don’t seem to support their plugin actively
MiniMax is meant to create full-featured squeeze pages and sales pages. It supports 3000+ widgets from the WP directory and has custom modules for message, warning and notification boxes, timelines, progress bars, dropdown menu, image, accordion, rich text, sub-pages, etc. What’s cool, the image module comes with 5 pre-defined styles, whereas the accordion one has 6 pre-defined styles. It’s possible to export and import an already built layout to a new site, but keep in mind that some bugs occur while migrating to another server. Another issue about MiniMax is no compatibility with SEO plugins because of base64 encoding in the database.
* * *

SiteOrigin Page Builder


  • Built-in Elements – yes
  • Predefined Templates – no
  • Responsive – yes
  • Translation-Ready – yes
  • Multisite Support – yes
  • WooCommerce Compatibility – no
  • Extendibility – yes
  • Premium Version – no
  • Ratings – 4.7 out of 5 stars
  • Downloads – 700,000+
  • Support – users’ issues are solved occasionally
Here is a lightweight page builder with a clean, SEO-friendly code. It comes integrated with another free plugin, Widgets Bundle, which supplies it with all the essentials, i.e. buttons, images, maps, sliders, etc. In terms of customization, padding, spacing and borders can be changed with simple input fields. By means of a history browser, you can easily roll back and forward through the changes you make. In general, SiteOrigin Page Builder is meant for building sites with basic functionality and doesn’t support JavaScript. But if you want some frills like parallax effect for your designs, you should definitely look for another tool.
* * *

Page Builder by WooRockets


  • Built-in Elements – yes
  • Predefined Templates – no
  • Responsive – yes
  • Translation-Ready – no
  • Multisite Support – no
  • WooCommerce Compatibility – yes
  • Extendibility – yes
  • Premium Version – no
  • Ratings – 4 out of 5 stars
  • Downloads – 10,000+
  • Support – they help customers with their issues not too often
This WP page creator software can be used to build both posts and pages and has built-in shortcodes for ease of use. Among the elements accessible in its package, there are content lists, promo boxes, pricing tables, progress bars, etc. One of its prominent features is a spotlight filter meant to facilitate the process of finding page elements. You can also add widgets to your website layout and easily configure them. As a matter of fact, the functionality of the Page Builder by WooRockets is somewhat limited, which makes it suitable for creating only simple layouts.
* * *

Aqua Page Builder


  • Built-in Elements – yes
  • Predefined Templates – no
  • Responsive – no
  • Translation-Ready – no
  • Multisite Support – no
  • WooCommerce Compatibility – no
  • Extendibility – yes
  • Premium Version – no
  • Ratings – 3.2 out of 5 stars
  • Downloads – 30,000+
  • Support – looks like they do not support their plugin actively
Aqua is a developer-friendly WordPress tool equipped with some hooks and filters. A template built with this plugin doesn’t have to be a separate page. You can use it as a part of any other page or post and reuse it as many times as you need. Compatible with the WP import & export option, Aqua allows you to share and transfer your layouts. It has some issues with WordPress 4.3+, so you’d better use it with earlier versions of this CMS. If you are going to update it to the latest version, make sure you back up everything to secure yourself against any unpleasant circumstances. Generally speaking, the plugin seems to be weak.
* * *

Page Builder Sandwich


  • Built-in Elements – yes
  • Predefined Templates – no
  • Responsive – yes
  • Translation-Ready – yes
  • Multisite Support – yes
  • WooCommerce Compatibility – no
  • Extendibility – no
  • Premium Version – yes (starting at $44.50)
  • Ratings – 3.8 out of 5 stars
  • Downloads – 1,000+
  • Support – the team behind the plugin provides timely support
Page Builder Sandwich features a clutter-free interface without annoying pop-ups. With its aid, you can change colors, italicize text, embed videos, adjust columns and spacing, and add entire predefined templates. It also comes with shortcodes whose attributes can be changed literally on the fly. To help you cope with typos, there is an undo shortcut. The plugin works with YouTube, Vimeo, Twitter, Flickr, Instagram, and some others. Page Builder Sandwich seems to have some issues with PHP 5.2, which can lead to your website crash. So, don’t forget to back it up before using the plugin.
* * *

Premium Drag-and-Drop WordPress Builders

Now, look through premium WordPress drag-and-drop plugins that can help you build designs in a code-free manner.

Beaver Builder


  • Built-in Elements – yes
  • Predefined Templates – yes
  • Responsive – yes
  • Translation-Ready – yes
  • Multisite Support – yes
  • WooCommerce Compatibility – yes
  • Extendibility – yes
  • Pricing – starting at $99
Beaver Builder allows users to build pages without overloads of shortcodes. The elements from its package include a content separator, post carousel, social buttons, post grids, contact and subscription forms, etc. There is also a white label option for rebranding. The templates available by default can be replaced with your own ones. When you configure a certain module of Beaver Builder, the changes are automatically applied to all the cases of its implementation throughout your site. If you decide to stop using the tool, you can transfer your content back to the default WP editor without any loss or mess.
Using Beaver Builder, you can design pages, but not posts. A full-page design option is available only if you use the Beaver Builder theme from the $199 package. The plugin is free from any bloated code – its simple code provides maximally fast performance. Yes, your site will work quickly, but it will still lack cutting-edge features like an advanced slider with a variety of smooth animation effects.
* * *

Thrive Content Builder


  • Built-in Elements – yes
  • Predefined Templates – yes
  • Responsive – yes
  • Translation-Ready – yes
  • Multisite Support – yes
  • WooCommerce Compatibility – yes
  • Extendibility – no
  • Pricing – starting at $49
Thrive Content Builder boasts a variety of elements, bulleted lists, customizable content boxes, content tabs, toggles, star ratings for reviews, opt-in forms, dynamic countdown timers, etc. Its Event Manger feature allows you to create animations and lightboxes to your imagery. In addition to multiple elements, Thrive Content Builder offers a wide range of pre-designed landing pages with conversion-optimized designs and extensive customizability. As for the HTML aspect, it isn’t 100% clean coded and has blank paragraphs that you’ll need to delete manually. It’s also impossible to change the palette of a single element – changes are applied to all the other elements of a certain article. Moreover, Yoast sometimes can’t read the content to give it an accurate SEO score.
* * *

Themify Builder


  • Built-in Elements – yes
  • Predefined Templates – yes
  • Responsive – yes
  • Translation-Ready – yes
  • Multisite Support – yes
  • WooCommerce Compatibility – yes
  • Extendibility – yes
  • Pricing – $39
Themify Builder is a cheap solution with both front-end and back-end editing options, shortcodes, reusable content, import / export option, and more. In terms of styling, you can benefit from video backgrounds, parallax effect, color picker, 660+ Google fonts, and 60+ animations applicable to any module or row. For better performance, the tool is based on a modular structure, which means its resources and files are loaded only when necessary. It is compatible not only with WooCommerce and WPML, but also with SEO Yoast, Contact Form 7, and Events Calendar. Unfortunately, Themify Builder is compatible only with Themify themes that are simple, similar in designs and may not fit your business needs.
* * *

Velocity Page


  • Built-in Elements – yes
  • Predefined Templates – yes
  • Responsive – yes
  • Translation-Ready – no
  • Multisite Support – yes
  • WooCommerce Compatibility – no
  • Extendibility – no
  • Pricing – starting at $97
This drag-and-drop tool makes it possible to build pages of different types, e.g. landing, sales, webinar, contact about, and product launch pages. Landing pages are compatible with popular email marketing tools such as Aweber and MailChimp. The tool has a clean code, but doesn’t offer a lot of modules. There is only a standard set of them, i.e. images, media like YouTube videos, custom HTML like affiliate adds, header tages for SEO purposes, page divider, etc. I’d like to mention that the pro package allows you to use Velocity Page on unlimited sites. But those sites refer to sites that you own. If you want to use the plugin on a client’s site, be ready to pay an extra sum of $47 per year. Moreover, you will be limited to building only pages with this tool, not custom post types.
* * *

Layouts


  • Built-in Elements – yes
  • Predefined Templates – no
  • Responsive – yes
  • Translation-Ready – yes
  • Multisite Support – yes
  • WooCommerce Compatibility – yes
  • Extendibility – no
  • Pricing – starting at $79
Layouts Builder comes with a rich set of content-driven cells. They include an image box, menu, CRED form, WP archive, slider, single widget, grid of cells, etc. Users of this plugin can create custom post types, taxonomy, and custom fields for posts and users. Once a certain design block is ready, it can be exported and reused many times. Furthermore, the tool lets you set up custom user roles and control access for both users and roles. Don’t overlook the fact that the plugin works only with Bootstrap-based themes. If your current theme is not integrated with this mobile-first framework, opt for another drag-and-drop WP builder.
* * *

Headway


  • Built-in Elements – yes
  • Predefined Templates – yes
  • Responsive – yes
  • Translation-Ready – yes
  • Multisite Support – yes
  • WooCommerce Compatibility – yes
  • Extendibility – yes
  • Pricing – starting at $89
Headway is a flexible drag-and-drop solution allowing you to build anything from an ordinary blog page to an online store. It comes with the following blocks: breadcrumbs, navigation, slider, header, social icons, listings, and others. They can be styled by simply pointing and clicking elements. In addition to the above-mentioned compatibility with WooCommerce, Headway works out of the box with other widely used plugins, e.g. Gravity Forms and iThemes Exchange. What’s also notable about this tool is a possibility to bring back the previously changed design with a single click. Its black spot is compatibility only with Headway templates.
* * *

Template Toaster


  • Built-in Elements – yes
  • Predefined Templates – no
  • Responsive – yes
  • Translation-Ready – yes
  • Multisite Support – no
  • WooCommerce Compatibility – yes
  • Extendibility – no
  • Pricing – starting at $49 + unlimited free trial
Template Toaster offers hundreds of pre-defined color schemes, Google fonts, and stock images that can be cropped and resized according to your needs. Using the tool, you can build different menu types, namely horizontal, vertical, and magazine-style menus with horizontal and vertical submenus. By means of a file transfer protocol (FTP), you can easily move your designs to your hosting server. The team behind Template Toaster tried to lump everything together and released a piece of software with basic functionality not only for WP, but also some other CMSs such as Joomla, Drupal, and Magento. However, if you need a builder with extended functionality, you’d better use a plugin for your particular CMS.
* * *

Conductor Plugin


  • Built-in Elements – yes
  • Predefined Templates – no
  • Responsive – yes
  • Translation-Ready – no
  • Multisite Support – yes
  • WooCommerce Compatibility – yes
  • Extendibility – yes
  • Pricing – starting at $49
Conductor Plugin allows you to choose different types of page layouts (full-width, with and without sidebars). It’s also possible to group different kinds of content on any page in a table, list, and grid. Custom post types can be used within the plugin settings. One of the plugin’s benefits is theme independence, which means you are not bound to a particular theme. Conductor Plugin heavily relies on WP customizer, which makes it comfortable for everyone who got used to WP. Although the plugin is easy to use, its functionality yields to other drag-and-drop builders listed in this post.
* * *
I hope this set could help you find the tool to facilitate your website building. As it consists of both free and paid options, you can choose the solution depending on your budget. Among freebies, MotoPress Editor seems to be the most promising tool, whereas Beaver Builder is a cool option to try if you are ready to pay for drag-and-drop page building. Keep in mind that MotoPress also has a premium version that is cheaper than Beaver Builder, but doesn’t yield to it in terms of functionality. So, you may want to consider an idea to try MotoPress as well.
Now, it’s your turn to speak up. Do you have any experience in using drag-and-drop WordPress builders? What tool could you recommend us? Feel free to complement this selection! Share your advice in the section of comments to this blog post.

Interview with Zac Gordon, the Best WordPress Teacher on the Web

What’s the biggest talk of the last days on the web? Right you are, it’sWordPress + JavaScript. We had a talk with someome who ate a dog at WordPress education.






Please meet Zac GordonWordPress teacheryogi and someone who will show you how to squeeze every bit of power out of WordPress+JavaScript symbiosis.
After the last presentation by Matt Mullenweg where he said that all WP devs from now on need to learn JS, Zac is one of the first ones who’s ready to teach you how to benefit from this WP/JS interaction.
Right now Gordon is working to produce the course which will include more than 20 lessons that will take 40 hours to complete. The course will cover topics such as JavaScript in Core, the REST API, major JS frameworks used with WordPress (Backbone, Angular, React), workflow tools, and walk throughs of real world examples.
In this interview you will find more about WordPress/JavaScript union as well as a number of others things that are impotant for all WordPress fans.





Matthew Cain: How did you come up with the idea of creating the JavaScript for WordPress Master Course?





Zac Gordon: I was sitting in the audience at WordCamp US when Matt gave the homework assignment to Learn JavaScript, deeply.  I had just come to the end of three great years teaching WordPress at Treehouse and was wondering what to do next.  This JavaScript for WordPress Master Course seemed like the perfect thing to do.  I had considered doing a series of smaller courses, but like the idea more of doing a large, comprehensive, Master level course.






Matthew Cain: Many of us know you as the WordPress teacher at Team Treehouse. How did the work at Treehouse affected your views on teaching and learning?  What teaching workflow should we expect here?





Zac Gordon: I learned a lot at Treehouse about teaching on scale.  When you have thousands of students and cannot personally assess or interact with all of them, it’s a different scenario than teaching in a one on one environment.  I definitely dug deeper into data driven education while at Treehouse.  I also produced a lot of content on a regular basis, often two courses or so per month.  This gave me a really good chance to refine my curriculum development process and speed up in general the time it takes for me to research, prepare, and produce courses.
I also like the personality at Treehouse, especially with things like the bonus content we used to do.  I plan to keep the smiles and enthusiasm I had in the Treehouse videos and hopefully add in some fun outtakes and bonus content here and there.
A lot of Treehouse students really love the badges, points and overall gamification of learning that takes place on the site.  I’ll have a little of this in the JS for WP master course, as well as some completion certificates and profile pages that I think people will really like.
I  plan on bringing in a lot of what I learned at Treehouse, both in terms of production and effective teaching, into my new JavaScript for WordPress Master Course.  Students of mine from Treehouse should find my new course familiar, but a bit more fun and personal.






Matthew Cain: Who would benefit the most from your course? What prior knowledge should the person have?





Zac Gordon: This courses is geared primarily towards WordPress Developers of all levels who want to learn JavaScript more deeply.  Folks should have a little familiarity with JavaScript and jQuery, but they really don’t need to know much.






Matthew Cain: Are you going to be the only instructor in this course, or are you planning to collaborate with someone else?





Zac Gordon: I will be the primary instructor for the course.  I will hire one or two people to help with editing content and possibly writing supplemental articles, as well as one or two people to help with support, but I’ll be teaching everything myself.






Matthew Cain: You have a lot of teaching experience in the WordPress field. What in your opinion are the biggest challenges that people face when learning WordPress? How do you help your students to overcome them?





Zac Gordon: One of the biggest road blocks people have is knowing how to setup a theme properly, for example, to look on their own site how it looks in the demo can be a little tricky for people.  From there, learning what is and what is not possible to Customize in a theme without knowing how to code is a really hard thing to know.  If you haven’t setup a dozen different themes before, it can be hard to figure out how to setup your first one.
Usually, just hearing that this is a common stumbling block for lots of people makes folks feel better.  However, teaching this is really tricky.  I gave a WordCamp talk called The Niche Art of Setting Up Theme about my efforts to try to teach this at Treehouse.  Actually the last course I worked on while at Treehouse was trying to teach this.  My approach was to teach how to setup and customize 5-10 popular types of themes in order to get a hang of what is common and possible.
After that, the next big step is going from being a power user and not knowing much more than a little CSS and wanting to build and customize themes at a deeper level.  Luckily, this is a little bit easier to teach and just involves taking the time to understand some basic PHP, the template hierarchy, hooks, etc.  The WordPress Development Track at Treehouse did a pretty good job covering this I think, and there are tons of other resources teaching this same thing as well.
Of course, now, the next big challenge is learning JavaScript, hence my work on this new course ;)






Matthew Cain: Many of our readers are people who are only starting their web design and web development careers. In your experience, how much time would it take for a complete beginner to learn WordPress in order to make a living from it?





Zac Gordon: You can learn WordPress well enough to make a living very quickly.  You do not not need to know how to code to run a WordPress business.  If you know how to install plugins and themes and do some simple customizations, this is enough to charge hundreds or thousands of dollars for.  You can learn this in 1-3 months of learning and playing around.
To become a WordPress Developer is going to take a little bit longer since there is more to learn and coding is involved, but I’ve had a number of students who have gone from beginner to employed in 6 months or under a year.
Really, it’s probably more about the soft skills of knowing how to get hired or run a business that are going to be harder than learning WordPress itself.






Matthew Cain: The WP REST API is probably the most exciting feature since the introduction of custom post types in WordPress. How long in your opinion would it take to see the RESTful applications become mainstream?





Zac Gordon: I think in 2016 we are going to see more people playing around with it and experimenting.  I’m thinking it will probably be 2017-2018 before we really see stable platforms and a lot of success rolling out RESTful apps.
You have to remember that for a lot of WordPress sites, building a full REST based app is in no way the right solution.  So, we will still see WP being used out of the box for some time to come.  The funny thing there is that as WordPress itself begins to rely more on Core we will see WP itself before a more RESTful app.
That said, more and more plugins and themes will begin shifting in the next year or two to build their plugins around the API and use the API to make content from their plugins more available to others developing RESTfully.






Matthew Cain: What do you think about the future of WordPress themes? Should we expect seeing more multipurpose solutions, or niche-specific themes? What would be the role of JavaScript in the future of WordPress theming?





Zac Gordon: I think the types of themes that are popular now will continue to be for the time to come.  More developers are going to build JS driven WP themes and I’m a little nervous about the short term landscape of this because we will likely see JS themes all over the place in terms of quality and approach.  It might be a little time before we really see strong standards developed and adopted around JS driven themes.
In terms of multipurpose v. niche themes, I think that they both really have their place.  As someone who ran a business building WordPress sites using premium themes, I love the options that are out there and available to people.  






Matthew Cain: If somebody would like to get involved with your project, and help you to make it more awesome, what should they do?





Zac Gordon: Please go over to javascriptforwp.com and sign up for the newsletter.  You’ll get course release updates and some really great JS for WP tips and sneak peaks at the course.
We have a Kickstarter for the course launching soon that I would love support for, and finally, if you are a WP development shop and would like to partner or help sponsor the JavaScript for WordPress Master Course, please contact me through the site!