Columns Overview

How to create, edit, & style columns. Columns can be manipulated and styled either via the Column handle icon.

Basics Settings

Define one or more id names for the column.
Define one or more class names for the column. Separate multiple classes with spaces.

Title/Subtitle Settings

Title Show
When set to 'Yes', this option will enable Title and or Subtitle in front-end.
Section Title
Enter text which will display as a column title.
Title HTML Tag
Choose a HTML-Tag for the title.
Font Size
Set Title font size for this selector.
Font Weight
Set Title font weight for this selector.
Title Style
Choose a title style modifier.
Title Color
Choose a Title color.
Insert text which will display as a column subtitle (short description).
Subtitle HTML Tag
Choose a HTML-Tag for the subtitle.
Subtitle Font Size
Set Subtitle font size for this selector.
Subtitle Style
Choose a subtitle style modifier.
Subtitle Weight
Set subtitle font weight for this selector.
Heading Alignment
Choose a type of text alignment for title and subtitle.

Background Settings

Custom Background
When set to 'Yes', you can set different background options. (Background color, Shapes).
Choose a default background option.
Inverse Color
Select the 'light' class to improve the visibility of objects on dark backgrounds in a light style. When using a dark style, add the 'dark' class to elements on a light background.
The 'Primary' and 'Secondary' (Background Settings) option are extending the inverse style from the Inverse component automatically. If you want to prevent this behavior, for example because you are using cards in these sections, add this 'Preserve color' option.

Grid Settings

Grid Gutter
The Grid component comes with a default gutter that is decreased automatically from a certain breakpoint usually on a smaller desktop viewport width.
Grid Divider
Choose 'Yes' to separate grid cells with lines. This option can be combined with the gutter modifiers. As soon as the grid stacks, the divider lines will become horizontal.
Masonry Grid
Yes or No. If grid cells have different heights, a layout free of gaps can be created by choose 'Yes'. (Learn more)

Flex Settings

Vertical alignment
These options define the vertical alignment of flex items.