1. Home
  2. Docs
  3. Image Elements
  4. Image Hotspots

Image Hotspots SA Element

Hotspots are used to add interactive hotspots to the images with tooltip sections. Give your visitors more information about your images with the Image Hotspots element for Elementor. Add as many hotspots to your image as you want with many customization options. Here in this tutorial, you’re going to learn how to use Image Hotspots element into Elementor Page Builder. So let’s get straight into it:

 

 


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the Image Hotspots Element

 

 

»Content

 

Images

: Add your media by uploading an image from a valid source here.

⇒Image Size: Customize the fixed size of the image from our pre-defined size type.

 

Hotspots

⇒Content: The following options are available for customizing the contents of each hotspots items:

→Type: Select the type of hotspots here.

→Icon: If you select icon as hotspots then choose the icon from here.

→Link: Add a link to the hotspots icon.

→Open Link in New Tab: Set whether you want to open the link in a new tab or in the same tab.

 

⇒Position:

→Left Position: Customize the left position of the hotspots manually.

→Top Position: Customize the top position of the hotspots manually.

 

⇒Tooltip: The following options are available for add and customizing the tooltip of each hotspots items:

→Tooltip: Enable if you want to show the tooltip on the hotspots.

→Tooltip Position: Set the tooltip position.

→Tooltip Content: Add content for the tooltip.

 

⇒Add Item: Use the ‘+Add Item’ button to add more hotspots items on the image.

⇒Glow Effect: Enable the glow effect.

 

Tooltip Settings

⇒Show Arrow: Do you want to show the arrow in the tooltip? Then enable it here.

⇒Size: Set the tooltip box size here.

⇒Global Position: Customize the global position of the tooltip here.

⇒Animation In: Add a dynamic animation for the tooltip.

⇒Animation Out: Add a dynamic animation out for the tooltip.

 


»Style

 

Image

⇒Width: Customize the image width manually for different dimensions.

 

Hotspots

⇒Size: Set the size of the hotspot for different dimensions.

⇒Color: Customize the color of the hotspot icon.

⇒Background Color: Set the background color of the hotspots.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the image hotspots for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border.

⇒Border Radius: Set the border radius for different dimensions.

⇒Padding: Set the padding value for the top, right, bottom and left around the hotspots for different dimensions. You can link the values together or customize them individually.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

 

Tooltip

⇒Background Color: Set the background color of the tooltip.

⇒Text Color: Add a custom color to the tooltip texts.

⇒Width: Customize the width of the tooltip.

⇒Typography: Set the typography options for the tooltip.

 


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of the Image Hotspots Element.


Was this article helpful to you? Yes No

How can we help?