Skip to main content

Multi column

The Multi column section lets you display content side by side in two, three, or more columns—perfect for showcasing features, services, icons, or any content that benefits from a clean, structured layout.

Settings

SettingDescription
Color schemeSelect a predefined color scheme.
PreludeSee shared settings > Prelude. Associated settings below.
Content settingsSee all Content settings
Desktop layout settingsSee all Desktop layout settings
Mobile layout settingsSee all Mobile layout settings
Section spacing & borderSee shared settings > Section spacing & border. Associated settings below.
Section animationsAnimate section when scrolled into view.

Image with text section settings being shown


Content settings

Content settigns apply across all columns ensuring uniformity in your designs.

SettingDescription
Icon / image widthSet the icon / image width across all columns. Applies to desktop size screens.
Mobile icon / image widthSet the mobile icon / image width across all columns. Applies to mobile size screens.
Icon / image shapeControl the shape of your imagery, useful when not all content is the same.
Show icon / image borderDisplay a border around your imagery.
Border weightThe thickness of the optional border.
Border paddingThe spacing between your border and the inner icon / image.

Content settings in use

Desktop layout settings

SettingDescription
Number of columns on desktopHow many columns your content spans on desktop screen sizes.
Icon / image placementChoose between showcasing your imagery above or next to your columns.
Horizontal alignmentChoose how you want your content to align horizontally.
Vertical alignmentChoose how you want your content align vertically in each row.

Desktop layout settings in use

tip

Smaller imagery and lower column counts work better for the 'Left of content' placement setting.

Mobile layout settings

SettingDescription
LayoutChoose to display your mobile content as a grid or within a slideshow
Number of columns on desktopHow many columns your content spans on desktop screen sizes. Only applies if Layout is set to 'Columns'
Icon / image placementChoose between showcasing your imagery above or next to your columns.
Horizontal alignmentChoose how you want your content to align horizontally.
Vertical alignmentChoose how you want your content align vertically in each row.

Mobile layout settings in use

Shared settings

These settings are common to several sections and work the same way wherever they appear. Once you learn how they work in one place, you'll recognize them elsewhere.

Prelude

Use Prelude content to introduce your section. These settings allow you to add a heading, supporting text, and optional call-to-action buttons to introduce the section. Some sections may hide button settings if they aren’t relevant to the layout.

SettingDescription
AlignmentSet the horizontal alignment of the prelude content.
Heading + Associated settingsCustomize the section heading. Choose between your theme’s body or heading font, adjust the font size, and optionally display the text in all caps for extra emphasis.
Text + Associated settingsCustomize the text, and size of your text to match your design.
Button + Associated settingsCustomize the button label, add a button link, adjust the button size, and pick the button style.
Visual example.

Showing section height settings in action

Spacing and border

The section Spacing & Border settings allow you to control how much vertical space line between your sections. Mix and match to find what works for you. Show a stylistic border between sections to emphasize the break between content.

SettingDescription
Top spacingHow much spacing applies to the top of this section.
Bottom spacingHow much spacing applies to the bottom of this section.
Show bottom borderShow a stylistic border at the bottom of the section spacing
Visual example.

Showing section height settings in action

Block - Column

SettingDescription
IconThis dropdown lets you optionally choose from a curated set of icons that are designed to look great with your theme.
ImageOptionally use a custom image / icon. Icon must be set to 'None'
Heading + Associated settingsCustomize the section heading. Choose between your theme’s body or heading font, adjust the font size, and optionally display the text in all caps for extra emphasis.
Text + Associated settingsCustomize the text, and size of your text to match your design.

Mobile layout settings in use