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

Updated onApril 9, 2026By

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.
Table Of Content

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.

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

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.

Hotspot pin type image how to use an image as a hotspot pin in elementor? From the plus addons for elementor

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?

About the Author

Photo of Aditya Sharma CMO of The Plus Addons for Elementor
CMO · The Plus Addons for Elementor · 10 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordPressElementorn8nAIClaudeAutomationServer
LinkedIn X GitHub YouTube Website
Get Instant Answers to all your questions about The Plus Addons for Elementor, trained on 1000+ Docs and Videos

Related Frequently Asked Questions

What should I do if my hotspot image isn't displaying correctly in Elementor?

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.

Can I use an image as a hotspot pin for interactive maps in Elementor?

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.

What is the best practice for choosing images for hotspot pins in Elementor?

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.

Why might the tooltip content not appear when using an image as a hotspot pin?

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.

Last reviewed: April 9, 2026

Related Docs