Skip to end of metadata
Go to start of metadata

How-to Add a Row

  1. In the content of the page click "Add here".

    Screen shot of the content area

  2. Select the "Row" rendering and click "Select".

    Screen shot of the Row rendering

  3. Select an existing row or click on "Create New Content" and create a new row in the Local Content folder.

  4. Click "OK".

    Scren shot of adding a new row.

  5. Select the row and click on the "Edit Item" icon. You can then used the various fields to set the:
    1. Background Color
      1. Various brand colors are available
    2. Row Spacing before and after the row
      1. Top:
        1. Large 
        2. Medium
        3. Small
        4. None
      2. Bottom
        1. Large
        2. Medium
        3. Small 
        4. None
      3. The standard spacing between rows of different colors is Top: Large, Bottom: Large

    Screen shot of the standard row options

  6. After you have made the changes to your row click "Save" to view the changes.

How-to Add Columns to Rows

  1. In the row-content of the row that needs columns, click "Add here".
  2. Determine the number of columns that will be added to the row.
  3. Determine how the columns will display on different devices and decide what # of  columns display on Large (Desktop), Medium (Tablet), Small (Mobile)
  4. The name of the rendering will help you determine how the columns will be displayed. 
    1. Standard number of columns, size of each column, if there are pushes or pulls, if the columns are centered, and then the device type in parenthesis: # col #x#x# (Device Type)
    2. Example: 3 col 4x4x4 (Desktop)
    3. Example: 2 Column 4x8push (Desktop)
  5. Click "Select".

    Screen shot of the various column options

The Grid and Page Columns

The Grid and Page Columns

The website pages are currently divided into a 12 column grid. Below are some examples of the columns that are available within the 12 column grid.

  • 1 Column 12 All: one column that spans the full width in mobile, tablet, and desktop screen sizes.
  • 2 Column 8x4 Tablet: two columns, one larger column on the left, and one smaller column on the right in desktop and tablet. Then, in mobile screen sizes the columns stack from left to right/top to bottom and are full width.
  • 3 Column 4x4x4 Desktop: three equal columns in desktop. Then, in tablet and mobile screen sizes the columns stack from left to right/top to bottom and are full width.