Icon Box

The Icon Box widget in the Topper Pack plugin is a powerful and flexible element for displaying icons with titles, descriptions, and optional buttons. Perfect for showcasing features, services, or information blocks, this widget offers stylish layouts with customization at your fingertips.

🔧 How to Enable Icon Box Widget

To enable the Icon Box widget:

1. Navigate to WordPress Dashboard > Topper Pack > Widgets.
2. Locate the Icon Box widget in the list.
3. Toggle the switch to enable it.

Once enabled, it will appear in the Elementor editor panel.

➕ How to Use the Icon Box Widget

Step 1: Drag & Drop the Widget

1. Go to a page or template and click Edit with Elementor.
2. In the Elementor panel, search for “Icon Box”.
3. Drag and drop the widget into your desired section.

Step 2: Choose a Style

• Under the Content > Styles section, choose your preferred layout, such as:
  • Project Discussion
  • Outreach Programs

These styles define the overall presentation of your icon box.

Step 3: Configure Icon Box Content

Inside the Content > Icon Box panel:

• Badge One: Toggle on/off and add a label like “Popular”.
• Title HTML Tag: Choose tag (e.g., H3, H4) for semantic HTML.
• Icon Type: Select between an icon, image, or SVG.
• Title: Set the heading (e.g., “Consulting Services”).
• Link: Add the destination URL.
• Description: Enable and provide a description using AI if desired.
• Enable Count: Toggle if you want to show a numbered label.

Step 4: Optional Button (topppa Button)

In the topppa Button section:

• Enable Button: Toggle to display a call-to-action button.
• Button Styles: Select from multiple pre-designed styles.
• Button Text: Add a custom label like “Meet With Us”.
• Link: Assign a URL.
• Icon Toggle: Optionally display an icon beside the text.

Step 5: Style the Widget

Go to the Style tab to adjust:

• Typography and colors for all text elements.
• Icon size, spacing, and border radius.
• Button styles include hover effects.