Columns Overview


Columns Overview

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

Basics Settings

ID
Define one or more id names for the column.
Class
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.
Subtitle
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.

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.