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
Add Your Image Hotspots Inside Elementor Page Builder
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.
  • 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
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
Adjust Tooltips Settings for Elementor Image Hotspots Widget

Style

  • Image
  • Hotspots
  • Tooltips
  • Container

1. Image

  • 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:
    • None
    • Solid
    • Double
    • Dotted
    • Dashed
    • Groove
  • Border Radius: Increasing the border-radius will add circular corners to the image. You can adjust the border-radius in pixels, % or em.
  • Padding: Adjust the padding using pixels, em or %.
Customize Your Image Hotspots for Elementor
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:
    • None
    • Solid
    • Double
    • Dotted
    • Dashed
    • Groove
  • Border Radius: Increasing the border-radius will add circular corners to the icon’s container. You can adjust the border-radius in pixels, % or em.
  • 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:
    • Color
    • Horizontal Position
    • Vertical Position
    • Blur
  • 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. Adjust the margin using pixels, em or %.
  • Padding: Padding is the space between the icon and its container. Increasing the padding will increase the size of the background. Adjust the padding using pixels, em or %.
Hotspots Icon Customization Options for Elementor Image Hotspots Widget
Hotspots Icon Customization Options for Elementor Image Hotspots Widget
Image
  • 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. Adjust the margin using pixels, em or %.
  • Padding: Padding is the space between the image and its container. Increasing the padding will increase the size of the background. Adjust the padding using pixels, em or %.
Elementor Image Hotspots Widget Customize Hotspots Image
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. Adjust the following options:
    • Color
    • Horizontal Position
    • Vertical Position
    • Blur
  • 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. Adjust the margin using pixels, em or %.
  • Padding: Padding is the space between the text and its container. Increasing the padding will increase the size of the background. Adjust the padding using pixels, em or %.
Elementor Image Hotspots Widget Customize and Style Hotspots Text
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. Adjust the following options:
    • Color
    • Horizontal Position
    • Vertical Position
    • Blur
  • 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. Adjust the color and the following settings:
    • Horizontal Position
    • Vertical Position
    • Blur
    • Spread
    • Position: Outline or Inset
  • Margin: Margin is the space between the tooltip and the rest of the content. Adjust the margin using pixels, em or %.
Adjust Tooltips Styling Settings for Elementor Image Hotspots Widget
Adjust Tooltips Styling Settings for Elementor Image Hotspots Widget

4. Container

  • Background Color: Pick a color for container background.
  • Border: Select Border Type, Color, Size, and Radius.
  • Box Shadow: Add a shadow around the container. Adjust the color and the following settings:
    • Horizontal Position
    • Vertical Position
    • Blur
    • Spread
    • Position: Outline or Inset
  • Margin: Margin is the space between the widget and the rest of the page content. Adjust the margin using pixels, em or %.
  • 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 the padding using pixels, em or %.
Adjust and Customize Image Hotspots Container for Elementor Image Hotspots Widget
Adjust and Customize Image Hotspots Container for Elementor Image Hotspots Widget

Related Docs:

Download Now it's free!

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

×