Drag and drag page builders allow you to control how your website pages look by simply moving elements within a visual interface. One of the reasons they have become so popular is because they require no technical knowledge to use. Even a novice can create professional looking pages in seconds using a drag and drop builder.
Page builders have become so popular that a large percentage of themes released on ThemeForest come packaged with drag and drop builder plugins so that users can create complex layouts on their own.
In this article, I would like to walk through you ten of the best drag and drop page builders that are available for WordPress today.
All plugins have been tested except for Velocity Page, which is still currently in beta mode. Please also note that the content elements that can be inserted into layouts are named differently by developers. Some plugins refer to them as blocks, some as widgets, and others as modules. For the sake of consistency, I have referred to all of them as elements throughout this article.
It allows layouts to be edited directly on the front end of your website. It looks very easy to move content around and create custom layouts.http://www.youtube.com/watch?v=SJ_g64DpdTU?rel=0&w=480&h=360
Velocity did not want to provide access to a demo for the plugin just yet as the plugin is still in beta mode. I completely understand and respect their need to this as reviews of beta products can have a negative affect on a plugin that is still being developed.
It will be interesting to see what the finished product looks like. Mark Jaquith is a lead developer of WordPress so knows the platform inside out. He has also developed and released thirty seven plugins. His portfolio proves that he knows how to develop functional plugins that enhance WordPress and will not just rely on any gimmicks to sell.
The plugin has around forty content elements to choose from including social media sharing buttons, post grids, tables, sliders, image carousels and more. All elements are optimised for mobile devices.
What I love about Visual Composer is how easy it is to create cool layouts quickly. There are several custom layouts available that split content into multiple columns and new rows can be added by dragging and dropping them into other areas of the page.
Layouts can be saved as templates so that you can reuse them on other areas of your website. This makes it easy to create unique styles and duplicate them on similar pages. For example, you could create a unique layout for reviews and another for news.https://vimeo.com/64482230
Another great thing about Visual Composer is its visual query builder. What in the world is that, you might ask? Well, it’s a really easy way to build custom queries and display them in a grid. A quick example where this might be useful. Lets say you want to create a Pinterest-style page with the Masonry layout. You also want only content from a particular post type (maybe you set up a portfolio custom post type) to show up on this page. So you’d need to create a custom query that fetches the latest posts from the portfolio custom post type and displays them with the Masonry layout with three columns. The visual query builder lets you do just that, you’ll have the page up and running in two minutes.
I still believe Visual Composer is one of the best drag and drop page builders available online as it gets the right balance between ease of use and number of features.
Launched in January 2014, Awesome Builder is one of the latest drag and drop builders to hit the market.
It allows you to build pages using a visual editor or using shortcodes. There are over twenty five elements to choose from including pricing tables, videos, sliders, boxes and more.
Awesome Builder works in a similar way to Visual Composer, however the interface is a little cleaner and tidier. One of my favourite things about the layout editor is the ability to switch between the layout for desktop, tablet and mobiles. This allows you to cater the experience for every each type of visitor.
Once I got used to how Awesome Builder worked, I was able to create some interesting page designs quickly. The plugin features an import and export system too, therefore duplicating layouts is straight forward.http://www.youtube.com/watch?v=FPoO527BBNk?rel=0&w=560&h=315
Despite Awesome Builder only been launched a few weeks, it looks like a serious contender in the page builder plugin market.
Elegant Builder is one of the more simpler drag and drop builder plugins available.
Seventeen elements are available including a pricing table, image slider and widget area. Whereas most builder plugins will take you at least ten or fifteen minutes to familiarise yourself with their interface; Elegant Builder is refreshingly easy right from the start.
To create a layout, all you do is drag columns down to the layout editor and then drag your chosen element into the appropriate box. Clicking on the element will allow you to customise it.
The simplicity of Elegant Builder is both its greatest feature and its greatest flaw. It lacks many features that other plugins have such as social media sharing buttons (though additional functionality can be added by utilising widgets in your layout).
If you are simply looking for a simple way of organising your content, Elegant Builder could be your best option. Those of you who are looking for more customisation options may want to choose something else.
When you first activate Views, you quickly realise that it works very differently to all other page and builder plugins in this list. It predominately uses a templating and shortcode system; however a layout wizard is available for beginners. Technically, it should not be considered as a drag and drop builder as their is no drag and drop interface (but it sneaks into the list as it is a feature packed page builder!).
Views utilises three custom post types:
- Views – Allows you to create content such as lists, sliders, images and more. These can be inserted into content templates and archives.
- Content Templates – Content templates can be created for posts, pages, media and any other custom post type you use. It can replace the default template for those post types.
- WordPress Archives – Allows you to customise archive pages such as your home page, category archives, search results and more.
Most other page builder plugins are designed to work with only posts and pages, however Views can be used with any archive page or custom post type. This gives you more freedom over how the rest of your website is designed (i.e. not just posts and pages).
Although there is no drag and drop interface, there is a layout wizard that lets you add grids, tables and lists. You can then choose the field ID that is inserted into the layout.
Media can also be inserted into layouts and you can connect an existing content template into your view. The code for your layout is shown too.
There are dozens of shortcodes available. There are so many that the insert views box includes a search box and splits shortcodes into categories.
Views is probably the least user-friendly plugin in our list. Developers will love the vast number of WordPress functions that it supports and its ability to import and export settings. However, beginners will get lost in a sea of shortcodes and technical terminology and you need to assign a page or post to a template before you can see the layout you created. Due to this, absolute beginners might struggle to get anything from Views and design the kind of layouts that the plugin is capable of.
Perhaps the best feature of Views when compared to the rest of the plugins in this post is its Query builder. You can build fairly complex queries without any code, and that’s a very powerful feature, one that is not easily found in other WordPress plugins.
All in all, Views is a very good plugin. If you have experience with editing WordPress themes for yourself or for clients, you will find that Views will save you a lot of time designing custom layouts.
Update: Toolset now contains a drag and drop component named Layouts.
Most page builders place the layout editor directly underneath the main WordPress post editor. Live Composer is different. It lets you design pages directly on your live website so that you can see the changes that you make.
Over thirty elements are on offer including galleries, projects and the slider revolution plugin. You can also add blog posts directly onto a page. All elements are responsive so look great on mobile devices too.
Those of you who have used the Headway WordPress framework will feel right at home with Live Composer. It works in a very similar way with the edit area for elements being placed at the bottom of each page.
The plugin also includes a templating system that lets you export layouts page to page or website to website.
Editing your page design on the front end saves you from having to switch back and fourth from the layout editor and your live website. In this respect, Live Composer has an advantage over other builder plugins.
Be warned, however, that Live Composer has a steeper learning curve than other options available. It is probably going to take you thirty minutes to an hour to you start understanding how the interface works. Once you do, you should be able to design complex layouts comfortably.http://www.youtube.com/watch?v=HD2wn2d4Frw?rel=0&w=560&h=315
To get a better idea of how Live Composer works, I encourage you to check out their interactive tutorial. It walks you through how the plugin works and shows you how it can be used to create professional layouts. If you feel comfortable with its interface, you may want to give Live Composer a try as it has a lot of unique elements to choose from.
Aqua Page Builder is a free plugin that lets you create custom page layouts.
Its interface can be found in the “Appearance” section of your WordPress admin area. It works exactly in the same way as the WordPress widget interface; therefore you should feel comfortable using it very quickly.
Six elements (blocks) are included with the plugin: Text, column, clear, widgets, alerts and tabs & toggles. Developers can also add custom elements if they wish. Several theme developers on ThemeForest have done this and used Aqua Page Builder to enhance own themes (e.g. Curvette).
I found Aqua Page Builder very easy to use, however it is quite limited in features compared to plugins such as Visual Composer and Live Composer. The plugin is free to download so there is no risk in trying it out.
Drag and Drop Shortcodes is a visual page builder that features mobile friendly elements and support for third party shortcodes.
Layouts can be created directly through your post editor. In addition to the regular visual and text tabs, a new tab will be available for drag and drop. You can add columns and elements quickly using this option.
A total of thirty eight elements are available including pricing boxes, tables, Google maps and PayPal buttons. The shortcode for each element is noted to the right of each element for reference.
Although there are dozens of elements available, you will probably use the same elements and page structure frequently. If you remember the shortcode for column layouts and frequently used elements, you can quickly create custom layouts in seconds.
I was really impressed with how quick and easy Drag and Drop Shortcodes was to use. The main feature that is missing from the plugin is import and export functionality. This is not necessarily a problem as you can simply copy the shortcode from one page to another. Still, an option to save and load templates would have really saved users a lot of time.
Drag and Drop Shortcodes is one of the best drag and drop builders available. Its integration of shortcodes means that simple layouts can be created quickly without having to use the visual interface.
Themify Builder is an easy to use page builder that comes packaged with eighteen elements. It lacks elements such as social media sharing buttons, however it has all the essentials such as maps, sliders and widget areas.
It looks and feels very similar to the Elegant Builder, which is a big plus in my eyes.
Custom layouts only take a few minutes. You simply need to decide on the number of columns and drag and drop the elements into the appropriate area. Elements can then be configured and saved into the layout.
The plugin settings page allows you to disable specific elements. This is useful for removing buttons for elements that you do not use.
Themify Builder does not have a templating system or import and export functionality; however there is a duplication button available. Clicking on the “Duplicate this Page” button will create a brand new page with the same layout. It is a poor substitute for a good templating system as changes to one page do not alter others.http://www.youtube.com/watch?v=A0JrDX8tpks?rel=0&w=560&h=315
Themify Builder is quick to use and has many great layout and multimedia elements. Since there is no import or export functionality, it is not suitable for creating layouts across multiple websites.
Last up in our list is MotoPress Content Editor. The plugin uses a visual interface that allows you to see exactly how your layout will look on your website. Whilst Live Composer allows you to do this on the front end of your website, the MotoPress editor works in the backend.
The interface is unlike any other drag an drop page builder out there. It displays your layout and content in the central column and elements on the left hand side. All you need to do is drag and drop your chosen element into the page.
Twenty five elements are available across six categories. Elements include sliders, images, video, social media sharing buttons and custom menus.
Clicking on an element will make a settings box pop up on the right side of the page. This allows you to configure the element and change the margin that surrounds it.http://www.youtube.com/watch?v=t0jFJmTDqno?rel=0&w=560&h=315
MotoPress Content Editor does everything that you would expect from a drag and drop page builder including a wide variety of elements and an easy to use interface. Compared to plugins that let you create layouts through the post editor, I found MotoPress Content Editor to take a little longer to create layouts.
Using the Conductor plugin not only saves you from using any code to build your pages but also save you lots of time in building your WordPress site. It’s WordPress Customizer allows you to view all your changes in real-time, making sure you’re making the right changes to your site.
All you have to do is select your layout and then drop in your Conductor widgets as you wish, incorporating pages, posts, custom post types and more as you wish and with relative ease. You can select from various custom page layouts for any look you want, be it full-width or a magazine-style blog.
There are also various options for how to display your content. You might want it to be displayed in a list, or a table or even a grid; it’s your choice. It’s drag-and-drop feature works great with the WordPress customizer and the plugin blends in well with WordPress itself.
If you want to learn more about each of these features just go to the ‘How It Works?’ section on the plugin’s site and check out all the video explanations from there.
And the Winner is….
It is common for articles such as this to declare a winner at the end of the article. Alternatively, each plugin is given a rating out of five or ten using a pre-determined marking system that favours some plugins over others.
I do not believe that such a comparison is fair as it can give misleading results. For example, a rating system could unfairly penalise Elegant Builder for not offering as many elements as a plugin such as Live Composer. However, whilst Live Composer offers many great elements and features, its user interface means that simple layouts can take much longer to design.
At the end of the day, everyone’s needs are different. A plugin that is packed full of dozens of elements is not a better plugin if you do not need those additional features. You need to get the correct balance for you and your website.
Therefore, before you decide on a drag and drop page builder, I encourage you to step back and think of what is important to you.
- Are there specific elements that you need?
- Is the speed in which you can create custom layouts important?
- Do you need a templating system or import/export functionality?
Most developers allow you to test their plugin before you buy. This is usually available through a public demo or a free trial. If neither are available, I recommend contacting the plugin developer directly and asking for access to a demonstration of the plugin.