Way back when, we didn’t have these fancy drag and drop systems. If you wanted to move something from one side of the screen to another you had to go into FrontPage, Dreamweaver, or whatever you were using to create your website, and create a place for it to exist on the screen. Then you had to cut the content (text, image, etc.,) from its location and paste it into the new location. Then you had to resize everything until it looked the way you wanted. Every change affected everything else.
There was no “just grab it with your mouse and drop it where you want it.” Even if you were using a website theme you still had to cut and paste the elements manually. Also, our cell phones had antennas. That was 10 years ago.
Web Design After Drag and Drop
Wow. Look how far we’ve come! We now the ability to build a page by dragging an object and dropping it where we want it. Done. No coding required.
Even in the world of WordPress we’ve gone from the ability to drag and drop widgets, to drag and drop pages, to drag and drop themes.
It used to be if you wanted your WordPress layout to look different you simply found, or developed, a new theme. If you liked the theme you had and you wanted to change something with your layout you had to dig into the code and program the changes you wanted. Your other option was to hire a developer to do it for you.
Today’s drag and drop systems are more sophisticated. We can now design and build a page, or even a complete them, with drag and drop systems that are intuitive and powerful.
The HTML 5 specification contains support for a drag and drop API. Features include drag and drop of text, HTML code, HTML elements, and files.
CMS’s like Weebly use drag and drop as part of how it handles your content. In fact, it’s so integrated into the system that you can’t create content without dragging and dropping the elements for that content onto the content area.
Drag and Drop and WordPress Integration
Drag and drop has worked behind the scenes in WordPress for a while, giving us the ability to drag and drop widgets in the widget areas. It started in 2008:
- WordPress 2.7, released December 11, 2008, allowed users to drag and drop dashboard widgets.
- WordPress 3.3, released December 12, 2011, added a drag and drop uploader so media could be dragged to the upload screen.
- WordPress 3.9, released April 16, 2014 added the ability to drag and drop media directly onto the post editor. We can now upload media by dragging it onto the screen.
Drag and Drop to Build Your WordPress Page
Third party developers have added much more to WordPress through drag and drop systems for both back end and front end use. These systems, either as plugins or as themes, have given users a lot more design and development power over their WordPress websites. Here is a quick look at some of these systems.
Plugins
There are two types of plugins that use drag and drop of WordPress: those that build pages within you theme, and those that build complete themes.
Drag and Drop Page Builder
Elegant Themes’ Drag and Drop plugin provides tools so you can drag and drop content on your pages and posts. It works with any theme and literally creates a canvas where you can place elements anywhere you want on your page. You can also save it as a template so you can reuse it easily. You can create columns, boxes, toggles, buttons, tabs, sliders, etc. This is done without having to use HTML or shortcodes. Let’s take a closer look at this plugin.
Canvas
You can drop modules with or without columns. Without columns, modules will take the full width of the page. With columns, you control the size of the modules. First you add columns to your canvas. You can choose from various widths that include a 1/2, 1/3, 1/4, 2/3, 3/4, and resizable widths. The columns will be the placeholders and determine the design of your page. You can lay down a page design extremely fast. If you want something in a different location, you just drag it and drop it where you want it. Easy.
Next you add modules onto the columns. You can add a logo, paper, video, testimonial, slogan, image slider, button, horizontal bar, list, toggle, tabs, simple slider, pricing table, box, text block, widget area, or image. You simply drag them to your columns. You can rearrange them any way you want. Each element has a list of features and an editor where you can add content.
Next you add your content to each item individually.
This is a great way to quickly create advanced layouts without having to do any programming. You can nest elements and drag them anywhere to create a professional quality design within minutes.
Price
Drag and Drop is part of Elegant Themes’ Developer package. It cost $89 per year and includes access to all plugins and themes, perpetual theme updates, premium technical support, and layered Photoshop files.
VelocityPage
This plugin works with most WordPress themes and lets you develop pages on the front end. Their claim to fame is that you don’t have to use the admin panel for content creation. You still need your admin panel, but you can do a lot with the front end WYSIWYG editor to layout your pages any way you wish. It is both fast and easy. It includes some good layout tools to create columns and rows, and you can insert and edit content just by clicking on the element you want to edit. You can create the layout for the page and add content, including sign up forms, images, video, and social media, all from the front end. It is intuitive to use and the themes look great.
This is a premium plugin with three different pricing options: Basic is $97 for use on 1 site and includes basic page templates, Plus is $167 for use on up to 3 sites and includes exclusive premium page templates, and Professional is $247 for unlimited sites and includes the premium page templates.
Visual Composer
This plugin comes with both front end and back end editors. It works with any theme and will work with your existing content. You have access to 45 content elements to design your pages. You can easily add text, images, buttons, rows, separators, tabs, grids, an image carousel, image gallery, single image, slider, call to action, message box, social media buttons, pie chart, and a lot more. The back end lets you build pages with drag and drop from the admin panel. It supports multisites. All layouts are responsive.
This is a premium plugin with several license options. The Regular license is $28 and is for use by a single client and a single product that users are not charged for. The Extended license is $140 and is for use by a single client and a single product that end users are charged for.
The platform itself can be expanded even further with premium add-ons from third party developers. Add-ons include templates, shortcodes, grids, tables, WooCommerce, widgets, CSS, icons, social sharing, isometric tiles, pricing tables, logos, and much more. Prices for add-ons average around $15.
Page Builder
Page Builder is an extremely popular free plugin from SiteOrigin. It works on the back end to create responsive columns for your widgets, allowing you to use widgets as the building blocks of your pages. Page elements include buttons, call to action, list, price box, animated image, and testimonial. It includes a gallery widget so you can insert images, a regular image widget, a video widget, and a post loop to display a list of posts (as long as your theme will support it). They also have a collection of free themes you can use. Not bad for a free plugin.
Themes
Plugins are not your only option for designing custom pages with drag and drop. Today, increasingly more themes have this function built in. Here is a quick look at just a few themes with drag and drop elements. Some have drag and drop built in to the functionality so you can rearrange a few elements in the order you want, while others allow you to completely build your layout by dragging and dropping modules anywhere you want.
Convertible
Elegant Themes’ Convertible lets you build your pages with drag and drop using the included builder. You can drop modules onto the canvas and resize and rearrange them any way you want. You can create advanced layouts using columns and nested elements without have to use shortcodes. Modules include buttons, image sliders, lists, ribbons headers, quotes, testimonials, paper callouts, content sliders, box styles, video embedding, toggle content, tabbed content, lightboxes for images, logo, tables, and more.
Landing Page Builder
The drag and drop system works exactly the same as the Drag and Drop Page Builder plugin. You add columns and place modules in the columns. You can drag and drop the modules and columns to create any layout you wish. When you’re done you get a layout that looks professional without having to use a single line of code.
Convertible is part of the $69 package that includes 87 themes, perpetual theme updates, and premium technical support.
Nexus
Another theme from Elegant Themes that features drag and drop is Nexus. You can build your homepage by dragging and dropping elements on the grid. You can add, remove, and re-arrange modules in any order you want.
Homepage Builder
The modules appear in the Nexus Homepage Builder tab. Modules include Recent Posts, Popular Posts, Recent Reviews, and Recent Posts From Several Categories. Simply drag and drop them in any order you wish. You can delete them too. There are also 5 Layout Builder widget areas that you can drop widgets into.
Nexus is part of the $69 package that includes 87 themes, perpetual theme updates, and premium technical support.
Divi
Elegant Themes’ ultimate drag and drop theme is Divi. At its core, Divi is a page builder. You can choose not to build your own custom layout with Divi and instead use one of the built in templates. You can keep the template as is, or customize it to your heart’s content.
Divi gives you the tools to design your pages from the back end entirely by drag and drop. You can drag and drop rows, column, and modules anywhere on the screen you want. You simply drag the rows and columns where you want and then drop modules onto them. Rows and columns are used to design the layout, and modules are used to add your content. You can use the modules with or without the columns, but just like the plugin, columns allow you to control their size.
Modules are the building blocks that build pages in Divi, and there are many of them. They include header, menu, slider, portfolio, map, blog, login, text, pricing table, call to action, bar counters, sidebar, contact form, toggle, divider, shop, countdown timer, accordion, testimonial, video, blurb, tabs, gallery, and a lot more.
Let’s take a look at how it works.
Creating a Custom Page in Divi
Creating custom pages is simple. On your page, select Use Page Builder. You can then start inserting columns or choose from templates.
Next, click on Insert Modules and pick what you want.
Now you can drag the modules anywhere you want.
You can also choose from one of 32 predefined layouts and then start inserting modules. You can drag and drop every element and module to make the page anything you want it to be. You can save your layout as a template so you can use it again. Using Divi is easy and intuitive. It doesn’t take much time at all to get the hang of laying out your pages and making changes.
Divi is currently Elegant Themes’ most powerful and advanced theme. It’s part of the $69 package we offer as well.
Ultimatum
Ultimatum does its magic in the back end, allowing you to drag and drop elements to create your page. You build the page layout with rows and columns and then drop WordPress widgets in those areas. It will let you use any widget in any location. The list of features is extensive. It lets you do extensive CSS editing by making selections on forms.
Just choose font styles, colors, sizes, and so forth from drop-down lists and you can see the results of your selections on the screen immediately. You can set up built in layouts by using shortcodes and it comes with many custom widgets that include sidebars, menus, breadcrumbs, search, custom loop, comments, tags, forms, sliders, custom content, and lots more. You can also import and export your designs. It’s compatible with WooCommerce, BuddyPress, and bbPress, too. Oh, and it is responsive as well.
There are two lifetime licenses. The Starter license is $65 and can be used on unlimited domains. It includes support for a single domain, access to the members section, and 10 premium plugins. The Professional license gives you much more bang for the buck. It’s $125 and includes all the features of the Starter license, plus support for unlimited domains, theme/template exporter, loop builder, BuddyPress, bbPress, WooCommerce, and a mobile Web app builder.
Wrapping Up
The world of Web development and design is easier and more intuitive thanks to drag and drop systems. These systems greatly simplify web development and put it in the hands of the masses. At the same time, they create more intuitive design systems for developers, saving them time, simplifying design, and improving the bottom line.
Drag and drop has come a long way since it was first integrated into the WordPress widget layout structure. It has gone from rearranging a few modules to designing complete layouts. It is becoming more popular and is sure to improve the way we build websites.
Drag and drop is here to stay and this is only the beginning. We’ve already seen WordPress add drag and drop for widgets in the sidebar. In the next few years we might see even more elements become native to the WordPress UI. But we don’t really have to wait until then, because today we have several plugins and themes that give us the simplicity of drag and drop design.
Have you tried a drag and drop plugin or theme? What has your experience been like? Did I leave out your favorite? I’d like to hear about it in the comments below!
Article thumbnail image by Jovanovic Dejan / shutterstock.com
I’m sold on Divi, and I’m just sticking my toes in the water.
Unfortunately, I’ve chosen as my first trial-by-fire assignment a re-do of a client site that someone originally did with Pagelines Pagebuilder, and I’m lost. Is there any *reasonable* way to tackle this? It’s pretty obvious we’ve moved beyond the “just change the theme” process, as there seems to be some proprietary “stuff” going on here.
Help…?
I also think Headway should have been mentioned, particularly as the article is supposedly about the evolution of D&D in general. Not just ‘how we got to Divi’.
I am an ex ET customer now using Headway, but tempted by the Divi theme as it looks like it might be useful for throwing up a quick, yet very modern site.
pagelines was really nice until they switched over to DMS and ruined the pagelines system they had in place currently.
dms was so complicated and horseshit. and they wanted a monthly fee.
I’d never go back to them. a shame too cause I spent a good deal of money on their proprietary junk.
There was a nice discussion on the blog of Chris Lema recently, about code pollution of page builders like Divi: http://chrislema.com/divi-theme-forever/ . In the comments Nick Roach said they were were working on a plugin to transfer the builder functionality of Divi to a different theme, making it possible to switch to a different theme than Divi. I don’t know the development status of this plugin, it would be nice to know. Right now, the absence of such a plugin is the main reason not to use Divi (or other page builders).
I much prefer Headway. While there are many decent systems out there, Headway had really brought it up a notch in the past couple of years. While it is a bit difficult to learn at first, it all makes sense when you use it all of the time. You can do almost anything with it.
Thanks for showing me some options.
I’m using Divi a lot right now but I like having options available for different clients.
I had not heard of Ultimatum before. I’ll take a look at there product now.
thanks again,
ernie
Nice write up on some of the D&D builders out there. Like some of the comments, obviously you haven’t covered them all. But, you have to stop somewheres 🙂
I hope it’s ok to ask this question here. There was a comment on one of your posts ( I don’t remember which ) someone had stated concern about D&D themes not being able convert to themes that didn’t have the D&D builder of the previous theme, essentially breaking the site.
I believe Nick had commented that elegantthemes was working on a plugin (or the likes) that would enable changing from Divi to a non Divi theme with out it breaking the site. Is there any more information on this? Because this would be something that not many D&D themes are able to do.
Cheers,
Here’s footage of an early version of a page builder, from back in February 2011, long before page builders became popular. http://www.screenr.com/zlb
The drag and drop feature in WordPress is absolutely brilliant! I can’t even remember what it was like before they added it. That being said, Divi is fine but I advise you to check out others. I don’t believe the article is slanted and perhaps ET can expand on this on a later date.
I use Divi, VC and Headway. I want to see Divi Front End Editor like they have in Visual Composer or Headway
Divi is my favourite theme for developing in WordPress. So much so that I really dread the thought of maintaining older sites developed using ‘premium’ themes or themes built using frameworks.
Development is really fast and really intuitive. I have a site running OptimizePress for lead-in pages but I now use Divi for these as OP is simply unintuitive and each change requires too many edits.
Similarly I have a site running Salient which is an excellent theme that produces fantastic looking pages. The problem is the shortcode mess it produces. Letting end-users update this site is a nightmare. With Divi they simply need to be shown the basics and off they go. I’m really impressed by what some of my IT-illiterate clients have created using Divi.
Thank you Elegant themes
Hi guys,
I use the siteorigin builder a lot and I know that they are preparing for a new release that will be awesome. I heard 🙂
Bart
Divi drag and drop page builder is the best at the moment when aesthetic, flexibility, customization, and support are compared though has her cons just like others. No doubt, the founding father of drag and drop was HeadWay, and I’d have been a darling user but their refusal to answer my mail and keep tabs on my request ends my quest to use the framework and then I choose ET, I saw a brighter side of life WP. Thanks Brenda for posting this…
Cheers.
Nice post, Bust most like Divi and Visual composer
Only issue I have with the drag and drop themes like Divi is that you can NEVER change to a different theme. Your content is stuck in these proprietary little cubicles, and the other themes won’t recognize it. I figured this out prior to deploying my first Divi site, and I will always be careful to notify clients of this crucial information.
This flies in the face of the idea that WordPress layouts are separate from the content, to where you can switch themes at any time and completely re-do the look of your site.
This is subjective, but it seems like Divi has so much coding going on that it might not be as lightning-fast as a simpler option. Maybe someone can correct my impression; it is not scientific.
It does make a pretty nice site, though – just not sure if I want to renew my subscription or whether to stick with more traditional WordPress themes. On the other hand, Divi makes such nice-looking sites that perhaps it is a moot point.
You have a point there but we can’t expect Divi to be backwards compatible with themes that have far less options, features or container types.
Maybe some kind of content export option could be a solution to preserve the content in the cubicles.
I do not agree with Colin. The article is pretty neutral and describes the majority of the drag & drop templates and plugins out there, at least the most prominent ones.
I tried headway and it just wasn’t for me, i tried siteorigin and although the idea is good it feels like something is missing, in fact I tried almost every drag & drop systema out there, includen pagelines which I find so difficult to use it’s disturbing, not to mention it’s a slow hog (performance wise), it does more harm than good using it.
Since I started using divi I was able to create several websites for my customers, usability is so high and so easy at the same time that some of my clients began customizing my work to their hearts needs.
I for one agree with the article in that Divi is one of THE MOST easy and powerful drag & drop systems out there.
If you used them all you will agree. For something to be drag & drop and useful at the same time it has to be easy, otherwise there it goes simplicity.
I can do whatever i want with divi, the custom class set and the way the modules are constructed, i already tweak them out a lot, I built different modules from the standard ones just by tweaking the custom clases.. it’s just beautiful.
The only thing i didn’t like about divi is the slider but it’s so easy to not use it and install a new one that i don’t even see that as a negative.
Drag & Drop solutions have definitely come a long way, especially in the last year. There are many good solutions out there, but this article seems to be slanted towards Divi and doesn’t really give the reader the full story. I can think of 5 more drag and drop plugins that are more popular and possibly even better than those mentioned, but not a word about them. It’s disappointing to see ET slip from their usually neutral perch on this article:(
Did you skip past the first half of the article that focused on Ultimatum, SiteOrigin Builder, Visual Composer, and VelocityPage? Of course we are going to mention Divi too – this is the Elegant Themes blog 🙂
HI Colin and others,
Thanks for your comments. I agree that there was a bit of a bias towards ET especially DIVI, however maybe because it is so good. There are a lot of buggy products out there, as we all know, and most of us do not have the time to test them all. ET does have a solid record in recent years and continues to improve their offerings – so while I continue to keep my ear to the ground, I am happy to stick with a working horse, for now.
HOWEVER, one thing that was kind of glossed over in the piece was the fundamental difference between back end and front end Drag and Drop. Back end drag and drop is a huge step forward, but front end is a quantum leap over back end, if it doesn’t introduce other bugs.
Does anybody know if a front end solution is in the works for ET, or if a back end solution like DIVI can work with a front end solution like Visual composer or VelocityPage?
Thanks
An interesting article Brenda. Divi is definitely a good solution, but it’s more of a drag & drop module placer. The problem is that you can’t actually see what your page will look like until you’re finished, so you still have imagine what it will look like. Velocity page appears to be a limited at this stage, but there is another visual drag and drop plugin out there that is actually extremely good. Beaver Builder is, in my opinion, head and shoulders above all the other drag and drop solutions available right now. They have a fully working demo on their site and I think once you’ve tried it, you’ll have a completely different view on drag and drop.
After moving from HTML/CSS to WordPress I have started using Elegant themes such as Bold and Nimble. The next site I plan to build will be with Divi. using the Page Builder. The site will include a customer produced newsletter and they want to do their own updates so I need to give then access to the system.
I am however concerned that the customer may switch from the builder to the normal editor and wipe out the content. In fact I could accidentally do it myself. Is it possible to put some kind of lock switch onto the pages to prevent this or have some ability to recover the content? If not, does ET intend to develop such a feature?
By the way, when I enter my URL in replies I get the error message “Please enter a URL” despite the fact that I have just done so. I suspect that your system does not like New Zealand URLs such as mine http://www.buildbusiness.co.nz
Looking forward to you comments
I originally used Elegant Themes a few years ago and found the Page Builder to be a bit glitchy. So for more variety I switched to different themes on Themeforest. The problem with this system was each time I picked a new theme there was a new learning curve for each new drag and drop method of working and each came with a set of different pros and cons. The other problem was as a web developer many drag and drop options for me were fairly simple but trying to teach each different client a different drag and drop systems became a headache. I looked at PageLines (too complex) and Headway and Woo (too basic).
In the end I drifted back to Elegant and it was with the advent of Divi that solved two big problems. One was that the glitchy side of Elegant had gone and been replaced with a very flexible but simple design and two, clients can handle it as it is both intuitive to use and simple to learn. Last five web builds for clients have been with Divi. Like a stroppy teenager Elegant used to be temperamental and a bit annoying but it has matured and evolved into a much more professional product. I dip my toes into Themeforest now and again but find myself returning to Divi.
Congratulations on this fantastic article, every day is exceeded WordPress, offering options for building websites. It is always better to build from scratch a web, so it facilitates the creation, design time but we have to put designers, hopefully long, Greetings from Barcelona;)
Was this purely an Elegant Themes-based drag-and-drop post? I’m just really surprised there was no mention of Headway, which was probably the WordPress theme/framework that changed the game when it came to simple drag-and-drop use and design for all levels of WordPress users.
Headway maybe is the first name in Drag & Drop area. Also Pagelines should be mentioned too. There’s also another free plugin WR PageBuilder and some other premium plugins. I really want to see a comparison table of them.
Thanks for the interesting post.
Is there a reason why you did not include Thrive Themes’ Content Builder plugin? (http://thrivethemes.com/contentbuilder/)
It is extremely good, a better option than some of the plugins you mentioned IMHO. When I use a drag&drop system, that is the one I use. Highly recommended.
Dont give much for your premium tech support. You never answer and if you do its not a solution… Frustrating… Perhaps remove the term premium :/
I am sorry that you have not been happy with our support. We put a ton of effort into support, and 80% of our employees are on the tech support side. It’s perhaps our biggest focus, but it’s also a constant challenge to provide support to 260,000 customers for only $69 each. We do have a great refund policy if you would like us to refund your purchase.
I’ve always been pleased by the service your tech support provides.
But when you say that it is a challenge to provide support for 260,000 customers for $69 each per year. That comes to roughly $18,200,000.00 per year. Even if you have a percentage of customers that are life time membership purchasers or grandfathered in at a lower price point. Lets call it $10,000,000.00. I believe being a business owner and serial entrepreneur myself, that it would be easily possible to extend your support to phone, video chat, etc. without out putting a dent in your enormous profit margin. IMHO
And who’s to say that all 260, 000 customers are using the support.
Thanks for featuring SiteOrigin Page Builder on that list. I’m a huge fan of ElegantThemes, so it’s an honour to make it on. We’re working on a big Page Builder update, like Peter mentioned. We’re busy beta testing and hope to release in the coming weeks.
It’s great to see how many high-quality options users have for drag and drop page building these days. How far WordPress has come in the last few years.
Thanks for the great article. I like to work with drag & drop. Even though I have created some sites with both Frontpage and Dreamweaver, drag & drop is a huge timesaver.
I´m using Page builder by SiteOrigin on many of my sites. Very easy to work with, and after the update that is coming it´s going to be awesome. I have tested the beta version and I love it.
I have used Drag & Drop builder by Elegant themes and it´s a great plugin to. Too bad that its not responsive.
Then we have Divi! What can I say? It´s very good and easy to manage. It should come as a plugin so you can use it anywhere.
But for now, SiteOrigin is the best for me to use.
// Peter