This Article Is For:

• All users who have access to one/all of the following: pages, blogs, contests, and sidebars
• This is applicable to: All themes

Note:

• Critical information should not be contained in the hover box element as hover states do not work on mobile devices.
• Critical info includes: Text or design elements that may be cut off when being displayed on various screen sizes.

Tips:

• The hover widget is approx. 258px in height.
• If you want it to fill your page space, use 100% width
• Text and design elements should not be included in the hover image itself
• We suggest adding text and other design elements under or near the image for best mobile responsive experience.

Step-by-step guide

1. Image: Select an image from the media library
   
2. Primary Title : Enter text for the heading line
3. Primary Title Alignment : Choose an alignment for the title. Choose from: Left, Right, Center, Justify
   
4. Shape : Select a hover box shape. Choose from: Square, Rounded, Round
5. Width : Select block width (percentage). Choose from 10%-100%.
6. Alignment : Choose an alignment for the hover block. Choose from: Left, Right, Center
7. Reverse Blocks :  If selecting yes, this will r everse hover and primary block.
8. Element ID : Enter element ID (Note: make sure it is unique and valid according to w3c specification ).
9. Extra Class Name : If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.

Hover Block Settings:

1. Hover Title:
2. Hover Title Alignment: Select text alignment for hovered title.
3. Hover Text: Enter the text you want displayed when hovered over
4. Background Color: Select color schema using the drop-down
5. Add Button: Add button for call to action. If selecting yes, fill in the hover button settings tab
   

Hover Button Settings :

1. Text : Enter the text for your button
2. URL : Add a link to the button
3. Style : Select a button display style. Choose from: Modern, Classic, Flat, Outline, 3D, Custom, Outline Custom, Gradient, Gradient, Custom
4. Shape : Select button shape. Choose from: Square, Rounded, Round
5. Color : Select color schema using the drop-down
6. Size : Select button display size. Choose from: Mini, Small, Normal, Large
7. Alignment: Select button alignment. Choose from: Inline, Left, Right, Center
8. Add Icon : If choosing yes, fill in the following icon options:
   1. Icon Alignment : Select the icon alignment. Choose from: Left, Right
   2. Icon Library : Select a type of icon set (similar to a style of emoji)
   3. Icon : The options for the icon will change depending on what set you picked above
9. Element ID : Enter element ID (Note: make sure it is unique and valid according to w3c specification ).
10. Extra Class Name : If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.
11. Advanced On Click Yes : Check yes to Insert inline onclick javascript action.