Create Image Hotspots with Elementor

Image Hotspots for 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.

    Using Image Hotspots widget

    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