Introduction
From time-to-time you may like to make edits to your website, particularly to pages. To do this, we will be using a functionality known as the Visual Builder.
This is the main tool that you’ll use when you want to edit the content on a page, as it was the same tool used to create them. 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
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 website itself.
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.
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. 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.
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
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.
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)].
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.
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’.
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.
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
Your website was built using a tool called Divi, which makes editing your site much simpler than manipulating code. You can use the Visual Builder to make changes to your site and see the changes in real time.
First, log in to your site. Then, click on Pages. Click Edit under the page you want to edit. Then click on Build On The Front End.
Alternatively, after logging in, you can go to the front end of the page you want to edit and click Enable Visual Builder.
Once the Visual Builder has loaded, you’ll notice a coloured box outlining the different sections of the page, showing the different building blocks of your page. The outlining box’s colour indicates the building block type being used.
Click on the section you want to edit and click the Cog Icon.
If you’re editing text, a window will appear where you can alter the text on the page. Once you’ve made your edits, click the green tick box.
Then, click the purple circle with three white dots in the centre of the bottom of your screen. After that, click the green Save button that appears in the bottom right corner. You can then exit the Visual Builder.
