---
title: "How to Use an Image as a Hotspot Pin in Elementor?"
url: https://theplusaddons.com/docs/use-an-image-as-a-hotspot-pin-in-elementor/
date: 2024-05-13
modified: 2026-04-09
author: "Aditya Sharma"
description: "Do you want to use an image as a hotspot in Elementor? Using an image as a hotspot over an image allows you to make the hotspot more creative. With the..."
image: https://theplusaddons.com/wp-content/uploads/2024/05/How-to-Use-an-Image-as-a-Hotspot-in-Elementor_-1024x536.jpg
word_count: 215
---

# How to Use an Image as a Hotspot Pin in Elementor?

## Key Takeaways

- The Plus Addons for Elementor includes a Hotspot widget that allows users to creatively use images as hotspots.
- Users can add different images for the hover state in the Pin Hover Image section of the Hotspot widget.
- The Hotspot widget requires installation and activation of The Plus Addons for Elementor to function.

Do you want to use an image as a hotspot in Elementor? Using an image as a hotspot over an image allows you to make the hotspot more creative. With the Hotspot widget from The Plus Addons for Elementor, you can easily use an image as a hotspot in Elementor.

*To check the complete feature overview documentation of The Plus Addons for Elementor Hotspot widget, [click here](https://theplusaddons.com/docs//add-an-elementor-hotspot-on-an-image/).*

***Requirement  - This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.***

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

To do this, add the Hotspot widget from The Plus Addons for Elementor on the page and follow the steps -

1. Add the appropriate image in the **Hotspot Image** section.

2. Then open the repeater item on which you want to use an image. Then select **Image** from the **Pin Type** dropdown.

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

3. After that you have to add your image in the **Pin Image** section.

You can also add a different image for the hover state in the **Pin Hover Image** section.

4. Then add the appropriate content for the tooltip from the **Pin Content** section.  

Now you will see your image as a hotspot over the image.

***Suggested Reading***: *[How to Use Text as a Hotspot Pin in Elementor?](https://theplusaddons.com/docs//use-text-as-a-hotspot-pin-in-elementor/)*

## Frequently Asked Questions

**Q: What should I do if my hotspot image isn't displaying correctly in Elementor?**
A: If your hotspot image isn't showing up, check that you've added the correct image in the Hotspot Image section. Ensure that the image format is supported and that the file size isn't too large, as this can affect loading. Additionally, verify that the Hotspot widget from The Plus Addons for Elementor is properly installed and activated.

**Q: Can I use an image as a hotspot pin for interactive maps in Elementor?**
A: Using an image as a hotspot pin can enhance interactive maps by making them visually engaging. The Hotspot widget from The Plus Addons for Elementor allows you to use images creatively, making it suitable for applications like interactive maps, product showcases, or infographics.

**Q: What is the best practice for choosing images for hotspot pins in Elementor?**
A: Select images for hotspot pins that are clear and relevant to the content they represent. High-quality images that contrast well with the background will ensure visibility. Additionally, consider using different images for the hover state in the Pin Hover Image section to provide a dynamic user experience.

**Q: Why might the tooltip content not appear when using an image as a hotspot pin?**
A: If the tooltip content isn't appearing, ensure that you've filled out the Pin Content section correctly. Missing or empty fields can prevent the tooltip from displaying. Also, check the visibility settings of the tooltip to confirm it is enabled and not hidden behind other elements.