Columns element

To create an advanced layout for your website, use the columns element. You can nest columns within columns by adding a container element to your column.

Columns

Columns element options

  • Columns: choose how many columns you need, with a maximum of 6 columns.
  • Column distribution: define the ratio between your columns
  • Alignment: sets the horizontal alignment
    • Left: align items left
    • Right: align items right
    • Center: centers the items within the column
    • Between: The items are evenly distributed within the alignment container along the cross axis. The spacing between each pair of adjacent items is the same. The first item is flush with the start edge of the alignment container in the cross axis, and the last item is flush with the end edge of the alignment container in the cross axis.
    • Around: The items are evenly distributed within the alignment container along the cross axis. The spacing between each pair of adjacent items is the same. The empty space before the first and after the last item equals half of the space between each pair of adjacent items.
  • Align items: sets the vertical alignment (top, middle, bottom)
  • Gutters: sets the spacing between the columns
  • Stack on tablet: stacks columns on a tablet layout (calculator width of 640px). When this option is not toggled, columns will keep their original layout on tablet interfaces.
  • Stack on mobile: stacks columns on a tablet layout (calculator width of 375px). When this option is not toggled, columns will keep their original layout on mobile interfaces.
  • Show/Hide Logic: Toggle this if you want to control if the column element is shown or hidden under certain circumstances.
    • Visibility formula: If the result of the formula is TRUE or a number above 0. The question is visible. If the result is FALSE or 0, it’s hidden.
  • Margin: Adjust the spacing outside the columns element (top, right, bottom, left)
  • Padding: Adjust the spacing inside the columns element (top, right, bottom, left)
  • Custom class name: add custom class names to further style your columns-element. CC_class: cc__columns-element-wrapper

Column options

  • Is Sticky: Toggle if you want to make the column scroll with the screen movement or remain on top of the column element.
  • Show/Hide Logic: Toggle this if you want to control if the column element is shown or hidden under certain circumstances.
    • Visibility formula: If the result of the formula is TRUE or a number above 0. The question is visible. If the result is FALSE or 0, it’s hidden.
  • Margin: Adjust the spacing outside the column element (top, right, bottom, left)
  • Padding: Adjust the spacing inside the column element (top, right, bottom, left)
  • Custom class name: add custom class names to further style your column. CC_class: cc__column-element-wrapper

Related articles

Learn more about columns in one of the following articles