Using Modules and Rows

Introduction to Rows and Modules

Video Tutorial:

Note:
See this guide for additional information about Rows: Rows – How to Edit, Move, Duplicate & Delete
See this guide for additional information about Modules: Modules – How to Edit, Move, Duplicate & Delete

What is a Module

Module is a content-based building block. Each module is designed for a specific purpose, making it simple to tailor a page to your exact needs.

Website Builder includes over 50 modules and growing, separated into several groups in the Website Builder content panel.
Modules and rows contain settings that determine how the module/row appears on the page.

Adding Module to a Page

1. In the upper-right corner, click + (plus sign) to expose the Content panel, then click the Modules tab.
2. Drag and drop a module of your choice onto the page.
   

Editing Module on a Page

1. Hover over a module that you would like to edit, and left-click on it.
2. Using tabs (e.g General, Style, Advanced) change the content, and adjust the module appearance.
   Options available will depend on the module type.
3. Click Save, to save changes.
   

Deleting Module from a Page

1. Hover over a module that you would like to delete, and click the X button (Remove).
   

What is a Row

Rows are like containers for your Modules.
You can drag and drop modules into the rows/columns to achieve the layout you want.

Rows can contain multiple column groups, which can be thought of as rows within rows.
In the following screenshot, there’s one row that has three column groups with a different number of columns in each group.

Hover over the row that you just dragged onto the page to see a set of icons that show the available actions for that row, as shown in the following screenshot.

You can:

• Move the row by clicking the Move icon and dragging it.
• Edit the settings by clicking the Row settings icon.
• Duplicate the row.
• Reset column widths for the entire row.
• Delete the row.

Adding  Rows to a Page (empty rows)

1. In the upper-right corner, click + (plus sign) to expose the Content panel, then click the Rows tab.
2. Drag and drop a row layout of your choice onto the page.
   

Adding Pre-made Rows to a Page (rows with content)

Prebuilt rows are smaller than saved layout templates but serve the same function – quick layouts that you can customize.
You can choose from dozens of prebuilt rows to add to your layout and modify as you like.

1. In the upper-right corner, click + (plus sign) to expose the Content panel, then click the Rows tab.
2. From the Group drop-down, select Ready Made Rows option.
3. Drag and drop a row layout of your choice onto the page.
   You can scroll the list of pre-built rows, show more row designs.
   You can add as many pre-built rows as you need.
   

Editing Row Settings

1. Click the Row settings icon for a row to display the Style tab.

You can make the following changes on the Style tab.

Row and content width and max width fields
In the Width field, set the row width to Full width or Fixed.

For fixed-width rows, choose a maximum row width in the Fixed width field. Maximum width means the row can become less wide when the screen size shrinks below the max width, but can’t become wider as the screen grows larger.

For full-width rows, choose whether the Content width will be Full width or Fixed. If the Content width is Fixed, choose a max width for the content.

Row height
Set the row height to one of the following values:

• Default
  The row height automatically sizes according to the row content.
• Full height
  The row fits the browser window. You can align the content to Top, Center, or Bottom.
• Minimum row height
  Set the value you want for minimum height. Use this in cases in which you want the row height to be greater than the default but less than the full browser window height. You can also choose the vertical alignment of the content in the row: Top, Center, or Bottom.

Background section
Create and style any of the following types of row backgrounds.
Each choice opens a section with settings for that type of background.

None, Color, Gradient, Photo, Video, Slideshow, Parallax

Deleting Row from a Page

1. Hover over a row that you would like to delete, and click the X button (Remove).