Have questions? I can help!
Understanding Modules
What are Modules?
Modules are used to house content and create the layout of a page. Every image, space, piece of text and link is part of a Modules. You can choose from the wide range of block templates such as:
- Text: headings, body, columns
- Image: grids, sliders, image & text
- Content: banners, info, testimonials, pricing, FAQ, quotes
- Links: text, image, client gallery
- Video: sizes, banners, video & text
- Contact: contact forms & maps
- Social: Instagram feed & social links
- Other: spacers, lines, and buttons
Adding Modules
There are a number of preset modules already assigned to the page. In your visual builder, three basic elements make up most pages. They are: Sections, Rows and Modules. Sections contain Rows, and Rows contain Modules. Sections are blue (sometimes purple or red), Rows are green and Modules are Grey.
Sections
To create a new section, hover over an existing section and click the plus sign icon. A section also has it’s own set of options you can access by hovering and clicking on the cog icon. Here you’ll be able to customise things like background, colours, animation and spacing.
Rows
Within your new section, you can now create a new row by clicking on the green plus sign icon. Rows are special because they can be set to contain a specific number of columns. Rows also have their own set of options behind (you guessed it) the cog icon in the green menu. These options include: custom gutter width, spacing and various background options. You can even customise each individual column within a row by clicking on the Design tab.
Modules
Once you have your section and row set up, you can add a new module. There are many pre-made modules to choose from, including text, images, contact forms and maps.
Editing Content in Modules
Text
Making changes to text with the Visual Builder is as simple as clicking and typing.
You can edit almost any text element by clicking on it. You can even make formatting changes like text alignment, colour and font. To save your changes, click on the purple icon at the bottom of the page, and click save in the bottom right hand corner.
Images
To replace an image, start by hovering your mouse over it. A grey panel should appear with some icons inside it. Click on the cog icon. This will open a new panel with settings related to this specific element. In this new panel, look for an option called ‘Image URL’. It will already have a link pasted into the field below.
To change it to another image, click on the Upload button. You can either upload a new image, or use an existing image from your media library. When you’re happy with your changes, click on the green tick, then click save.
Other elements
You can access options for every Modification ule element by hovering, then clicking on the cog icon in the grey menu.
Here you will be able to make all kinds of changes. Remember, if you’re looking for more options, always look for the cog icon!
You can edit almost any text element by clicking on it. You can even make formatting changes like text alignment, colour and font. To save your changes, click on the purple icon at the bottom of the page, and click Save in the bottom right hand corner.
Rearrange Section, Row or Modules
Once a section, row or module has been added to a page, it can easily be moved up or down via the arrow icon in the block toolbar. You simply need to click the arrow icon and drag the block to your preferred slot on the page.
You can rearrange any section, row, or module that has the arrow button on the top left hand.
Duplicating Modules
To duplicate a section/row/module, click the Duplicate icon in the block toolbar. A clone of the block will then be inserted in the slot immediately below the original block.
You can then move the block around with the arrow icon.
Changing Visibility on Section, Row or Modules
Sometimes you need to change the visibility on any section, row or module.
Visual Builder offers the option to hide your chosen modules on specific devices. These devices and their respective sizes (viewport width) are as follows:
Desktop: 981px or bigger
Tablet: 980px and not smaller than 767px
Phone: 767px or less
Note: Modules that are hidden on a device will display at 50% opacity in the Visual Builder.
The Disable on option can be accessed in two ways.
Right-click on the module and then choose the Disable item in the drop-down list. You can toggle the devices icons to enable/disable the module visibility.
Module Settings
Open the module settings modal and go to the Advanced > Visibility. You can toggle the device checkbox to enable/disable the visibility.
Note: The option is available on all sections, rows and content modules, except for columns.
Saving Your Page
To save your changes, click on the purple icon at the bottom of the page, and click Save in the bottom right-hand corner.
Exit Visual Builder and you can view your page.