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
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.
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
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:
- Go to codecanyon.net & buy a license for Visual Composer
- Copy the license number from the email into a safe place
- 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
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
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
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.
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