Visual Composer

Visual Composer interface

Thank you for purchasing Visual Composer plugin. If you have any questions that are beyond the scope of this help document, please use our Support system to open support ticket.

To get official help with your support related questions, please open support ticket in our support page.

Intro

Visual Composer video demo

Visual Composer is very unique plugin, it will help you managing your content at the WordPress site. Nowadays many websites have complex grid layouts with columns, tabs, sliders and etc. In the past, to create that type of layouts you should be html guru or shortcodes operator ninja.

But not anymore! I've prepared a short video for you to get you up running in no time. See yourself how easy it is. Complex layouts combined with professionally designed plugins made easy!

Plugin Installation

Visual Composer installation doesn't differ from any other plugin installation process, so you might be familiar with this process already. If not, please follow instructions below.

Login to your website
Go to Plugins -> Add New
Click Upload link
Browse to the plugin's zip file (it is located in the archive you've downloaded from CodeCanyon) and choose that file.
Click "Install Now" button
Wait while plugin is uploaded to your server
Click "Activate Plugin" button

That's it!

Visit our Video Academy for detailed video tutorial on how to install Visual Composer and how to activate your copy.

Now you can go under Settings -> Visual Composer and choose either you want to use Visual Composer for pages, posts or both. Moreover, you can also use Visual Composer for custom posts too. Watch video on how to edit Visual Composer usage settings.

Concept

After installing and enabling Visual Composer plugin you can start creating your layouts. There's one concept/design pattern you should know.

In the Visual Composer editor mode you'll have "Add element" button, which you should click or drag to the working canvas, to add content block or row to your page.

Clicking the "Add element" button will show the content element selection menu. Content blocks are divided into categories (Show all, Content, Social, Structure, WordPress Widgets).

Rows

