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.
  • Alignment: Align the image to the left, middle, or right. -This option is useful for smaller images.
  • Floating Effects: Add floating effect animation to background image hotspots.
    • Translate: Add a translate effect to background image.
    • Rotate: Add a rotate effect to background image.
    • Opacity:
      • Value: Set minimum value for opacity animation.
      • Speed: Set the speed of the 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.
Set the Image settings for Elementor Image hotspot.
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.

  • Radar Animation: Enable or disable the radar animation. Please take a look at the first example on Premium Hotspots Widget demo page.

Hotspot – Content

  • CSS ID: Set CSS ID to hotspot item, it’s very helpful if you can link it with any Elementor element.
  • Hotspot Type
    • Font Awesome Icon
      • Select Icon: Select an icon from Font Awesome icon library.
    • Custom Image: Select a custom image from the media library.
    • Text: Insert text for hotspot on the image.
    • Lottie Animation
      • 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.
    • 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 template.
  • Open By Default: Open the hotspot tooltip by default with no need to hover on it.
  • Link: Enable to make hotspots will be clickable. Select from a list of existing pages, or enter a custom URL.
    • Icon Title: Add a title to the icon.

Hotspot – Style

  • 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 the hotspot item.
  • Border Type: Pick the border style for the hotspot item.
    • Width: Set width for hotspot item border.
    • Color: Pick a color for the hotspot item border.
    • Border Radius: Set border radius for hotspot item.
  • Radar Color: Pick the color for the animated radar effect of the hotspot items.
  • Radar Border Radius: Set border radius for hotspot item radar animation.
Add Your Own Hotspots to The Image You Recently Uploaded
Hotspots Settings for Elementor Image Hotspots Widget
Hotspots Settings for Elementor Image Hotspots Widget
  • Open By Default: Open the hotspot tooltip by default with no need to hover on it.
  • Link: Enable to make hotspots will be clickable. Select from a list of existing pages, or enter a custom URL.
    • Icon Title: Add a title to the icon.
Elementor Image Hotspot open by default option, and enable clickable link.
Image Hotspot – Settings

3. Tooltips

  • Interactive: Give users the possibility to interact with the content of the tooltip.
  • Mouse Trigger: Show the tooltip either when visitors hover over the hotspot, or when they click on it.
  • Tooltip Arrow: Enable or disable an arrow that is pointing from the tooltip to the hotspot.
  • Tooltip Position: Select between top, left, bottom, or 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.
  • 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.
Modify Tooltip Preferences for the Premium Addon Image Hotspots Widget.
Adjust Tooltips Settings for Elementor Image Hotspots Widget

Style

  • Image
  • Hotspots
  • Tooltips
  • Icon Label
  • Container

1. Image

  • Width: Set the width for the tooltip.
  • Max Width: Set a maximum width for the tooltip.
  • Height: Set the tooltip height.
  • CSS Filters: You can also customize the image style further by selecting one of the available filters: Blur, Brightness, Contrast, Saturation, or Hue.
  • Hover CSS Filters: You can also customize the image further by selecting one of the available hover filters: Blur, Brightness, Contrast, Saturation, and Hue.
  • Blend Mode: Select the image’s blend mode.
  • Border Type: Select between the following border types, as well as the color and the width of the border on each side of the image.
  • Border Radius: Increasing the border-radius will add circular corners to the image.
  • Padding: Adjust the padding using pixels, em, or %.
Customize Your Image Hotspots for Elementor

2. Hotspots

Select whether to style the icon, image, or text respectively.

Icon
  • Color: Pick a color for the icon.
  • Size: Set the icon size using pixels or em.
  • Background Color: Pick a background color for the icon.
  • Border Type: Select between the following border types, as well as the color and the width of the border on each side of the icon’s container.
  • Border Radius: Increasing the border-radius will add circular corners to the icon’s container.
  • Advanced Border Radius: Apply custom radius values for Elementor hotspots widget icon. Get the radius value from here.
  • Border Radius: Insert border radius values.
  • Shadow: Add a shadow behind the icon. Adjust the following options to make it match your needs.
  • Margin: Margin is the space between the icon and the rest of the content. Increasing the margin will increase the size of the radar animation if it is enabled.
  • Padding: Padding is the space between the icon and its container. Increasing the padding will increase the size of the background.
Icon Adjustment Choices for Elementor Image Hotspots Widget.
Hotspots Icon Customization Options for Elementor Image Hotspots Widget
Image/Lottie
  • Size: Set the image size using pixels or em.
  • Background Color: Pick a background color behind the image. Usable for transparent images or when the padding has been adjusted.
  • Border: Adjust Border Type, Color, Size, and Radius.
  • Margin: Margin is the space between the image and the rest of the content. Increasing the margin will increase the size of the radar animation if it is enabled.
  • Padding: Padding is the space between the image and its container. Increasing the padding will increase the size of the background.
Customize Image Hotspots for the Elementor Widget by Premium Addons.
Elementor Image Hotspots Widget Customize Hotspots Image
Text
  • Text Color: Pick a color for the text.
  • Typography: Adjust font settings.
  • Text Shadow: Add a shadow behind the text.
  • Background Color: Pick a background color behind the text.
  • Margin: Margin is the space between the text and the rest of the content. Increasing the margin will increase the size of the radar animation if it is enabled.
  • Padding: Padding is the space between the text and its container. Increasing the padding will increase the size of the background.
Style and Modify Text Hotspots for the Elementor Widget
Elementor Image Hotspots Widget Customize and Style Hotspots Text

3. Tooltips

  • Text Color: Pick a color for the text.
  • Typography: Adjust font settings.
  • Text Shadow: Add a shadow behind the text.
  • Background Color: Pick a background color for the text.
  • Border: Select Border Type, color, size, and radius.
  • Box Shadow: Add a shadow around the container.
  • Margin: Margin is the space between the tooltip and the rest of the content.
Adjust Tooltips Styling Settings for Elementor Image Hotspots Widget
Adjust Tooltips Styling Settings for Elementor Image Hotspots Widget

4. Icon Label

  • Minimum Width: Set a minimum width for the icon label in pixels.
  • Text Color: Pick a color for the text.
  • Typography: Adjust font settings.
  • Text Shadow: Add a shadow behind the text.
  • Background Color: Pick a background color for the text.
  • Border Type: Select Border Type, color, size, and radius.
  • Box Shadow: Add a shadow around the container.
  • Margin: Margin is the space between the tooltip and the rest of the content.

5. Container

  • Background Color: Pick a color for the container background.
  • Border: Select Border Type, Color, Size, and Radius.
  • Box Shadow: Add a shadow around the container.
  • Margin: Margin is the space between the widget and the rest of the page content.
  • Padding: Padding is the space between the widget content and the edge of the container. Increasing the padding will increase the size of the background.
Adjust and Customize Image Hotspots Container for Elementor Image Hotspots Widget
Adjust Container’s style for Elementor Image Hotspots Widget

Related Docs:

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 44+ Elementor Widgets Totally Free of charge.

Premium Addons for Elementor plugin logo

Stay Updated

Subscribe to our newsletter to receive the latest updates and features.