Codeable info

Elegant Themes Drag and Drop Builder WordPress Plugin

Posted on by in Blog

Elegant Themes has established itself as the WordPress theme membership which offers the best value. It really is hard for other theme stores to compete with their personal membership option of $39 per year for 75 high quality WordPress designs.

Now they seem determined to claim the prize of best developer membership too. Previously, the only difference between the Elegant Themes personal membership and developer membership option was the price difference ($39 vs $89) and the inclusion of the layered Photoshop files for each of their WordPress themes. That $89 fee is now offering you much more as their developer membership now includes all Elegant Themes WordPress plugins.

They have launched with 4 plugins:

All of the above plugins have been used in an existing Elegant Theme design. The plugin I would like to look at closer today for you all is Drag and Drop Builder. The features of this plugin were incorporated into the design of their popular Convertible Landing Page WordPress theme, which I previewed at the beginning of this year. Let’s take a look at how good this visual editor plugin actually is :)

Drag and Drop Builder Plugin

Once ‘Elegant Builder’ has been installed, you will see a new area called ‘Layout Builder’ underneath the main post editor area. This is where you create your page content.

Layout Builder

Before you move on, you need to make sure you are using the WordPress visual editor. The plugin does not work if it is disabled. I always disable the visual editor when using WordPress so I spent an embarrassing amount of time trying to figure out what was wrong with the plugin and trying to work out why the icons couldn’t be dragged. I had tested it on 4 different browsers and asked Mike (owner of WP Hub) for help before realizing that it was because the visual editor was disabled (Note: we have notified Elegant Themes about this bug though in the mean time, if you experience any problems with the interface not working, check your profile page at and make sure ‘Disable the visual editor when writing’ isn’t checked).

The page builder has three sections: ‘Add a Module’, ‘Add a Column’ and ‘Sample Layout’. There are currently 17 different modules available.

To insert a module onto your page you simply drag and drop it into the canvas area underneath. Modules can be moved around, configured and deleted at any time. When the chart item is pressed on the module, the module slides down to reveal more options. The options available depends on the module you are using. For example, with the logo module you will see to either specify the logo URL or upload the logo and align the logo left, center or right. You can also define additional CSS classes here.

Logo Module

You should be able to find a module that suits your needs. There are modules for adding content to your page such as testimonials, image sliders, content sliders, lightbox images, quotes, pricing tables, video embedding and more.

Page Builder Modules

Modules for styling are also abundant. There are modules for tabbed content, box styles, list styles and paper backgrounds. New widget areas can also be created by simply dragging and dropping the widget module onto the page.

Page Builder Modules

The column section lets you add half, third and quarter sized columns. You can also resizable columns that fit into any size you wish.

Add Columns

If you add your modules to your canvas first, they will take up the full length of your page. Modules can also be dropped into any column layout you create. This means you can organise some modules into columns but not others. It’s a simple system and works very well.

Add Modules To Columns

You may get so caught up in the placement of your modules that you will forget to configure them. If you organise your layout and add modules without adding content to them, your page will be empty.

Empty Layout

The sample layout option is a useful way of seeing how modules and columns work. You simple drag and drop the ‘Sample Layout’ button to your canvas and it will populate your post or page with a huge amount of content.

Sample Layout

As a way of understanding what the plugin can do and how columns and modules can be used, the sample layout option is very useful. At the moment this feature is unfortunately very buggy. The content it adds to your page is littered with code and mistakes. They even managed to misspell the word elegant in their domain name (one module displays

The module that is displaying code in the sample layout is called ‘header’ however this module is not available in the plugin itself. Perhaps we will see a polished version of that module in a future version of the plugin.

Sample Layout Example


Many theme stores are now releasing their own plugins as well. Elegant Themes were in a good position to do this as they had already developed lots of interesting applications for their theme range. Drag and Drop Builder was borrowed from their Convertible design and was a great choice as a launch plugin.

The plugin makes it easy to create beautiful and stylish content on your posts and pages. It has many similarities to shortcode plugins such as Shortcodes Ultimate although Drag and Drop Builder has a superior visual interface for adding content to a page.

It’s common for premium themes to come with shortcode functionality integrated into the design though I have never been a fan of this as it creates a headache for the owner in the future when they inevitably change their website’s WordPress design. A plugin is a therefore a much more practical solution.

Although I haven’t tested Drag and Drop Builder on a live website, I did spend an hour or so trying some things out with it and was impressed with what it did. I’d love to see more modules introduced in the future. For example, the pricing table module works great but I’d welcome the addition of a simple table module as well. It’s something that most other shortcode ready themes and plugins have already.

The only drawback for some WordPress users may be that the plugin cannot be purchased on its own. The developer membership costs $89 and includes 75 Elegant Themes designs and 4 WordPress plugins (currently). It’s a great price though those who only want the plugin may be annoyed that they have to buy a full membership in order to get it.

I highly recommend checking Drag and Drop Builder out if you are looking to improve the way your content is displayed on your website.

If you have any questions about the plugin, please let me know and I’ll do my best to answer them :)

Link: Elegant Themes Drag and Drop Builder WordPress Plugin

Codeable info

Comments (1)

Comment by John Classick says:

It’s great when it works, but mine won’t work (with pinboard theme) and I can’t find any answers!

Codeable info