Hotspot
The Hotspot Widget focuses on creating interactive images that highlight relevant information, boost engagement, and increase conversions on your website.
Content Tab
Image
- Choose Image: Click here to select or upload the image you want to use as a base for your hotspots.
- Image Resolution: Select the resolution for the image; choices typically range from thumbnail to full size.
- Alignment: Set the alignment of the image within its container; options include left, center, and right alignment.
Hotspot
- Hotspot: This section lists all the hotspots you've added. Click on an item to expand and edit it, or click the "Add Item" button to create a new hotspot.
- Content:
- Label: Enter the text that will appear in the hotspot.
- Link: Add a URL to make the hotspot clickable.
- Icon: Choose an icon for your hotspot or toggle it off to have a text-only hotspot.
- Custom Hotspot Size: Toggle this to enable custom sizing for this specific hotspot.
- Tooltip Content: Enter the text that will be displayed in the tooltip. You can use the text editor for formatting and adding media.
- Position
- Horizontal Orientation: Adjust the horizontal position of the hotspot on the image.
- Vertical Orientation: Adjust the vertical position of the hotspot on the image.
- Offset: A the horizontal or vertical position of the hotspot in %.
- Custom Tooltip Position – Provides additional options for display for only the current hotspot
- Position: Choose between Left, Top, Right, or Bottom.
- Width: Adjust the width of the box in PX or %.
- Content:
- Animation: Select an animation for the hotspot, like Expand, which can visually indicate the hotspot location.
- Sequenced Animation: Toggle this to enable animations to play in sequence rather than all at once.
- Sequence Duration (ms): If sequenced animation is on, this determines the duration between the animations.
Tooltip
- Position: Choose where the tooltip appears relative to the hotspot (e.g., top, bottom, left, right).
- Trigger: Select what will cause the tooltip to display (e.g., hover, click).
- Animation: Choose the animation effect for the tooltip (e.g., fade, grow, slide).
- Duration (ms): Set the time for the animation effect to complete.
Style Tab
Image
- Width: Set the width of the image as a percentage of its container element.
- Max Width: Define the maximum width of the image as a percentage to ensure it does not exceed a certain size.
- Height: Specify the height of the image in pixels.
- Opacity: Adjust the transparency of the image, with 1 being fully opaque and 0 being fully transparent.
- CSS Filters: Apply CSS filters to the image for effects like blur or brightness.
- Border Type: Choose the type of border around the image; options may include none, solid, double, dotted, dashed, etc.
- Border Radius: Set the radius for the corners of the image border to create rounded corners.
- Box Shadow: Apply a shadow effect to the image to help it stand out from the background.
Hotspot
- Color: Select the color of the hotspot markers.
- Size: Define the size of the hotspot markers in pixels.
- Typography: Customize the font properties of text within the hotspot markers.
- Min Width: Set a minimum width for the hotspot area.
- Min Height: Set a minimum height for the hotspot area.
- Box Color: Choose a background color for the hotspot marker.
- Padding: Set the padding around the hotspot marker content.
- Border Radius: Adjust the roundness of the hotspot marker corners.
- Box Shadow: Add a shadow to the hotspot markers for a 3D effect.
Tooltip
- Text Color: Change the color of the text within the tooltip.
- Typography: Customize the typography of the tooltip text.
- Alignment: Align the text within the tooltip to the left, center, or right.
- Box
- Width: Adjust the width of the tooltip box.
- Padding: Set the space inside the tooltip box around the text.
- Color: Choose a color for the tooltip background.
- Border Radius: Define the roundness of the tooltip corners.
- Box Shadow: Apply a shadow to make the tooltip stand out.