From the front end of any page, you can click the “Enable Visual Builder” option in the menu bar at the top to launch the builder. The page will refresh, and you should begin to see parts of the site begin to highlight as you move your mouse around the page. We only need to focus on the grey sections, these correspond to the Modules which are what hold our page’s content. There are many different types of Module that can be used to build a site, typically the most important ones are Text Modules, Image Modules, Gallery Modules and Button modules.
You can click on a grey module and a set of buttons should display, the one we want to click is the small settings cog. This opens up our Module Settings popup which is where we can modify the actual content. We can see this module is a text module, as it says Text settings at the top. Across the bottom there are four buttons, discard changes, undo, re do and save changes. This won’t save the whole page’s changes, just the changes you have made in the settings window. We can also hover in the bottom right corner to resize this window.
In the middle, we can edit the content. The text section is already open, showing a what you see is what you get editor that allows us to make changes and view them in real time. For example, we can bold text, justify and change the size. This is reflected instantly on the left and can be seen fully when we save changes.
Just like text, images can be edited exactly the same way. Click onto an image and click the settings cog to load up its settings. We can see a similar popup, with Image Settings at the top this time. There is no Text section this time, instead it’s an Image section. We can click anywhere in here to load up the media library and select a new image to replace with. You could alternatively upload a new image from here, too. Select the image you want to use, then press Upload an Image in the bottom right corner to load it into your page. Once you are happy, press the tick to save your changes.
Finally, we can update Galleries in a really similar way to images, except this time we can select multiple images. Click on the gallery, then click the settings cog to open up the editor. We can see there are some images already selected. We can hover over an image and use the trash can to remove from our gallery. We can use the plus button to open up the media library and add more. You can see which images are selected by the tick in the corner and the grey highlight. Once you are happy with your selection, press Select. We have a few more options with a gallery that we can configure. Below the image selection, you can see there is an image count option, this setting controls how many images show per page. If I reduce this number, we get more pages and if I increase it, we get less or even none. To give us even finer control, we can scroll down and expand the Elements section to hide our page controls or our image titles (which I have already done).
When you are happy with your changes, press the tick on any open settings windows then use the “Exit Visual Builder” button at the top of the page. This will save and publish your changes and exit the editor.