How-to Add a Row
- In the content of the page click "Add here".
- Select the "Row" rendering and click "Select".
Select an existing row or click on "Create New Content" and create a new row in the Local Content folder.
- Select the row and click on the "Edit Item" icon. You can then used the various fields to set the:
- Background Color
- Various brand colors are available
- Row Spacing before and after the row
- The standard spacing between rows of different colors is Top: Large, Bottom: Large
- After you have made the changes to your row click "Save" to view the changes.
How-to Add Columns to Rows
- In the row-content of the row that needs columns, click "Add here".
- Determine the number of columns that will be added to the row.
- Determine how the columns will display on different devices and decide what # of columns display on Large (Desktop), Medium (Tablet), Small (Mobile)
- The name of the rendering will help you determine how the columns will be displayed.
- 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)
- Example: 3 col 4x4x4 (Desktop)
- Example: 2 Column 4x8push (Desktop)
- Click "Select".
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.
Related articles appear here based on the labels you select. Click to edit the macro and add or change labels.