---
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-09-22
lang: en
author: "Aditya Sharma"
description: "A small photo, a product thumbnail or a brand marker often reads better than a generic icon - especially when the pins need to say something themselves. The Hotspot widget's..."
image: https://theplusaddons.com/wp-content/uploads/2024/05/How-to-Use-an-Image-as-a-Hotspot-in-Elementor_-1024x536.jpg
word_count: 552
---

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

## 

- The Hotspot widget in The Plus Addons for Elementor Pro supports Pin Type set to Image, so the pin becomes the chosen picture and can show an optional Pin Hover Image when the visitor points at it.
- The Plus Addons for Elementor shows Pin Image and Pin Hover Image only when Pin Type is Image, while positioning, tooltips, and links work the same for every pin type.
- The Plus Addons for Elementor Pro does not render the Hotspot image-pin feature on the free plugin, and it has no separate alt text for the pin image.

A small photo, a product thumbnail or a brand marker often reads better than a generic icon - especially when the pins need to say something themselves.

The **Hotspot** widget's **Pin Type** setting has an **Image** option. Pick it and the pin becomes whatever picture you choose, with an optional second picture for when the visitor points at it.

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

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/hotspots/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** Pro. The widget does not render on the free plugin.- **Switch it on:** **The Plus Addons > Widgets**, search **Hotspot**, turn the toggle on.- **A small, square-ish image** for the pin. Large images are scaled down by the Style tab, but a big file still has to download.- New to the widget? Start with [How to Add an Elementor Hotspot on an Image?](https://theplusaddons.com/docs/add-an-elementor-hotspot-on-an-image/)

## Steps

- Select the **Hotspot** widget and open a row of **Add Multiple Pin Hotspot**.- Set **Pin Type** to **Image**.- Choose your picture in **Pin Image**.- Optionally set **Pin Hover Image** - a second picture shown while the pointer is on the pin.- Size it in **Style > Pin Image** with **Pin Image Size** and **Pin Image Width**.

![Pin Type set to Image, with the Pin Image control below it.](https://theplusaddons.com/wp-content/uploads/2026/09/hotspot-pin-image.webp)

## What You Will See

On the published page the pin is your picture. We checked the rendered pin and found an image element in place of the icon - the icon element is not output at all when **Pin Type** is **Image**. The tooltip still opened when we pointed at it, exactly as with an icon pin.

![A hotspot using a picture as its pin, with the tooltip open.](https://theplusaddons.com/wp-content/uploads/2026/09/hotspot-result-image.webp)

![Animated demo of using an image as a hotspot pin.](https://theplusaddons.com/wp-content/uploads/2024/05/hotspot-pin-type-image.gif)

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| **Pin Type** | Icon, Image, Text or Lottie | Icon |
| **Pin Image** | The picture used as the pin | Empty |
| **Pin Hover Image** | Shown while the pointer is on the pin | Empty |
| **Pin Image Size** | Pin size, in the Style tab | Theme default |
| **Pin Image Width** | Pin width, in the Style tab | Theme default |

## How It Behaves

- **Pin Image** and **Pin Hover Image** only appear while **Pin Type** is **Image**. Switch the type and they are hidden again - your choices are kept, not deleted.- Positioning, tooltips and links work the same for every pin type; only the marker changes.- An image pin sidesteps the blank-icon problem completely, because it does not need an icon font.- **Pin Type** is per pin, so one image can mix picture pins and icon pins.

## Limitations

- Pro only.- There is no separate alt text for the pin image.- Very wide or very tall pictures look lopsided as pins; the Style tab scales them but does not crop them.

## Troubleshooting

### I cannot see the Pin Image control

**Pin Type** is still **Icon**, **Text** or **Lottie**. Set it to **Image** and the control appears.

### The pin is far too big

Use **Pin Image Size** and **Pin Image Width** in **Style > Pin Image**.

### The hover image never shows

**Pin Hover Image** only swaps in while the pointer is on the pin. On a touch screen there is no hover, so the visitor only ever sees **Pin Image**.

## Not verified

So you know exactly what has and has not been checked:

- **Pin Hover Image** swapping in on hover - we set the pin image only.- **Pin Image Size** and **Pin Image Width** at non-default values.- SVG files as the pin image.

## Related Docs

- [How to Add an Elementor Hotspot on an Image?](https://theplusaddons.com/docs/add-an-elementor-hotspot-on-an-image/)- [How to Use Text as a Hotspot Pin in Elementor?](https://theplusaddons.com/docs/use-text-as-a-hotspot-pin-in-elementor/)- [How to Open a Hotspot Tooltip on Click in Elementor?](https://theplusaddons.com/docs/hotspot-tooltip-on-click-in-elementor/)

## Frequently Asked Questions

**Q: Why is the pin image control missing in Hotspot?**
A: The Pin Image control only appears when Pin Type is set to Image. If the pin is still on Icon, Text, or Lottie, that control stays hidden by design. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH uses this per-pin setup so each hotspot can keep its own marker type without changing the rest of the widget.

**Q: What kind of image works best as a hotspot pin?**
A: A small, square-ish image works best for a hotspot pin. Large images are scaled down in the Style tab, but the file still has to download first, so oversized artwork can slow things down for no visual gain. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH keeps the pin flexible, but the cleanest result comes from an image that already fits a compact marker shape.

**Q: Can I use a different image when someone hovers over the pin?**
A: The Hotspot widget includes an optional Pin Hover Image that swaps in while the pointer is on the pin. That gives you a second visual state without changing the tooltip behavior. On touch screens there is no hover state, so visitors only see Pin Image. That matters if your design depends on hover feedback, because mobile users will never trigger it.

**Q: Does an image hotspot pin still open the tooltip?**
A: The tooltip still opens with an image pin. On the published page, the marker becomes an image element instead of an icon element, but positioning and tooltip behavior stay the same. That means The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH changes only the marker type here, not how the hotspot itself behaves.

**Q: What are the limitations of using an image as a hotspot pin?**
A: This setup is Pro only, and there is no separate alt text field for the pin image. Very wide or very tall images can also look lopsided because the Style tab scales them but does not crop them. For cleaner results, keep the pin artwork compact and close to square so it reads like a marker instead of a thumbnail.

**Q: How do I fix a hotspot pin that looks too big?**
A: Pin Image Size and Pin Image Width in Style > Pin Image control how large the marker appears. Those settings are there because even a small source image can render too large inside a hotspot layout. If it still feels oversized after scaling, start with a smaller source file so you are not forcing a big asset into a tiny pin shape.