Adding Layouts
Prerequisites:
- Administrators, complete prerequisites to enable user access to the Design tab. See Page Builder Prerequisites for details.
- The following instructions assume that the user selects and confirms a container to hold the presentation. See Setting Presentation Properties for details.
Use pre-built or custom layouts to create the grid structure within your presentation. This area contains a selection of page layouts organized by columns and sidebars. Use column and row properties to modify the width, wrapping, padding, additional classes, etc. Each layout consists of only one row. Users choose the number of columns to add to the layout. The maximum is 12 columns per row.
Users can delete or reorder selected layouts in the Design tab workspace.
Layouts contain no content; the content units contain the content. Each column within the row can contain one content unit (unless child layouts exist).
Properties applicable to layouts:
Note: In the How to Access column, use the screen captures as a guide to select objects that display specific Design Presentation pane properties areas. The highlighted (yellow) areas in the screen captures are only present for demonstration purposes and don't display as such in the Design tab workspace.
| Properties Area | Presentation Object | Description | How to Access |
|---|---|---|---|
| Row Properties | Layouts | Use these properties in conjunction with the Design Presentation pane's Layout area. Row Properties control the layout object row's padding, additional class names, and the number of available columns. | Select the outermost area (gray) inside the layout.
|
| Column Properties | Layouts |
Use these properties in conjunction with the Design Presentation pane's Layout area. Each column in the layout object's row has their own respective column properties. Column Properties control each column's width, padding, and additional class names. |
Select the middle area (white) inside the layout. Don't select the content unit itself.
|
Adding Layouts
Page Builder designers drag the layouts to the container.
To add a layout to the container:
- Click the Layout area in the Design Presentation pane.
- Choose one or both of the following steps. A bar (red) with a plus (+) button indicates where the dragged layout will drop in the Design tab workspace.
Note: Inside an existing (parent) layout, the bar indicates the drop point for a child layout. See Adding Child Layouts to Forms for details.
- Drag a pre-built layout to the checkered area in the workspace.
- Drag a custom layout to the checkered area in the workspace. The Place a New Layout dialog displays. Select the number of columns to include in this layout.
Drag Content Units Here.
- Drag a pre-built layout to the checkered area in the workspace.
- Optional: If the container holds multiple layouts, you can reorder them. Drag the desired layout to move. A bar (red) with a plus (+) icon indicates the layout's new placement in the container.
The dragged layout displays in the new location.
- Optional: Click the layout row. See the Properties table for details. Click the Row Properties area that displays in the Design Presentation pane.
Use the following fields:
Field Description Wrapping Selects a wrapper. Options include: - Default (i.e., desktop)
- Mobile Device
- Tablet
- No wrapping
Padding All Modifies the padding (px) on all sides of the row. Note: Entering a value in this field populates all Padding fields with the same value.
Top Modifies the padding (px) on the top side of the row. Right Modifies the padding (px) on the right side of the row. Bottom Modifies the padding (px) on the bottom side of the row. Left Modifies the padding (px) on the left side of the row. Additional Class Names Adds additional classes to the row. Columns Displays total columns in row. Click the Add Column icon to insert a column or click Remove Column to delete a column in the row. 
Remove Row Deletes the row (i.e., layout) from the container. Click the Remove Row icon. If the row contains content units, a dialog displays. Choose whether or not to delete mapped fields. Warning: Deleting a row deletes all nested columns and content units. The row cannot be recovered.
Click the Apply checkmark (✔) button to save Row Properties changes.
- Optional: Click the layout column. See the Properties table for details. The Column Properties area displays in the Design Presentation pane.
Note: Each column in a row has respective Column Properties.
Use the following fields:
Field Description Width Displays the width (grid units) of the column. In each row, the total width of all columns is 12. To change the column width, drag the left or right side of the column in the design workspace.
The Width field updates to reflect the changes.
Note: If the row contains one column, the column width cannot be modified.
Padding All Modifies the padding (px) on all sides of the column. Entering a value in this field populates all Padding fields with the same value.
Top Modifies the padding (px) on the top side of the column. Right Modifies the padding (px) on the right side of the column. Bottom Modifies the padding (px) on the bottom side of the column. Left Modifies the padding (px) on the left side of the column. Additional Class Names Adds additional classes to the column. Click the Apply checkmark (✔) icon to save Column Properties changes.
Note: To remove a layout from the container, choose one of the following steps.
- Click the row and select Row Properties in the Design Presentation pane. Click Delete Row.
- Drag the layout to the Design Presentation pane.
Page Builder deletes the layout.
Next Steps: Add Content Units to insert and edit field or component units.