Flex Guide: Text Columns with Icons Section

Supported Versions

The details shared here apply to the most recent version of Flex. To keep your theme up to date, check out this helpful document.

Using the Text Columns with Icons Section

The Flex theme includes a super useful Text Columns with Icons section that can be quite handy and used in various ways to display content and information to your customers by combining text, icons and buttons in up to 8 columns.

The Text Columns with Icons section can be used to highlight important information that you want your customers to know about your company and is great if you’re looking to feature certain promotions, products or really – anything in your shop! A button can also be added to each column to allow your customers easy access to important pages, or to continue reading about topics that you've added.

There are two 'styles' of icons you can choose from: Outline and Solid (under Theme Settings > Typography > Icons > Icon Style). The list of available icons to add can be viewed in our Flex Icon Library.

Additionally, Custom CSS and layout options can be included in this section for further flexibility.

In order to set up the Text Columns with Icons section, click into Customize (your Theme Editor) > Sections > Add Section >Text Columns with Icons.

Section Settings

The 'Text Columns with Icons' section settings determine the look and layout of this section! The settings are divided into general options for the positioning and sizing of the icons and text, colors, layout, and advanced settings.

General Settings

Icons per row

The 'icons per row' setting lets you decide how many icons/columns you'd like per row in this section! Choose between 1 - 8.

Icon size
You can choose the size of the icons with the 'icon size' setting. The options to choose from are small, medium and large.

Alignment
Here you can choose the alignment of your icons, text and buttons (if you've added any!) Choose from left, center, or right.

Button style
Within each column, you have the option to add a button. With the 'button style' setting, you can choose between your primary, secondary and link button styles (which are configured under Theme Settings > Buttons).

Colors

You can choose specific colors for the icons, text and background here - otherwise, they will pick up the default color settings (Theme Settings > Colors). A gradient can also be applied to the background of the section, because who doesn't love gradients?!

Icons/Text/Background
If you'd like specific colors for the icons, text and background, you can select those in the section color settings for each option! Otherwise, they will default to the 'headings' and 'body text' color settings (under Theme Settings > Colors).

Gradient/Gradient rotation
You can optionally add a gradient to the background of the section, either on top of the background color you've chosen or even just on it's own! Then, you can choose the 'gradient rotation' between 0 degrees - 180 degrees.

Layout

The layout settings include options to adjust the spacing and width in this section, and enable animation for when the Text Columns with Icons section loads in.

Width
The options under the 'width' setting include: 'half,' 'standard' and 'wide.' Selecting 'wide' will spread out the section full-width of the screen. Selecting 'standard' will keep the section in a container and not spread the full-width. Selecting 'half' will resize this section to be half of the 'wide' option.

With the 'half' width option, if you have set the Text Columns with Icons section to 'half', and the Section following it set to 'half', they will sit next to each other side-by-side – for example, here is an text columns with image section followed by an image with text overlay section:

Top/Bottom spacing
You can choose to add space (padding) above and below the section by adjusting the 'top spacing' and 'bottom spacing' settings.

Left/Right spacing
For even further control, you can choose to move the section over more to the left or to the right side of the page by adjusting the 'left spacing' and 'right spacing' settings.

Animation

The 'animation' setting will determine how the section 'loads in' . The options for animation are: 'none,' 'fade in,' 'fade in down,' 'fade in left,' 'fade in right,' 'slide in left,' and 'slide in right.'

Advanced

In the advanced settings, you can add in your own CSS class and custom CSS.

More information about using the Advanced CSS feature.

In the 'CSS Class' field, you can create a new class to apply to the section, or you can add a class that already exists to apply those styles as well!

The 'Custom CSS' field is where you can add in the actual CSS code.
Content Block Settings

The content block settings are for configuring each column in the section! To add a column, under the Text Columns with Icons section settings, click 'Add icon column'

Icon

For each column, you can add an icon that will appear at the top. There are two 'styles' of icons you can choose from: Outline and Solid (under Theme Settings > Typography > Icons > Icon Style). The list of available icons to add can be viewed in our Flex Icon Library.

Heading/Text

In order to add a heading to the top of each column, you can fill in the 'heading' field. In order to add text to your column, you can fill in the 'text' field - which is a rich text editor so you can insert links here as well!

Button label/Link

If you'd like to add a button to the bottom of your column, you can enter the text for it in the 'button label' field, and add the URL in the 'link' field. The link can be internal or external!