What is an image hotspot?
A hotspot is an interactive area of an image that, when hovered over or clicked on, displays additional content to your users.
They can be used to create interactive images that help highlight relevant information and boost engagement on your website.
It can also save space and declutter your page, giving your page an efficient and clean design.
Here are some of the things you can do with hotspots:
- Offer tips to your website users
- Display quotes
- Introduce your team
- Show positive feedback
- Link to other parts of your website
- Link to e-commerce products
- Activate a WordPress popup
And more! It’s a totally flexible and creative tool that can be fully customised to complement any part of your website.
Elementor Image Hotspot widget
The Elementor Image Hotspot widget included with Elementor Pro is the best option we’ve found for creating hotspots. It’s rich with customisation options and advanced features, and has everything you need to create a stunning design.
It’s also very easy to use, due to Elementors visual drag and drop web builder, which you use to make your hotspots.
And, it won’t slow down your website at all. The Elementor Image Hotspot widget comes built into Elementor Pro so you get this, and much more, included within just one plugin.
Read on to see just how easy it is to create interactive image hotspots with Elementor. (We also have a video tutorial if you’d prefer).
How to create a hotspot on Elementor
To begin with, activate the Elementor builder and search for ‘hotspot’ in the widget search bar. From there you can drag and drop the widget into any eligible block or space on the page.
Once you’ve done this, a blank widget should populate, looking like the image above. As you can see, there is a space for an image, which is currently blank, and a default hotspot (the black dot in the centre of the image space).
Image
The best thing to do first is to choose the image you’d like your hotspots to be used on.
If you go to the editing sidebar, under Content, and then Image, you can click the grey box to choose an image.
You’ll then get taken to the media library, where you can choose an existing image, or upload a new one. Once you have chosen, simply click Insert Media in the bottom right corner.
For this example, we’ve chosen a picture of a group of people. This could be a really fun way for customers to get to know your team. You could add hotspot quotes, short bios, job descriptions, links to individuals’ portfolios or blog posts, and much more.
Once you’ve uploaded your image, you can set the image size and alignment. We recommend having a large/full-size image, to fill in all the space, as a big, clear image will make interactions even easier for your website visitors.
Hotspot Content
After picking the image you want to display your hotspots on, you can start to customise the actual hotspot. Navigate to the Hotspot section in the Elementor editor, and let’s choose your hotspots animation.
There are a few options to choose from:
- Expand (which creates expanding ‘wavelength’ like lines from your hotspot)
- Soft Beat (which creates a soft beating rhythm effect)
- Overlay (which makes your hotspot blend slightly into the image).
You can then decide if you want your hotspot to load in a sequence, and choose the length in milliseconds. By default, all your hotspots will load at the same time.
Next, by clicking on the default hotspot under Item #1, you’ll be able to see the hotspot’s settings. The settings are split into two parts: one for the content, and one for the position.
In the Content section, you can first decide how you want your hotspot to appear. You can have the default hotspot dot, a text label, a text label with an icon, or just an icon on its own.
In the example above, you can see we’ve changed the default dot to a text label, by adding text under Label. This is a good option to have, but it might not work for every hotspot image. Personally, we like the default dot or icon on its own, as it creates a simple and clean interactive image.
Next to Icon, you can upload an SVG, or choose one from the icon library.
The icon library has loads of options to choose from. When you’ve found one that fits your hotspot, simple click Insert to set it.
You then have the option to edit your hotspot size and add the text that your hotspot will display. In the Tooltip Content box, simply type the text, or add the content, that you want your hotspot to show when your users click or hover over it. You can also add media or custom HTML.
Another cool option in this section is to link your hotspot to another part of your site, under Link. This could be especially useful if you are an e-commerce site, and want to link to your products purchasing page.
Hotspot Position
Next, in the Position section of your settings, you can change the alignment of your hotspot. Simply slide the slide bar across to visually see where the hotspot ends up. This makes it super easy to get your hotspot to precisely where you want it.
You can also use Custom Tooltip Properties to edit the position of your hotspot’s text and width. Please note that this only changes that individual hotspot’s settings, and won’t affect other hotspots.
As you can see from the image above, Elementor is automatically responsive, so the position of the hotspot has stayed the same on mobile view. However, even though it is automatically responsive, you should check responsive mode throughout your editing.
It’s essential to make sure your hotspot is responsive, as there might be settings that work for desktop that don’t work for mobile, and vice versa.
And that’s it! That’s how easy it is to edit your hotspot’s settings. To add additional hotspots, simply click on Add Item, and repeat the same process.
Tooltip
In the Tooltip section, you can edit the tooltip settings as a whole. These settings are global and so will affect every hotspot on your interactive image.
You can change the position, trigger and animation. For the trigger, you can pick between having your hotspot activated when your users hover over your hotspot, or you can leave it on click. We think hover is really cool for desktop view, however, this isn’t going to work for mobile or tablet (as there is no hover option for mobile or tablet). But the great thing? You can edit the mobile trigger separately via the responsive mode!
In this section, you can also add animation for the tooltip. This is separate from the icon animation, as it will only affect the way the tooltip appears and disappears.
Style
Going onto the Style section of the hotspot editor, you can customise your interactive image and hotspot features further.
Under Image, you’ll see you have plenty of customisation options. You can change the size of your image with the width, max-width and height slide bars, change the opacity, use some cool filters, add a border, and more.
And the best thing about Elementor is that you can build everything visually. Its visual builder means that you can play around with all of these effects, and visually see the changes that take place.
Similarly, in the Hotspot style settings, you can edit the appearance of your hotspot icons. This means that you can fully customise your hotspots to fit with your brand.
In the Tooltip style section, you can also edit the tooltip content in terms of text colour, typography, alignment, box width, and more.
And, that’s it! That’s all you need to know to make your very own interactive image hotspot with Elementor. Pretty easy, right?
If you’d like more help on creating interactive Elementor hotspots for your website, check out our video tutorial How To Create Interactive Image Hotspots With Elementor
