How Do I Use the Hover Box Element in SoCast?

How Do I Use the Hover Box Element in SoCast?

How Do I Use the Hover Box Element in SoCast?

Who Is This Article For?

  • All users with access to pages, blogs, contests, and sidebars
  • Applicable to all themes

Important Notes

  • Do not place critical information in the Hover Box element, as hover states do not work on mobile devices.
  • Critical information includes text or design elements that may be cut off or not display correctly on various screen sizes.

Tips for Using the Hover Box Element

  • The Hover Box is approximately 258 px tall.
  • To make it full width, set Width to 100%.
  • Do not include text or design elements within the hover image itself.
  • For the best mobile experience, place text and design elements under or near the image.

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 (Left, Right, Center, or Justify).
  4. Shape: Select a hover box shape (Square, Rounded, or Round).
  5. Width: Select the block width as a percentage (10%–100%).
  6. Alignment: Choose an alignment for the hover block (Left, Right, or Center).
  7. Reverse Blocks: If set to "Yes," this reverses the hover and primary blocks.
  8. Element ID: Enter a unique and valid element ID according to W3C specifications.
  9. Extra Class Name: Add a class name if you want to style this element differently in your CSS file.

Hover Box Element Example

Hover Block Settings

  1. Hover Title: Enter the title to display on hover.
  2. Hover Title Alignment: Select the alignment for the hover title.
  3. Hover Text: Enter the text to display on hover.
  4. Background Color: Select a color scheme from the drop-down menu.
  5. Add Button: Add a call-to-action button. If set to "Yes," complete the Hover Button Settings section below.

Hover Block Settings Example

Hover Button Settings

  1. Text: Enter the text for your button.
  2. URL: Add a link for the button.
  3. Style: Select a button display style (Modern, Classic, Flat, Outline, 3D, Custom, Outline Custom, Gradient, or Gradient Custom).
  4. Shape: Select the button shape (Square, Rounded, or Round).
  5. Color: Select a color scheme from the drop-down menu.
  6. Size: Choose the button size (Mini, Small, Normal, or Large).
  7. Alignment: Select the button alignment (Inline, Left, Right, or Center).
  8. Add Icon: If set to "Yes," configure the following options:
    1. Icon Alignment: Choose Left or Right.
    2. Icon Library: Select an icon set (similar to an emoji style).
    3. Icon: The available icons will depend on the selected set.
  9. Element ID: Enter a unique and valid element ID according to W3C specifications.
  10. Extra Class Name: Add a class name if you want to style this button differently in your CSS file.
  11. Advanced On Click: Check "Yes" to insert an inline JavaScript action for the button's onclick event.

Hover Button Settings Example

By following these steps, you can use the Hover Box element to enhance your digital content and audience engagement on your SoCast-powered website.