WordPress is great, and being able to customize your web portal running with WordPress is just the icing on the cake. However, we are not all coding gurus. Heck, some WordPress lovers don't know anything about HTML or CSS. But this shouldn't stop you from customizing your WordPress theme. This is where page builders come in.
Drag and drop page builders are widely available as plugins and built into many popular themes. They make it feasible for users of all skill levels to make changes to the overall design of a theme, and they can make adding additional embellishments (icons, skill bars, pricing tables, etc.) a breeze. Specifically, we want to introduce you to our new favorite WordPress plugin for page builder - Visual Composer.
What is the visual composer?
Visual Composer is an extraordinary plugin developed by WP Bakery that adds a drag and drop page builder to your WordPress theme. We include it in our Total Multipurpose WordPress theme, but you can also see it in almost all the new best-selling products on Themeforest. It gives you the tools you need to be able to create complex page layouts without touching a single line of code.
How Visual Composer works and what it can do
It is a plugin so basically install and activate it to take advantage of all its wonderful features. Once activated, Visual Composer gives you control over the layout of your pages. Basically add a new page and you'll see new buttons so you can toggle between classic mode and constructor mode, as well as a button that will take you to the live interface editor.
From here on, the opportunities are only limited by your (or your clients') creativity. You can add rows, columns, buttons, text, images, and much more using all the Visual Composer alternatives. At the same time, there is an option to save your designs as templates to reuse over and over again.
Rows
Page creation items are included in the constructor. You can use these items as literal building blocks for your page. first Add a row. Rows allow you to add columns with a single click. Basically hover over the yellow paragraph tab in the upper left corner of your row and select a layout. The row is automatically divided into columns based on the layout you choose.
Page items
The next step is to start adding your page features. Basically click on the Add item to open a pop-up menu. There are many options for adding text boxes, titles, social sharing, images and galleries, switches or tabs, accordions, recent posts (which also works with your theme's custom post types at the same time as blog posts) , buttons and even sidebar widgets.
At the same time, depending on the WordPress theme and supported plugins you are using with Visual Composer, you will see more or less page items. The example above is from our Total Drag & Drop WordPress Theme, so there are 30 additional page builder items that we created and designed exclusively for Total. This includes custom dividers, icon boxes, milestones, carousels, and more.
Click on any item to open the alternatives for that item. Below is an example of the "options" for our Icon Box module in the Total theme. As you can see, each module can have many configurations and even several configuration tabs.
The builder also supports four amazing third-party plugins: Layer Slider, Revolution Slider, Gravity Forms, and Contact Form 7. If you have any of these plugins installed, a page item for the theme will automatically appear. When you choose to insert a page element for one of these plugins, Visual Composer displays a drop-down menu of the respective sliders / forms you have created, or displays an input box for you to add your slider ID. No more copying and pasting shortcodes!
Drag and drop
At any point in the design procedure, you can drag and drop any row or page element to rearrange it. Plus you can duplicate any row or item, making adding repeating content quick and easy (great for similar columns, FAQs, switches, etc.).
Once you have created a design that you like, you can save it as a template. This is useful when creating a custom page layout or sidebar that you would like to reuse. Basically click on the Templates , name your design and hit save. When you use your template, it will automatically populate your page with the layout and items you saved.
Row options: format, clone, and remove rows
There are three additional features added in the left corner of each row that can be used to clone or duplicate an entire row and all its content, add new modules, edit the columns, etc. Basically hover over any row you need to edit to access these settings:
Again, depending on the theme you are using with Visual Composer, the formatting alternatives available to you may be different. Although some theme developers choose to leave Visual Composer as is, many customize the plugin to fit the needs or style of their theme.
Frontend editor
The powerful Visual Composer now includes a frontend editor, making it easier than ever to start creating your own pages and layouts. The only caveat is that not all themes are compatible with the front-end editor yet. Be sure to check a theme's feature list, or contact the theme developer directly, to see if the Visual Composer interface editor is compatible with your WordPress theme. Our Total WordPress theme is 100% compatible with front-end editor so if your current theme is not, you may consider "upgrading" to our theme.
Extensions
The last feature I would like to mention is the extensibility of Visual Composer. If you are an advanced coder or theme developer, you can embed your own shortcodes in the plugin. We actually added in our own Symple Shortcodes Premium to give Total users additional page builder items. This gives users even more options when creating pages!
If you are not a programmer, check out CodeCanyon and do a quick search for the Visual Composer plugin. There are many great premium plugins that add extra functionality to Visual Composer and even some good free ones like our Symple Shortcodes plugin.
Visual Composer configuration options
I keep referring to Visual Composer as a page builder, but it also works great with posts and custom post types. You just have to enable the option. Navigate to Settings> Visual Composer. You should see a screen equivalent to this:
The plugin will automatically display the multiple types of content included in your WordPress theme. Basically select which one you would like to use with the Visual Composer page builder. The example above is from our Total theme, so there are additional options for portfolio, staff, and testimonials (all custom post types), as well as forums, topics, responses, and products (related to the bbPress and WooCommerce plugins compatible with Total).
Additionally you can assign any shortcode plugins to Visual Composer that you have already installed on your WordPress site. Under the settings page, click the My Shortcodes tab at the top and click the Map Shortcode button. This should add your third party shortcodes to your composer items. Easy!
See it in action
Like I said, we love Visual Composer so much that we incorporated it into our best-selling products Total WordPress Theme (included free with your purchase). Take a look at the various pages of any of our live demos of the total theme. Most of the pages you will see in our live demos were created with Visual Composer! Adding backgrounds, headers, text, images, icons ... etc. Everything is a "no brainer".
Complete guide to using Visual Composer
If you already own the plugin and are looking for a guide on how to use it, take a look at our complete Visual Composer usage guide, which will walk you through and show you how to use the plugin.
Where can you get it
Visual Composer is enabled in CodeCanyon if you want to get it yourself. It has also been absolutely integrated with our WordPress Theme Total premium (along with two other premium plugins for a total value of $ 67, which is more than what you pay for the theme).
Get Total Get Visual Composer
Let us know what you think of the plugin below. We are truly impressed with Visual Composer, and we would love to hear from you!
