Icon With Text

About Icon With Text SectionClick to copy 2222

In web design, the use of icons alongside text has become a popular way to enhance content and improve user experience. By combining icons and text, you can effectively convey information, guide users, and make your content more visually appealing.

In this article, we will explore the Icon with text section in Blum theme and how to configure each element inside it.

Icon With Text Section

Access Icon with Text SectionClick to copy 2222

From any page, please click on ‘Add Section’ on the left side bar, then choose ‘Icon with Text’.

Icon With Text Section

Icon With Text Section ConfigurationClick to copy 2222

Icon with text section comes with 4 tabs: General, Layout, Icon and Button.

GeneralClick to copy 2222

Firstly, you can change the color scheme for this section by selecting the scheme here. To change the theme color, please go to Theme settings > Colors.

Icon With Text Section

After that, you can adjust Section subheading, Section heading and ​​Section description for the section by entering content on the fields.

Icon With Text Section

IconClick to copy 2222

You can select the Main, Extra accent or None for the Icon Accent Scheme.

Icon With Text Section

If you want to change style for these accents, please go to Theme settings > Colors > Accent.

LayoutClick to copy 2222

To select items per row on desktop and tablet landscape, you can select 3, 4, 5, or 6 items, each as you want.

Icon With Text Section

For the items per row on tablet portrait, the range is 2, 3, or 4 items.

Icon With Text Section

After that, you can select the position to display for the content of the section:

  • Left

Icon With Text Section

  • Center

Icon With Text Section

  • Diagonal

Icon With Text Section

Next, The Enable Carousel On Mobile and Show Navigation On Mobile options can be selected or deselected based on your choice.

Icon With Text Section

You can also enable ‘Remove padding top’ and ‘Remove padding bottom’ to delete the spacing at the top and bottom between the section and the elements inside it.

Icon With Text Section

ButtonClick to copy 2222

In the Buttons tab, insert the button label name for the button to add a button on the section. Click on the button link to add a direct link for it.

If you want to remove one button, just delete the text in the button label.

Icon With Text Section

Prominent badgeClick to copy 2222

You can set up these settings for the Prominent badge:

  • Text: You can enter the name on the field

Icon With Text Section

  • Color scheme: Main accent or Extra accent

Icon With Text Section

  • Position: Left or Right

Icon With Text Section

  • Shape: Star, Diamond or Asterisk

Icon With Text Section

Icon With Text Item ConfigurationClick to copy 2222

Icon With Text Section

To adjust for the Block text, click on the block and go to the Settings.

You can change the icon for each Icon With Text item with the icon library or custom your own icon by uploading it as image or SVG:

  • Theme library:

Icon With Text Section

  • Custom image:

Icon With Text Section

  • Custom SVG:

Icon With Text Section

TextClick to copy 2222

You can adjust the content by entering heading and description here:

Icon With Text Section

Navigate this category

Previous