In this guide, we’ll show you how to add the “Icon Number Box widget” to your Elementor website. This handy widget makes it easy to display numbers alongside relevant icons, providing a visually appealing way to showcase statistics, figures, or important data points. Perfect for highlighting key information, the Icon Number Box widget offers customizable designs that seamlessly match your site’s style.
Let’s explore the customization options available in the “Icon Number Box widget” for Elementor below
Add a Free Icon Number Box to Elementor
Add a Free Icon Number Box Widget to an Elementor Page
Elementor Icon Number Box Widget General Settings
Title
Input the main title text for the box.
Paragraph
Add a descriptive paragraph or detailed text using a rich text editor.
Number
Enter a numerical value to display in the box.
Icon
Select or upload an icon to display.
Show Button
Toggle to show or hide a button in the box.
Link
Enter a URL that the button or box links to.
Link Text
Set the text that appears on the button.
Hover Animation
Choose an animation effect that plays on hover.
Elementor Icon Number Box Widget Style Settings
Alignment
Controls the horizontal alignment of the box content. “Inherit” uses the parent element’s alignment.
Background Hover
Sets a background color or gradient on hover.
Box Min Height
Ensures the box maintains a minimum height, even with minimal content.
Box Border Type
Defines the box's border style.
None
Solid
Double
Dotted
Dashed
Groove
Box Radius
Controls corner roundness with individual values for Top, Right, Bottom, and Left.
Box Shadow
Adds a shadow effect to enhance visual depth.
Box Padding
Adjusts spacing inside the box between content and borders.
Background Type
Sets the background type.
Background
Sets the actual background color or image in the default state.
Icon Size
Adjusts the overall size of the icon.
Icon Inner Size
Controls the size of an inner element within the icon (if applicable).
Icon Background Color
Sets the background color behind the icon.
Icon Inner Color
Defines the color of the icon itself.
Icon Radius
Round the corners of the icon's background shape.
Icon Margin
Adds space around the icon.
Icon Border Type
Select the style of the icon's border.
None
Solid
Double
Dotted
Dashed
Groove
Number Padding
Adjusts the space around the number.
Number Typography
Controls the number’s font style, size, and appearance.
Number Color
Sets the color of the number text.
Number Background
Sets the background color or image behind the number.
Number Radius
Rounds the corners of the number’s background.
Button Typography
Controls font, size, weight, line height, letter spacing, and text transformation. Globe icon for dynamic settings; pencil icon for detailed editing.
Button Background Color
Sets the default background color. Globe for dynamic, square for static.
Button Background Color Hover
Sets background color on hover. Globe for dynamic, crossed-out square for static.
Button Padding
Adjusts inner spacing (Top, Right, Bottom, Left).
Button Radius
Controls corner roundness. Slider/input for precise control.
Button Text Color
Sets the default text color. Globe for dynamic, black square for static.
Button Text Color Hover
Sets text color on hover. Globe for dynamic, crossed-out square for static.
Button Spacing
Controls outer margin with responsive settings.
Button Border Type
Sets border style.
None
Solid
Double
Dotted
Dashed
Groove
Button Style
Sets display (Inline or Block) with a responsive option.
Button Border Hover Type
Sets border style on hover.
None
Solid
Double
Dotted
Dashed
Groove
Icon Number Box Widget Design Examples For Elementor
Here are some live use cases for the Icon Number Box widget.
Icon Number Box with Background.
Icon Number Box with a Featured Image.
Thank you for using the Icon Number Box widget for Elementor! This versatile tool lets you display numbers alongside relevant icons in a clean, visually appealing layout, making it easy to highlight important statistics and data. Fully customizable, it allows you to adjust icons, numbers, and design elements to seamlessly fit your website’s theme. For questions or inspiration, feel free to reach out or explore our demo.
