Drag and Drop Shortcodes – WP Visual Page Builder


Drag and Drop Shortcodes is a great WP plugin with intuitive drag&drop interface and lot of elements to choose from, like: Accordions, Stats Counter, Knobs, Alert Boxes, Animation Box, Price Boxes, Progress Bar, QR Code, Service Boxes, Tabs, Team Member, Map, PayPal Buttons, Member Only Content, Tooltip, YouTube, Vimeo and self hosted HTML5 video…

With resizable and draggable sections and columns you can create any layout you want, animate column content, add parallax or video section background and many many more which lets you to create remarkable things even with mediocre or default theme.

Spice up your content and draw visitors attention to the point! Animate entrance of site elements so your site looks modern and fresh. Use modern parallax effect on sections and with professional look impress even more!

This fantastic plugin lets you create content of pages and post simply, using drag and drop interface, without messing with code. There is no need to remember any shortcode, every attribute is accessible from pop-up modal windows and forms. It is so easy even child can do it :)

If you are advanced user there is something you will like – in Text editor highlight shortcode and press Add/Edit Shortcode button, and shortcode will be loaded in modal window form. First plugin with shortcode editing!
Also all content generated with Drag and Drop is immediately added in Text content and vice versa, this way all content is available to other plugins e.g. SEO plugin.

Admin Demo

Try live admin demo
Username/Pass: demo/demo
        or         Watch video presentation

Click Drag and Drop tab, then Add Section, and enjoy exploring numerous possibilities and combinations!
In Text editor use Add/Edit Shortcode button above content editor to open modal dialog. For shortcode editing select (highlight) shortcode in content editor and click Add/Edit Shortcode button. Selected shortcode will pop-up in Shortcode Editor so you can easily tune it to your likings.

Great Features

  • The Most Intuitive Drag and Drop Interface
  • Visual – Text – Drag and Drop Seamless Transition
  • Parallax Effect on Section Backgrounds
  • 3rd Party Shortcodes Support
  • All Shortcodes / Elements are Fully Responsive
  • Almost All Elements Can Have Entry Animation
  • Select (Highlight) Shortcode To Edit It
  • Fully Translation Ready
  • All Major Browser Supported
  • Valid HTML5 And CSS3
  • Documentation
  • Customer Support
  • Easy To Use

Real example in themes

In those themes you can check what can be done with this plugin. Also, if you purchase any of those themes you will get Drag and Drop shortcodes plugin bundled with them.


  • Accordions – with sliding animation and plus/minus sign change on expansion or collapse
  • Alert Boxes – 4 styles – Info, Warning, Error and Success, each with icon and close button; Animated on close
  • Animation Box – Using the Animation shortcode, you can animate any content, including other shortcodes! With dozens of effects and options your creativity can go wild! Flip ‘em, bounce ‘em or subtly fade them in; You have the control!
  • Columns – AB-Shortcodes uses a very clever system when it comes to columns. The whole page is made up out of grid with 12 columns, all you have to do is decide how many columns your content will span. That gives you an ultimate control over your content!
  • Dividers – visually separate content with dividers. Each can have Go To Top text and/or icon, so when you click it it slides to top of the page
  • Code – if you need to show source program code here is this shortcode; It highlights syntax and show your code in best way, with line numbers
  • Pre & Raw – if you like to printout HTML code or some shortcode code you can use this shortcodes, so code is shown and not executed, either in preformatted way or inline
  • Stats Count Up – show your success in most catchy way! This shortcode will show your statistical data counting up so it will draw visitor attention immediately
  • Text Styles – from headings, highlighted text, abbreviations and tooltips to dropcaps and date shortcodes, all you need of inline text shortcodes
  • 2000+ Font Icons – Resize them, change their color, rotate them or put them in box – font icons allow you to do all that without loosing quality. Plugin includes more than 2000 font icons, from wide categories range – Business, Communication, Computer & Mobile, Design & Writing, Development, Entertainment, Food, Hosting, Menu, Misc, Multimedia, Sport & Games, Symbols, Time & Location
  • Map – show Google Maps easily anywhere you like, just place link to map inside shortcode and map is embedded
  • Member Only Content – hide pieces of content from unregistered user, encourage them to register and provide them with extra value
  • Spacer – add space of any height in pixels, this shortcode provides you extra control
  • Table Wrapper – minimal table styling, with hover and/or striped rows
  • QR Code – give your users option to scan QR code on screen to open page on their mobile device or download your contact data meCard
  • Progress Bar – animated progress / skill bar counting up to targeted value
  • Price Boxes – make modern pricing tables, present your pricing packets to customer, and attract them to most desired one with featured option. Each table can have unlimited number of features
  • Pullquote – small quote or excerpt from content, floated left or right, it draw attention to important thing in content
  • Blockquote – small quote or excerpt can be used like testimonial or to draw attention to important thing in content
  • Service Boxes – display your services with icon and small excerpt
  • Tabs – place tabs any side of content, up down, left or right – tabs come with unique sliding animations
  • Team Member – people are you biggest value, don’t hide them! Show your team members with modern overlay on mouse hover and social icon linked to team member’s social profile or email address
  • Toggle – hide large chunks of content in simple click toggle so it doesn’t affect visual appearance of site, with sliding animation and plus/minus sign change on expansion or collapse
  • Tooltip – nice tooltips on mouse hover to replace browser’s standard ones
  • Animated List – spice up boring bullet list with entrance animation and icon bullets
  • Hide Show Content on Devices – if you have content which is not appropriate for mobile or it is best looking on tablet you can easily hide or display it just by wrapping it in this shortcodes
  • YouTube and Vimeo – easily embed responsive video from YouTube or Vimeo and control all options like autoplay, loop or hiding controls and other elements
  • PayPal Buttons – easily setup PayPal one time payment or donate button
  • Force Download Button – allows you to force download instead of opening file in browser
  • Email Link – printout your email with this shortcode and it will be invisible to spam spiders
  • Other Shortcodes – sitemap, rss, children pages… there is more…

