Image Hotspot

Highlight specific parts of the image with animated pointers to make images more interactive.

How To Add Image Hotspots?

Once an image is added from the media library, the toolbar will appear with various options to change the image, Add, Edit, Clone or Delete the hotspot. Pin icon is used to add the hotspot on an image.

After clicking the pin icon, the modal screen will appear with various settings to customize the hotspot as per requirement.

You can use the edit icon or the right-side settings panel to edit the settings of the respective hotspot. The Clone option will create a copy of the hotspot with the same settings and the delete option will delete the hotspot.

How To Configure Individual Hotspot Settings Panel

Settings for specific hotspots can be accessed by clicking on the respective hotspot. All the settings will be populated with the existing values and can be edited as per requirement. After clicking on any hotspot, the right-side panel for general settings will be replaced with the respective hotspot settings.

How To Configure The Image Hotspot Block

To configure the content of your Image Hotspot block, switch to the ‘Content’ tab.

Content

Background Image - This allows you to replace the image used in the image hotspot block.

Image Size - Choose the size of images from here.

Open Tooltip - Choose how the tooltip popup should open in the frontend. Options available are on Hover and on Click.

Hotspot Icon - Choose the icons for a hotspot from multiple options available.

Hotspot Size - Set the size of the hotspot icon here.

Hotspot Spacing - Set the padding size around the icon from here.

How To Style The Image Hotspot Block

Switch to the ‘Style’ tab to style all the elements of the Image Hotspot block.

Style

Hotspot Background - Choose the background color for the hotspots. Note that this will be applied to all the hotspots on the image, but the color given to specific hotspots will take priority.

Icon Color - Choose the icon color for all the hotspots. Note that this will be applied to all the hotspots on the image, but the color given to specific hotspots will take priority.

Hotspot Opacity - Adjust opacity for the hotspots from here.

Advanced Settings

Tooltip Settings

Tooltip Theme - Select theme for tooltip popups in frontend from multiple options available.

Tooltip Animation - Select animation to decide how the tooltip popup should appear in the frontend.

Hotspot Animation

Pulse Effect - Enable or disable the continuous pulse effect for hotspots using this toggle button.

Animation - Under Animation, you can provide animation for the block. Various options like Animation name, Direction, Repeat, Duration, Delay, Curve are available to add customized animation for the block.