---
title: "How to Add an Elementor Hotspot on an Image?"
url: https://theplusaddons.com/docs/add-an-elementor-hotspot-on-an-image/
date: 2024-05-10
modified: 2026-04-09
author: "Aditya Sharma"
description: "Adding hotspots on images, allows users to interact with specific areas of an image. This adds a new level of interactivity and can be used for various purposes, such as..."
image: https://theplusaddons.com/wp-content/uploads/2024/05/How-to-Add-an-Elementor-Hotspot-on-an-Image_-1024x536.jpg
word_count: 938
---

# How to Add an Elementor Hotspot on an Image?

## Key Takeaways

- The Plus Addons for Elementor includes a Hotspot widget that allows users to add interactive hotspots on images.
- Multiple Pin Types feature enables the addition of icons, images, text, and Lottie Files as hotspot pins.
- Tooltip Trigger options allow tooltips to open on hover or click, enhancing user interaction.
- The Hotspot widget requires the PRO version of The Plus Addons for Elementor to access its premium features.

Adding hotspots on images, allows users to interact with specific areas of an image. This adds a new level of interactivity and can be used for various purposes, such as highlighting product features, providing additional information. 

With the Hotspot widget from The Plus Addons for Elementor, you can easily add different types of hotspots on an image in Elementor.

## Check the Live Widget Demo

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/elementor-hotspots/)

## Required Setup

