Visual Composer Index

Do NOT expect to learn Visual Composer in the first few hours. It is best to make a page (NOT post) called Temporary. Then practice until you know the basics.

Getting started with Visual Composer page builder

After Visual Composer has been activated, you will see Backend & Frontend editor buttons on the page. To add rows & columns:

Click Frontend Editor button

Click Content Elements icon

Imagine this: In the Visual Composer editor mode you

Click on your Add Element button

Click on Row

Hover over new row

Click on dropdown arrow to expand blue box

Click on columns icon

Higher up on the page you’ll see a Row Layout box

Click on the layout of columns you prefer

>Every plus sign you see in a row represents a column

Click a plus sign

In the resultant Elements panel, click Single Image

In the Single Image Settings box, make sure you have an appropriate image size

Click on the image box to find a picture

If you don’t have an appropriate picture in the library, click on Upload Files

Drag & drop the image from your Finder

Scroll down to find more features

For example, people can click on a picture to

Open a larger picture

Go to another web page

Make sure you experiment to see what these various features can do

Click Save Changes

A possible error

If you are frustrated: Note that sometimes the changes will not show up until after you updated a page.

If you are still frustrated: Sometimes it is best to delete the old Visual Composer page and create a new one. It can be easier than trying to find the errors in the coding.

Before you delete the old one, take a screenshot (Cmd/shift/3) of the page & copy all of the links into (preferably) a Textedit page. Also, jot down the URL and the title of the delinquent page somewhere.

After you know what you want, delete the delinquent page and create the new one.

What I did when I was super frustrated: I had been making a row and then using the Single Picture element. The picture would never show up. So, instead of using Single Picture I used Image Gallery Settings to add a single picture. Everything works perfectly now.

Another possible error

You may get this error message: The uploaded file exceeds the upload_max_filesize directive in php.ini.

That would be because your server has a set limit on the maximum size of the file than can be uploaded at one time. You can get in touch with the hosting provider and get this increased to around 5MB – 6MB, so that you can upload the zip and there is no such issue.

Also please make sure that you unzip the codecanyon – 242431…zip file and then only upload the inner js_composer.zip.

Page builder tutorials

Go to the WPBakery website. You will find lots of very short videos such as the one below. They explain different features of Visual Composer.

Buying & installing Visual Composer

For most plugins, you simply go into your WordPress dashboard & buy it. You cannot do that with the Visual Composer page builder plugin.

You go to Code Canyon & buy it. Also, you need a new license for each website on which you use it. The Code Canyon code cannot be read like regular HTML code.

Go to your Downloads folder & double-click on the zip file you just downloaded

This will create js_composer.zip

Drag & drop js_composer.zip onto your desktop

Go into the dashboard of the site in which you wish to install Visual Composer

Click Plugins > Add New

Click Upload Plugin

Browse “js_composer.zip” and open it

Click Install Now & Activate.

Visual Composer is now on your dashboard

Use the same system above for adding any addon to your WordPress website.

Media Grid addon

With the Media Grid element you can have columns & rows of SQUARE pictures. Experiment and you can add all sorts of different effects to them. By clicking on a square picture, visitors can see expanded view of picture in original shape.

Linking from a grid of pictures

I wanted to replace the picture in the upper right-hand grid with the June Sale picture below. Then I wanted to link it to the sale page.

First of all, you cannot link from an image in a Media Grid element.So, I added images to one row at a time using the Image Gallery element. I saved the page.

Then I edited the page with the regular editor rather than the Visual Composer editor. I highlighted the HTML code for the third image. Then I used the linking icon to link the selected text to the June Sale page.

Note: Every time you edit the page with Visual Composer, the linking code is erased. So, you have to add it again.

Getting started with Media Grid

Click on Add Element > Media Grid

Click grey Images icon

Select photo

Click Add Images

Keep up cycle until you have all the images you want

Give grid unique Element ID such as id=”myIcons”

EXPERIMENT by filling in rest of grid settings including Item Design effects

Click Save Changes

Click Update to save page

To edit a grid, click on “Edit with Visual Composer” at top of page

Hover over grid and you will see green editing box

Grid Builder video

Other addons

Button presets

Create a button

To make a button, go to Add Element and click on the Button icon. Experiment with the various button settings including design options.

If you wish, Button Settings can animate them to have different effects such as Zoom In and Slide in Right.

So, right now, go to Add Element > Button. Then fill in the Button Settings. Make a few buttons with different effects. Just experiment.

Any time in the future you can go to the button and click on “Edit with Visual Composer”. Then you can do such things as add a hyperlink to another page.

Create a preset

Occasionally you may want to create a preset button. That is a button that will be placed in a library to use again. When you reuse it, you can even make some minor changes to it if you wish.

Here are the points from the animated GIF in point form:

Click on plus sign where you want preset button

Click on button element

EXPERIMENT with button settings. (Here we used purple with a FadeInDownBig CSS Animation)

Hover right of button & click on green edit icon

In Button Settings, click on “Save a preset”

If you wish, you can save your preset with a special name

It will be stored in the preset library

Headers add-on

I bought the Headers add-on. This is what tech support sent me after I told them I could not set up Headers. Because I had paid for a license, I was able to log into my website and

Animated GIFs

I used Visual Composer to show a PNG file on the left and an animated GIF on the right-hand side of a row. At first the images were far too large.

To reduce their size I used GIMP to reduce the dimensions of the PNG file. I used ScreenFlow to change the animated GIF from 500×500 to 300×300. In both cases I kept the same file name but added “smaller” to the end of it.