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

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

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

    • How Do I Make an Events Page Look Uniform Using the Display Events Element in SoCast Engage?

      To make your events page look more uniform and organized in SoCast Engage, use the Display Events element. This element is designed to showcase a list of upcoming events in a clean, structured format with customizable layouts, pagination, title ...

    • Can I Upload Audio Files to SoCast Engage?

      You can upload audio files (e.g., MP3s) to the Media Library in SoCast Engage and insert them into your pages or blog posts. Please note the maximum file size is 100MB. Uploading an Audio File Log in to SoCast Engage. Navigate to Media > Add Media. ...