The interactive icon box is a widget that allows you to display information about your website or business services with unique and modern design layouts. Apply multiple hover effects & custom styles for the icon, heading, sub-heading & the short description text.Lets go over the details of this amazing widget.
In the content section you can define all the elements of your interactive icon box.
Under the layout section, you will be able to control the position and the alignment of each element of the interactive icon box widget, which gives your more flexibility on the look & layout of your web page elements. Â
Under the styling tab section, you will have the full control over the styling & design of all you interactive icon box widget elements, you can change the sizes, colors, backgrounds...
Control everything about your icon, apply a custom icon & background sizes.
-Gradient Colors : you can apply a solid single color, or a gradient color with custom directions.
-Borders & Shadows : customize borders for the icon container, apply border radius & shadows too.
Customize the text elements, heading, sub heading & short description text, change the font size, letter spacing... choose from hundreds of Google font families.
-Colors : customize the color of your text elements, with the possible use gradient color for the heading.
-Distances : control the margins & distances between each element.
Under the styling tab, you will find the container styling section, there, you can change everything about the design of your primary & secondary containers.
The primary container is the default visible section that contains the icon, heading & sub-heading, once you hover the interactive icon box element it will be hidden.
The secondary container is the invisible hidden section that contains the short text description, once you hover the interactive icon box element it will be shown.
We have created multiple hover effects & transition that you can choose from, which gives your website more unique & modern feel to it!
You have the full control over the stylings of both primary sections & secondary sections:
-Container Size : control the height of your widget & apply custom paddings.
-Background : customize the section background & choose to apply either a solid background color, gradient color or a custom background image.
-Borders & Shadows : control border for each section & apply custom box shadows.
-Overlays : you can choose to apply an overlay section which will be looking amazing if you have a background image applied.Â