Also In This Section

Boxed Sections Snippet

This snippet creates a two- to five-column layout with the columns being evenly spaced in the available area or a two-column layout with one column being 2/3 of the space and the other 1/3. Text, images, videos, snippets, and assets can be added to each column. It can also be used to add a border around content.

2 even column boxed section example with border on second column.

2/3 1/3 boxed section example.

Boxed sections snippet.

  1. Select the desired layout type from the dropdown.
    1. single column: when using in an asset type in “1-even-columns” without quotation marks
    2. 2 even columns: when using in an asset type in “2-even-columns” without quotation marks
    3. 3 even columns: when using in an asset type in “3-even-columns” without quotation marks
    4. 4 even columns: when using in an asset type in “4-even-columns” without quotation marks
    5. 5 even columns: when using in an asset type in “5-even-columns” without quotation marks
    6. 1/3 left 2/3 right: when using in an asset type in “one-third-two-thirds” without quotation marks
    7. 2/3 left 1/3 right: when using in an asset type in “two-thirds-one-third” without quotation marks
  2. Select the desired border option from the dropdown. Borders should not be used with cards.
    1. No Border: when using in an asset type in “no-border” without quotation marks
    2. Full Border: one border around all content, when using in an asset type in “grid-border” without quotation marks
    3. All Individual Cells: a border around the content in each cell that is used, when using in an asset type in “column-border” without quotation marks
    4. 1st Column Cells Only: a border around the cells in the first column of content, when using in an asset type in “1-column” without quotation marks
    5. 2nd Column Cells Only: a border around the cells in the second column of content, when using in an asset type in “2-column” without quotation marks
    6. 3rd Column Cells Only: a border around the cells in the third column of content, when using in an asset type in “3-column” without quotation marks
    7. 4th Column Cells Only: a border around the cells in the fourth column of content, when using in an asset type in “4-column” without quotation marks
    8. 5th Column Cells Only: a border around the cells in the fifth column of content, when using in an asset type in “5-column” without quotation marks
  3. If you are inserting cards in all columns, you can change the Spacing dropdown to No Gutter Spacing (“no-gutter-spacing” without quotation marks in an asset) to style the cards without space between them.
    Example of three cards in a boxed section with no gutter spacing.
  4. Insert content into the needed columns. If you are inserting text into a column, be sure to first select Paragraph from the Paragraph dropdown in the toolbar.To add more rows of columns, right click within the row, hover over Rows, and select Insert Row After.

    If your page has no left navigation and no right sidebar, you can use up to all five columns. If you have either the left navigation or right sidebar, only use up to four columns. If you have both the left navigation and right sidebar, use up to three columns.

Comments Closed