Hotspot Widget (Pro)

The Hotspot Widget focuses on helping you create interactive images that can help you highlight relevant information, boost engagement and increase conversions for your website.

Controls

Background

1. Image – Chose the background image of the viewport
2. Image Size – Choose the appropriate size based on width and height of wrapper
3. Alignment – Choose between left, center, or right alignment

Hotspot

Content

1. Label – Enter text to display a label rather than a icon indicator
2. Link – Enter a URL link for the hotspot. Dynamic Options may be applied
3. Icon – Chose the icon of your hotspot from the library or upload your own in SVG format
4. Custom HotSpot Size – Toggle this to enable a custom size for the Label
5. Min Width – Adjust the width of the Label
6. Min Height – Adjust the height of the Label
7. Tooltip Content – Using the text editor, enter the content you wish to display in the tooltip content HTML is allowed

Tip: You can use the Dynamic Options in the Link to open an Elementor Popup rather than a tooltip.

Position

1. Horizontal Orientation – Choose the starting position of your hotpot between left or right
2. Offset – Use the slider to adjust the horizontal position of the hotspot in %
3. Vertical Orientation – Choose the starting position of your hotpot between Top or Bottom
4. Offset – Use the slider to adjust the vertical position of the hotspot in %
5. Custom Tooltip Position – Provides additional options for display for only the current hotspot
   1. Position – Choose between Left, Top, Right, or Bottom
   2. Width – Adjust the width of the box in PX or %
6. Text Wrapping – Toggle this to enable text wrapping in your Hotspot
7. Animation – Select the animation of your icon
8. Sequenced Animation – Toggle to select the use of a sequenced animation effect
9. Sequence Duration – If sequenced animation is selected, determine the duration of the animation sequence in ms

Tooltip

1. Position – Chose the position of the tooltip content between Left, Top, Right, or Bottom
2. Trigger – Select between Hover or Click
3. Animation – Select the animation for your tooltip to appear
4. Duration – Adjust the time of the animation in ms

Note: If the Custom Tooltip Position is enabled, the Custom Box Position will be used, rather than the general Tooltip Position.

Style

Background

1. Width – Adjust the width of your background image in px, %, or vw
2. Height – Adjust the height of your background image in px, %, or vh
3. Opacity – Adjust the opacity of your background image

Hotspot

1. Color – Use the color picker to choose your hotspot color
2. Size – Adjust the size of your hotspot
3. Typography – Select the font properties of the hotspot label
4. Width – Adjust the width of the hotspot label area in px or %
5. Box Color – Use the color picker to choose the label background color
6. Padding – Adjust the padding of the label
7. Border Radius – Set the border radius of the label
8. Box Shadow – Create a shadow effect for the label box

Tooltip

1. Text Color – Use the color picker to choose your tooltip content text color
2. Typography – Select the font properties of the tooltip
3. Alignment – Choose left, right, justified text alignment of the tooltip

Box

1. Width – Adjust the width of the tooltip box in px or %
2. Padding – Set the padding of the tooltip box in px, em, or %
3. Color – Use the color picker to choose your tooltip background color
4. Border Radius – Set the border radius of the tooltip box
5. Box Shadow – Create a shadow effect for the tooltip box

Advanced

There are no additional options specific to this widget in the Advanced tab.