How to Set Up the Multicolumn with Icons Section in Concept

Use a custom SVG icon

• Open a Column block.

• Find the Custom icon field.

• Paste your custom SVG code into this field.

• When a custom icon is added, it will be used instead of the selected icon from the dropdown.

• Keep the SVG code clean and valid to avoid display issues.

• Click Save.

What you need to know more about SVG here

Configure the section heading

• Open the Multicolumn with icons section.

• Add a main Heading for the section.

• Adjust Heading size to control the heading style.

• Choose the Heading alignment.

• Set the Heading tag if you need to control the HTML heading level for SEO or page structure.

• Add a Subheading if needed.

• Add a Description if you want to include supporting text below the heading.

• Add a Button label and Button link if you want to show a call-to-action button in the section heading area.

• Click Save.

Use highlighted text

• Open the section or a Column block where you want to style the heading.

• Use Highlighted text to choose a highlight style.

• Click Save.

Customize colors and section spacing

• Use Text color to adjust the section text color.

• Use Background color or Background gradient to style the section background.

• Use Highlight color or Highlight gradient to style highlighted text.

• Use Button text color, Button background color, or Button gradient if the section heading button is enabled.

• Adjust Top padding and Bottom padding to control the vertical spacing.

• Enable Show section divider if you want a divider line around the section.

• Enable Make section full width if the section should extend across the full browser width.

• Enable Make section rounded if you want rounded section corners.

• Click Save.

Notes

• Each Column block can use either a built-in icon or a custom SVG icon.

• If both a built-in icon and a custom SVG icon are configured, the custom SVG icon will be displayed.

• The section supports 2 to 4 columns on desktop.

• On smaller screens, the columns are displayed in a mobile-friendly layout.

• The section is designed for short content. For longer content, consider using a text section or a dedicated page section instead.

Troubleshooting

• If a column does not appear, make sure the Column block is not hidden in the theme editor.

• If an icon does not display, check that an icon is selected or that the custom SVG code is valid.

• If the custom icon looks broken, remove unsupported HTML or invalid SVG markup from the Custom icon field.

• If the layout looks too crowded, reduce the number of columns or shorten the column text.

• If highlighted text does not appear as expected, make sure the text you want to highlight has been formatted with italic styling in the text editor.

• If the section spacing looks too large or too small, adjust the Top padding and Bottom padding settings.

Need Further Assistance

If you encounter any issues or need additional help with your Concept theme, please reach out to our support team via our Ticket System for assistance within 8 hours.