Basic introduction to the Visual Builder (VB)

Alex Ho -

Introduction

In this guide, we'll explain how to use the basics of the Visual Builder tool (VB). The VB is the main functionality that you’ll use when you want to edit the content on a page.

In this guide, you’ll learn how to: 

  • Enable the VB
  • Set the VB for basic tasks
  • Disable the VB

You can view the video below, but there is also a written guide should you prefer. 

 

 

Enabling the Visual Builder

Assuming you’ve logged in, navigate your way to the front end of your website by clicking your company name in the dashboard.

publish-back-end.png

This will take you to the homepage. From the homepage you can navigate to other pages. Once you're on the page you want to edit, at the top of your screen, you’ll see a black navigation bar

There're a few options - click on ‘Enable Visual Builder’.

mceclip1.png

Once you’ve clicked it, the page will reload.

Using the Visual Builder

At first, it might not look like anything’s different - but when you hover your cursor over some particular page content, you’ll see a coloured box highlighted. This may either be in blue, green or grey:

  • The element in blue is a ‘section’
  • The element in green is a ‘column’
  • The element in grey is a ‘module’

mceclip2.png

A section will contain one or more columns. A column will contain one or more modules. Your website has been designed using a combination of these elements. 

For now, we will only focus on ‘modules’ which are the elements that can be edited. Some examples of modules would be:

  • Text module
  • Image module
  • Call to action module

To edit a module click anywhere in the highlighted grey box.

A solid grey menu will appear. In that menu, there will be an icon that looks like a metal gear or cog. Click on it to go to the module settings.

mceclip3.png

The content of that module will open in a new floating window. Make any changes that you need, and then click on the bottom right corner (green tick box) to save the changes

mceclip4.png

Conversly, should you make a mistake or not wish to save anything, you can click on the red button with the 'x' to discard.

Exiting the Visual Builder

Once you’ve made all necessary changes to the page, you’re free to leave. To do so, you can close the VB in the same place you first enabled it. It should now show ‘Exit Visual Builder’ - click that to safely exit.

mceclip5.png

 

NOTE: Sometimes when you attempt to leave, you may get a message saying you have unsaved changes. The VB is very good at recognising when you make changes but forget to save.

mceclip6.png

 

Click on 'Save & Exit' to save, or 'Discard & Exit' to not save. The VB will then be closed.

Have more questions? Submit a request

Comments

Powered by Zendesk