Page Builder WordPress Plugin, Visual Composer

(Last Updated On: July 20, 2017)

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

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 builderImagine this: In the Visual Composer editor mode you
page builder

    • Click on your Add Element button
    • Click on Row
    • Hover over new row
    • page builderClick 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
    • >page builderEvery plus sign you see in a row represents a column
    • Click a plus sign

v

  • In the resultant Elements panel, click Single Image
  • In the Single Image Settings box, make sure you have an appropriatepage builder 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

page builder

  • Click Plugins > Add New
  • Click Upload Plugin
  • page builderBrowse “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 Gridpage builder
  • page builderClick 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”
  • page builderEXPERIMENT by filling in rest of grid settings including Item Design effects
  • Click Save Changes
  • Click Update to save page
  • page builderTo 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

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

page builderAny 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 builderOccasionally 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
  • page builderGave 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.

Leave a Reply

Your email address will not be published. Required fields are marked *