# Visual Composer

From WPBakery Knowledge Base
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.

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

That's it!

On Visual Composer settings page (Settings->Visual Composer), you should select content types where Visual Composer should appear. Now you are ready to go. Create new post/page and switch to the "Visual Composer" mode.

## 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).

### Content Elements

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

1. Row
2. Text block
3. Separator (Divider)
4. Separator (Divider) with text
5. Message box
6. Facebook like
7. Tweetmeme button
8. Google+ button
9. Pinterest button
10. FAQ (Toggle)
11. Single image
12. Image gallery
13. Image carousel
14. Tabs
15. Tour section
16. Accordion
17. Posts grid
18. Carousel
19. Posts slider
20. Widgetised sidebar
21. Button
22. Call to action button
23. Video player
24. Google maps
25. Flickr widget
26. Raw html
27. Raw js
28. Progress bar
29. Pie chart
30. + 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:

1. Layer Slider
2. Revolution Slider
3. Contact Form 7
4. 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.

## 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.

## Visual Composer Addons

1. Templatera – Template Manager for Visual Composer
2. Easy Tables – Table Manager for Visual Composer

## FAQ

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

### 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->Updater and fill in required credentials. After that you will be able to use automatic WP updating mechanism.

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.

### 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; }

### 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.

### 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:

1. Design your layout.
2. Select "Save current page as a Template" from "Templates" menu.
3. Enter template name.
4. Next, open (or create new) page where you want to place that template.
5. Select your template from the "Templates" menu.
6. 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.

### How can change background color for Tabs, Tours and Accordion elements?

Starting from version 3.6 you can visit Settings->Visual Composer -> Design Options section and adjust color options for available elements. For earlier versions (3.5.5 and lower): To do that you will need to override default CSS rules. This is easy, open your theme style.css file (or another file wherr your css rules located) and place this snippet in it:

    body .wpb_content_element .ui-tabs .ui-tabs-nav li,
    body .wpb_content_element .ui-accordion .ui-accordion-header {
        background: #ff0000;
    }

    body .wpb_content_element .ui-tabs .ui-tabs-nav li.ui-state-active,
    body .wpb_content_element .ui-accordion .ui-accordion-header.ui-state-active,
    body .wpb_tabs .ui-tabs .ui-tabs-panel {
       background: #0000ff;
    }

    body .wpb_content_element .ui-tabs .ui-tabs-nav li:hover,
    body .wpb_content_element .ui-accordion .ui-accordion-header:hover {
      background: #00ff00;
    }

This will re-color background to red color, change hex value to your color.

### 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).

### 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).

### 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

Retrieved from "http://kb.wpbakery.com/index.php?title=Visual_Composer&oldid=559"
Categories:

- WordPress plugins
- Visual Composer

##### Personal tools

- Log in

##### Plugins

- Visual Composer
- Templatera

##### Themes

- Kube
- Sphere
- Photik
- SupaFlex
- Architectos
- New Horizon
- Lightning
- Simplic
- Photoshot

##### Links

- WPBakery Portfolio
- Support Page
- Community Forums

##### Toolbox

- What links here
- Related changes
- Special pages
- Printable version
- Permanent link