Divi Image Hotspot is a third-party plugin for Divi that lets you place icons on images to display information. The information opens as a tooltip and can include text, images, buttons, and you can style them just like any Divi module. In this review we’ll take a look at Divi Image Hotspot and see how easy it is to use.

You can purchase the plugin from the Elegant Marketplace product page.

Installing Divi Image Hotspot

Upload and activate the plugin as normal. Next, in the dashboard menu go to Plugins > Divi Image Hotspot to add and activate your license key. You’ll then see a green text that says your license is active.

From this screen you can also open a support ticket if you need email support.

Divi Image Hotspot Module

A new module is added to the Divi Builder called Image Hotspot.

The Content tab includes an area to add a new hotspot, a field to upload an image, an alternative text, and the standard admin label. You can add multiple hotspots and name them.

The Design tab includes settings for sizing, border, box shadow, and animation.

The Advanced tab includes the standard CSS ID and Class fields, Custom CSS fields, and visibility options.

Image Hotspot Settings

When you add a hotspot it will open the settings. The Hotspot settings also have the standard Content, Design, and Advanced tabs. The Content tab includes icons, vertical and horizontal position, tooltip position, image, text, button, and background color settings.

The Design tab includes settings for the pointer (color, icon, size, etc.), tooltip (arrow, positioning, etc.), text, spacing, and box shadow. It has lots of color options and styles for text, buttons, etc.

The Advanced tab includes Custom CSS and Attributes.

Once you add an image you can then open the Hotspot. It’s automatically placed in the upper left corner of the image. Hovering over the icon reveals the default title and content text. You can change the icon, resize it, change its color, change its onscreen position, add a circle to the icon, add a title, content text, background color or image, add a button, and more.

Divi Image Hotspot Examples

Here’s an example using the Divi Photo Marketplace layout. I’ve added a Divi Image Module over the background. I’ve changed the icon, added text for the title and content, and added a button with a link to the shop. I’ve also changed the position of the tooltip so it appears on the left.

For this one, I added a new hotspot with its own icon and placed it over the camera. I set the tooltip to open above the icon, added an image, changed the background color of the tooltip, and added a button to the shop.

For this one, I added a hotspot to the left side of the image. I changed the color of the icon and gave it a circle, which I also styled to blend with the colors in the image. I added an image to the tooltip, changed the title font color, removed the content text, added a styled button, and added a box shadow.

Now I’ve changed the colors of the other icons and removed the default icon that was placed in the upper left corner. I now have three styled hotspots.

The image now fits within my Divi layout with the icons sitting where I placed them.

Here’s an example of how it can be used in place of a blurb module. I’ve replaced the blurb on the left and moved the title and content to the tooltip. I’ve placed the icon under the image and styled it.

Hovering over the icon reveals the title and content. I’ve set it to open to the left and give it a gray background.

Here’s an example of using the Divi Image Hotspot module along with a blurb, which is added to the one in the middle. I removed the image from the blurb, placed it within the Divi Image Hotspot module, and added a question mark to provide information about the product. This one uses the Divi Coffee Shop layout.

For this example, I replaced the images with Divi Image Hotspot modules and added an icon at the top to reveal nutritional information on hover.

This one uses the Pottery Studio layout. I’ve replaced some of the image modules and added hotspots within the images to highlight certain features of the products. Across the bottom of each one, I’ve added several icons that provide more information and let visitors make a purchase.

Using Divi Image Hotspot with Extra and Mobile

Divi Image Hotspot also works with Extra. Here’s a look at the Coffee Shop with nutrition information in the tooltip.

It also works great with mobile. It might next some extra care to ensure everything lines up properly. Here’s Extra in tablet mode. I would need to adjust the settings for it to fit the smaller screen properly, but it works as expected.

Divi Image Hotspot License

Divi Image Hotspot is $22 per year and it can be used on unlimited websites for both you and your clients. The Divi image hotspot Plugin is a subscription product on an annual renewal basis for support and updates. There are loads of updates planned by the vendor and the annual renewal price is 50% of the price you pay at checkout.

You can purchase the plugin from the Elegant Marketplace product page.

Ending Thoughts

Divi Image Hotspot is easy to use. I like that it works from the frontend builder. This really lets you take advantage of the hotspot placements. I also like that you can place as many hotspots as you want and style each one differently.

What I’ve shown here just scratches the surface of how you can use this plugin. It would be useful to any type of image including locations, food, products, charts, graphs, and lots more. If you’re interested in adding hotspots to images to provide information, Divi Image Hotspot is the plugin you need.

Have you tried Divi Image Hotspot? Let us know what you think about it in the comments.

Randy A Brown

Randy is a freelance WordPress and eCommerce writer from east TN. If he's not reading or writing, then he's probably picking out tunes on his Strat.