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.

    • Related Articles

    • What Are Elements in SoCast and How Can I Use Them on My Website?

      What Are Elements in SoCast and How Can I Use Them on My Website? An Element is a small, functional block you can add to your website to enhance its design and structure. Elements are easy to use and can be dragged and dropped into your pages, ...

    • What Content Can and Cannot Be Syndicated with RSS Subscription in SoCast?

      What Content Can and Cannot Be Syndicated with RSS Subscription in SoCast? Use this guide to see which widgets and page elements are included when you syndicate blog content via RSS. This list will be updated as new features are released. Widgets and ...

    • How Do I Add a Clickable PDF Link to a Page in SoCast?

      How Do I Add a Clickable PDF Link to a Page in SoCast? Who Is This Article For? All users with access to Pages Applicable to all themes Follow these instructions to add a clickable PDF link to a page, blog post, or other content area in SoCast. ...

    • How Do I Use the Message Box Element in SoCast?

      How Do I Use the Message Box Element in SoCast? Who Is This For? This Article Is For: All users who have access to pages, blogs, contests, or sidebars. Applicable to all themes. The Message Box element lets you add styled message boxes to your ...

    • How Do I Use The Section Element To Group Rows In SoCast Engage?

      How Do I Use the Section Element to Group Rows in SoCast Engage? Who Is This For? All users with access to pages, blogs, contests, and sidebars Applicable to all themes Step-by-Step Guide Click the Add Element button. Select the Section element. Use ...