How to use the Visual Page Builder

Learn how to use the Visual Composer Page Builder plugin.

Installing Visual Composer

If you haven’t already installed the Visual Composer, please install by following these step.

Goto the WordPress Admin > Appearance > Install Plugins > Locate Visual Composer > Click Install

Getting Started with Visual Composer

Getting_Started_with_Visual_Composer.png

To start using Visual Composer, Add New or Edit an existing Page, Portfolio, Post or any other Post type.

Once the Page or Post is loaded, If you can not see buttons in the diagram above, goto WordPress Admin > Visual Composer > General Settings > Role Manager > Post Types ( assuming you’re administrator ) > Ensure the Post type you’re using the Visual Composer on is Checked e.g. portfolio

Backend Editor

BACKEND_EDITOR.png

If you’re creating a new page, clicking the Backed Editor button will display a screen similar to the one in the diagram above.

  1. Clicking these buttons will add an Element to the page.
  2. Clicking these buttons will load or create a Template ( See below )
  3. The Add a Text Block will add a Text Block element to the page, this is one of the most common elements you’ll need
  4. Add Custom CSS to this page only
  5. Enter Full Screen Mode
  6. Enters the Frontend mode

Frontend Editor

Frontend_Editor.png

The Frontend Editor button enters the Frontend editing mode, this allows you to add Elements in real-time.

As you can see from the diagram above, you can now Add / Edit Elements in real-time and see exactly how the page will look once you’re done editing. This removes most of the guess work.

  1. Clicking these buttons will add an Element to the page.
  2. Clicking these buttons will Load or Create a Template ( See below )
  3. The Add a Text Block will add a Text Block element to the page, this is one of the most common elements you’ll need
  4. Add Custom CSS to this page only
  5. Enter Full Responsive Mode – See how the Page will look on a Mobile device
  6. Enters the Backend Editor mode

Editing Elements

Editing_Elements.png

Once you’ve added an Element has been added to a page, to edit that Element, simply rollover it and icons will appear for you to select. See the diagram above for reference:

  1. The Pencil Icon is the Edit Element button
  2. This icon represents Columns ( Only available on Row Elements )
  3. The + icon represents Add Element
  4. This icon represents Duplicate Element
  5. The trash can represents Delete Element
  6. Use this icon to Drag the Element to a new position
  7. Once you click the Edit button, the Element Settings will appear in a new window

Create a Template

Create_a_Template.png

If you have created a series of Elements which you would like to use for other posts or page, you can create a Template from that Page or Post. This will save you time and keep your posts or pages consistent.

To create a Template, follow these steps – see diagram for reference:

  1. Whilst editing the post or age you wish to create a Template from, click the Templates Icon
  2. Give the Template a Name e.g. My Portfolio Template
  3. Click Save Template

Load a Template

Load_a_Template.png

If you wish to load a Visual Composer Template you’ve created or load one of the default Templates, create a new post or page and follow these steps:

  1. Click the Templates Icon,
  2. Goto the Default Templates tab
  3. Search for your Template e.g. My Portfolio Template
  4. Hover over your Template
  5. Click the + icon or template name to add the template to the post