The “Hotspots Widget” allows you to add interactive markers on images for free in WordPress Elementor websites. This widget enhances user engagement by enabling clickable hotspots that display tooltips, links, or additional information when hovered or clicked. You can customize the hotspot icons, positions, animations, and styling to seamlessly match your site’s design.
Let’s explore the features of the “Hotspots Widget” below.
Elementor Hotspots Tutorial Video
Add Free Hotspots to Elementor
This widget requires Unlimited Elements Free version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Hotspots”
- Hover over the widget in the search results and click install
- Add your “Hotspots” widget to any Elementor Page
General Settings in Elementor Hotspots
Image
Choose image to display.
Enable popup on click (Pro)
Enable/disable popup on click.
Show Tooltip (Pro)
Show/Hide the tooltip.
Trigger
Select option to trigger hotspot.
- Hover
- Click (Pro)
Always Show Tooltip
Keep the tooltip visible at all times.
Connected Widget Settings in Elementor Hotspots
Enable Remote Connection
Use remote control widgets to create advanced creative layouts.
Widget Name for Connection
This name will be used to connect and controls this widget by other widgets.
Sync
You can connect two item-based widgets and sync them.
Sync Group
Choose the same group for two or more item-based widgets so they can sync together.
Items Settings in Elementor Hotspots
Title
Type text to show as title.
Hotspot Source
Select the hotspot source.
- Title
- Icon
Link
Type or paste your URL to link with hotspot.
Tooltip Text
Type text to show as tooltip.
Style
Set the horizontal and vertical placement, background and ripple color.
Popup
Set popup title, popup image, and popup long text.
Elementor Hotspots Styling
Customize the General styling, Popup, Popup Button, Tooltip and Image styling. .
General Styling in Elementor Hotspots
Set the spot size, radius, background, color, typography, icon size, ripple color and border styles.
Popup Styling in Elementor Hotspots
You can style the popup title background, text color, title padding, overlay background, popup width, image size, alignment and positioning.
Popup Button Styling in Elementor Hotspots
You can style the popup button padding, text color, background color, border styles, box shadow and spacing.
Tooltip Styling in Elementor Hotspots
You can style the tooltip background color, text color and max width.
Image Styling in Elementor Hotspots
You can image width, height, alignment, opacity, regular and hover border styles along with the object fit style.
Usage Examples of Elementor Hotspots
Here are some live use cases for the Hotspots widget.
Free Elementor Hotspots as an Image Map with Car Parts.
Free Elementor Hotspots Synced with a Card Carousel.
Thank you for using the Hotspots Widget for Elementor! With its interactive markers and customizable tooltips, this is the best Hotspots Widget for Elementor, perfect for adding informative and engaging hotspots to your images. If you have any questions or need assistance, feel free to reach out. For more use cases and examples visit the live demo on our website.
