Image Hotspots Widget Tutorial

Intro

Giving your visitors the chance to interact with your website with widgets like Elementor Premium Image Hotspots will make them stay longer, improving the conversion chance.

Click here to check Premium Image Hotspots Widget demo.

Requirements:

You will need Premium Addons PRO plugin installed and activated on your website.
Also, make sure that this widget/addon is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

Key Features

Image
Hotspots
Tooltips

1. Image

Choose Image: Select or upload a custom image via the Media Library.
Image Size: Select from the following image sizes:
- Thumbnail – 150 x 150
- Medium – 300 x 300
- Medium Large – 768 x 0
- Large – 1024 x 1024
- Post Thumbnail – 1568 x 9999
- Full
- Custom: Enter values for width and height. You can crop the original image size to any custom size. You can also set a single value for height or width in order to keep the original size ratio.
Stretch Image: Enable or disable image stretching.
- When enabled, it stretches the image to the full container width.
- When disabled, the following option is available:
  - Alignment: Align the image to the left, middle or right. -This option is useful for smaller images.
Floating Effects: Add floating effect animation to backgroud image hotspots.
- Translate: Add a tranlsate effect to background image.
  - Translate X: Set value for X axis tranlsate.
  - Translate Y: Set value for Y axis tranlsate.
  - Speed: Set speed of translate effect.
- Rotate: Add a rotate effect to background image.
  - Rotate X: Set value for X axis.
  - Rotate Y: Set value for Y axis.
  - Rotate Z: Set value for Z axis.
  - Speed: Set speed of rotate effect.
- Opacity:
  - Value: Set minimum value for opacity animation.
  - Speed: Set speed of opacity effect.
- Disable Floating Effects On Safari: You can disable Floating Effects on Safari browser to prevent any layout breaks that can result from compatibility between Safari browser and the modern CSS used to create the floating animations

Add Your Image Hotspots Inside Elementor Page Builder

2. Hotspots

Click the “Add Item” button to add a new hotspot to your image. Click on each one to open and edit it.
You can delete a hotspot by clicking the close “X” button, or you can hold and drag an item to change its position in the list.

Image Hotspots Widget comes with Freehand Design Experience as you will be able to move it by clicking on it directly in the preview and dragging it into its new position. You can also adjust the hotspots’ exact position using the options below.

Radar Animation: Enable or disable the radar animation. Please take a look at the first example in Premium Hotspots Widget demo page.
Select a Font Awesome icon, a custom image from the Medial Library, insert lottie animation URL or add your own text.

Font Awesome Icon for Elementor Hotspots Widget

Select Icon: Select icon from font awesome icon library.

Custom Image for Elementor Hotspots Widget

Custom Image: Select custom image from media library.

Text for Elementor Hotspots Widget

Text: Insert text for hotspot on image.

Lottie Animation for Elementor Hotspots Widget

Animation JSON URL: Set font awesome icon size. Get JSON code URL from here
Loop: Enable loop to run the animation infinitely.
Reverse: Reverse animation direction.

Horizontal Position: Adjust the position using pixels or %.
Vertical Position: Adjust the position using pixels or %.
Color: Pick a color for elementor hotspot item. (text or icon only)
Size: Set size for hotspot item.
Background Color: Pick a background color for hotspot item.
Border Type: Pick border style for hotspot item.
- Width: Set width for hotspot item border.
- Color: Pick a color for hotspot item border.
- Border Radius: Set border radius for hotspot item.
Radar Color: Pick color for animated radar effect of hotspot item.
Radar Border Radius: Set border radius for hotspot item radar animation.
CSS ID: Set CSS ID to hotspot item, it’s very helpful if you can link it wih carousel for example. Please check this article for more calrification.
Content to Show: This content will be visible in the tooltip when the visitor hovers or clicks on the hotspot. Select an existing Elementor template, or add your content in the rich text editor.
- You can use Elementor Live Templates feature to create/edit Elementor template on the same page. For more information, please check Elementor templates article from here.
- You can also select an existing Elemntor templates.
Link: Enable or disable a link.
- When enabled, the hotspot will be clickable. Select from a list of existing pages, or enter a custom URL.
- Link Title: Add a title to the link.

Add Your Own Hotspots to The Image You Recently Uploaded Elementor Image Hotspots Widget — Add Your Own Hotspots to The Image You Recently Uploaded

Hotspots Settings for Elementor Image Hotspots Widget

3. Tooltips

Interactive: Give users the possibility to interact with the content of the tooltip.
Trigger: Show the tooltip either when visitors hover over the hotspot, or when they click on it.
Show Arrow: Enable or disable an arrow that is pointing from the tooltip to the hotspot.
Position: Select between top, left, bottom right.
Spacing: Spacing is the distance between the hotspot and the tooltip. Adjust the spacing using pixels. The default is “6” pixels.
Min Width: Set a minimum width for the tooltip in pixels. The default is “0” (Auto Width).
Max Width: Set a maximum width for the tooltip in pixels. The default is “Null” (No Max Width).
Height: Set custom height for the tooltip box in pixels, em or %.
Animation: Select an animation that will be used to reveal the tooltip when it is triggered. Choose from:
- Fade
- Grow
- Swing
- Slide
- Fall
Animation Duration: Select the animation duration in milliseconds.
Delay: Set the animation delay in milliseconds. The default is “10”.
Hide on Mobiles: When enabled, the tooltip will be hidden on mobile phones.

Adjust Tooltips Settings for Elementor Image Hotspots Widget