How to Add Interactive Image Hotspots in Divi Without Coding

When you hover over an image on a website and see extra details appear, that is an image hotspot. It is one of those small details that make a website feel alive, interactive, and genuinely useful. You do not need to write a single line of code to add this feature to your Divi website.

From product showcases and team pages to interactive maps and real estate layouts, image hotspots can take your design from static to seriously impressive. Let’s see how you can add interactive image hotspots in Divi without writing any code.

Step One: Open the Divi Builder

Head over to the page where you want to add the interactive image. Click on "Enable Visual Builder" from the top bar. If you are starting fresh, create a new section and row. If you are editing an existing page.

Step Two: Add the Hotspot Module

The easiest way to add hotspots to your Divi Builder without coding is to use a hotspot plugin or module. We tested several hotspot modules and found that TNC Divi Image Hotspot works well in any situation. So in this journey, I will show you the entire process using “TNC Divi Image Hotspot”.

Download this module and log in to your WordPress admin panel. In the sidebar, search for “TNC Divi Image Hotspot” module and click to add it to your layout. This is the core module that handles everything: the background image, the hotspot pins, and the tooltip content. It is already packed with everything you need.

Step Three: Add Your First Hotspot

Still inside the Content tab, scroll down, and you will see a section called "Hotspots." Click on "Add New Item" to create your first hotspot point. Each hotspot item has a few key fields:

Hotspot Position: This is where you set the X and Y position of the pin on the image. You can type in percentage values or, even easier, switch to visual mode and drag the pin to exactly where you want it on the image.

Hotspot Icon or Number: You can choose to display a plus sign, a number, or a custom icon for the pin. This helps users know there is something to interact with.

Take your time placing the pin in the right spot. A well-placed hotspot makes the experience feel natural and intuitive.

Step Four: Customize the Content

Now, go to the Content tab inside the hotspot item. Here you can decide what type of information each hotspot will display, making it more flexible and interactive. Content Types you can use: Text, Image, Video, Embedded Code, and Product.

Each type helps you present information in a different way, depending on your design goal. You can keep it simple with text, or make it richer with visuals, videos, or even product details.

Step Five: Choose Trigger Event Types

Now go to the interaction settings inside the hotspot item. Here you can decide how the hotspot content will appear based on user actions. Trigger Event Types: Mouse enter (hover), Click, Focus in, Mouse enter click.

Each trigger gives a different user experience. Hover works well for quick previews, while click is better for mobile and intentional interactions. Choose the option that best fits your design and audience behavior to make the experience smooth and intuitive.

Step Six: Save and Preview

Once you are happy with everything, click the green Save button at the bottom of the Visual Builder. Then open your page in a regular browser tab and test the hotspots yourself. Hover over each pin. Check that the tooltips appear correctly. Click through on mobile. Make sure the positions look accurate on different screen sizes. This is also a good time to ask someone else to test it, since a fresh pair of eyes often catches things you might miss.

Use Cases of TNC Divi Image Hotspot

Image hotspots can be used in many creative ways, depending on your website's needs. Here are some simple examples:

• Turn product images into clickable points that lead users directly to purchase pages.
• Create visual map points where users can click to see location details, photos, or extra information.
• Add a play-style hotspot in a hero section to open and watch a video instantly.
• Highlight different parts of a product or design to explain features clearly.
• Build interactive team or testimonial sections where each person reveals more info on click.

Ready to Make Your Website More Interactive?

Image hotspots are one of those features that look impressive but are surprisingly simple to set up in Divi. They help your visitors explore your content in a more engaging way, and they give you a smart way to share information without cluttering your layout. So go ahead and give it a try on your next project. Open up your Divi builder, drop in the Hotspot Module, and start pinning. If you found this guide helpful, share it with someone who is also building with Divi.