booster addons
creative elementor bundle
Purchase Now
Purchase Now
Purchase Now

Home - Widgets - Interactive Icon Box

Interactive Icon Box

Preview Widget
Preview Widget
Getting Started
Content
Global Layout
Icon & Text Styling
Container Design

More Widgets

• Modern Flip Box
• Icon Box Action
• Hover Info Box
• Icon Box

# Getting started

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.

Content

In the content section you can define all the elements of your interactive icon box.

  • Icon : Apply an icon from our extensive icon libraries..
  • Heading :  A title text that gives a global insight about the information or service you are showcasing.
  • Sub-heading : An optional small more detailed text about your element.
  • Short text : A description text that gives more information about what you want to showcase.This element will be hidden until you hover over the widget.

Layout

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.  

  • Icon position: Choose your icon position next to the heading & sub heading elements.When choosing the center position the icon will be placed above the heading with a center alignment.
  • Content position :  Control the alignment & position of all your content inside the primary container.
  • Short text alignment : Choose the text alignment of your short text in the secondary container area.

Styling

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...

  • Icon Styling

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.

  • Text Content Styling

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.

Container Design

Under the styling tab, you will find the container styling section, there, you can change everything about the design of your primary & secondary containers.

  • Primary Container

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.

  • Secondary Container

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.

  • Hover Effects

We have created multiple hover effects & transition that you can choose from, which gives your website more unique & modern feel to it!

  • Container Styling

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. 

Get Help From Professionals

Can't find what you are looking for?

If you can't find what you are looking for any our documentation website, please feel free to open a support ticket  & get help from our support team.

Open a Ticket
Open a Ticket

WHO ARE WE ?

We are a group of talented WordPress developers & designers from Earth our main goal is to create great products & provide the best services to our customers.

BOOSTER ADDONS

CREATIVE ELEMENTOR BUNDLE

HELPFUL LINKS

About Us

Documentation

Blog Articles

Video Tutorials

Request Support

GET INVOLVED

Feedback

Bug Report

Submit Design

Privacy Policy

Terms & Condition

FOLLOW US

Email : contact@certaindev.com

WebSite : Certain Dev

Made with love from Earth!

Certain Dev | all rights reserved © 2020