Visual Composer: A Drag & Drop Page Builder for WordPress


We have come across a famous WordPress page builder plugin Visual Composer which is a drag and drop frontend and backend page builder that will save you tons of time working on our site content. You’ll be able to take full control of your WordPress site, and build any layout you can imagine – no programming knowledge required!

This is the first WordPress page builder plugin that gives you full control over responsiveness. It has never been easier to control how your site – or individual parts of it – behaves on different devices.

Visual Composer is already featured on Forbes, web designer, CHRIS LEMA, WPExplore, wplift™ and more top publications.

Here in this tutorial we will provide you an A-Z guide about Visual Composer, and its functionalities.

What is Visual Composer Page Builder?

Visual Composer is a WordPress page builder plugin that makes easy to create and design pages and blog posts from frontend and backend editor mode on WordPress. Visual Composer is an award winning page building tool which is currently enabled on 1+ Million WordPress sites and themes.

The move a beginner can do in WordPress is to create and design pages and posts like a pro user without typing a single piece of code and it’s all possible with Visual Composer. Visual Composer provides 40+ page building elements and tools that can help you to create any kind of blog post or page you want to promote your products and services.

You can create a product landing page, Call to action page, single webpage, media rich page with Visual Composer and within minutes. Your pages will be 100% responsive guaranteed!

Not only administrator can access Visual Composer on a single site but also the associated blog authors, editors and contributors can use Visual Composer to manage the site. Except these there are tons of premium features included inside Visual Composer.

How Visual Composer Works?

Visual Composer is a WordPress page builder plugin which controls the theme options on any WordPress site after getting installed and activated. This plugin provides 40+ effective page building elements in different categories to create, design and publish your blog post and page that can grab user’s attention with higher usefulness.

After installing and activating Visual Composer on your WordPress site, you will see a new link generated on your Admin tab calls “Edit with Visual Composer.” This is only visible on pages as default option but you can also choose posts, so that you can edit your existing blog posts with Visual Composer.

Simply click on that link and you will be brought up Visual Composer editor mode where you won’t see WordPress admin tab.

You create pages, save to drag, switch to backend or frontend mode and publish your page etc. all these can be done with Visual Composer tab options.

So, you understood how Visual Composer works, now move on what are included inside and how effectively you can use Visual Composer to create catchy blog post and page that matter your business.

What are Included in Visual Composer?

After buying Visual Composer your first step is to install the plugin and activate with license in order to get future releases from the Author WPBakery to keep your version always updated that enhances your sites health and keeps WordPress version improved.

To install Visual Composer you need to download it from official site and then download the plugin file, license certificate and purchase code (txt) file. The license certificate is given in a text file but you need Secret API key which can be found on your Envato account panel under “API Keys” section.

Learn more about Visual Composer installation and activation.

So you have installed and activated Visual Composer on your WordPress site, now access Pages −> Add New page

You will see two editor options right above WordPress default editor: Backend Editor and Frontend Editor.

Backend Editor

Backend Editor allows you to create, edit and publish your pages, posts from WordPress backend side providing intuitive page building elements and tools. Prefer to edit a page from backend simply click on “Backend Editor” button and scroll down the page a little until you reach Visual Composer.

Backend Editor

Now click on “Add Element” and you will see 49 more elements to design and create your pages that rock!

In Backend editor you will get almost all kinds of options to design your page except “Responsive preview” which is only trigger when editing pages with fronted mode. The Backend editor looks like smaller in its area comparing to the Frontend editor mode, right? But you can switch to Full screen mode to edit your page with maximum flexibility.

Learn more about Visual Composer Backend editor tool.

Frontend Editor

Frontend Editor is most wide, intuitive and flexible page editor mode that empowers your blog posts and pages with rich content and provides higher user experience. To edit your page with Frontend mode simply click on “Frontend Editor” button.

Frontend Editor

Now you’re on Frontend editor mode where you can get an advantage that you can edit your page as an administrator and watch your page as a visitor. So you can understand how effectively you can represent your content to audience and how to grab their attention providing rich content.

Learn more about Visual Composer Frontend Editor.

Visual Composer Elements

With Visual Composer you will get 49 page building elements that are divided in different categories and allow you to create pages that focus on specific visitors in your industry.

Visual Composer elements

Below are discussed few most popular elements in Visual Composer


To start editing your page “Row” option is the most integral part you begin as it provides multiple columns, clone option to replace an existing row with other row and adds multiple elements in one section.

Row Options

To add a row click on “Add Element” button and choose “Row”. To divide the row in multiple columns click on “Show row controls” and choose “Change layout.” To clone your row simply click on “Clone Row” and you will see another row created below the existing row.

If you want to delete the Row simply click on “Delete Row” icon and the “Row” will be removed.

Post Grid

Post grid is an important element to display random posts sin grid style with full-width or default layout mode. With post grid settings you can define data source post, page, attachment or any other source from your blog. You can narrow data source by categories, tags or custom taxonomies.

Choose different display styles: Show all, Load more, Lazy loading, and Pagination. In design options you can define custom css with margin, border, padding and other style properties. You can even create custom grid style to display your blog posts.

Learn how to use Visual Composer Grid element builder.

Text Block

Text block is a simple WYSIWYG editor which is as like your WordPress default editor but provides more options to control over external design defining Extra class name, CSS Box and other design properties: Border color, Border style, Border radius, Box controls and Background.

Image Gallery

With Image Gallery you can add images in slider mode with easy navigation options. There are four kinds of Gallery type: Flex slider fade, Flex slider slide, Nivo slider, and Image grid. The Image source can be Media library or External links. In addition the Gallery slider is full responsive even you can check responsiveness with Responsive preview option.


Visual Composer Templates option allows you to easily load any template in different categories like About, Accordions, Call to Action, Charts, FAQs, Feature List, Full height parallax, Landing page and more.

Visual Composer templates

To add a template click on “Templates” tab and choose “Default Templates” and you will find 60+ templates in various categories. You can easily load any template by clicking on “Plus” icon. To preview the template click on “Preview template” button and you can see the preview of the template.

Template Preview

You can also create custom template and add to Visual composer template directory.

Page Settings

Page settings option allows you change Page Title also add Custom CSS to apply custom styling on any specific section across the page.

Page Settings

Visual Composer Settings

Visual Composer internal settings are important to control user access, enable/disable custom theme design, add custom shortcodes, and activate product licensing. In general settings you can enable/disable responsive content elements, add seven types of Google fonts subsets, enable guide tours which are shown in VC editors to help you to start working with editors. You can see them again by clicking button above.

Visual Composer settings

We have arranged following articles to learn more about Visual Composer settings:

Visual Composer Extensions

Visual Compose is supported by countless plugins in Few of the most popular Visual Composer extensions include Ultimate Addon, Templatera, Easy Tables, Go Portfolio, Go Pricing, ARForms, Ajax Search Pro, Instagram Photo, Ultimate Woocommerce brand and much more.

Find more Visual Composer Extensions


Visual Composer is an ultimate page builder plugin which is to our sight the most powerful WordPress page builder than any other plugin in the market. This plugin has got many times updates from initial release fixing common bugs and errors in its functionalities and now it works with the latest version of WordPress without any issue.

Visual Composer has been installed over 1+ Million websites and still counting. Many top selling WordPress themes use this plugin to boost up theme’s performance.

We tried to provide you’re an A-Z guide about Visual Composer which can help you to decide whether to buy this plugin for your business.