How to Add Layouts | Add and reorder layouts in the container. Use Row Properties and Column properties to modify layouts.
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.
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.
Page Builder designers drag the layouts to the container.
To add a layout to the container:
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 Content Units Here.
The dragged layout displays in the new location.
Use the following fields:
|Wrapping||Selects a wrapper. Options include:
|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.
Note: Each column in a row has respective Column Properties.
Use the following fields:
|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.
Page Builder deletes the layout.
Next Steps: Add Content Units to insert and edit field or component units.