Visual Composer is the most popular, robust and extensive page builder WordPress plugin in CodeCanyon today. Developed by WPBakery in 2011, this plugin has emerged to become to #1 drag-and-drop page builder plugin for WordPress with over 29,000 sales as of 20th July 2014. It has been featured in many authority blogs such as Forbes, SitePoint and Chris Lemma.
Today we take a closer look into what the plugin has to offer and how you may benefit from it. Even if you’re a seasoned WordPress theme/plugin developer, hold on to your boots – there’s plenty in store for you too.
- Plugin Version: v4.2.3, released on 12th June, 2014
- WordPress: v3.9.1
- Theme: Twenty Fourteen
- Active Plugins: None
Working with Visual Composer 4.2.3
The basic idea of a ‘visual composer’ or a ‘page builder’ plugin is to design your site using pre-defined page elements, without having to touch a single line of code. This is intended for people who aren’t familiar with HTML or CSS. With Visual Composer you can simply drag and drop page elements into the page you’re building.
What are Page Elements?
Page Elements, also known as Content Elements are the basic building blocks that constitute Visual Composer. They can be as simple as a text column or something as awesome (or maybe complex) as a pie chart or progress bars.
There are over 40 Page Elements for Visual Builder. I’ve listed a couple of them below. For a thorough list, visit the plugin’s demo page.
A unique selling point of the Visual Composer plugin is the ability to develop custom Page Elements. All you need is an API key and you are free to develop unlimited Page Elements, which you can sell or integrate in your theme.
Designing your First Page
We’ll be designing a demo page with some random page elements. To access the Visual Composer, click on the Backend Editor.
Now there’s one fundamental thing we need to understand before we can truly realize this plugin’s capabilities.
Each Page Element (we’ll call them ‘element(s)’ from now on) must be contained in a row. A row is the base container in which an element is placed. Think of it as train set. Each train set has tracks, trees, conductors, animals, farmhouses, etc. These are your Page Elements. The base of the train set, on which you build everything is one giant container – the WordPress editor, if you will. Let’s call it the workspace.
Now, you can divide the workspace into as many rows as you wish. You start with zero rows. To add an element, you first add a row to the workspace.
Rows and Columns
Each row can be divided into a maximum of 6 columns. But that’s not a limitation – I’ll explain shortly. In the above picture, I’ve added just one row container. We can divide it into columns by selecting a Custom Layout. Let’s say I’ve picked 1/4 + 3/4. I get something like this:
Now we can add any element I wish by clicking the large ‘+’ button. All available Page Elements are displayed in a popup. Let’s say we pick a Single Image for the first section.
You can now play around with the elements and design your site.
You can clone, edit or delete rows in using the Backend Editor. You can also reorganize the rows using Visual Composer’s intuitive drag-and-drop support. Check the following image for a better understanding.
Rows within Rows – Recipe for Madness
Sounds crazy? It’s about to get crazier.
We can add any number of containers inside a row container. That’s right – a container inside a container. Theoretically speaking, this creates an infinite number of possibilities.
This also breaks the boundary of 6 columns. Suppose we want to have 12 columns in a single row. We know that 6×2=12.
First, we create a row and divide it into 6 columns.
Then, we add an element called Row in each section.
That’s a container inside a container. We then change the Layout Settings of the inner container to 1/2 + 1/2. Thus, we have 6×2 = 12 columns or containers.
And that is how you get an unlimited number of possibilities. I’m not going into an entire tutorial on how to build a page. I think this basic understanding will enable you to build anything you imagine.
Now that we have a general understanding of how to build pages, let’s take a look at some of the useful features Visual Composer has to offer.
When you design a page you like, you can save it as a page template. You can use then use it in any other post or page you like. This is very helpful for team member or FAQ pages.
This is another massive breakthrough in the Visual Composer plugin, this editing mode allows you to design the page using a real-time view. In the Backend Editor, it was essentially the old WordPress editor with the Visual Composer control panel appended. To preview a design, you had to refresh the page draft you were building.
With the Front-End editor, all your design is done in a (sort of) live preview mode. The changes you see in the page is the design your viewers will be seeing. No more using the Preview Page option.
Third Party Plugins
Visual Composer supports WordPress widgets as page elements. If you have an awesome widget you want to display, simply add it in a row container. Visual Composer also supports third party plugins right out of the box. They include:
- Contact Form 7
- Gravity Forms
- Layer Slider
- Revolution Slider
If you have any of these plugins installed, a corresponding page element will automatically appear in the popup. 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 previously created, or displays an entry box for you to add your slider ID. Talk about modularity!
You’ve probably thought this was a given feature. Well you’re right. Within the settings page you can fine tune your layout and set when exactly your content should adopt to the mobile screens.
You can use Visual Composer to build your own shortcodes and integrate it in your own commercial WordPress theme. You can even sell those themes in theme marketplaces like Themeforest or MojoThemes. This is one of the largest factors to this theme’s popularity. You can also apply to become a Visual Composer developer to develop third party add-ons.
The Skin Builder in Visual Composer allows you to make global changes to your site. Setting include colour templates, mobile screen width, grid spacing and many more. All the settings you apply in the skin builder are appended to all the elements used in the site. It is also saved in a static CSS file for faster loading.
There are two particularly advanced features of Visual Composer. These are meant for developers and experienced WordPress folks. One of them is the Visual Query Builder.
As Kevin explains in this post, “…it’s a really easy way to build custom queries and display them in a grid. A quick example where this might be useful. Let’s say you want to create a Pinterest-style page with the Masonry layout. You also want only content from a particular post type (maybe you set up a portfolio custom post type) to show up on this page. So you’d need to create a custom query that fetches the latest posts from the portfolio custom post type and displays them with the Masonry layout with three columns. The visual query builder lets you do just that…”
You can assign selective access to Visual Composer based on the User Roles in WordPress. If you have custom post types in your WordPress installation, Visual Composer can also be used for them. These settings can be found user Settings > Visual Composer.
One does not simply become #1. It takes years of endurance and tedious work to get there. The story of WPBakery is one such example and a source of inspiration for designers and developers from all over the world.
Visual Composer has a rich collection of video tutorials. When you purchase the plugin for 30 USD, you’re getting a lifetime’s worth of automatic, hassle-free updates, and premium support from WPBakery. The average rating is 4.63 out of 5, with a total of 2800+ ratings.
So what’s your thought on this plugin? Is it worth $30 of your money? Let us know!
- Buy Visual Composer ($30)
- Official Site
- Try the Demo
- Video Tutorials
- WPBakery Support
- Official Add-ons
- Become an Add-on Developer
- Commercial Theme Integration
If you enjoyed this post, make sure to subscribe to WP Mayor’s RSS feed.