How To Create Responsive Image Hotspots

Hotspots are highlighted areas in the picture. These areas are interactive, so when you click on them, additional information appears. They are needed to grab attention and add action to the page.

In general, instead of explaining for a long time, it is better to look at the picture. Yes, these points are the hotspots.

Hotspots make a cool and enjoyable user experience. You do not need to scroll the page to get to the information, everything is right before your eyes, in the most accessible form.

You probably think that creating these points is difficult. And perhaps you would be right, however, until the moment when we had different plugins for this work. Today I will tell you how to create a responsive image hotspot using Hotspot Elementor widget.

How to add hotspots to the image

Hotspot widget for Elementor is a part of JetTricks plugin package which comes with overall 8 widgets for adding visual effects to the website.

Step 1: Picking the pic

Find the post or page you’d like to add a hotspot to on the dashboard. Choose editing this item with Elementor. Now find the Hotspots widget on the left-sidebar and drop it on the page.

Now, in the widget window, you need to select an image that will become the basis for hotspots. Of course, I advise you to choose high-resolution pictures. They both look better and are more enjoyable to work with.

Step 2: Adjusting the hotspot settings

After you choose the image, you will have a hotspot placed in its center by default. Go to Hotspots → Item #1. Here you can define how a hotspot will look like, as well as its position on the image.

The content section allows you to choose the appearance of the hotspot:

• Choose how the icon will look like. You can select an icon from the library or upload your own in an SVG format. Moreover, you can delete icons at all.
• Fill in the text you want to appear on the hotspot.
• Description stands for the text that will show up as a tooltip once you press the hotspot.
• You can also set the link you want the user to transfer to by clicking the hotspot.

The position section accordingly allows defining the position of the hotspot: horizontal or vertical.

One more thing I want to mention is that you can choose between 6 animations that will appear in a moment when your site’s visitor won’t hover the pointer on the hotspot areas. And btw, did you know that with Hotspot widget you can add any number of hotspots?

Step 3: The tooltip settings

Next, you’ll probably want to adjust how the appearing tooltip will look like. As I wrote before, if want to show a tooltip, you have to fill in the needed text to the Description field in the hotspot settings. After it, you can use customization options.

Now let me explain what all these fields mean.

• Show On Init — this option makes the tooltips visible all the time. When it’s off, the tooltips appear on hover only.
• Placement — allows choosing where to display the tooltip relative to the hotspot.
• Use Arrow — turn it on so that tooltips get an extra arrow that points to the hotspot.
• Arrow Type — Sharp or Round arrow? It’s for you to decide.
• Arrow Size — I hope you get it without me. :)
• Trigger — awesome thing. I love Сrocoblock because they think such little things. In general, this option helps you choose at what point the tooltip will pop up when you hover over the cursor.
• Show Duration — this one sets how quickly the tooltip will appear after the trigger event.
• Hide Duration — same here but defines the speed it will hideaway.
• Delay — the time between the trigger activates and emerges.
• Distance — allows setting a size of the gap between the borders of the tooltip and hotspot.
• Animation — choose between 5 different types of how the tooltip will appear.

Step 4: Applying styling options

And finally, go to the Styles tab and adjust the hotspots’ and tooltips’ appearance according to your preference! Fortunately, Elementor widget provides plenty of options.

When you’re done, update the page and evaluate how your work looks like on the front end.

Final Thoughts

In general, this tutorial looks so voluminous, but in fact, it is very easy to add hotspots to the image on the website with Elementor and Crocoblock. Just try it. ;)

And of course, there are many other plugins and widgets out there that can handle this. I just talked about the method that I personally use.

What are your favorite plugins for creating responsive hotspots? Share in the comments!