Rows are used to divide your page into the logic blocks with columns, columns later will hold your content blocks. Rows can be divided into the layouts (eg. 1/2 + 1/2, 1/3 + 1/3 + 1/3, and so on). Your page can have unlimited number of rows. To change row's position, click and drag row's drag handler (top left row's corner) and drag row around (vertical axis).

Columns

Columns are part of the row and they hold your content elements inside them. Columns can be reordered. Click and drag column around (horizontal axis). That way you can group elements in logical groups and then drag them around with your mouse (to re-position).

Watch video on how to work with rows and columns at our Video Academy.

Content Elements

This is a list of available content elements that can be placed on the working canvas or inside of the columns. Think of them as bricks. With those bricks you are building your layout. Most of the content elements have options, to set them click pencil icon. To save changes click save button.

Available Content Elements

Row
Text block
Separator (Divider)
Separator (Divider) with text
Message box
Facebook like
Tweetmeme button
Google+ button
Pinterest button
FAQ (Toggle)
Single image
Image gallery
Image carousel
Tabs
Tour section
Accordion
Posts grid
Carousel
Posts slider
Widgetised sidebar
Button
Call to action button
Video player
Google maps
Flickr widget
Raw html
Raw js
Progress bar
Pie chart
+ All default widgets that comes with WordPress

3rd Party Plugins Support

Occasionally Visual Composer is extended with support for popular third party plugins. Currently this third party plugins are supported:

Layer Slider
Revolution Slider
Contact Form 7
Gravity Form

After placing content element to the working canvas (page), click pencil icon to see options available for this particular shortcode (content element).

Templates

Templates allows you to save predefined sets of elements as a template and then reuse it when you'll need it next time. More about template system.

To take full advantage from template system, we suggest to check awesome Templatera addon for Visual Composer. Templatera is template system on steroids.

Theme Integration

If you are theme author and looking for a way to integrate Visual Composer into your theme, please take a look at this theme integration example page.

Wondering about licensing? You require to have one "extended license" and apply for transform it into "In-Stock" license for each single item you place on ThemeForest. Find out more about licenses and terms for theme authors.

Extend Visual Composer

Starting from version 3.5 Visual Composer can be easily extended with 3rd party plugins or themes. Read more advanced stuff here.

Also be sure to check this page where are collected.

Visual Composer Addons

Visual Composer offers several premium class add-ons developed by Visual Composer team and 3rd party developers.

You can extend Visual Composer by developing your own add-ons - read more about our add-on development policy

FAQ

Here you can find answers to the Frequently Asked Question about Visual Composer.

I keep getting this error: "The plugin does not have a valid header"

Please make sure to unzip original file that you've downloaded. Inside of it you'll find documentation and plugin .zip file, that should be uploaded to your site. According to WordPress plugin installation instructions.

There's a new version of Visual Composer available, how can I get it and update it on my site?

Starting from version 3.6.9 Visual Composer have auto update option. Visit Settings->Visual Composer->Product License and fill in required credentials. After that you will be able to use automatic WordPress updating mechanism. When new version of Visual Composer will be available, you should click "Update Visual Composer now" link under Visual Composer in WP Dashboard->Plugins page.

Please note: this will work only for users who purchased Visual Composer directly, if Visual Composer came integrated in your theme, then ask your theme provider to update Visual Composer for you or purchase license directly from us to get free automatic updates.

To update Visual Composer from older version, please follow this steps. First, login to CodeCanyon and under your profile click Downloads link. Re-download Visual Composer and extract it. Now navigate to the Plugins menu in your WordPress admin area. Deactivate Visual Composer, delete it. And upload new version that downloaded few seconds earlier. Activate Visual Composer.

When trying to update I receive message ‘Update Package not available’

Native WordPress Updates page is looking for latest updates on wordpress.org and receive nothing regarding Visual Composer. Instead there are two options what to do.

If you want manually update VC – go to Plugins/Installed plugins and choose ‘Download from CodeCanyon’.

If you want to set automatic update – first go to Settings/Visual Composer/Product License. Fill in all required fields, press ‘Save’ and then ‘Activate’. After that go to Plugins/Installed plugins and instead of ‘Download from CodeCanyon’ you will see automatic update notification. Click the link for update to get installed.

Can I update Visual Composer if I have purchased it in the theme?

In order to receive latest updates of Visual Composer you need to have separate license which you can buy via CodeCanyon. Otherwise you need to wait for your theme author to update Visual Composer and provide you newest version.

It is also important to mention that our support system is for those who have purchased Visual Composer directly. If you have purchased it within a theme, you should contact your theme author for support.

Can I insert 3rd party shortcodes?

Yes. In the WYSIWYG editor you can insert [shortcodes] as usual. Basic scenario: Insert Text Block from Content Elements section, click Edit button and in the editor, enter your shortcode or place it between existing text content.

Another option for adding 3rd party shortcodes is use Shortcode Mapper - available starting from version 4.1.0, which allows adding any type of shortcode to the element list for easy reuse. Watch video on how to use shortcode mapper.

There are also way to add your own set of shortcodes (in case you want to extend Visual Composer or working on your theme). Please check advanced documentation page and (this is something that should be done by php developer).

How to deactivate and reactivate license?

You can deactivate Visual Composer license under Settings->Visual Composer->Product License tab, where you will find "Deactivate" button.

If you have activated Visual Composer on your server and deleted all files afterwards. You don’t have to worry - just install Visual Composer once again on the same domain/directory, go to Settings->Visual Composer->Product License tab, fill in all fields (Envato Username, Secret API Key, Visual Composer License key) and press "Activate" button.

How to reduce vertical space between rows

Starting from version 3.6 you can visit Settings->Visual Composer -> Design Options section and adjust vertical spacing between elements. For earlier versions (3.5.5 and lower): Insert this css code in your theme's style.css file or custom css area (if your theme has one). And change default 35px value.

body .wpb_content_element, body ul.wpb_thumbnails-fluid > li, body .last_toggle_el_margin, body .wpb_button { margin-bottom: 35px; }

Starting from version 4.1 you can use built in Design Options to control margins, borders and paddings of rows, columns, images and text. Watch video tutorial on how to use element design options.

How to manage CSS with Visual Composer?

Visual Composer offers several ways for users to interact with CSS:

First: You can access "Settings->Visual Composer" and go to "Design Options" tab where you change default color and margin/padding settings for content elements. Watch detailed video tutorial.

Second: Under "Settings->Visual Composer->Custom CSS" tab you can add your own custom CSS style rules. Watch detailed video tutorial.

Third: You can add custom CSS rules for exact Page or Post. In the Page or Post edit window you will see CSS button on the right top side above Visual Composer window, click it to open form where you can place custom CSS rules for this particular page or post. Watch detailed video tutorial.

Fourth: If you wish to style particular content element differently, then you can add class name for exact element on your Page or Post by entering it in the "Extra CSS Class name" in the edit window of your element. Important: you can not add CSS code within "Extra CSS class name" field directly - this field is for class name only. CSS code should be stored in the proper place (your theme css files, custom css field in VC settings page, etc.) Watch detailed video tutorial.

Fifth: To override class names that are applied to Visual Composer content elements you should use WordPress add_filter("vc_shortcodes_css_class").

I have a layout that I created with Visual Composer and now I want to "clone" it for use on the other page/post, how can I do that?

Great question! You can create a "Template" and then insert it on any other page. Here's how:

Design your layout.
Select "Save current page as a Template" from "Templates" menu.
Enter template name.
Next, open (or create new) page where you want to place that template.
Select your template from the "Templates" menu.
It will be appended to the current page.

Another way. Switch to Classic mode and copy shortcodes that Visual Composer generated for you, create new page and paste them and switch to Visual Composer mode. You should see your layout copied.

Also make sure to check out "Templatera" exclusive addon for Visual Composer.

Can I add my own shortcodes sets?

In short - Yes. Please check advanced documentation file (this is something that should be done by php developer). Or if you are not so familiar with PHP/WP coding, check our new Shortcode Mapper under the Settings->Visual Composer->My Shortcodes section.

After clicking Visual Composer button I see spinning icon for indefinite time...

Make sure you are running latest WordPress version.

I'm trying to install Visual Composer, but WordPress is saying "The package could not be installed. No valid plugins were found."

Please make sure to unzip original file that you've downloaded. Inside of it you'll find documentation and plugin .zip file (that should be uploaded to your site). Watch detailed video tutorial.

Content is not saved after the post/page update

First thing to check. Visit your profile page (Users->Your profile) and make sure that "Disable the visual editor when writing" is unchecked.

Call to undefined method WP_Error::resize()

Make sure you are running WordPress 3.5+

WP Admin menu looks bad (distorted)

Most likely this is happening due to the pagespeed plugin installed on your server. Try adding this into your .htaccess file:

ModPagespeed off

Outro

Thank you for your purchase. If you have any questions that are beyond the scope of this help file, please use our Support system to open support ticket.

Michael, WPBakery

Don't be shy - join us on Facebook. WPbakery website · Portfolio · Twitter @wpbakery