Hover Box Widget Tutorial

Intro

Premium Hover Box Widget allows you to add an eye-catching call to actions or display various types of website content like services or products right on your webpage. This Elementor Widget designed with the attention-grabbing 3D effect.

In this tutorial, we will discuss Elementor Hover Box Widget options in detail.

Click here to check Premium Hover Box Widget demo.

Requirements:

• You will need Premium Addons PRO plugin installed and activated on your website.
• Also, make sure that this widget/addon is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
• Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

Key features

• Front
• Back
• Additional settings

1. Front

Select between editing the content and the background.

Content

• Icon: Enable or disable adding an icon that is shown on the front side at the top of the widget, above the title and description.
  • Icon Type: Select or upload a custom image via the Media Library, select from a list of Font Awesome Icons or insert Lottie Animations link.
    • Loop: Loop option is activated by default. Switching “Off” this option will make the Lottie Animation file work only for just one time.
    • Reverse: The reverse option will make the Lottie Animation file moves backward.
    • Render As: Set how to render the Lottie as SVG or Canvas, set render type to canvas if you’re having performance issues on the page.
  • Icon Size: Adjust the icon size in pixels, em or %. The default size is 40 pixels.

• Title: Enable or disable a title.
  • Title: Add the title text for the front side.
  • HTML Tag: Select the tag which will be used to display the title. Choose from H1 to H6, where H1 is the largest and H6 is the smallest. The default is H3.

• Description: Enable or disable the description. When enabled, the description is shown at the bottom of the front side below the icon and the title.
  • You can add your description directly in the Richtext editor as you can edit the text visually or with code and you can add images from the Media Library.

• Vertical Position: Select the position of the icon, title and description inside the widget’s container. Choose from top, middle and bottom. You can preview the setting directly in the editor.
• Content Alignment: You can justify the content or align it to the left, center or right.

The background settings affect the background behind the content on the front side.

Background Type

• Color or Gradient Colors
• Image: Select or upload an image via the Media Library. If an image is selected, the following options become available:
  • Position:
    • Default
    • Top Left
    • Top Center
    • Top Right
    • Center Left
    • Center Center
    • Center Right
    • Bottom Left
    • Bottom Center
    • Bottom Right
    • Custom: Adjust the image’s X and Y positions using pixels, em % or VW.
  • Attachment: Default, Scroll or Fixed.
  • Repeat:
    • Default
    • No-repeat
    • Repeat
    • Repeat-x
    • Repeat-y
  • Size:
    • Default
    • Auto
    • Cover
    • Contain
    • Custom: Adjust the image width using pixels, em % or VW.
• Overlay Color: Add an overlay color to cover the background image.

2. Back

The backside of the Premium Hover Box Widget has the same options as the front, but with an addition of an optional link button.

• Icon: Enable or disable an icon.
  • Icon Type: Select or upload a custom image via the Media Library, or select from a list of Font Awesome Icons.
  • Icon Size: Adjust the icon size in pixels, em or %. The default is 40 pixels.
• Title: Add a title to the back face of the Hover Box widget.
  • HTML Tag: Select a tag that will be used to display the title.

• Description: Enable or disable the description and add the content in the Richtext editor.
• Link: Enable or disable adding a button link to the backside of the hover box. If enabled, the following options will be available:
  • Apply on: Select whether if you want the link to be applied on the button only, or on the whole box.
  • Link Type: Select from a list of existing pages, or enter a custom URL.
• Vertical position: Select the position of the content inside the widget’s container. Choose from top, middle and bottom.
• Content Alignment: You can justify the content or align it to the left, center or right.

• Background Type: Choose whether if you want to upload/select an image from the Media Library, or you can add a color/gradient colors.
• Overlay Color: Select an overlay color.

3. Additional settings

• Effect: Select a Hover effect for the Hover Box. Choose from the available effects:
  • Fade
  • Flip
  • Slide
  • Push
  • Zoom
  • Faded Zoom In
  • Faded Zoom Out
• Flip Direction (Appear If the Effect selected is Flip, Slide, and Push): Select the flip direction. Choose between the following:
  • Right to left
  • Left to Right
  • Top to Bottom
  • Bottom to Top
• Hover Text Animation: Enable/Disable Hover Text Animation allows you to make Text animated when the box is flipped ( It works only with the Flip effect).
• Height: Adjust the container’s height.
• Border Type: Select between the following border types, as well as the color and the width of the border on each side of the box:
  • None (Default)
  • Solid
  • Double
  • Dotted
  • Dashed
  • Groove
• Border Radius: Increasing the border-radius will add circular corners to the area with the background behind the text. You can adjust the border-radius in pixels, % or em.
• Advanced Border Radius: Apply custom radius values for Elementor Hover Box widget container. Get the radius value from here.
• Border Radius: Insert border radius values.

Style

• Front
• Back
• Link

1. Front & Back

The style options are identical for the front and back.

Adjust the style settings for the icon, title, and description respectively:

• Box Shadow: Add a shadow around the container by controlling the following settings:
  • Horizontal Position
  • Vertical Position
  • Blur
  • Spread
  • Position:
    • Outline
    • Inset

Icon

• Color: Select a color for the icon.
• Background Color: Select a background color behind the icon.
• Border Type: Select between the following border types, as well as the color and the width of the border on each side of the box:
  • None
  • Solid
  • Double
  • Dotted
  • Dashed
  • Groove
• Border Radius: Increasing the border-radius will add circular corners to the area with the background behind the text. You can adjust the border-radius in pixels, % or em.
• Shadow: Add a shadow behind the icon using the following options:
  • Color
  • Horizontal position
  • Vertical position
  • Blur
• Margin: Adjust the margin in pixels, em or %
• Padding: Adjust the padding in pixels, em or %.

Title and Description

The options for the title and description are identical.

• Text Color: Select a text color for the title.
• In the Typography settings you can:
  • Select from a large number of font families.
  • Select the font size in either pixel, em, rem or vw.
  • Select the font-weight: From 100 (Thin) to 900 (Very Thick), or you can keep it Default, Normal or Bold.
  • Transform the text to Uppercase, Lowercase, Capitalized, Default or Normal.
  • Select a font style: Normal, Italic or Oblique.
  • Select a text-decoration: Default, Underline, Overline, Line Through, or None.
  • Adjust the line-height.
  • Adjust the letter spacing.
• Text Shadow: Add a shadow behind the text by selecting from the following options:
  • Color
  • Horizontal position
  • Vertical position
  • Blur
• Background Color: Select a background color behind the text.
• Margin: Adjust the margin in pixels, em or %.
• Padding: Adjust the padding in pixels, em or %.

2. Link

• Typography.
  • Select the styles for the normal and hover states.
  • Text Color: Select a text color for the link.
  • Text Shadow: Add a shadow behind the button text. Select from the following options:
    • Color
    • Horizontal position
    • Vertical position
    • Blur
• Background color: Select a background color for the button.
• Border Type: Select between the following border types, as well as the color and the width of the border on each side of the button:
  • None
  • Solid
  • Double
  • Dotted
  • Dashed
  • Groove
• Border Radius: Increasing the border-radius will add circular corners to the button. You can adjust the border-radius in pixels, % or em.
• Margin: Margin is the space between the button and the rest of the content. Adjust the margin in pixels, em or %.
• Padding: Padding is the space between the link text and the edge of the button. Increasing the padding will increase the button size. Adjust the padding in pixels, em or %.