Discover the Image Hotspots Widget and its features here.
Want to add clickable, informative markers to your images? The Image Hotspots widget in aThemes Addons lets you place interactive hotspot icons on any image, complete with tooltips, animations, and custom content – perfect for product showcases, interactive maps, and feature highlights.
In this guide, we’ll walk you through how to use the Image Hotspots widget in aThemes Addons for Elementor.
Before you get started, make sure you’ve installed and activated the aThemes Addons plugin on your WordPress site along with Elementor. This widget requires aThemes Addons Pro.
Activating the Widget
Go to the aThemes Addons dashboard in your WordPress admin area, find the Image Hotspots widget, and toggle it on to activate it.
Exploring Widget Options
Configuring the Content Section
The Content section provides the following options:
- Choose Image – Upload or select the background image where hotspots will be placed.
- Hotspot Elements – Add multiple hotspot markers, each with its own icon, label, and tooltip content.
- Hotspot Positioning – Set the X and Y position for each hotspot to place it precisely on the image.
- Hotspot Content – Add descriptions, HTML content, or links to each hotspot.
- Hotspot Animation – Choose an animation effect such as pulse, glow, or bounce to draw attention to the hotspot.
- Tooltip Display – Set when tooltips appear: on hover, always visible, or on click.
- Tooltip Position – Choose the tooltip position relative to the hotspot: top, bottom, left, or right.
Customizing Style Options
The Style options let you customize the visual appearance of each element:
- Image – Adjust the image size, alignment, and border radius.
- Hotspot Icon – Customize the icon size, color, background, and border.
- Hotspot Animation – Fine-tune the animation speed and intensity.
- Tooltip – Set the typography, padding, background color, and text alignment of tooltips.
Following Usage Tips
- Enhance product displays by placing hotspots on key features to highlight benefits.
- Create interactive maps with location markers and descriptive tooltips.
- Optimize your background images for fast loading to maintain site performance.
- Avoid overcrowding the image with too many hotspots, which can overwhelm visitors.
- Match the tooltip and icon styles with your overall site design for a cohesive look.
That’s it! You’ve successfully set up and customized the Image Hotspots widget using aThemes Addons Pro for Elementor.
Next, would you like to add scrolling image effects to your pages? Check out our guide on using the Image Scroll widget to learn more.
