The Icon Box widget is a versatile tool for showcasing services, features, or processes with icons, titles, and descriptions. Ideal for emphasizing benefits or illustrating workflows, it offers customizable options, including a library of icons, custom uploads, backgrounds, and borders, for a visually appealing display.
Adding the Icon Box widget
- Add the Icon Box widget by finding it on the widgets panel and dragging it to the page canvas.
- Click on the added widget and customize the settings available for it from the left-hand menu.
Content tab
Icon Box
- Icon: Select an icon from Font Awesome's library or upload your own SVG.
- View: Choose between Default, Stacked, or Framed views. Stacked applies a full background, and Framed adds a border.
- Title: Add a title to the icon box.
- Description: Provide a brief description for the icon box.
- Link: Add a clickable link for the icon box. Use the settings to: Open in a new window or add a nofollow attribute for SEO control.
- Title HTML Tag: Set the title's tag (e.g., H1, H2). Adjust fonts, colors, and other design aspects in the Style tab.
Style tab
Box
- Icon Position: Position the icon on the left, top, or right of the content.
- Alignment: Adjust the alignment of the box content.
- Icon Spacing: Use a slider to modify the gap between the icon and its title.
- Content Spacing: Set the distance between the title and description.
Icon
Normal
- Primary Color: Choose the icon's color. For Stacked or Framed views, select a secondary color too.
- Size: Adjust the icon size.
- Rotate: Rotate the icon to your desired angle.
Hover
- Primary Color: Define the color for the hover state.
- Hover Animation: Choose an animation effect for when the icon is hovered over.
Content
Title
- Spacing: Adjust the gap between the title and description.
- Color: Change the title's color.
- Typography: Customize the font style and size.
- Text Stroke: Apply a stroke effect to the title.
- Text Shadow: Add a shadow to enhance the title's appearance.
Description
- Color: Set the description color.
- Typography: Modify the font style and size for the description.
- Text Shadow: Add a shadow to the description text.
Advanced tab
You can customize the widget further using the settings available in the Advanced tab. These options provide additional styling and functionality adjustments, allowing you to tailor the widget to better fit your design needs.