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 widget is approximately 258px in height.
  • To fill your page space, use 100% width.
  • 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 will reverse the hover and primary block.
  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 hovered title.
  3. Hover Text: Enter the text to display when hovered over.
  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 effectively 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? This Article Is For: All users who have access to pages, blogs, contests, or sidebars Applicable to all themes The Message Box element allows you to add styled message boxes to your content. Follow the ...

    • How Do I Use the Call to Action Element in SoCast?

      How Do I Use the Call to Action Element in SoCast? This Article Is For: All users with access to pages, blogs, contests, and sidebars Applicable to all themes The Call to Action (CTA) element is a widget designed to capture your visitors' attention ...

    • 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 that you can add to your website to enhance its design and structure. Elements are easy to use and can be dragged and dropped into 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 ...

    • How Do I Use the Button Element in SoCast?

      How Do I Use the Button Element in SoCast? Who Is This Article For? All users with access to pages, blogs, contests, or sidebars Applicable to all themes This article provides step-by-step instructions for configuring the Button element in SoCast. ...