Transform your static images into engaging, interactive experiences with the Divi Hotspot plugin. Designed specifically for the Divi Builder, this powerful tool allows you to place clickable markers directly onto your images, revealing detailed information, links, or media when users hover over or click them. Whether you are showcasing product details, explaining complex diagrams, or creating interactive maps, Divi Hotspot helps you capture visitor attention and increase engagement without writing a single line of code.
Key Features
- Interactive Tooltips: Display text, images, videos, or icons within customizable popups that appear when users interact with a hotspot.
- Customizable Markers: Choose from a wide library of icons or upload your own custom images to serve as your hotspot markers, ensuring they perfectly match your brand aesthetic.
- Flexible Trigger Actions: Control how your hotspots behave by choosing between hover, click, or toggle actions to suit your user experience goals.
- Responsive Design: Hotspots automatically adjust their positioning based on screen size, ensuring that your interactive elements remain perfectly aligned on mobile, tablet, and desktop devices.
- Animation Effects: Add subtle entrance animations to your markers to draw the eye and encourage interaction the moment a page loads.
- Styling Controls: Utilize the native Divi design settings to adjust colors, fonts, borders, shadows, and spacing for both the markers and the tooltip containers.
- Deep Integration: Seamlessly integrates into the Divi Builder interface, allowing you to drag and drop hotspots onto your images just like any other native Divi module.
Use Cases / Who It’s For
Divi Hotspot is an essential tool for any website owner looking to maximize the utility of their visual content. E-commerce store owners can use it to create “shoppable” images, allowing customers to click on specific parts of a product photo to see pricing, features, or a direct “Add to Cart” button. This reduces the number of clicks required to reach a product page and creates a more immersive shopping journey.
For educational websites, bloggers, and technical documentation sites, Divi Hotspot is perfect for annotating complex diagrams, blueprints, or infographics. Instead of cluttering an image with text, you can hide the details behind clean, interactive markers, keeping the design minimalist while providing depth for interested readers. Travel bloggers and real estate professionals can also leverage the plugin to create interactive maps or floor plans, allowing visitors to click through different locations or rooms to view photos and descriptions.
Setup / How It Works
Getting started with Divi Hotspot is designed to be intuitive for anyone already familiar with the Divi ecosystem:
- Install and Activate: Upload the plugin to your WordPress site and activate it to unlock the new Divi Hotspot module in your builder.
- Insert the Module: Open the Divi Builder on your desired page, add a new module, and select the Hotspot module from the list.
- Upload Your Image: Set the base image that you want to annotate.
- Add Hotspots: Click to add new hotspot items. For each item, you will define its specific X and Y coordinates on the image, which can be done easily via the drag-and-drop interface or by entering percentage values.
- Configure Content: Within each hotspot, add the content you wish to display—such as text, images, or buttons—and customize the appearance of the tooltip using the Design tab.
- Save and Publish: Once you are satisfied with the layout and styling, save your page to see your interactive image live on your site.
Similar Plugins
If you are exploring alternatives, you may also consider plugins such as Image Hotspot by MapSVG, Interactive Geo Maps, or various third-party Divi-specific extensions available through the Divi Marketplace that offer similar functionality for image annotation and interactive mapping.