The Icon Box widget is a dynamic tool for displaying concise information paired with icons, making content more engaging and visually appealing. It's perfect for highlighting services, features, or steps in a process with a mix of icons, titles, and descriptive text. Whether you want to showcase the various services your business offers, emphasize the benefits of a product, or illustrate a workflow, the Icon Box widget is your go-to solution. You have the flexibility to use a range of icons from the library or upload custom ones, and customize every aspect of their display, including the background, border, and more.
How to add and customize Icon Box widget
- Drag the Icon Box widget onto the canvas from the widget menu.
- In the Content tab, locate the Icon Box section.
- To change the icon, click the star button next to Icon. You can choose an icon from the library or upload an SVG image. For SVG uploads, ensure SVG support is enabled in the settings.
- In the View field, choose how the icon is displayed: Default, Stacked, or Framed. Stacked fills the icon's background, while Framed adds a border. Both offer shape options of Circle or Square.
- Enter a title in the Title field and a description in the Description field to complete the icon box content.
- (Optional) To link the Icon Box, insert a URL in the Link field. Configure the link to open in a new window or add rel=nofollow using the settings icon. For adding custom attributes, use the | (pipe) for key-value pairs and commas to separate them.
- Choose the appropriate HTML tag for the title from the Title HTML Tag field, ranging from H1 to H6, div, span, or paragraph, for semantic accuracy and SEO benefits.
Icon Box widget settings
After adding the widget to the page and adjusting its general settings, you can further customize it through the tabs available within the widget settings
Style Tab: Access this tab to adjust the colors, fonts, and other stylistic elements of your icons and text, ensuring they align with your site's design.
Advanced Tab: Use this tab for finer control over the widget's positioning, margins, and padding, and to add custom CSS, if necessary.
The Icon Box widget is a versatile tool in 10Web Website Builder, allowing for creative and functional displays of information that can enhance user experience and engagement on your site.