Icon Box

Introduction

The Icon Widget in Elementor allows customizable icons with options for size, color, alignment, hover effects, and links, improving design and user experience.

Key Use Cases for the Icon Box Widget in Elementor:

• Use the Icon Box widget to showcase services, features, or key offerings with icons and descriptive text.
• Create visually engaging sections to highlight important information, enhancing user experience and interaction.

Prerequisite

• Elementor
• Animation Addons for Elementor

Note: Ensure that the Animation Addons for Elementor plugin is installed and activated. Then, enable the Icon Box Widget toggle from the plugin settings.

How to Activate an Icon Box Widget ?

To activate the Animated Title Widget, navigate to Animation Addons → Elements in the admin dashboard. Then, select the Widget tab, search for the Icon Box Widget, and toggle it on. The widget will be activated immediately.

How to Configure the Icon Box Widget in Animation Addons?

Enable it, create a new page, set a title, choose the Elementor Full Width template, and publish. Adjust options as needed.

Note: Selecting full Elementor elements in a template unlocks all widgets and customization options, boosting design flexibility and functionality. 

Navigate to the Edit with Elementor option to access the editor interface. 

After selection, the Elementor panel appears with all tools and customization options.

Click the “+” icon to add a container, then select the appropriate column structure and layout.

In the Elementor Editor, click the ‘+’ icon to add a section. Search for the “Icon Box Widget”, then drag and drop it into the desired section of the page. Configure the widget settings under the available tabs to customize it as needed.

Here’s the interface where you can configure the settings and customize the Icon Box Widget across various tabs. 

Configuring Icon Box Widget : A Step-by-Step Guide

The Icon Box Widget is available in Elementor and can be placed on the desired section of the page. It offers three main settings tabs: Content, Style, and Advanced.

Content Settings

Icon Box 

• There will be some styles categories you can use for your design. I have chosen one as three. This will look good for my design I believe so i select this one. 

• Afterward, you can select an icon from the library or upload your own. 

• I chose a star icon for my design, but you can customize it according to your design preferences.

• Set the title as “Blessings of Ramadan: A Month of Reflection, Fasting, and Spiritual Growth” and assign the HTML tag as <h3>. You can customize the title and HTML tag as per your design preferences.

• Adjust the description to align with your headline topic. While I’ve provided a description for your headline, you can customize it according to your design preferences.

• Set the link type to “Button” There are two options available: “Button” and “Wrapper.” Choose the style that best fits your preference-

Button

• In the button settings, you’ll find a variety of styles to design your button. I’ve selected “Underline” as the button style from the list. You can choose the style that best fits your preference.

• Write the text you want to display on your button. For example, if you write “Learn more”, it will indicate that users can visit the link to explore more collections. Choose the style that best fits your preference.

• I’ve chosen a hand icon for my button, but you can customize it to match your design preferences.

• Set the icon position to “Before” and adjust the direction and icon spacing based on my preferences.

Style Settings

Style settings provide the flexibility to fine-tune and enhance your content, improving its visual appeal. Within this section, you’ll find options for Box, Icon, Content, Button, and Hover Effects. Let’s explore how each of these works:  

Box

• As shown, I’ve customized my content using all the available options under the Box section. You have the flexibility to choose the style that best suits your preferences.

Icon

The Icon Settings in the Icon Box widget allow you to customize the appearance and behavior of the icon within the box. 

• Set the icon customizations according to my preferences. Style the icon to complement and enhance the overall design look.

Content

The Content Settings in the Icon Box widget allow you to customize the text and its appearance. Here’s how it works:

1. Spacing – Adjust the spacing between text elements to enhance readability and alignment. I have set it according to my preference, as shown in the image below.
2. Color – Customize the text color to match your design or brand theme. I have chosen black, but you can select any color that fits your style.

3. Typography – Customize the font style, size, weight, and letter spacing to enhance text presentation.
4. Description – Add and style a brief description to provide additional details.
5. Margin & Padding – Adjust the spacing around the content to ensure a well-structured layout and proper alignment.

All customizations have been made according to my preferences, but you can adjust them to suit your own needs.

Button

Customize the button style with all your preferred settings. However, you can modify the adjustments to align with your specific design requirements.

Hover

These settings help improve user experience and engagement by making the design more interactive and visually appealing.

Here is the final output after applying all customizations-

Advanced Settings 

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

That’s it! You’ve now learned how to configure the Icon Box in Elementor to effectively customize and display dynamic counters on your website.

If you need further assistance, feel free to reach out to our support team!