booster addons
creative elementor bundle
Purchase Now
Purchase Now
Purchase Now

Home - Widgets - Hover Info Box

Hover Info Box

Preview Widget
Preview Widget
Getting Started
Content
Icon & Text Styling
Container Design & Distances

More Widgets

• Interactive Icon Box
• Modern Flip Box
• Icon Box Action
• Fancy Icon Box

# Getting started

The Hover Info box is a great option if you want to display some content on your web page using a simple yet effective layout.This widget uses an icon, a title and some text, and once you hover over the widget, the style and colors changes with cool effects!

Read more about the options provided in this widget down below.

Content

In the content section you can define all the elements of the hover info box widget.

  • 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 details about what you want to showcase.
  • : Control the horizontal alignement of the widget within the container.
  • Link : Specify a go to link on click.You can click on the link options button(The cog wheel on the right) to enable the 'open in new window' and the 'no follow' options.
  • Background & Content Hover Effects : We have created multiple hover effects & transition that you can choose from.Combine the background hover effects with the content hover effects to create a unique style for your web page.

Styling

Under the styling tab section, you will have the full control over the styling & design of all you hover info box widget elements, you can change the sizes, colors, backgrounds...

  • Typography & Sizes :

Control everything about your text properties and change the icon size.

-Icon Size : You can freely increase the icon size to make it more striking or decrease it and give more room for the text to shines.

-Typography : Customize the text properties for the heading, sub heading and short text. Change the font size, letter spacing... choose from hundreds of Google font families.

  • Colors & Icon Rotate

Change the color schemes for all the hover info box elements and control the icon rotation.

-Normal & Hover : Select​ which widget state you want to customize.Normal for the idle state of the widget and hover for when the widget is being hovered.Note that every option in this section will only affect the selected state.

-Icon Color & Rotation : You can rotate the icon and change its color to give it a different appearance.The option to use a gradient color is available the ability to control the gradient direction and the colors position.

-Text Color : Customize the color of your text elements for both the normal and hover states of the widget.

Container Design & Distances

Under the styling tab, you will find the container styling section, there, you can change everything about the container design for both the normal and hover states of the widget.

  • Normal  & Hover

Select​ which widget state you want to customize.Normal for the idle state of the widget and hover for when the widget is being hovered.Note that every option in this section will only affect the selected state.

  • Container Styling

Control everything about the container design.

-Background Color : Customize the container's background and choose to apply either a solid or gradient color with the possibility to control the gradient direction and colors positions.

-Borders & Shadows : Add a border for the container with the possibility to customize the width and color, and apply a box shadow to create unique effects.

-Radius & Padding : Change the container radius if you want a more rounded shape and control the inner space using padding. 

-Distances : Control the space between each of the hover info box elements using margins.

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 Morocco our main goal is to create great products & provide the best services to our customers.

BOOSTER ADDONS

CREATIVE ELEMENTOR BUNDLE

FOLLOW US

Email : contact@certaindev.com

WebSite : Certain Dev

Made with love from Earth!

Certain Dev | all rights reserved © 2020