Create Image Hotspots with Elementor

Image Hotspots for the free version of Elementor is a new widget that will allow you to create an image with interactive hotspots with which you can display points of interest and in-depth information about the image.
Supports multiple components on the same page.
Select different types of hotspots.
In-depth customization of hotspots and their related tooltips.

Table of Contents

How to activate Image Hotspots

Elementor plugin is installed and active.

EAC components plugin is installed and active.

From the settings panel you have to drag & drop the ‘Image Hotspots‘ icon on the panel preview.

Select an image and create hotspots

After loading the image you can create the markers and select the type of trigger for each marker
Image Hotspots trigger

Move each hotspot with the corresponding slider.
You can also apply a rotation angle for only pictograms

Image Hotspots trigger position
Position the tooltip to the right, left, top or bottom and fill in the content that will be displayed
Image Hotspots tooltip

Apply styles to hotspots and tooltips

Depending on the type of marker you have selected, you can apply the standard styles color, typography …
Image Hotspots style trigger

You can force the display of tooltips but remember to deactivate them before adding / deleting a marker

Image Hotspots style tooltip shape
As for the shape you can apply the corresponding styles to the content of the tooltip and position the content in the shape
Image Hotspots style content

Leave a Comment