Include Drag and Drop Shortcodes in your Theme for sale

Drag and Drop Shortcodes can be easily integrated in themes via TGM Plugin Activation class. If you want to use it in your themes for sale on ThemeForest please purchase 1 extended license for each theme you publish. If you have questions about this agreement do not hesitate to contact us.

Please Rate

If you like our work please rate it.

Version History

UPDATE 3.0.3 / 27.08.2015

+ Fixed - Multiplying <br> tags on save
+ Fixed - Adding tags on tables, unordered and ordered lists
+ Fixed - Problems with layout saving

UPDATE 3.0.2 / 22.10.2014

+ Fixed - Check if saved layouts value is null
+ Fixed - Empty section on top when switching from Visual tab
+ Fixed - undefined file 404 error if parallax set but no image set

UPDATE 3.0.1 / 12.10.2014

+ New - Support for AB Simple Subscribe plugin
+ Fixed - Tabs appearing under editor

UPDATE 3.0.0 / 29.09.2014

+ Changed - Completely rewriten shortcode content parser
+ Changed - Editor replaced with native WordPress TinyMCE editor
+ Update - Support for WordPress 4.0
+ Fixed - posts_dd shortcode order and orderby dropdown
+ Fixed - Wrong textdomain in posts_dd shortcode
+ Fixed - Image Crop in media didn't work with D&D enabled
+ New - WooCommerce shortcodes support
+ New - Support for textarea field type
+ New - Option for Google Map styling

UPDATE 2.1.0 / 22.07.2014

+ New - Option for no columns margin
+ New - Option to equalize 5 columns
+ New - Support for AB Tweet Scroll plugin
+ Update - Support for AB Testimonial v.1.0.1
+ Fixed - Responsive mobile columns not 100%

UPDATE 2.0.0 / 21.06.2014

+ New - Theme can override plugin's shortcodes by copy of shortocde file in theme's dnd folder
+ Changed - Redux Options framework replaced with WordPress Settings API
+ Fixed - Date on post excerpt not working after translation
+ Changed - all shortcode names in lower case
+ Fixed - it adds empty html section when changed from Visual tab
+ Fixed - service box adds anchor when no link
+ Chenged - Tipsy balloon tooltip css moved in main css
+ New - option to change Tipsy opacity
+ New - option to enable additional font icons set (Font Awesome and WebHostingHub Glyphs)
+ New - Bottom Add Section button
+ New - Team Member - if modal window isn't enabled content will be placed under member position
+ New - Team Member - option to place social link under member position
+ New - Team Member - added option for googleplus, youtube, pinterest, github, feed, behance, blogger_blog, delicious, designcontest, deviantart, digg, dribbble, dropbox, flickr, forrst, instagram, lastfm, myspace, picasa, skype, stumbleupon, vimeo and zerply profile links

