Tag Archives: Visual Composer

Using Visual Composer

Adding Content to a Post Using Visual Composer

Updated: January 15, 2017

The instructions in this post are for those who have the plugin:  Visual Composer added to their WordPress site.  Visual Composer is a “drag and drop” page builder plugin.  It also allows the user to create formats and special features (such as clickable buttons) without coding.  Let’s assume that you know how to make a post using the “classic mode”.  (Visual Composer refers to the regular WordPress content editor as the “classic mode”.) If you are not sure how to create posts in the “classic mode”, you might want to have a look at this post: Creating Your First Post in WordPress.

Let’s begin! Go to Dashboard Menu “Posts>Add New”.  Once you have done this, you will see a screen with “Add New” at the top.  In the white text box under these words, you can add the title of your post.

Adding Content with Visual Composer

In the next white text box (below), you can type the text of your post and add images as per Adding Images to Posts. If however, you want to make columns or buttons or something special, you can use Visual Composer to help you along. You should see three blue buttons near the top on the left.

If you don’t see these buttons, have a look at the Visual Composer settings.  You may only have pages selected as in this example (click the Role Manager tab):

You will need to click that little arrow to the right of “Pages only” to select custom and then click the “posts” checkbox.

Once you are back at your post, you need to decide which blue button works best for you.  If you click the little blocks icon, you will go to the Visual Composer website.  If you click FrontEnd Editor, you will go to the front of your website and you can edit from there.  I find it more comfortable to use the BackEnd Editor.  Click that and you should see something like this:

You need to add first rows (click + Add Element) and then columns (if you want columns).  Then inside the columns, you add a text block and images.  For more detailed tutorials, go to the Visual Composer tutorials page.

The first thing that usually requires some practice, is remembering to hover over the area that you want to edit to activate the pencil icon (the edit icon) in a text box. In the image below, you can see there are three pencil icons (two gray, one white).

However, it is the pencil in the green box that was activated by hovering.  That is the one that you need to click to edit the contents of the box.

The second thing is remembering to save the text box or image, and then UPDATE THE PAGE.  So, you really need to think about “saving twice” in this way.

I encourage you to go to the Visual Composer tutorials page.  This plugin is really handy when you want something special, but there is a small learning curve.