Basic: Visual Builder introduction

Alex Ho -

Introduction

From time-to-time you may like to make edits to your website. Such examples could be text changes or image updates to pages for instance,

To do this, we will be using a functionality known as the Visual Builder, which is also referred to as ‘VB’ or ‘Divi’. 

This is the main tool that you’ll use when you want to edit the content on a page. In fact, all of your pages have been built with this tool so it also makes sense that this is also how you will go about editing the page content itself.

In this guide, we will explain the basics of using the VB, where you will learn how to: 

Enable the VB
Use the VB for basic editing
Saving or discarding changes
Disable the VB
Get in touch

Video guide

 

Written guide

Enabling Visual Builder on the page you want to edit

Firstly you will need to be logged in as an admin user. This will take you to the website dashboard area. 

If you want to edit a page, we would recommend making your edits on the actual page itself. To do so, go to the top left where you have the house icon. It will say your company name but hover over it and click 'visit site'. This will take you to the actual website.

publish-back-end.png

By default, you will be taken to your homepage. From there you can navigate to the other pages. Once you're on the page you want to edit, you will see at the top of your screen a black navigation bar that contains various links you can click on.

One of them will be represented in a circular purple button next to ‘Enable Visual Builder’. This is the button for the visual builder so click on that. It will then load.

mceclip1.png

Back to top

The Visual Builder interface

Once the VB has been loaded, the immediate difference is that when you hover your cursor over particular parts of the page content, you’ll see a coloured box highlighted.

You will find the page is split into different ‘portions’ of coloured boxes, which may either be in blue, green or grey. These are essentially the way the VB displays and organises the contents of your page; think of them as building blocks.

Blue is a ‘Section

Sections are the biggest building block in the VB. Think of them as horizontal stacking blocks that can group content into visually distinguishable areas, i.e the foundations to the displayed content. In the VB, everything you build starts with a section. 

A section will contain one or more rows.

Green is a ‘Row

Rows ‘slot’ into aforementioned sections. They help control and set the column layouts within the sections. For example, a row can be configured to display in a 3 column layout, which might be useful on your service page to display multiple services for example.

As you can imagine, rows can be used to create some very unique layouts; in particular can be used to greatly increase the variety of layouts built with VB since they create the structure that your modules are housed in.

A row will contain one or more modules, which we discuss below.

Grey is a ‘Module

Modules ‘slot’ into rows. These are content elements that you can use to build pages. Commonly you will find them as text or image modules that will display text or imagery on your pages.

Different modules serve different purposes. For example, a text module will be used to display text or a button module will be used to display a button that people can click on. 

In most cases, modules will be the main element that you will be editing.

mceclip2.png

Your website has been designed using a combination of these elements. 

Most of your content exists within the modules, which are the grey boxes. For the purposes of this guide, we will only focus on the modules. These are generally the things you might edit.

To edit a module, navigate to it and click anywhere in the highlighted grey box. A solid grey menu will then appear. In that menu, there will be an icon that looks like a metal gear/cog. This is the settings for that particular module so click on that.

mceclip3.png

The settings for that module will open as a purple menu pop-up. Depending on your screen size you may find this either too small or too big but you can change this.

In the bottom corner will be a circular button allowing you to expand or contract the menu. Additionally, if you click the top of the menu, by holding your mouse you can drag it about your screen so it can be in a better position.

Let's focus on a text settings module in this example. Here we have its module settings open and you can see functionality that works very much like a word processor. You will already see the text of the page within the body.

To change this you can:

  • simply type in your new text in the body [and/or deleting the text]
  • copy and paste from a word document or email

mceclip4.png

Any changes you make you will see being changed on the page itself. This is very useful because while thechanges are not actually saved as of yet, you can see how they will look on the page before you do.

Back to top

How to save or discard changes

Once you’ve done your changes, you have two options. In the bottom corners of the settings menu, you will see a red button with an ‘x’ [bottom-left] and a green button with a tick [bottom-right].

If you want to confirm your changes, click on the green button.

Your changes will be confirmed for that module and the settings menu will disappear. You will need to do one final step to save. 

Once you confirm changes, click on the purple circular button in the bottom-centre:

Upon clicking on the green tick, you will need to do one final thing in order to fully save your work. 

In the bottom-centre of your screen, you will see a circular purple button with 3 dots in it. Clicking on it will open some options. To save your changes, click the green ‘save’ button in the bottom right [or  use the keyboard shortcut cmd + (mac) or ctl + s (PC)]. 

divi

This will then save all changes you made to the specific page. Each module you edit will have its own module settings so in essence they are independent of each other. By clicking this save button, you will save across the entire page.

It feels like you have to save twice. The VB periodically auto-saves your work, however it’s best to do a final manual save before exiting the VB. 

Once the button stops spinning, you will know your work was saved. You can then click ‘Exit Visual Builder’ on the top toolbar to exit.

If you want to cancel your changes, click on the red button.

Your changes will be discarded for that module and the settings menu will disappear. You can then leave the VB without anything changes being saved.

save

Back to top

Exiting the Visual Builder

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

mceclip5.png

One final note is that  sometimes when you attempt to leave, you may get a message saying you have unsaved changes. If you made some changes but not fully saved, the VB is very good at recognising this. It will attempt to remind you of this.

mceclip6.png

You still have the same two options:

  • Discard & Exit - if you do not wish to save any changes you made
  • Save & Exit - if you wish to save any changes you made

No matter what option you chose, the menu will disappear and you will exit the visual builder.

Get in touch

Hopefully that gives an overview of how the visual builder works and how to use it. In other guides, we will focus on other things you can do with the visual builder. 

For now, we trust this guide has helped but if you have any questions, please get in touch at: support@practiceweb.co.uk

Back to top

Have more questions? Submit a request

Comments

Powered by Zendesk