With DonDivi Hotspots, you can enhance images by adding interactive points that reveal additional information or trigger pop-ups. Customize positions, behaviors, and animations to create engaging, informative visuals.
Installation
Install and activate the Divi Theme.
Go to WordPress Dashboard → Plugins.
Click on the Add New Plugin button.
Click on the Upload Plugin button.
Choose the dondivi-builder.zip file.
Click on the Install Now button.
After installation, a new module named DonDivi Hotspots will appear in the Divi Builder.
Overview
This module places clickable or hoverable “hotspots” over an image, revealing additional information such as text, icons, or popups. Below, you can add an image, create hotspots, and configure their behavior.
Add DonDivi Hotspots
Click on the Add Module button.
Search for DonDivi Hotspots.
Click on it to add it to your page.
DonDivi Hotspots Settings
Content tab
Image: The module first needs an image where hotspots will be placed.
Image: Select a custom image
If no image is selected, a placeholder is shown.
By default, the image fills the column width. Adjust its dimensions using the Design Tab → Sizing.
The image alt attribute is pulled from the WordPress Media Library unless you set a custom Image Alt Text under the Advanced Tab → Attributes.
Desing tab
Sizing: Choose the DonDivi Hotspots module's size, including width, max width, module alignment, and more.
Spacing: Select the DonDivi Hotspots module's spacing, including margin (outer spacing) and padding (inner spacing).
Border: Add custom borders or rounded corners to the image.
Box Shadow: Apply shadow effects to highlight the image.
Filters: Select the filters for the DonDivi Hotspots module.
Transform: Select the transform styles for the DonDivi Hotspots module.
Animation: Select the animation for the DonDivi Hotspots module.
Add a DonDivi Hotspots Item
When you add the DonDivi Hotspots module, it will not contain any menu items by default.
Open the DonDivi Hotspots module's settings
Click on the Add New Item button
Single DonDivi Hotspots Item Settings
A hotspot is a point on the image that can display extra information or trigger various actions.
Each hotspot can include a text, icon, or image, and do nothing, open a URL, show a tooltip, or trigger a popup.
Content tab
Hotspot:
Title: Enter a title for the hotspot. If the hotspot content is set to Text, this title appears in the hotspot.
Content: Choose how the hotspot will appear:
None: No visual content.
Icon (default): A new Hotspot Image & Icon toggle appears in the Design tab for icon styling.
Image: A new Hotspot Image & Icon toggle appears for image sizing.
Text: A Hotspot Text toggle appears for text font and color.
Content:
Link Type: Define the hotspot’s interaction:
None: Does nothing on click or hover.
URL: Set the URL, target, and rel attribute.
Tooltip: Shows a tooltip. Fields for customizing the tooltip appear.
Preview in the Builder: Enable this to see how the tooltip looks in the front-end while editing.
Show On Hover: Enabled by default, so the tooltip appears on hover. Turn it off to require a click instead.
Show Arrow: Shows an arrow pointing from the tooltip to the hotspot. If enabled, the Design Tab → Content includes fields for arrow color.
Image/Icon: Display an Image or an icon inside the Tooltip's content area.
Title: Set the tooltip's title.
Body: Set the tooltip's body text.
Button: Set the button text for the tooltip.
Button Link URL: Set the link that will open when the button is clicked.
Button Link Target: Choose the opening link behaviour:
In the Same Windows
In a New Window
Content Popup: Displays a custom content popup.
Preview in the Builder: Enable previewing the popup in the builder, then disable it afterward.
Show On Hover: Triggers the popup when hovering over the element instead of clicking it.
Show Close Icon: Displays a close icon inside the popup. You can pick a custom icon.
Close On Icon Click Only: This option prevents closing by clicking outside. Users must click the close icon (or press the ESC key).
Disable Page Scroll: Locks page scroll while the popup is open.
Image/Icon: Display an Image or an icon inside the Popup's content area.
Title: Set the Popup's title.
Body: Set the Popup's body text.
Button: Set the button text for the Popup.
Button Link URL: Set the link that will open when the button is clicked.
Button Link Target: Choose the opening link behaviour:
In the Same Windows
In a New Window
Layout Popup: Loads a Divi Layout in a popup.
Layout: Choose a Divi Library Layout.
Preview in the Builder: Enable previewing the popup in the builder, then disable it afterward.
Show On Hover: Triggers the popup when hovering over the element instead of clicking it.
Show Close Icon: Displays a close icon inside the popup. You can pick a custom icon.
Close On Icon Click Only: This option prevents closing by clicking outside. Users must click the close icon (or press the ESC key).
Disable Page Scroll: Locks page scroll while the popup is open.
Design tab
Hotspot:
Top and Left Position: Use these two responsive fields to position the hotspot on the image.
A value of 0% Top and 0% Left places the hotspot in the top-left corner.
Adjust them to pinpoint any location on the image.
Background Color: Sets the hotspot’s background color.
Enable Pulse Effect: Adds a pulsing animation to draw attention to the hotspot. A Pulse Color field appears to customize it. If no color is chosen, the hotspot’s background color is used.
Border and Padding: Add a custom border, set the border radius, or adjust the hotspot’s internal padding.
Hotspot Image & Icon: Select the Icon's color and font size.
Content:
Placement: Pick where the tooltip appears relative to the hotspot (Top, Bottom, Left, Right).
Width: Adjust tooltip width (default 300px).
Offset: Set the distance between the hotspot and the tooltip.
Background Color: Assign a background color to the tooltip.
Arrow Color: Choose the arrow's color.
Border and Padding: Add borders, corner radius, or internal spacing for the tooltip.
If the Hotshot's Link type is set to Content Popup or Layout Popup, the following design options are available:
Content:
Location: Select one of nine screen positions (top-left, center, bottom-right, etc.). This is responsive.
Popup Max Width: Limit the popup’s width (default 80%).
Popup Max Height: Limit the popup’s height (default 80%).
Background Color: Applies a background to the popup, especially useful for custom content popups.
Overlay Color: Change the color of the overlay behind the popup.
Close Icon Color and Width: Style the close icon if it’s shown.
Border and Padding: Choose borders, corner radius, and internal padding.
Text Alignment: For the Content Popup, align the text to the left, right, or center.
Content Image & Icon:
Icon Color: Select the color displayed for the icon in the content area.
Image/Icon Width: Choose the Image or Icon's width displayed in the content area.
Image/Icon Placement: Choose the Image or Icon's placement displayed in the content area.
Image/Icon Alignment: Choose the Image or Icon's alignment displayed in the content area.
Image/Icon Offset: Choose the Image or Icon's offset displayed in the content area.
Image/Icon Margin: Choose the Image or Icon's margin displayed in the content area.
Image/Icon Padding: Choose the Image or Icon's padding displayed in the content area.
Content Title: Choose the font family, style, text color, size, and text shadow for title text.
Content Body: Choose the font family, style, text color, size, and text shadow for body text.
Content Button: Choose the button's styles.
Content Animation: Choose the animation for the content area.
Enter Effect: Controls how the tooltip or pop-up appears. The default is None. If a DonDivi effect is chosen, any Divi layout animations are overridden.
Exit Effect: Controls how the tooltip or pop-up disappears. The default is None. If no effect is chosen, there is no exit animation.
Sizing: Choose the current menu item's size, including width, max width, module alignment, and more.
Spacing: Select the current menu item's spacing, including margin (outer spacing) and padding (inner spacing).
Box Shadow: Select the box shadow styles for the entire module item.
Filters: Select the filters for the entire module.
Transform: Select the transform styles for the entire module.