fbpx

Table Of Contents

Hover Box Widget in Elementor

How to Use Hover Box Widget in Elementor

This documentation is about the hover box widget in Elementor. A hover box is a box that contains content (image, text, etc.) and will allow you to make a hover event. Especially, in terms of hovering the hover box, you could show a background image for every single box.

The step-by-step instructions below about the Hover Box Widget will get you to walk in the right way to use the widget developed by Element Pack.

So, let’s get started.

To Insert widget

inserting Hover Box Widget in Elementor

Inserting the widget is just a matter of drag and dropping. As you see in the screenshot above.


Content Tab

The Content Tab having some handy sections will genuinely get you to have a structure of the Hover Box Widget.

Hover Box Items

hover box widget items

After dragging and dropping the widget in a new section, you will get a list group. The list is not limited, you can add a new list in the group just by clicking on the ADD ITEM button. In addition, from the control, Image Size, you can manipulate the background image size (click the dropdown arrow).

Hover Box Widget in Elementor

You can edit every single list item(repeater). Simply, hit on the List Item and edit the field found in the List Item. Then, set Icon (From icon library or upload SVG ), Title, Title Link, Sub Title for the Hover Box Widget in Elementor.

And most importantly, you can also add a description, read more buttons, button links, and background images included in the list item. Use them well to apply the perfect hover effect.

Similarly, do the same thing in connection with the rest of the repeaters.

Come to the Content tab > Hover Box Items.

Selecting Skin

Hover Box Widget in Elementor items style

The hover Box Items section will allow you to select Skin like Flexure and Envelope with the default one. See the Screenshot below.

Additional Settings

additional settings

This section will allow you to manipulate Icon, Title, Sub Title, Description, and Button. For that, you have to enable or disable the Yes/ No switcher button. Look at the photo above.

Along with default settings, you can rewrite the settings such as Height(800), Content Width(1200), Columns, Column Gap(small, large, medium, collapse), Select Event(hover, click), and Alignment(left, right, center, or justified).

The most important thing is the Image Effect. Using this switcher button, you can give an image zoom in Effect.

Simply, go to the Content tab > Additional Settings for the Hover Box Widget in Elementor.

Style Tab

Now, let’s work with the Style Tab. The tab will confidently have you style the web content (text, image, video, etc.) of the page you require to design the hover box effect.

Styling with the Style tab in Elementor will always give you a fantastic experience.

Let’s have a look.

Hover Box

This section holds Overlay Color control that will let you chose the overlay color of the background image.

Item

This sub-section will let you set Background Type, Color, Image, Padding, Border Type, Radius, Advance Radius, Box Shadow. In connection with the mode of Normal, Hover, and Active, you’ll get able to set Background Type and Color.

Just go to the Style tab > Hover Box.

Icon

This section will allow you to set the icon color, size, and rotation in the Normal, Hover, and Active mode.

Go to the Style tab > Icon.

Title, Subtitle, & Description

In respect of all the sections mentioned in the title, you’ll find three modes such as Normal, Hover, and Active. And the modes will let you put Color, Hover Color, Active Color, and Typography.

Follow the flow, Style tab > Title > Subtitle > Description.

Button

To style the button, go to the Style tab > Button > and check all the controls.

To sum up, it seems that you’ve read this article and found it very useful. If you need more design ideas, you should go to our demo page.

SIGNUP NEWSLETTER

Don’t worry we hate spam and we promise you will get only quality news and offer from us.

Enjoy Black Friday Exciting Deals Right Now. Check Here
© Copyright 2021 All Rights Reserved by BdThemes

Enjoy Black Friday Exciting Deals Right Now. Grab The Deals Before The Time Ends!

Day
Hour
Min
Sec