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.
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.
Click the Row settings icon for a row to display the Style tab. You can make the following changes on the Style tab:
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.
On the Advanced tab, you can:
*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.
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.
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.
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.
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.
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.