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 on your website, which improves 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.
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.

  • Select a Font Awesome icon, a custom image from the Medial Library, or add your own text.
  • Horizontal Position: Adjust the position using pixels or %.
  • Vertical Position: Adjust the position using pixels or %.
  • 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.

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

Add Your Own Hotspots to The Image You Recently Uploaded

3. Tooltips

  • 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 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

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

2. Hotspots

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

Icon
  • Color: Select a color for the icon.
  • Size: Adjust the icon size using pixels or em.
  • Background Color: Select a background color behind 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.
  • 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
Image
  • Size: Adjust the image size using pixels or em.
  • Background Color: Select 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 %.
Customize Hotspots Image
Text
  • Text Color: Select 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: Select 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 %.
Customize and Style Hotspots Text

3. Tooltips

  • Text Color: Select 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: Select a background color behind 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

4. Container

  • Background Color: Set a container background color.
  • 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

Download Now it's free!

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

Close Menu