Visual Composer for Amazing Professional Layout

My favourite WordPress plugin

Visual ComposerMy very favourite WordPress plugin is Visual Composer. I am absolutely grateful that I discovered it.

I’m so grateful that I’m writing a review of the plugin. Without any coding knowledge you can quickly set up grids of pictures like this one.

 

Visual ComposerWithout any programming experience you can set your pictures up in a neat row. Then you can have each picture link to a web page or a YouTube video.

Visual Composer

 Adding elements

Visual ComposerWith Visual Composer you get a menu like the one above. You click on the various elements to make changes to your page.

For instance, to create the table on the right, you first add a row that has two columns. You go into the first column and add a Single Image element. That will guide you into adding the first photo that you see in the upper left-hand column.

You then go into the right column and add the Text Block element. Add some explanatory text.

Go down and add another two column row beneath your first row. Add a Single Image element and then the photo of the hanging basket. Go  into the right column and add a Text Block element. Add a title for the picture of the hanging basket.

You continue in this manner until all 4 rows are finished.

Online flyer

Visual ComposerThe above technique can be used to make excellent online flyers. Each panel in a product ad can link to a web page, YouTube video, etc.

(Click on that link to learn more about online flyers.)

How to get Visual Composer

Read all bullet points before going to the CodeCanyon website. After getting to that website:

  • Enter this into the search box: Visual Composer: Page Builder for WordPress.
  • You get large number of plugins, code & snippets.
  • Choose the one that has hundreds of thousands of units sold — likely be the first one in the list.
  • When I looked, it cost $34 USD. Considering all it can do, it is very much worth it. Visual Composer will change the look of your web pages — will look much more professional.
  • Unlike most WordPress plugins, you cannot buy this one from your WordPress dashboard.
  • To get Visual Composer, go to the CodeCanyon website.

Getting started with Visual Composer

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

 

  • Click Frontend Editor button
  • Click Content Elements icon

 

Visual ComposerImagine this: In the Visual Composer editor mode you
Visual Composer

    • Click on your Add Element button
    • Click on Row
    • Hover over new row
    • Visual ComposerClick on dropdown arrow to expand blue box
    • Click on columns icon
    • Visual ComposerHigher 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

Visual Composer

  • In the resultant Elements panel, click Single Image
  • In the Single Image Settings box, make sure you have an appropriatepage builder image size. (The image here used “thumbnail”. I always use “full”.)
  • 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

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.

 

After you’ve watched all of the videos, you can click to Back to Videos button to see even more.