Icon with text columns

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

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.

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.

Section styles

Sections include general styles. Click the section to find options for colors, spacing, and animations.

Section layout


Change the layout of the columns, including the icon alignment, number of columns, and content width.

Click section for settings

Setting
Description

Icon alignment

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

Columns per row

Choose how many items to display in each row: between 2 and 8 columns.

Content width

Display the section at Full width or use the slider to set a custom width.

Custom width

Set the maximum width of the section: between 400 and 1200 pixels.

The section will change in size to fit smaller screen sizes.

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.

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.

Icon styles


Customize the style of the icons, including the frame around them, colors, and width.

Click section for settings

Setting
Description

Icon framing

Choose to show a Circle or Slightly rounded border around the icons. Select None to show no border.

Icon framing style

Choose to display icons with a solid color background (Filled), or with a border and no background (Outlined).

Icon frame color

Choose to use the Accent color (from your theme settings) or the Current text color (from the section settings).

Icon width

Set the pixel width of icons for desktop screens: between 10 and 50 pixels.

Mobile icon width

Set the pixel width of icons for mobile screens: between 10 and 50 pixels.

\


Last updated

Was this helpful?