Divi Solution Plugin Development

Image Hotspot Maker documentation

How to install the plugin, build interactive images and customise every hotspot and tooltip in the Divi Visual Builder.

Overview

Image Hotspot Maker is a professionally built Divi module that lets you create interactive images by placing customisable hotspots on top of any image. Each hotspot can reveal rich, styled tooltip content, so you can highlight features, explain details, or guide visitors.

The plugin integrates seamlessly with the Divi Visual Builder, with intuitive controls, real-time previews and full design flexibility, without custom code. It is ideal for product showcases, interactive diagrams, infographics, maps, floor plans and marketing visuals.

Requirements: WordPress with Divi 5. The plugin is not compatible with Divi 4.

Key features

  • Dedicated Image Hotspot parent module for managing the main image and global settings
  • Unlimited Hotspot child modules
  • Click or hover tooltip triggers
  • Smooth tooltip animation effects
  • Icon-based or image-based hotspot markers
  • Optional pulse (ripple) animation for better visibility
  • Rich tooltip content: image, icon, text and button
  • Percentage-based hotspot positioning for responsive layouts
  • Extensive Design tab controls for styling
  • Fully compatible with the Divi Visual Builder
  • Clean, performance-optimised frontend output

Installation & activation

  1. Download the Image Hotspot plugin ZIP file from your Divi Marketplace purchase.
  2. In WordPress, go to Plugins → Add New.
  3. Click Upload Plugin and select the ZIP file.
  4. Install and activate the plugin.
  5. Open the Divi Builder. The Image Hotspot module is now available.

How the module works

The plugin follows Divi’s recommended parent–child module architecture.

Image Hotspot (parent module)

  • Holds the base image
  • Controls global hotspot behaviour such as the tooltip trigger and animation
  • Acts as a container for all hotspot items

Hotspot (child module)

  • Represents one interactive point on the image
  • Controls the marker’s appearance, position and tooltip content

On the frontend, lightweight JavaScript handles interactions while CSS handles positioning and animations, for smooth performance on responsive layouts.

Using the Image Hotspot module

Step 1: Add the module

  1. Open a page with the Divi Builder.
  2. Click Add Module and select Image Hotspot.
  3. Upload or choose the image you want to use as the base.

Step 2: Add and position hotspots

  1. Inside the Image Hotspot module, click Add New Hotspot.
  2. Set the Horizontal Position and Vertical Position values as percentages.
  3. Repeat to add as many hotspots as you need.

Tip: 0% horizontal is the left edge of the image and 100% is the right edge. 0% vertical is the top and 100% is the bottom. Because positions are percentages, hotspots stay on the same spot when the image resizes.

Parent module settings

Content tab

  • Image: the main image used for the hotspots
  • Tooltip Trigger: show tooltips on click or on hover
  • Tooltip Animation: the animation used when tooltips appear

Design tab

  • Typography for the tooltip title, subtitle and description
  • Button alignment and styling options

Advanced tab

  • Custom CSS fields
  • Module ID and class attributes

Hotspot (child module) settings

Marker settings

  • Icon or image hotspot marker
  • Icon size, colour and background
  • Border, spacing and box shadow controls
  • Optional pulse animation for emphasis

Position settings

  • Horizontal position (percentage)
  • Vertical position (percentage)

Tooltip content

  • Tooltip icon or image
  • Title, subtitle and description text
  • Optional button with label, icon, link and target options

Tooltip layout

  • Tooltip position: top, bottom, left or right
  • Tooltip width
  • Content alignment
  • Tooltip pointer (arrow) on or off

Design & customisation

Every visual element supports Divi’s native Design tab options, including padding and margin, borders and border radius, box shadows, fonts and text styling, and background colours. This gives you complete control while staying consistent with your Divi layouts.

Common use cases

  • Highlighting product features
  • Creating interactive infographics
  • Annotating images and diagrams
  • Displaying maps or floor plans
  • Enhancing marketing and landing pages

Compatibility & performance

  • Fully compatible with the Divi 5 Visual Builder
  • Responsive by design with percentage-based positioning
  • Clean HTML markup and optimised scripts
  • Compatible with standard WordPress caching plugins

Frequently asked questions

Can I add unlimited hotspots?

Yes. You can add as many hotspot child modules as you need.

Are hotspots responsive on different screen sizes?

Yes. Hotspot positions scale proportionally with the image.

Does the module support live preview in the Visual Builder?

Yes. All interactions and design changes are visible in real time.

Changelog

  • 1.0.0: Initial release.

Support

Customers can open a support ticket from their purchase on the Divi Marketplace. For pre-sales questions, use our contact form or email [email protected].