In this guide, we will show you how to add the “Animated Icon Box widget” to your Elementor website. This dynamic widget makes it easy to showcase features and services by displaying icons and titles with a separator, and revealing additional text through engaging hover animations. Perfect for creating interactive, attention-grabbing sections, it allows you to add customizable titles, descriptions, and buttons with smooth animated effects that enhance user experience and encourage engagement.
Let’s explore the customization options available in the “Animated Icon Box widget” for Elementor below.
Add an Animated Icon Box to Elementor
This widget requires Unlimited Elements Pro version installed and activated on your WordPress website.
Add an Animated Icon Box Widget to an Elementor Page
Elementor Animated Icon Box Widget General Settings
Elementor Animated Icon Box Widget Style Settings
Divider Thickness
Controls the height or thickness of the divider line.
Divider Width
Sets the horizontal length of the divider line.
Normal/Hover Tabs
Allows setting different styles for the divider in "Normal" and "Hover" states.
Divider Color
Sets the divider line color based on the selected state (Normal or Hover).
Vertical Position
Adjusts the vertical placement of the divider within the icon box.
Divider Thickness
Controls the height or thickness of the divider line.
Divider Width
Sets the horizontal length of the divider line.
Normal/Hover Tabs
Allows setting different styles for the divider in "Normal" and "Hover" states.
Divider Color
Sets the divider line color based on the selected state (Normal or Hover).
Vertical Position
Adjusts the vertical placement of the divider within the icon box.
Typography
Customizes the font, size, weight, line height, letter spacing, and other text properties of the title.
Normal/Hover Tabs
Allows setting different styles for the title in "Normal" and "Hover" states.
Text Shadow
Adds a shadow effect to the title text for depth and visual appeal.
Title Color
Sets the title text color based on the selected state (Normal or Hover).
Title Gap
Adjusts the space below the title, controlling spacing between the title and the next element.
Typography
Customizes the font, size, weight, line height, letter spacing, and other text properties of the description.
Normal/Hover Tabs
Allows setting different styles for the description in "Normal" and "Hover" states.
Text Shadow
Adds a shadow effect to the description text.
Description Color
Sets the description text color based on the selected state (Normal or Hover).
Description Opacity
Controls the transparency of the description text.
Description Gap
Adjusts the space below the description.
Animated Icon Box Widget Design Examples For Elementor
Here are some live use cases for the Animated Icon Box widget.
Animated Icon Box Widget for a fitness website.
Animated Icon Box Widget for the contact page.
Thank you for using the Animated Icon Box widget for Elementor! This dynamic tool lets you showcase features and services with icons and titles separated by stylish lines, while revealing extra text through smooth, eye-catching hover animations. With customizable titles, descriptions, buttons, and engaging hover effects, it helps you create interactive, attention-grabbing sections that enhance the user experience. For questions or inspiration, feel free to reach out or explore our demo.