Latest Features

                        Visual Composer: A Guide To Drag & Drop Page Building

                        Visual Composer: A Guide To Drag & Drop Page Building

                        Drag & drop page builders are widely available as plugins and are built into many popular themes. They make it possible for users of all levels to make changes to the general layout of a theme, and it can make adding extra flourishes (icons, skill-bars, pricing tables, etc.) super easy. Specifically we want to introduce you to the popular page building WordPress plugin – the Visual Composer.

                        Get Visual Composer For Free! The Visual Composer plugin is included for free with the purchase of our Total WordPress Theme and it includes some great extensions for the plugin for use with the theme.

                        What Is The Visual Composer

                        Visual Composer is a fantastic plugin developed by WP Bakery that adds a drag & drop page builder to your WordPress theme. It gives you the tools you need to be able to create complex page layouts without needing to touch a single line of code.

                        How Visual Composer Works, And What It Can Do

                        It’s a plugin, so just install and activate to take advantage of all it’s wonderful features. Once activated, Visual Composer gives you control over the layout of your pages. Just add a new page, and click on the blue Backend Editor button to access the builder.

                        Visual Composer: A Guide To Drag & Drop Page Building 01

                        From here the possibilities are only limited by your (or your clients’) imagination. You can add rows, columns, buttons, text, images and so much more using all of the Visual Composer’s options. Plus there’s an option to save your layouts as a templates to be reused over & over again.


                        Visual Composer: A Guide To Drag & Drop Page Building 02

                        Included in the builder are page building elements. You can use these elements as literal building blocks for your page. First Add A Row. Rows make it possible to add columns in one click. Just hover on the yellow paragraph tab at the top left corner of your row and select a layout. The row automatically breaks into columns according to the layout you choose.

                        Page Elements

                        Visual Composer: A Guide To Drag & Drop Page Building 03

                        The next step is to begin adding your page features. Just click the Add Element button to open a pop-up menu. There are lots of options for adding text boxes, headings, social sharing, images and galleries, toggles or tabs, accordions, recent posts (which also works with the custom post types of your theme in addition to the blog posts), buttons and even sidebar widgets.

                        Also, depending on the WordPress theme and compatible plugins you are using with the Visual Composer your will see more or less page elements. The above example is from our Total Drag & Drop WordPress theme.

                        Click on any element to open the options for that element (which ranges from choosing colors and alignments, to make decisions about slider transitions or recent post categories).

                        Visual Composer: A Guide To Drag & Drop Page Building 04

                        The builder also supports four awesome third party plugins: Layer Slider, Revolution Slider, Gravity Forms and Contact Form 7. If you have any of these plugins installed, a page element will automatically appear for theme. When you choose to insert a page element for one of these plugins, Visual Composer displays a drop-down of the respective sliders/forms you’ve created, or displays an entry box for you to add your slider ID. No more copying and pasting shortcodes!

                        Drag & Drop

                        Visual Composer: A Guide To Drag & Drop Page Building 05

                        At any point in the design process you can drag & drop any row or page element to rearrange them. You can also duplicate any row or element, which makes adding repetitive content quick and easy (great for similar columns, FAQs, toggles, etc.).

                        Once you’ve created a design you love you can save it as a template. This comes in handy when creating a custom page layout or sidebar the you’d like to reuse. Just click on the Templates button, give your layout a name, and hit save. When you use your template it will automatically populate your page with the layout and elements you saved.

                        Row Options: Format, Clone & Delete Rows

                        There are three added features added to the far right corner of every row. The X can be used to delete an entire row and its contents, the Papers can be used to clone or duplicate an entire row and all of its contents, and the Pencil is used to access the formatting options.

                        Visual Composer: A Guide To Drag & Drop Page Building 06

                        Again, depending on the theme you are using with the Visual Composer the formatting options available to you may be different. While some theme developers choose to leave the Visual Composer as-is, many customize the plugin to fit the needs or style of their theme.

                        Visual Composer: A Guide To Drag & Drop Page Building 07

                        The screenshot above is from our Total Drag & Drop WordPress theme and includes all the options we’ve custom added. We chose to separate the row styling options into tabs to make it easier for users to change the backgrounds, borders, padding and other elements of each individual row.

                        Frontend Editor

                        The powerful Visual Composer now includes a frontend editor, which makes it easier than ever to get started building your own pages and layouts. The only caveat is that not all themes support the front-end editor just yet. Make sure to double check a theme’s feature list, or to contact the theme developer directly, to see if the Visual Composer frontend editor is compatible with your WordPress theme.


                        The last feature I’d like to touch on is Visual Composer’s extendability. If you happen to be an advanced coder or theme developer you can integrate your own shortcodes into the plugin. In fact, we added in our own Symple Shortcodes Premium to give Total users an additional page building elements. This gives users even more options when building pages!

                        If you’re not a coder, checkout CodeCanyon and do a quick search for Visual Composer Add-on. There are lots of great premium plugins that add extra features to the Visual Composer.

                        Visual Composer Settings Options

                        I keep referring to the Visual Composer as a page builder, but it works great with posts and custom post types as well. All you have to do is enable the option. Navigate to Settings > Visual Composer. You should see a screen similar to this:

                        Visual Composer: A Guide To Drag & Drop Page Building 08

                        The plugin will automatically display the various content types included in your WordPress theme. Just select which you’d like to use with the Visual Composer page builder. The example above is from our Total theme, which is why there are added options for portfolio, staff and testimonials (all custom post types) as well as forums, topics, reply and products (related to the bbPress and WooCommerce plugins supported by Total).

                        You can also map any shortcode plugins to the Visual Composer that you already have installed on your WordPress site. Under the settings page, click on the My Shortcodes tab at the top and click the button to Map Shortcode. This should add your 3rd party shortcodes to your composer elements. Easy!

                        See It In Action

                        Like I said, we love Visual Composer so much we built it into our top selling Total WordPress theme. Have a look at any of our Visual Composer page examples below, or checkout any of our pages on the live demo for the Total WordPress Theme. All of these were built using Visual Composer in a matter of minutes.

                        Where You Can Get It

                        Visual Composer is available on CodeCanyon if you’d like to get it yourself. It’s also been completely integrated with our premium WordPress Theme Total.

                          GET VISUAL COMPOSER