Visual Composer for WordPress User Guide

Visual Composer is a Premium WordPress plugin used to design over half a million websites globally. We had originally created this handy visual composer user guide back in 2016. However a lot has changed since then as Visual Composer has re-branded to now be a plugin called WPBakery page builder. While the plugin that was originally called Visual Composer has undergone a complete overhaul and transformation. Therefore the guide that we’ve outlined in this post is no longer relevant to Visual Composer. You can find an updated here on our website for the new post titled ‘WPBakery Page Builder user guide.’

If you’d like to learn a bit more about the differences between WPBakery Page Builder and Visual Composer before making a decision on the best plugin to suit your websites needs. Then read our post title ‘What is Visual Composer and WPBakery Page Builder?‘ to understands the pros and cons of each. 

If you continue to read this post the information may not be relevant to your needs. As it refers to an outdated version of the Visual Composer plugin which is no longer in use.

May 2020

Additional Learning Materials

For more information on Visual Composer you can refer to the Visual Composer website. You can also refer to this useful video tutorial. It gives a great visual to some of the areas we’ll be discussing. Furthermore, you may also find this reference guide helpful, should there be any further information you require that we haven’t covered within this guide.

We also recommend you take a look at our WordPress Admin Area User Guide. This is designed to give you a better understanding of WordPress and it’s basic functions. Allowing you to easily navigate your way around the back end of your website. Now let’s get started.

How to Create a New Page

Let’s first start by looking at how a new page is created. If you select Pages from the left menu bar then click the button saying ‘Add New’ at the top of the page beside the Pages header. You will then be taken to a new page where you will enter the title of your new page.

You will then select the ‘Backend Editor’ button and this will open a tab where you will select the ‘Add Element’ option.

From here a pop-up will appear with lots of different buttons. These are your visual composer elements. Visual composer comes with 34 standard elements. We will cover the basic ones that you are most likely to use throughout this guide.

Visual Composer User Guide – How to add Elements

Adding a Row

The first option we must select is ‘Row’ by clicking on this button at the top of the second column in the pop-up window. Rows are the pages of your book if you like and are where your content is posted within. No content can be added until a row is added first.

You will now see your row visible and ready for editing. Firstly you will want to choose your page layout from the layout options. This is the middle tab to the left of the row. If you hover over this you will see various options including single row, 2 column row, 3 columned row and so on. Decide which one best suits your design. We have opted for the 2 column row layout.

You will then click on the plus symbols within your row to add elements.

Adding a Text Block

To add a text block simply choose this option from the Visual Composer Elements popup. Your text block will then be added and a new pop up will appear to edit this. You can add your content to the text block and use the various editor buttons to perfect your layout, paragraphing and headers and style your text block. If you scroll down to below the text block you will also find various other options to style your text and how it will be viewed on the front-end of your website.

Adding a Single Image

Images can be added to a row by clicking on the plus symbol within the empty row and then selecting ‘Single Image’ from the Visual Composer pop up. You will then click on the green plus symbol in the box that says ‘image’ above it.

This will open a new pop up with your media library of images you have previously uploaded. Either select an image from here or upload a new image. This can be done by selecting ‘Upload Files’ from the top left tab. Then choose which files you wish to upload from the relevant folder on your computer.

Once you have chosen your image and selected ‘set image’ the pop up will disappear. You will then be able to choose from other design options for your image such alignment within the row and size.

Adding More Elements to your Row and Adding a New Row

You can add additional elements to your row by selecting the plus symbol. This is the third tab along on the left of your row beside the page layout tab. You will then click on the plus symbol within the row to continue to add the relevant elements.

Should you wish to add a new row you should select the plus symbol within the dashed box below your content that’s already visible. You can then select a new row and follow the same steps mentioned previously to choose your layout and add your elements.

Adding Empty Space

