Grid Builder
Grid builder is a flexible content area that allows you to construct multiple sections and rows of blocks on the page with custom display and layout options.
- Start by adding a row and choosing the number of columns you want in the row: one, two, three, or four columns.
- Next, assign a block or page to a column by dragging and dropping it in.
- Continue adding rows and/or sections of content to the page as needed.
When applicable, modify the display and layout options through the section settings, row settings, and/or column settings.
Custom Display Options
Section Settings
|
Section Theme |
Applies a theme to the entire section of content which spans the full width of the page. |
View |
|---|---|---|
|
Section Heading Text |
Displays heading text on the section-level when populated. | View |
|
Section Heading Text Size |
Only applicable when Section Heading Text is populated.
|
View |
|
Section Heading Text Alignment |
Only applicable when Section Heading Text is populated.
|
View |
|
Section Heading Text Width |
Only applicable when Section Heading Text is populated.
|
View |
|
Space Above Section |
Determines the spacing at the top of the section.
|
View |
|
Space Below Section |
Determines the spacing at the bottom of the section.
|
View |
|
Gap Between Rows |
Determines the amount of spacing between rows within the section. Only applicable when more than one row is used in a section.
|
View |
|
Horizontal Edge Space |
Adds the default left and right spacing around the content on smaller breakpoints. You would only want to remove the default spacing in very specific/rare scenarios. In general, this setting should remain set to Yes. |
|
|
Background Image Size |
Only applicable when a background image is assigned to the section.
|
|
|
Background Image |
Applies a background image to the entire section. Recommended width: 1920px |
Row Settings
|
Column Width Distribution |
Allows you to customize the amount of space each column in the row takes up. Only visible as an option on rows with 2 or 3 columns. For 2 column rows:
For 3 column rows:
|
|
|---|---|---|
|
Gap Between Columns |
Determines the amount of spacing between columns within the row. Only visible as an option on rows with more than 1 column.
|
|
|
Row Theme |
Applies a theme to the row of columns. This should only be used in rare scenarios when you want the same theme applied across multiple columns and you don't want it to expand the full width of the page. Otherwise, the theme is commonly set either through the block-level or section-level. NOTE: When a theme is set on the row-level, Inside Spacing must be set through each of the columns as well. |
View |
|
Row Heading Text |
Displays heading text on the row-level when populated. | View |
|
Row Heading Text Size |
Only applicable when Row Heading Text is populated.
|
View |
|
Row Heading Text Alignment |
Only applicable when Row Heading Text is populated.
|
View |
|
Row Width |
Determines the overall width of the content in the row.
|
View |
|
Vertical Alignment |
Determines the alignment when there are multiple columns of blocks in a row.
|
|
|
Background Image Size |
Only applicable when a background image is assigned to the row.
|
|
|
Background Image |
Applies a background image to the entire row (rare). Recommended width: ~1500px NOTE: When a background image is set on the row-level, Inside Spacing must also be set as well. |
Column Settings
|
Column Theme |
Applies a theme to the entire column. This should only be used in certain scenarios when you have multiple blocks in the same column that should be using a shared theme. Otherwise, the theme is commonly set either through the block-level or section-level. NOTE: When a theme is set on the column-level, Inside Spacing must also be set as well. |
View |
|---|---|---|
|
Column Heading Text |
Displays heading text on the column-level when populated. | View |
|
Column Heading Text Size |
Only applicable when Column Heading Text is populated.
|
View |
|
Column Heading Text Alignment |
Only applicable when Column Heading Text is populated.
|
View |
|
Inside Spacing |
Padding applied within the column. This is only needed if a theme is applied to the column-level or row-level. (When a theme is applied through the block-level or section-level, the spacing is already accounted for.)
|
|
|
Gap Between Blocks |
Determines the amount of spacing between blocks within the column. Only applicable when the column has more than 1 block assigned.
|
|
|
Background Image Size |
Only applicable when a background image is assigned to the column.
|
|
|
Background Image |
Applies a background image to the entire column (rare). Recommended width: 1500px NOTE: When a background image is set on the column-level, Inside Spacing must also be set as well. |
Hierarchy
Section
Row
Column
Block
Column
Block
Row
Column
Block
Block
Column
Block
Block
Column
Block
Block
Section
Row
Column
Block
Applicable Content Types by Column Size
| 1 Column | 2 Columns | 3 Columns | 4 Columns | |
|---|---|---|---|---|
|
Blocks |
||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Pages (Teaser Display) |
||||
| Article Page |
|
|
|
|
| Bio Page |
|
|
|
|
| Event Listing Page |
|
|
|
|
| Event Page |
|
|
|
|
| Flexible Page |
|
|
|
|
| Insights Listing Page |
|
|
|
|
| Location Detail Page |
|
|
|
|
| News/Press Listing Page |
|
|
|
|
| News/Press Page |
|
|
|
|
| On-Demand Webinar Page |
|
|
|
|
| Podcast Page |
|
|
|
|
| Video Page |
|
|
|
|