SoCast Knowledge BaseElementsHover Box Element

Hover Box Element

Owned by Kat Harlton
Last updated: Dec 08, 2020

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


 

Content by label

There is no content with the specified labels