- [Elementor FREE Plugin](http://wordpress.org/plugins/elementor/) installed & activated.

- You need to have [The Plus Addons for Elementor plugin](https://wordpress.org/plugins/the-plus-addons-for-elementor-page-builder/) installed and activated.

- This is a Premium widget, and you need the [PRO version of The Plus Addons for Elementor.](https://theplusaddons.com/pricing//?utm_source=tpae&utm_medium=docs&utm_campaign=text)

- Make sure the Hotspot widget is activated, to verify this visit The Plus Addons → Widgets → and Search for Hotspot and activate.

## Learn via Video Tutorial:

https://www.youtube.com/watch?v=Cmp7vk_RKKE

## How to Activate the Hotspot Widget?

Go to 

- **The Plus Addons **→** Widgets **

- **Search **the widget name** **and** turn on the toggle.**

![](https://theplusaddons.com/wp-content/uploads/2024/05/hotspot.png)

## Key Features

- **Multiple Pin Types** - You can add multiple types of hotspot pins such as an icon, image, text and Lottie Files.

- **Pin Effect** - You can add different types of animation to the hotspot pins.

- **Link** - You can add a link to the hotspot pin.

- **Tooltip Trigger** - You can[ open the hotspot tooltip on hover or click.](https://theplusaddons.com/docs//hotspot-tooltip-on-click-in-elementor/)

## How to Use the Hotspot Widget in Elementor?

Add the Hotspot widget from The Plus Addons for Elementor to the page.

In the **Hotspot Image** section, you have to add the image on which you want to add the hotspots.

![](https://theplusaddons.com/wp-content/uploads/2024/05/hotspot-content.gif)

From the **Image Resolution** dropdown, you can manage the image size. 

Then from the **Add Multiple Pin Hotspot** section, you have to add the hotspots. By default, you’ll find one item open it.

From the **Pin Type** dropdown, you have to select the pin type. Here you’ll find four options - 

- **Icon** - To use an icon as a hotspot.

- **Image** - To [use an image as a hotspot.](https://theplusaddons.com/docs//use-an-image-as-a-hotspot-pin-in-elementor/)

- **Text** - To [use a text as a hotspot](https://theplusaddons.com/docs//use-text-as-a-hotspot-pin-in-elementor/).

- **Lottie** - To [use a Lottie as a hotspot](https://theplusaddons.com/docs//use-lottie-as-a-hotspot-pin-in-elementor/).

Select the option as per your requirements, let’s select Icon here.

From the **Icon Font** dropdown, you have to select the icon font. Based on the selected icon font you’ll get relevant options to add the icon. 

From the **Normal/Hover** tabs, you can add color and background color to the icon for normal and hover states.

Then you have to adjust the hotspot position from the **Left (Auto / %)**, **Right (Auto / %)**, **Top (Auto / %)**, and **Bottom (Auto / %)** toggles for desktop, tablet and mobile separately. 

In the **Content** tab, you have to add the hotspot tooltip content.

From the **Content Type** dropdown, you have to select the content type. Here you’ll find two options -

- **Content Text** - With this option, you can add simple text content.

- **Content WYSIWYG** - With this option, you can add text content with links, images, and videos.

Select the option as per your requirements.

You can manage the text content typography and color from the **Typography** and **Color** sections respectively.

From the **Style** tab, you can style the hotspot tooltip.

In the **Tooltip Options** section, you’ll find different tooltip related options - 

- **Tooltips Interactive** - By enabling this toggle you can interact with the tooltip content i.e. you can click on links, play videos etc. inside the tooltip.

- **Position** - From here, you can set the tooltip position.

- **Theme** - From here, you can change the tooltip theme.

- **Width** - From here, you can set the tooltip width.

- **Offset** - From here, you can move the tooltip left and right direction from the hotspot.

- **Distance** - From here, you can move the tooltip top and bottom direction from the hotspot.

- **Arrows** - From here, you can select the tooltip arrow type.

- **Trigger** - From here, you can set the tooltip open trigger, you can open the tooltip on click or hover.

- **Animation** - From here, you set the tooltip animation.

- **Duration In** - From here, you can set the tooltip open animation duration.

- **Duration Out** - From here, you can set the tooltip close animation duration.

From the **Style Options** section, you can add padding, background color, border, box shadow etc. to the tooltip.

From the **Continues Effect** dropdown, you can add different continuous animation effects to the hotspot.

Then by enabling the **Link** toggle, you can add a link to the hotspot.

Click on the **+ Add Item** button to add more hotspots to the image.

## How to Style the Hotspot Widget?

To style the Hotspot widget, you’ll find all the options under the **Style** tab. 

**Pin Icon** - From here, you can style the icon in the hotspot.

![](https://theplusaddons.com/wp-content/uploads/2024/05/hotspot-style.png)

**Pin Image** - From here, you can style the image in the hotspot.

**Pin Text** - From here, you can style the text in the hotspot.

**Lottie** - From here, you can style the Lottie in the hotspot.

**Common Styling** - From here, you can set common styling for the icon/text and tooltip for all the hotspots at once.

**Extra Options** - From here, you can add an overlay background for the tooltip, you can set a visibility delay for the tooltip and you can also add custom [CSS transform](https://www.w3schools.com/cssref/css3_pr_transform.php) to the tooltip.

**On Scroll View Animation** -  This is our global extension available for all our widgets, this adds scrolling animation as the widget comes in the viewport. You can learn more about this from here.

[Learn more a](https://theplusaddons.com/docs//on-scroll-view-animation/)[bout ](https://theplusaddons.com/docs//on-scroll-view-animation/)[On Scroll View Animation](https://theplusaddons.com/docs//on-scroll-view-animation/)

Advanced options remain common for all our widget, you can explore all its options from here.

[View Advanced Tab Tutorial](https://docs.posimyth.com/tpae/advanced-tab/?_gl=1*9613g8*_ga*NDA4ODUyMjYwLjE3MDEyMzIxNzE.*_ga_WXCC3REEFQ*MTcxNjIwMDA4OS40MzMuMS4xNzE2MjA0NjkyLjU5LjAuMA..)

## Frequently Asked Questions

**Q: What should I do if the Hotspot widget is not showing up in Elementor?**
A: If the Hotspot widget is not appearing, ensure that you have both the Elementor FREE Plugin and The Plus Addons for Elementor installed and activated. Additionally, verify that the Hotspot widget is activated by navigating to The Plus Addons u2192 Widgets and searching for Hotspot. If it's not activated, toggle it on to make it available.

**Q: How do I add multiple hotspots to an image in Elementor?**
A: To add multiple hotspots, start by adding the Hotspot widget to your page. In the Add Multiple Pin Hotspot section, click the + Add Item button to create additional hotspots. For each hotspot, you can select different pin types such as icon, image, text, or Lottie, allowing for diverse interactive elements on your image.