UPDATE 1.2.5 / 26.04.2014

+ New - Added class on sections with heading
+ New - CSS improvements for WP 3.9

UPDATE 1.2.4 / 09.04.2014

+ Fixed - Section background size on iOS
+ Fixed - Attributes don't load on edit

UPDATE 1.2.3 / 08.04.2014

+ Changed - GET ajax call for edit modal window replaced with POST
+ Changed - increased width of modal window
+ Fixed - preserve new lines from non Drag & Drop content
+ Fixed - saving of widgets in custom sidebars
+ Fixed - correct default list item icon

UPDATE 1.2.2 / 08.04.2014

+ New - Button for pricebox
+ New - Button colors - gray, cyan, aquamarine
+ New - Color picker for progress bar
+ New - Alternate tables style
+ New - Contact form 7 support
+ Changed - Post shortcode rewritten for better output
+ New - Added option to show shortcode content in excerpt
+ New - class option for Text/HTML shortcode
+ Changed - Tabs width brake point

UPDATE 1.2.1 / 01.03.2014

+ Fixed - Displaying code for section background image if no image selected
+ Fixed - Inserting Team Member modal after body
+ New - Revolution Slider support

UPDATE 1.2.0 / 26.02.2014

+ New - Non-member only content shortcode
+ New - Section video background option
+ New - Tab shortcode - added options for Fade, Slide and no effect 
+ New - Titles on admin side on sections and edit modal windows
+ New - Content excerpt showed on D&D element
+ New - WYSIWYG editor for shortcode content
+ New - Redux Options Framework implemented
+ New - Option to disable D&D tab on pages, posts or any custom post type by name
+ New - Saving Layouts/Page content templates for easy reuse
+ New - Option for unlimited sidebars
+ New - Widget support by Sidebar shortcode
+ New - HTML5 video shortcode support
+ New - Knob shortcode
+ New - More social networks in Follow us shortcode
+ New - Post excerpts shortcode
+ New - Options for button style on Callout box
+ Changed - If exist dnd-shortcodes.css in theme's css folder it's enqueued instead of plugin's CSS file
+ Changed - Restyled Tabs and Accordions
+ Changed - Several optimizations in JS and CSS code
+ Fixed - Content change if D&D tab open and returned on Text or Visual without change
+ Fixed - Wrong default color in edit modal window
+ Fixed - Skill bar classes not always properly added 
+ Fixed - Error of double defined functions
+ Fixed - Scroll not working in edit modal window

UPDATE 1.1.0 / 11.01.2013

+ New - Option for section title
+ New - Option for section intro and outro text
+ New - Clone section option
+ New - Image shortcode, with entry animation
+ New - Buttons shortcode
+ New - Callout box shortcode
+ New - Added class attribute on several shortcodes
+ New - Fullwidth section option, allowing section content to expand 100% of width
+ New - Team Member now has attractive modal window option
+ Changed - Google Maps embed now replaced with Maps API, a lot of new options
+ Fixed - Fixed problems with some characters in shortcode attributes like & and " 
+ Fixed - Prevent scroll to top on insert or save shortcode
+ Fixed - Stats shortcode was showing icon even if not selected
+ Fixed - Clear floating on Divider shortcode
+ Fixed - Initialization of color attribute on shortcode's child 

UPDATE 1.0.3 / 22.12.2013

+ New - Text / HTML shortcode in Drag and Drop tab
+ Fixed - disappearing new lines and multiple spaces in code and pre blocks
+ Fixed - HTML tags inside shortcodes converted to shortcodes
+ New - if no social links in Team Member shortcode, icon is not shown
+ Fixed - Stats Counter wrong counting on big numbers

** Version 1.0.0 / 20.12.2013 – Initial release


Leave a Reply

Your email address will not be published. Required fields are marked *