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.
In the content section you can define all the elements of the hover info box widget.
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...
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.
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.
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.
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.
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.
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.