Hotspots on images are an innovative way to create interactive and engaging experiences on websites. By strategically placing clickable points or icons on an image, you can provide users with additional information, links, or multimedia content. Whether used in product showcases, educational platforms, or virtual tours, hotspots add a dynamic layer of interactivity that enhances user engagement and delivers information in a visually compelling manner. In this blog post, we will demonstrate how to connect hotspots to an accordion in Elementor.
Popular Use Cases for using Hotspots in an Elementor Website
E-Commerce Product Displays
Highlight specific features or details of a product directly on the image. For example, an apparel store can use hotspots to describe fabric, fit, or design details on clothing items.
Virtual Tours
Enhance real estate or travel websites by adding hotspots to showcase features of a property or destination. Users can click on hotspots to view room descriptions, amenities, or scenic highlights.
Explore Features Interactively
Add hotspots to your website to let users access detailed information about specific elements of a product or service. Highlight key areas, such as components, features, or points of interest, to make exploring your offerings engaging and informative.
Educational Resources
Use hotspots to annotate complex diagrams or maps in educational materials. For instance, biology diagrams or historical maps can include clickable points with detailed explanations or links to further reading.
Infographics and Data Visualization
Make infographics interactive by showing additional data, explanations, or links into hotspots on key parts of a chart or graph.
Portfolio Showcases
Highlight features in architectural or design portfolios by using hotspots on project images to detail materials, inspirations, or methodologies.
Step #1: Install and activate Unlimited Elements
Before getting started you will need to purchase Unlimited Elements pro from the link below to access the Hotspots widget.
Then follow these steps:
Go to Plugins → Add New → Upload Plugin.
Choose the zip file you downloaded, upload, and then click Activate.
Once activated, you’ll need to enter your license key.
Now that you have the plugin installed, it’s time to start using the Hotspot widget.
Step #2: Adding the Hotspots widget to your Elementor website
To show Hotspots you need to install the Hotspot widget from the Unlimited Elements Widget library.
Go to Unlimited Elements in the WordPress Dashboard
Search for the "Hotspots"
Hover over the widget and click install
Step #3: Add Hotspots widget to your Elementor page
Now, in the Elementor editor, Find the Hotspots widget and drag it to the desired part of your page.
General Settings
Image
Select the image where you want to display the hotspots.
Enable popup on click
Set the "Enable Popup on Click" option to "Yes" if you want to display additional information in a popup.
Show Tooltip
Enable the "Show Tooltip" option to "Yes" to display tooltips.
Trigger
Choose whether the tootip should be triggered on "Hover" or "Click."
Always show tooltip
Set the "Always Show Tooltip" option to "Yes" to keep the tooltip visible at all times.
Add Items for the Hotspots
Now, add the Hotspot items, ensuring the number of items matches the number of items in the accordion.
Title
Enter the hotspot title.
Hotspot Source
Select the "Hotspot Source" to either a "Title" or an "Icon".
Link
Add a link if needed.
Tooltip Text
Enter the tooltip text.
Style the hotspot items
Now, Click on the ‘Style’ tab to adjust the position and colors of the hotspot.
Horizontal Placement (%)
Adjust the horizontal placement of the hotspot.
Vertical Placement (%)
Adjust the vertical placement of the hotspot.
Background Color
Choose a "Background Color" for the hotspot.
Ripple Color
Choose a "Ripple Color" for the hotspot.
Popup content for the hotspot items
If you have enabled the ‘Enable Popup on Click’ option, you can add the popup content in this tab.
Popup Title
Enter the popup title.
Popup Image
Choose a popup image.
Popup Description
Enater the popup description.
Show Button In Popup
Set the 'Show Button in Popup' option to 'Yes' to display a button in the popup, and specify the 'Button Text' and 'Button Link' as needed.
Connected Widgets Settings
In the ‘Connected Widgets Settings,’ enable the ‘Sync’ option, select a ‘Sync Group,’ and ensure it matches the group you will select later in the ‘Content Accordion’ widget.
Step #4: Add the Content Accordion Widget to your Elementor page
Now that we have added the hotspot widget, let’s add the ‘Content Accordion‘ to our Elementor page.
Install the "Content Accordion" widget from the Unlimited Elements widget library.
Add the "Content Accordion" widget to the page.
Enter the content for each accordion item.
In the "Connected Widgets Settings," enable the "Sync" option.
Select a 'Sync Group' that was configured in the hotspot connected widget settings.
Wrapping it Up!
Integrating hotspots on images can transform static visuals into powerful interactive elements that captivate users and communicate information intuitively. By thoughtfully incorporating hotspots, you can improve navigation, enrich user experiences, and achieve your website’s goals more effectively. As digital landscapes continue to evolve, leveraging tools like image hotspots ensures that your website remains engaging and ahead of the curve. So, why not start experimenting with this versatile feature today? The possibilities are endless!
