Print

Understanding Sections, Rows and Modules

Table of Contents

In 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.

More about Sections.

 

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.

More about Rows.

 

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.

More about Modules

 Quick Layout Tool

Selecting the Quick Layout Tool in the block toolbar will switch the layout of your block between the different options for your specific block template.
You can choose to view by wireframe view, zoom out, desktop, tablet or phone view so you can adjust the look based on the devices.

A webpage editing interface with text options. A red arrow points to a toolbar for editing elements.

 

There you have it!

To recap, you can edit most elements by hovering over them and clicking on the cog icon. To edit text, click and type. Each module must sit inside a row, and each row must sit inside a section. You can even drag and drop any element! So if you need to move something, it’s as easy as grabbing it with your mouse and dropping it where you want it to go. To delete an element, hover over it and click on the trash can icon. To copy an element, hover over it and click on the duplicate icon. Easy!

Pin It on Pinterest