Rows & Columns Overview

Rows and Columns form the backbone of how layouts are constructed within the Fusion Page Builder. Recognizable by their vertical dark bars, Rows are built to contain Columns (horizontal dark bars labeled with fractions indicating their width), and the individual Elements (horizontal bars) that are placed inside of the Columns. Rows can be re-ordered by dragging-and-dropping them into position.

Using Fusion’s 12-column Bootstrap-based responsive grid, you can easily add new rows, resize Columns to between 1 and 12 Columns wide, and nest Rows inside of Columns to create more complex layouts.

Editing a Row or Column

Editing Columns

To edit an existing Column on a page, click the pencil icon aligned along the right-hand side of the Column.

Alternatively, click the three dots along the left-hand side of the Column (the Column Options button) and choose “Edit” from the menu that appears. A modal window will appear containing all of the options for that particular Column. Column options are split into two tabs: Advanced and Style.

Editing Rows

To edit an existing Row on a page, click the pencil icon below the three dots on the vertical bar of the Row.

Alternatively, click those above three dots (the Row Options button) and choose “Edit” from the menu that appears. A modal window will appear containing all of the options for that particular Row. Row options are split into three tabs: General, Advanced, and Style.

Learn More About the Row Element Options

Column Advanced Options

In the Advanced tab, the “Style” option allows you to choose a style for the Column. Light–which is active by default–will inherit globally set text color. Dark will adopt text color set within the Column for headlines and links, which is useful for when you have a dark background color set and want to customize the colour of headlines or links so that the text displays legibly within the Column.

Adding a New Row

To add a new Row, simply click the white plus button at the bottom of the vertical bar on each Row. Clicking this button will add a new Row beneath the existing one. Once added, you may drag-and-drop it anywhere throughout the page.

Nested Rows

One Row can also be nested inside of an outer Row. To do this, click the lightly coloured bar with the plus button at the bottom of any Column and choose the Row Element. This will insert a new Row inside of that Column, which exists inside of an outer Row.

Adding a New Column

To add a new Column, click the dark plus button located inside of the empty area of a Row. If you have added a new Row, the entire Row will be empty and clickable.

If you are editing an existing Row, look for the area(s) where there are no vertical bars or other content being displayed. In this area there should be a dark plus button; click this button and a Column will be added to fill that space.

Resizing a Column
Fusion is built upon a 12-column Bootstrap-based grid. Columns within any page on a site that uses Fusion can therefore be adjusted to any width between 1 and 12 Columns wide, which allows for essentially limitless layout options.

On the far left and right of every Column there are small vertical indicators that can be clicked and dragged to adjust the width of the Column. Click and drag one of these to roughly the new width you’d like the Column to span; once you release your click the Column will reconfigure itself to the closest width possible in relation to the underlying 12-column Bootstrap-based grid. The fraction displayed in the middle of the Column will also updated, so if your Column spans 8 of the 12 columns in the grid, it will display “8 / 12”.

Deleting a Row or Column
Deleting a Row will also delete all of the Columns and Elements within it. And deleting a Column will delete all of the Elements within it.

Deleting a Row
Within the “Row Options” menu that is accessible by clicking on the three dots icon at the top of each Row’s vertical bar, click the “Delete” option to remove the Row from the page.

Deleting a Column
Within the “Column Options” menu that is accessible by clicking on the three dots icon along the left-hand side of each Column, click the “Delete” option to remove the Column from the page.

Moving a Row
Rows can be dragged-and-dropped to any position above, below, or within other Rows on a page. To move a Row, simply hover your cursor over any area of the Row that isn’t the Row Options, Edit Row, or Add Row buttons on the top and bottom of the Row’s vertical bar. Your cursor should change to a four-way arrow. Then, click and drag the Row to wherever you want on the page.

Moving a Column
To move a Column, simply hover your cursor over any area of the Column that isn’t the Column Options, or Edit Column buttons on the far left and right of the Column’s horizontal bar. Your cursor should change to a four-way arrow. Then, click and drag the Column horizontally to wherever you want inside the Row it is contained within.

Columns can be dragged-and-dropped horizontally to any position within the Row they are contained within. Columns cannot be moved from one Row to another; if you want to take the Elements of one Column and place them into another, add a new Column to the new Row and individually drag-and-drop the Elements into it instead of the Column itself.