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


  • 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. 


  • 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 reverse 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.


 

Related articles

Related articles appear here based on the labels you select. Click to edit the macro and add or change labels.



Related issues