Image is a great tool to convey a piece of information. Everyone knows that information conveyed via image — and visual form at large — is easier to understand and remember. In the context of the web, there are lots of image formats you can use. From an infographic, photo, comic, illustration, and so on. If you want to create web content like the anatomy of something, city landmarks, maps, or instructions, creating image hotspots might is a great idea.
The idea of this content type (image hotspots) is to provide an interactive image that makes it easy for your readers to understand the information you convey. You can add hotspots over an image that contains a tooltip on each hotspot. Here is an example.
If you have a WordPress-based site, creating an image with hotspots like the one above is not too hard to do. You can create one using Essential Addons.
What is Essential Addons?
Essential Addons is an Elementor add-on. It is one of the most popular Elementor add-ons with over 2 million downloads. This add-on adds about 60 extra widgets to your Elementor. One of the widgets offered by Essential Addons is EA Image Hotspots which you can use to create an interactive image like the one you can see above. Essential Addons itself is a freemium add-on, but you need to use the pro version to create image hotspots since the EA Image Hotspots widget is only available on the pro version.
How to use Essential Addons to create image hotspots
First, you need to install Essential Addons and Elementor on your WordPress. You can get the pro version of Essential Addons on its official website. While for Elementor, you can use the free version. The free version of Elementor is available on the WordPress plugin directory so you can install it by typing “elementor” on the search box of plugins installer (Plugins -> Add New).
Once Elementor and Essential Addons are installed, create a new page (Pages -> Add New) or a new post (Posts -> Add New) and edit it with Elementor. You will be taken to the Elementor editor after clicking the Edit with Elementor button.
Before creating the hotspot images, you might want to set the page layout first. To do so, open the page settings panel by clicking the gear icon on the bottom-left corner on the left panel. Set the page layout from the dropdown menu on Page Layout.
Add a new section by clicking the plus icon on the canvas area and add the EA Image Hotspots widget from the left panel.
Add your image by clicking the image selector on the left panel.
Open the Hotspots option on the left panel to add the hotspots. By default, the EA Image Hotspots widget contains a hotspot. You can click the default hotspot to edit its content. By default, the hotspot type is set to Icon. You can change it to Text or Blank if you want.
Click the POSITION tab to set the position of the hotspot. Set X and Y positions by sliding the sliders.
Click the TOOLTIP tab to add the content to the tooltip. Enable the tooltip and add your content via the editor. You can also set the position of the tooltip whether on the top, bottom, left or right.
To add more hotspots, simply click the ADD ITEM button on the Hotspots option and repeat the steps above to set the hotspot position, tooltip content and tooltip position.
Open the Tooltip Settings option to set the size of the tooltips and the animation effect.
Now go to the Style tab to style your hotspots as well the tooltips. First off, open the Image option to set the size of the image.
Open the Hotspot option to customize the hotpots. You can set the size, the icon color (or text based on the hotspot type you selected), the background color, border radius, and paddings.
Open the Tooltip option to customize the tooltips. You can set the background color, the text color, typography (font size, font family, font style), and the width.
Until here, you have successfully created the image hotspots. You can play around with the left panel to customize your image hotspots until you get satisfied with the result. Once you are done, you can click the PUBLISH button to publish your page.
Embedding the image hotspots to Gutenberg
If you want to make the image hotspots you have just created above as the supporting material for the article you are working on, you can embed it to Gutenberg (the default WordPress editor) using the Elementor Blocks for Gutenberg plugin. This plugin allows you to use an Elementor template as a Gutenberg block (read here to learn more).
To save the image hotspots above as an Elementor section template, right-click the section handle and select Save as Template. Give your template a name and click the SAVE button.
Open the article you want to add the image hotspots to. Add a new block, select Elementor Library and select the image hotspots template you have just created (make sure Elementor Blocks for Gutenberg has been installed).
