Text columns with icons

by Admin on Apr 11, 2024

1. What are text columns with icons?

Text columns with icons is a section designed to highlight key points or features using a combination of icons and short text snippets. This feature allows store owners to present information in a visually engaging manner, capturing the attention of your audience and making it easier for them to digest important details at a glance.

By pairing icons with brief text descriptions, admin can effectively communicate the benefits or highlights of products or services, enhancing the overall user experience and guiding visitors towards the desired actions on the website.

2. How to set up the columns?

To set up the columns in the Text columns with icons section, please follow these steps:

a) Add column blocks:

You can add multiple column blocks, each representing a single column in the section. Configure each column block by adding an image, heading, text, and optional button.

Set up the icon: You have 4 options:

1. Choose your favorite Icon from the drop-down list. Choose "None" if you don't want any icon.
2. Find your preferred one in the Icon list, copy and paste its exact name to the “Use another icon” field. (Note: Make sure to choose Icon > "Use another icon" to activate this function.)
3. Upload a Custom icon image.
4. Add a Custom icon (SVG code). (For assistance with custom SVG code, please contact our support.)

Set up the content:

1. Enter the heading for each column & adjust the size of the heading.
2. Enter the content for each column.
3. Optionally, add a button label for each column.
4. Enter the link users will be redirected to when they click the button.

b) Setup section layout:

Heading: Enter the heading for the entire section. Wrap your text between [] to add heading highlights.
Marker: Choose the style for the highlighted text.
Heading tag/ Heading size: Adjust the size of the section heading. Select the heading tag for this section to enhance the SEO of the page.
Secondary background: 3 options to choose:

Option Name	Function	Image
"None"	This option will disable the Background color setting under the Color setting group.
"Column background"	This option colors the column's background using the color you choose in the Background color setting.
"Section background"	This option colors the section's background using the color you choose in the Background color setting.

Line and border: Choose 1 in 4 options (None; Dashed border; Full border; Vertical line) for the border and line of each column.
Column content alignment: Align the text within the columns.
Make section full width: Tick this checkbox to expand the section to full width.
Top padding/ Bottom padding: Set the top and bottom padding for the section.
Column layout: Change the numbers of columns show up per row on desktop (max 6 columns) and mobile (max 2 columns).

c) How to enable the carousel?

Tick "Enable Carousel on Desktop" to display the text column with icons in a carousel format on desktop devices.
Select "Enable Swipe on Mobile" to allow users to swipe through the carousel on mobile devices for improved navigation.
Tick “Enable auto-play" to automatically rotate through the items in the carousel without requiring user interaction. Set the "Change Bar Every" interval to determine how frequently the carousel items will automatically change. These two settings apply to both desktop and mobile views.

Configure these settings to create visually appealing and informative text columns with icons that effectively communicate key points or features to your audience.