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.
In This Article
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 > Elements > Icons > Icon Style). The list of available icons to add can be viewed in our Flex Icon List.
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.
Text Columns with Icons Settings
-
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.
You can choose the size of the icons with the 'icon size' setting. The options to choose from are small, medium and large.
Here you can choose the alignment of your icons, text and buttons (if you've added any!) Choose from left, center, or right.
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/BackgroundIf 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).
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.
WidthThe 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:
You can choose to add space (padding) above and below the section by adjusting the 'top spacing' and 'bottom spacing' settings.
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 > Elements > Icons > Icon Style). The list of available icons to add can be viewed in our Flex Icon List.
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!
Examples
Example 1
Section details:
- Icons per row - 3
- Icon size - large
- Icon position - center
- Text alignment - center
- Gradient - added
- Gradient rotation - 50deg
- Width - wide
- Icon, heading, text - added
Example 2
Section details:
- Icons per row - 4
- Icon size - small
- Icon position - left
- Text alignment - left
- Width - standard
- Icon, heading - added
Mobile Layout
When viewed on a mobile device, each column will stack in order vertically.