A useful tool for styling your web page and adding structure is the add ’empty space’ element. This can again be selected from the Visual Composer Elements popup window and allows you to add blank space to your rows. Maybe you want to create spacing between images or between text box elements. You can decide how large you want the space to be and even what colour you want the space to be from the various options within the menu tab.

We recommend you refer to this post for more information on some of the other Visual Composer Elements we haven’t covered within this user guide.

Editing an Element

If you hover over the element within your row a green menu tab will be displayed. Each element can be edited by clicking on the pen symbol. The editing menu will then appear allowing you to make the necessary changes required.

Using this hover menu bar you can also clone elements. This is a useful tool to allow you to save time by duplicating areas and then editing them within the new element. You also have the ability to delete elements by clicking on the bin icon and drag and drop elements.

Drag and Drop Function

The Visual Composer Drag and Drop function give you complete freedom and control to rearrange your page and it’s content throughout the design process. By hovering over the element you wish to move you should select ‘Text block’ from the green hover menu. Then simply click and drag the element to the destination you wish for it to be visible in. Drag and drop is an excellent tool giving you flexibility over your website’s design.

Saving your work

Don’t forget to save every change you make throughout the design and editing process. This can be done by selecting the blue ‘Publish’ button to the right of the are you are working. You can also preview any changes you have made by clicking on the ‘Preview’ button.

Creating Posts

New posts can be added by selecting ‘Posts’ from the left-hand menu and then ‘Add New’. A new page will open for you to create your new blog post.

Firstly you will want to give your new blog post a name and also select a category for this new post to fall under. If you don’t already have some categories saved then you can add these in using the ‘add category’ button. Your post can then be written in the large text box visible below. Or if you have already written your blog post offline you might wish to copy and paste it in here. Be mindful of layout, paragraphing and headers as whatever you have on the back end will appear on the front-end of your website. You can use the various buttons to style your post as you would any word document.

Images can be added to your blog post throughout using the add media button. This has the same functionality as adding an image as an element allowing you to choose from your media library or upload a new image. Don’t forget to add a feature image to your post. This can be done by selecting ‘Set Feature Image’ from the right-hand box about one-third of the way down the page.

Finally, don’t forget to save your blog post. We suggest doing this regularly so you don’t lose any of your work. You can either save as a draft, publish your post as well or preview each new change you make on the front-end of your website.

When you are finished, remember to publish your post before navigating away from the page.

Editing an Existing Post

Posts can be editing by finding the post you wish to make changes to in the list on the ‘Posts’ page. You can also type the name into the search bar on the top right of this page to find the post you wish to edit more efficiently.

Hover over the post and then select the ‘Edit post’ option on the menu bar. The post will then open ready for editing. As before remember to save your changes by clicking on the blue ‘Publish’ button to the right of the page.

You can also ‘Quick Edit’ posts should you only have minor changes to make. This option can be selected from the same menu mentioned above and a pop-up will then appear below the post. From here you are able to make changes to the title, date, author, status and categories. As always, remember to save your changes before proceeding.

Visual Composer User Guide for WordPress

You should now have a basic understanding of how to use Visual Composer to perform basic functions and edit your WordPress website. You may have noticed that the page layouts throughout are simple, repetitive and extremely user-friendly. Visual Composer allows you to build and edit websites with no limits, one of the many reasons why it’s used by over a million people globally.

Visual Composer Support

We hope you’ve found this Visual Composer for WordPress user Guide helpful. Our aim with this User Guide is to provide a learning tool which you can look back on until you feel confident enough that you no longer need it.

If you wish to explore Visual Composer in more depth we recommend you check out this Visual Composer Video Tutorial which covers each of the topics we’ve discussed in much greater detail as well as some other, more technical areas. We also believe this reference guide is a great tool to refer back to regardless of your level of experience with the Visual Composer for WordPress plugin.

We offer a wide variety of digital services to suit your website requirements. Contact us to find out more about how we can help you design your website today.