Turn Your Minimum Efforts Into Maximum Results
  • Products
      Explore package advantages
  • Support
  • Blog
  • Contact

Table Of Contents

How To Use Hover Box Widget By Element Pack Pro

In this documentation, we will show you how to customize the Hover Box widget presented by Element Pack Pro.

Inserting The Hover Box Widget

Inserting The Hover Box Widget

On the Elementor editor page, search by the Hover Box widget name, then drag and drop it on the page.

Note: You need both Elementor and Element Pack Pro installed to use this widget.

Content Tab Customizations

Hover Box Items section

Go to Content > Hover Box Items


Find the Hover Box Items Skin (Default, Envelope, and Flexure), Layout Style( Style 01, and Style 02) options, and Hover Box Items widget items here (with the Add Item button).


Click on the Hover Box Items, you will find two sub-sections; Content and Optional.

In Content Mode, Find the Icon, Title, Sub Title, Button Text, Button Link, and Background Image options.


In Optional Mode, Find the Title Link, Text, Background Type ( Classic And Gradient), and Background Color options.

Additional section

Go to Content > Additional


Come to the Additional Section, Find the Height, Content Width, Content Position ( Default, Top Left, Top Center, Top Right, Center, Center Left, Center Right, Bottom Left, Bottom Center, Bottom Right), Content Gap( Small, Medium, and Large), Columns( 1 to 6), Columns Gap( Small, Medium, Large, Collapse, and Custom), Select Event( Click, and Hover), Active Item, Image Size, and Alignment options.


Also, Find the Show Title, Show Icon, Show Sub Title, Show Text, Show Button, Item Match Height, and Image Effects Switchers.

Here also find the Title HTML Tag and Image Effects( Effect 01, and Effect 02) options.

Work with The Style Tab

Hover Box section

Go to Style > Hover Box


Come to the Hover Box Section, you will find Three sub-sections; Normal, Hover, and Active.

In Normal Mode, Find the Overlay Color, Background Type(Classic, and Gradient), Background Color, and Background Image options.


Below, Find the Padding, Border Type, Width, Color, Border Radius, and Box Shadow options.

Also, Find the Advanced Radius switcher.


In Hover Mode, Find the Background Type( Classic, and Gradient), Color, Border Color, and Box Shadow options.


In Active mode, you will get a similar set of controls to modify the appearance of the Active mode section like Hover mode. So please try it yourself.

Title section

Go to Style > Title

Find the Title Color, Hover Color, Active Color, and Typography options.

All done! You have successfully customized the Hover Box widget on your website.

Video Assist

You can also watch the tutorial video about the Hover Box widget. Please visit the demo page for examples.

Thanks for staying with us.

Take advantage of fine-tuned plugins

Get Customizable Elementor Widgets to Power Up Your Website

Take advantage of fine-tuned plugins to speed up web projects without sacrificing quality. We offer a 14-days money-back guarantee.
BdThemes is the sole owner of #1 market-leading addons for Elementor such as Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit, Pixel Gallery, and more useful plugins. This website is powered by Element Pack Pro and Rooten Theme.

Subscribe to newsletter

Get Tips & Tricks, Updates, Fresh Blogs & Offers.
Join Now

Join Thousands of Happy Users

Get Tips & Tricks, Updates, Fresh Blogs & Offers.
Need any further assistance? Call Us:+880 1700 55 95 95
Our supported payment system and security badge