There are a lot of ways to convey a message or something via an image. One of which is by implementing image hotspots. In the context of web design, the implementation of image hotspots is great if you want to explain something to your audience. For instance, you can use image hotspots to explain parts/components of a by bicycle. Another example, you can use image hotspots to explain the anatomy of the human body. Take a look at the following screencast to learn how image hotspots work.
As you can see on the screencast above, a tooltip appears as the cursor is hovered over the icon (hotspot). There is also a little animation effect to make everything looks more appealing. If you have a WordPress site built with Divi, you can effortlessly add image hotspots using Divi Supreme. Read on to learn more.
How to Add Image Hotspots in Divi Using Divi Supreme
It’s very rare to find a page builder plugin that come with a default element to add image hotspots. To date (August 3, 2021), Divi Builder and Elementor — the two most popular page builders — have no such default element (read: Elementor vs Divi). In Divi, you can use Divi Supreme to add image hotspots on your page.
Divi Supreme is one of the most popular Divi plugins with over 90,000 users. It is released as a freemium plugin. However, you need to use the pro version to add image hotspots as the module to do so is only available on the pro version. You can get the pro version of Divi Supreme on Divi Marketplace.
Assuming you have installed the pro version of Divi Supreme, edit the page you want to add the image hotspots to using Divi Builder. Once the Divi Builder editor opens, add a new module by clicking the grey button and select Supreme Image Hotspots. On the appearing settings panel, select the image you want to use on the Image block under the Content tab.
Still on the Content tab, click the Add New Item button to add your first hotspot item.
Select the hotspot type on the Type dropdown on the Hostpot block. There are three hotspot types you can choose from: icon, image, and text. If you want to use an icon, simply pick your preferred icon from the available options.
Once done with the hotspot, you can open the Tooltip block to add the tooltip content. Make sure to enable the Use Tooltip toggle to add the tooltip content.
If you want to add a link to the tooltip, you can simply open the Link block. Click the return icon on the top-left corner of the panel to switch back to the main window of the settings panel of the Supreme Image Hotspots module. You can click the Add New Item button to add another hotspot.
Customizing the Hotspots
To customize a hotspot item, first, click the gear icon of the hotspot item you want to customize on the main window of the settings panel.
Next, open the Hotspot Settings block on the settings panel to set the position of the hotspot item. From this block, you can also set the padding, hotspot border radius, hotspot border width, hotspot border color, and hotspot border style.
Next, you can open the Hotspot Text block, Hotspot Icon block, or Hotspot Image block to customize the hotspot, depending on the hotspot type you use.
To customize the tooltip, you can open the Tooltip Settings block. From this block, you can set the tooltip placement, background color of the tooltip, and max width of the tooltip.
To customize the tooltip content, you can open the Tooltip Body block. From this block, you can set the typography (font family, font style, font size, and so on) of the tooltip content, text color, and font size.
There are five other blocks you can open to customize the hotspots. On the bottom block (the Animation block), you can enable the Use Pulse Animation option to enable the pulse animation effect.
Once done customizing the first hotspot item, you can click the return icon on the top-left corner of the settings panel to return to the main window of the settings panel of the Supreme Image Hotspots module. Repeat the steps above to customize the remaining hotspot items.
Setting Up the Trigger Type
By default, the tooltip will appear when you hover your cursor over the hotspot item. You can change it to on-click if you want it. To do so, on the main window of the settings panel of the Supreme Image Hotspots module, open the Hotspot Settings block under the Design tab. You can select the trigger type on the Trigger Event dropdown.
As you can see, there are blocks with the same names on the main window of the settings panel of Supreme Image Hotspots module as the ones on the settings panel of the individual hotspot items. You can use these blocks to make the global customizations to the hotspot items.
The Bottom Line
Divi Builder, just like other page builders like Elementor and Brizy, has no default element (module) to add image hotspots. Divi Supreme is one of the plugins you can use if you want to add image hotspots to a page. The implementation of image hotspots itself will be useful for certain cases. For instance, you can add image hotspots when you want to explain the anatomy of the human body, components of hardware, and so on. You can rewatch the screencast we added on the beginning section above to learn the implementation example of image hotspots.