Following on from the last guide Basic introduction to the Visual Builder that helps to explain how to enable and disable the visual builder, this guide will detail how to actually use it. This includes the various functionalities and options you can use to go about editing a page.
How to use Visual Builder to start editing
When you’re logged in on any page and have the VB enabled, you can click on any module [grey box] to make changes to that module. You’ll see an icon that looks like a cog or gear, which allows you to edit.
When you click on it, another window will appear allowing you more functionality.
In the example, we will be using a text module. Here we want to edit the paragraph beginning ‘cut through the noise’.
A menu will pop-up, which works just like a word processor. The process is the same, you can edit the text by:
- Typing directly into the text editor
- Copying and pasting from an external source [such as a word document]
Whichever way you choose, you’ll see the changes being applied on the web page itself. This is really useful because it lets you see how your changes will look, without you having to save or refresh. This is what your customers and visitors will see when the changes are saved.
Saving or discarding changes
Once you have made your changes, you can close the menu. You’ll see two buttons in the bottom-left and bottom-right. One will be a red ‘x’ and the other a green ‘tick’.
If you are unhappy or wish to cancel your changes, click the red 'x'. The menu will close.
If you are happy with your changes, click the green 'tick'. The menu will close.
You’ll also notice a circular purple button with three dots in it at the bottom-centre of your screen. Click this to expand options. On the right, you’ll find a further save button which you can click to save the changes you confirmed earlier. This will save any changes you confirmed on the page.
It may seem like you have to save twice, but each module on a page is independent of each other. Changes you make will only apply to that module - so when you click on its green tick, you are confirming changes for that module.
When you click on the save button, you’re doing an overall save across the page of all changes you confirmed previously.
You can then exit the VB by going to the top and clicking ‘exit visual builder’.
|NOTE: Sometimes when you try to exit, you may get a menu about ‘unsaved changes’. This is to remind you about changes made that have not been saved. The menu acts as a final reminder, so you either discard/exit or save/exit.|
Now that we’ve covered the basic process of working with VB, we can go on to talk about some of the extra, advanced features that let you customise your pages even more.
When you click on a module, you’ll notice a ‘plus’ icon. Clicking it will allow you to add new modules. A menu will appear allowing you to select different modules to add, depending on what you’re looking for.
All modules should be self-explanatory about what they are (but you might find there are some you never use at all!)
|NOTE: While you have the ability to add modules, we strongly recommend you duplicate them instead. This makes sure all your styles, settings and responsivity are kept the same.
If you’re not sure, it’s best to contact email@example.com.
When you click on a module, you’ll notice a ‘two rectangle’’ icon. Clicking it will allow you to duplicate that module, essentially copying it onto your page again. There’s no confirmation when you do this, it’ll just appear below the original.
Your copied module will be completely independent of the original, which means that any changes you make will only apply to it, and not the original one.
When you click on a module, you will notice a trash can icon. Clicking it will allow you to delete that module, removing it from the page. There is no confirmation when you do this but the module will disappear once clicked.
This can be handy if you duplicated by mistake and no longer need the copy.
|NOTE: Be careful when deleting modules! It can have drastic changes on how your page content looks. If you delete something by mistake, you can always use the undo shortcut of “control + z”, or discard all changes when you try to exit the visual builder.|
When you hover over modules, your cursor turns into a 4-headed arrow. If you click and hold, you can use this to drag the module to a new place on that page, which means you can change the layout.
When you move a module to somewhere else, you should see a darkened rectangle that tells you space is available to move it there.
|NOTE: You can only move a module if there’s an available space for it. If there's no space within the row you're trying to move the module to you'll need to change the row layout - see next step.|
Changing column structure [Rows only]
We’ve talked a lot about modules. You might have also noticed that there’s a green-coloured box that normally surrounds and contains the modules. This is called a row.
As the row contains the modules, you could potentially change the column structure. Through your pages, you may see instances where two or more modules appear side-by-side.
In the example below, you’ll notice an image on the left and text on the right. These are two modules in the same row. If you want to change the column structure, edit the row instead.
However over it and click on the button that looks like a table with three columns in it. You’ll be presented with different options for column layouts depending on your choice.
The example above has 2 columns within the row where you can add your modules. If you'd like to add a 3rd module you could select the option on the top right-hand side.
NOTE: While you can change the column layout, be careful with this as it can drastically change the page layout. Potential issues could include readability of content, responsiveness and page flow.