Page Builder Plugin, Visual Composer

What is Visual Composer?

Visual Composer is a WordPress page builder plugin. You can build any layout you can imagine with the intuitive drag and drop builder. No programming knowledge is required.

Visual Composer is not theme specific. This means you can use it with any WordPress theme without needing to make any adjustments to the existing code.

Visual Composer Index

Animated GIFs
Button presets
Buying & installing
Create a button
Getting started
Headers add-on
Help on Facebook!
Linking from an image
Media Grid
Reducing image size
Tutorials, video

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.

Click here to learn more.

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 & page builder columns:

Click Frontend Editor button
Click Content Elements icon

page builder 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.

Buying & installing:

1. Go to codecanyon.net & buy a license for Visual Composer
2. Download
3. Copy the license number from the email into a safe place
4. Go to your Downloads folder & double-click on the zip file you just downloaded
5. This will create js_composer.zip
6. Drag & drop js_composer.zip onto your desktop
7. 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

page builder

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.

page builder

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

page builder 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

Click on New > Page
Add a title and a word in the body
Save it
Clicked on Backend Editor > Plus sign > Headers
Gave me a list of all header templates I received with the add-on.

Animated GIFs

Here’s the process for embedding an animated GIF into a Visual Composer row: Add element > single image > add image > design options > theme default set to Repeat.

Reducing image size

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.

Help on Facebook!

If you are struggling, you can actually go to the Visual Composer Facebook page and message them a question.