Icon with text columns

This section is available in v3.0 and later. Learn how to update your theme to access new features.

Use the Icon with text columns section to display a row of text blocks with icons. You can highlight your company values, process, or key features of your product.

  • Add columns with icons, text, and an optional link.

  • Change the icon color and size

  • Change the layout and alignment

Editing templates will change all pages that use the same template. Create new templates for different page layouts, or show dynamic page content in the same template.

Set up section


In the editor side panel, click (+) Add section and select Icon with text columns Click and hold the drag handles ⋮⋮ to re-order sections.

Section styles


Click the section to edit general section styles for colors and spacing, available in all sections:

Section layout


In the section settings, you can adjust the overall layout and style of the column blocks.

  • Change the icon size and color

  • Choose the number of columns per row

  • Change the amount of spacing between columns

  • On mobile, display columns as Stacked (multiple rows) or Slider (single row).

Click section for settings

Setting
Description
Options

Icon color

Choose an icon color based on the section's color scheme.

Accent Text

Icon width

Adjust the width of the icon for desktop screens. Make sure the icon width does not exceed the width of your custom image.

12 - 74 px

Icon alignment

Place the icon above or to the left of the column text.

Icon above, text center Icon above, text left Icon left, text left

Columns per row

Select the number of columns to display on desktop screens.

2 - 5

Column spacing

Choose the amount of spacing between column blocks.

Small Medium Large

(Mobile) Layout

Display blocks in a Stacked single column or as a single row carousel.

Stacked Slider

(Mobile) Icon width

Adjust the width of the icon for mobile screens. Make sure the icon width does not exceed the width of your custom image.

(Mobile) Icon alignment

Place the icon above or to the left of the column text.

Add column blocks


Add column blocks with icons, text, and optional link. In the Icon with text columns section, click (+) Add Column. Click and hold the drag handles ⋮⋮ to rearrange the blocks. Click the Column block to add content.

  • Select from 30+ icons or upload a custom icon image

  • Add column headings and text

  • Make the icon a clickable link

Click column block for settings

Setting
Description

Icon

Select from 30+ icons to show in the column.

Custom icon image

Upload your own icon to show in the scrolling content.

We recommend a .png image with a transparent background and minimum dimensions of 50px by 50px.

Icon link

Add a link to redirect visitors when they click the icon.

Heading

Add text as the column title.

Text

Add multiple lines of text below the heading.

Last updated

Was this helpful?