By now you should have an understanding of what the Visual Builder is and how it functions in order for you to perform any content changes. If you need a refresher, please consult the previous guides:
In the guide, we are going to discuss some of the more ‘involved’ functionality that the VB has to offer, allowing you to do more than just changing text or images.
Use the anchor links below to jump to the relevant section:
Now that we’ve covered the basic process of working with VB previously, it’s time to discuss some of the more advanced features that lets you customise your pages even more.
Enable the VB and click on any module. A grey menu will appear showing several icons you can click on. Previously we talked mainly about the settings icon when you wanted to edit the content itself. Instead, we will discuss what the other options are one-by-one.
Enable the VB on a page and click on any 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.
There is quite a list of modules that you can pick and generally should be self-explanatory about what they are. However, 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 [discussed below]. This makes sure all your styles, settings and responsivity are kept the same!
If you’re not sure, it’s best to contact firstname.lastname@example.org.
Enable the VB and click on any module. You’ll notice an icon with ‘two rectangles'. 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.
In the example above, our duplicated module for the black service box appears below the original.
NOTE: To reference the above note, all existing modules would have been designed and configured by our design/production team during website development. That means it's been responsively checked.
When you copy an existing module - rather than adding one from scratch - you will also copy all of the design settings too so it will look consistent.
Enable the VB and click on any module. You’ll notice an icon looking like a 'rubbish bin'. Clicking it will allow you to delete that module, removing it from the page. Do note that there is no confirmation that a module was deleted, it will just disappear once clicked.
This can be handy if you duplicated by mistake and no longer need the copy. Or perhaps you just want to remove an outdate module from a specific page.
NOTE: Be careful when deleting modules! It can have drastic changes on how your page content looks once something is deleted.
If you delete something by mistake, you can always use the undo keyboard shortcut of “control + z” or discard all changes when you try to exit the visual builder.
Enable the VB and click on any module. You’ll notice an icon looking like a 'compass point'. This allows you to move modules about the page. If you click and hold with your mouse, you can use this to drag the module to a new place on that page, which means you can change the layout of your page.
It would be worth noting the process of actually moving modules about the page. Modules can only exist within Rows, which are the green-coloured boxes. You can only move a module if there’s an available space for it.
When you are moving a module, if there is a space for it you will see a darkened rectangle that tells you space is available to move it there. Simple release and ‘drop’ the module into its new position.
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.
We’ve talked a lot about the modules. During editing of pages, you may have also noticed that there’s a green-coloured box that normally surrounds and contains the modules. This is called a Row.
When you click on a row, the green menu that appears will contain more-or-less the same options as we have discussed with the modules.
Generally you will not need to edit the rows but one option that might be of interest is to change the column structure of a row. This allows you to edit how many modules could be displayed in a row.
Let’s imagine on your service page you have 3 blurbs [modules] detailing different services your practice provides. But in future you would like to add a fourth blurb to that row, you can change the column structure to accommodate this by selecting the option for 4-in-a-row.
In the green menu that appears there will be an icon that looks like a table with columns. This is the option to choose different layouts for your row. How does this work?
In this example, we currently have a row that is set to display 3 modules - the black blurbs - in 3 columns. Let’s imagine that you would like to add a 4th module in. If you click the change column layout option, you can select the layout to display a 4 column.
When using this option, in the menu that is displayed you can tell the current layout as it is highlighted in blue. Choose whichever option applies but as mentioned, we will select the 4 column layout. The row will change from 3 to 4.
Now all you need to do is finish your changes and save in the normal way! In this case, we can put everything we learned in this guide. We can duplicate one of the existing blurbs, edit the content of that blurb copy with the new text, then move the blurb into that available space when we changed the column layout from 3 to 4.
NOTE: As you can imagine changing the column layout will change the way the page looks. Potential issues could include readability of content, responsiveness and page flow.
If you are changing the column layout, remember to edit your changes so it is still consistent.
Hopefully that gives an overview of how to use the visual builder to change very common modules you may find on your site.
We trust this guide has helped but if you have any questions, please get in touch at: email@example.com