# 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 feel free to add content to this page or email me via my profile page.

Support related questions will be answered at the Support forums.

## 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 container to the page.

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

### Layouts

This is set of "empty" columns (grid) which you can place on your working canvas. After placing it to the working canvas you can drag-and-drop content elements inside them to fill those columns with content blocks.

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.

## Content Elements

1. Text block
2. Twitter widget
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. Tabs
14. Tour section
15. Accordion
16. Teaser (posts) grid
17. Posts slider
18. Widgetised sidebar
19. Button
20. Call to action button
21. Video player
22. Google maps
23. Raw html
24. Raw js

After placing this content elements to the working canvas, click pencil icon to see options available for this particular shortcode.

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

## FAQ

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

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

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

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

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.

## Outro

Thank you for your purchase. If you have any questions that are beyond the scope of this help file, please head over to the Support forums and check, may be your question is already covered there.

Michael, WPBakery

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

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

- WordPress plugins
- Visual Composer

##### Personal tools

- Log in

##### Plugins

- Visual Composer
- WPSequencer Slider

##### Themes

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

##### Links

- WPBakery Portfolio
- Support Forums

##### Toolbox

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