© 2021 Cultiv8 Creative

Row & Column Layouts

Row layouts: full width and fixed width

When you create a row in Page Builder, you can specify whether the row is full width or fixed width. If you set the row to full width, you also have a choice of whether the row content is full width or fixed width.

Here’s a screenshot of some rows to illustrate the three choices of row width and content width. To keep it simple, the margins and padding on rows, columns, and modules are all set to 0px. See the description of each row in the following section.

Work with rows

The Page Builder row layout options are available on any page that you create with Page Builder. They can be accessed in one of the following ways:

In the upper right corner, click + (plus sign) to expose the Content menu, then click the Rows tab.

To begin working on a new layout, drag and drop a row layout of your choice onto the page. Mouse 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.

  • Move the row by clicking the Move icon and dragging it.
  • Edit the settings by clicking the Row settings icon.
  • Duplicate the row.
  • (Page Builder 2.x): Reset column widths for the entire row or Reset row width, which resizes the row to its global setting.
  • Delete the row.

Set the style for the row

Click the Row settings icon for a row to display the Style tab. You can make the following changes on the Style tab:

  • Set the row width to full width or fixed. For full-width rows, you can set the row content width to full width or fixed. If you modify these settings, they override the default settings they get from the theme and from Tools > Global Settings.
  • Set the row height to Default (automatically sizes according to the row content) or Full height (fits the browser window). If you set it to full height, you can align the content to top, center, or bottom.
  • Create and style various types of row backgrounds, such as color, image, or video.
  • Add a row border.
  • Override default settings for text, link, and heading color.
Example Of Changing Text Color On The Row Instead Of In The Module

Suppose your default text color is black, but you want a dark background for your row, so all the text in that should appear in white. By setting text color on the row, you don’t have to set it for each module. In addition, when you move modules around, any module moved into that row will automatically have the right color text.

Advanced row settings

On the Advanced tab, you can:

  • Change the row margins and padding.
    See the Related Article for basic information about margins and padding.
  • Choose whether to display or hide the row depending on device size.
  • Add a CSS ID or class value for the row.

Column layers, module layers, and child columns

*In Page Builder you cannot have rows within rows, but you can construct complex layouts with columns.

In any row, you can have multiple vertical layers of parent columns, child columns, and modules. Here are some diagram examples of a single row with various configurations of layers and columns.

In Figure 1, there is one column inside the row, and the column contains three module layers. You can have any number of module layers within a single column, but only one module in each layer.

Figure 1: One column with three module layers

If you want to more than one module in a layer, add a new column for each module. In Figure 2, there are two column layers in the row. The first layer has one column and the second layer has two columns.

Figure 2: Two column layers with one column in the first layer and two columns in the second layer

Note: You can have a maximum of 12 columns in a layer. You can have as many module and column layers in a row as you like.

A column within another column is considered a child column. In Figure 3, there are two module layers and then a layer with two child columns.

Figure 3: Two module layers and a third layer with two child columns

Note:You can have a maximum of four child columns in a layer. You can have as many layers of child columns as you like.

You can also have a single child column in a row with module layers. In Figure 4, there are two module layers and then a layer with one child column. Why would you want to do this? Usually, it’s because you want to add a background color or image to the child column but you still want the modules and the child column in a single parent column (perhaps to add another background color or to line up content in another column to the left or right). The real example in the next section will make this more clear.

Figure 4: Two module layers and a third layer with one child column

Note:By default, when you drag a module into a column, you create a module layer. If you want to create a child column, you usually need to add one or more empty columns inside the main column before you add modules. See the Related Article below on inserting columns for instructions how to do it.

Insert Columns

  • In the Content panel, click the Rows tab and drag the column configuration you want into the layout.

Drag a module into the layout

Dragging a module into the layout automatically creates a new row with a column around it, or a new module layer, or a new column to the left or right of an existing one. In the following screenshot, an Icon module is being dragged in between two other columns. The blue shading shows where the new column will be inserted.