CMS 10.6 Adding Row Layouts


Use pre-built or custom row layouts to create the grid structure within your presentation. The accordion menu Design option's Row Layouts section contains a selection of page layouts organized by columns and sidebars. Use column and row properties to modify the additional CSS classes, padding, etc. Each layout consists of only one row. Users choose the number of columns to add to the row layout.

Added row layouts contain no content. The content units will contain the content. Each column within the row can contain one content unit (unless child layouts exist).
To add a row layout to a Page Builder presentation:
  1. Expand the Design accordion menu option in the Design tab.
    The Row Layouts section displays.
  2. Choose the row layout to add to the presentation. Options include:
    Row LayoutDescription
    Single ColumnA single row layout with one column.
    Two ColumnsA single row layout with two columns of equal width.
    Right SidebarA single row layout with two columns. The right column serves as the sidebar.
    Left SidebarA single row layout with two columns. The left column serves as the sidebar.
    Custom Layout

    A single row layout with a custom column count. After you add the Custom Layout, Page Builder immediately prompts you to enter the number of columns to add to the row layout.

    Each row layout allows a maximum count of 12 columns.

    After adding the layout, you can modify the column count and other settings within Row Properties. You can modify the column count, no matter if you add a pre-built row layout or a Custom Layout. See CMS 10.6 Setting Row Properties for details.
  3. Press and drag the row layout from the Row Layouts section to the presentation canvas grid within the Design tab workspace.
    A bar (blue) displays to indicate where you can drop the row layout in the canvas grid.
    If the canvas grid holds existing row layouts, then more than one bar displays. Bars display directly in the canvas grid and in columns of existing row layouts. You can move row layouts to make them siblings of other row layouts, or you can nest row layouts within columns as child layouts. See CMS 10.6 Adding Child Layouts to Forms for details.
  4. Drag and hover the row layout over the bar in the canvas grid, and drop the row layout when the bar displays the following text.
    Drop row layout here

    Drop Row Layout Here

    If you dropped a prebuilt layout, then the row layout displays in the canvas grid. If you dropped a Custom Layout, then the Place a new layout dialog displays.
  5. If you dropped a Custom Layout, then complete the following steps.
    1. Use the slider to select the number of columns that the custom row layout will hold.
    2. Select Place to confirm the column number and close the dialog.

    Place a New Layout Dialog

  6. Optional: Presentations can hold multiple row layouts. Repeat the steps to add row layouts as needed.
  7. Optional: If the presentation holds multiple layouts, you can reorder them. See CMS 10.6 Moving Row Layouts for details.
  8. Optional: You can edit the properties of columns and rows to add additional CSS classes, padding, columns, and more. See CMS 10.6 Setting Row Properties and CMS 10.6 Setting Column Properties for details.
  9. Save changes when you finish by selecting Save in the Design tab toolbar.
    Always save after making Page Builder presentation changes. Otherwise, the system will not preserve your new changes.

Page Builder displays row layout(s) added to the presentation canvas grid in the Design tab workspace. The Row heading lists the total columns contained within the individual row layout, and the Column heading displays on each column within the row.

Row Layout in Page Builder Presentation

Next Steps: CMS 10.6 Adding Content Units to insert and edit field or component units in row layout columns.