Text with icons

The Icon Text section allows users to add multiple content items on the page, each featuring an icon, title, and description. This section is suitable for showcasing services, product features, or any content that benefits from a combination of text and icons. It adapts to both desktop and mobile displays to ensure a consistent user experience.

Configuration Options

1. Color Scheme

   • Purpose: Choose the overall color scheme for the section to match the design of other parts of the page.

   • Note: To modify the colors across all templates, go to template settings.

2. Number of Columns (Desktop)

   • Purpose: Set the number of columns to display on desktop, with a maximum of 4 columns.

   • Note: Ensure the number of columns fits your content layout requirements.

3. Text Alignment

   • Purpose: Set the alignment of the text, with options for left, center, or right alignment.

4. Enable Icon Wrapping

   • Purpose: Choose whether to enable icon wrapping, which tightly associates the icon with the title and description content.

5. Icon Size

   • Purpose: Set the display size of the icon, with options for small, medium, or large.

6. Mobile Settings

   • Mobile Layout

     • Purpose: Choose the layout for mobile display: Grid or Carousel. The Grid layout arranges icons and text in columns, while the Carousel layout displays content as a slider.

   • Show Pagination Dots

     • Purpose: When selecting the Carousel layout, choose whether to show pagination dots to help users understand their current position.

   • Hide Description on Mobile

     • Purpose: Check this option to hide the description content on mobile devices, displaying only the icon and title.

Mobile Layout

• Purpose: Choose the layout for mobile display: Grid or Carousel. The Grid layout arranges icons and text in columns, while the Carousel layout displays content as a slider.

1. Show Pagination Dots

   • Purpose: When selecting the Carousel layout, choose whether to show pagination dots to help users understand their current position.

2. Hide Description on Mobile

   • Purpose: Check this option to hide the description content on mobile devices, displaying only the icon and title.

Block Unit Settings

• Icon Text

  • Icon: Select an appropriate icon to represent the current content. You can choose from system-provided icons or upload custom icons.

  • Image: Upload or select an image to serve as the visual element for the current block, enhancing content expression.

  • Title: Add a title to the current block to summarize the content's main idea.

  • Description: Add detailed text to further explain the content covered by the title.

Usage Considerations

• Mobile Layout Selection: Choose an appropriate mobile layout based on user access data. If most users access through mobile devices, the Carousel layout might offer a better user experience.

• Icon and Text Coordination: Ensure that icons are clearly related to the text content to avoid using ambiguous or unrelated icons.

Common Issues

• Icon Not Displaying: Check if the icon file is uploaded correctly and ensure the icon size setting is appropriate.

• Content Display Issues on Mobile: Try adjusting the mobile layout and hiding the description option to improve the display.