Icon Box (Page Structure & Layout)

The Icon Box widget allows you to highlight key features, services, or messages with a combination of an icon, title, description, and an optional link. It is ideal for showcasing benefits, services, or any visual cues that need to be quickly noticed by visitors. Use it to add structured and visually appealing blocks that improve the layout of your pages.

How to Add the "Icon Box" Widget

1. In Elementor, open the page where you want to add the widget.
2. Search for Icon Box in the Elementor sidebar.
3. Drag and drop the widget into the desired section of your page.

Configuration Options

Content Tab

• Icon Box
  • Icon Type: Choose from Font Awesome or other available icon sets.
  • Icon: Select the specific icon to display.
  • Title: Add a heading for your box.
  • Text: Write a short description or supporting content.
  • Read More Text: Add a custom text link (optional).
  • Read More Link: Insert the URL where the link should point.
  • Add Item: Add multiple icon boxes in one section.
• Icon Boxes Style
  • Style: Choose the design version (e.g., Version 1, Version 2).
  • Columns: Define the number of columns (one, two, three, or more).
  • Padding: Adjust spacing inside the box.
  • Border Type & Radius: Define borders and rounded corners.
  • Background Type: Add color or image background.

Style Tab

Includes all customization options to match your site's branding:

• Icon: Color, size, padding, rotation.
• Title: Typography, spacing, and color.
• Description: Typography and text color.
• Read More: Typography and link color.

Best Practices

• Use consistent icon styles to maintain design harmony.
• Keep titles short and descriptive.
• Ensure descriptions are concise and easy to read.
• Avoid using too many columns on mobile—adjust layout for responsiveness.
• Use the "Read More" link for CTAs that lead to deeper content.

Notes

• Icons rely on the selected icon library (e.g., Font Awesome). Make sure the library is active.
• Avoid heavy text inside the Icon Box—this widget works best with short highlights.
• Use padding and spacing wisely to maintain a clean layout across different devices.