How to Easily Add Image Hotspot in WordPress
Humans are visual beings and it is hard to imagine a more powerful tool than an image to attract your target’s group attention. But, there might be an element that is even more enticing than a beautiful image – an image hotspot for WordPress. An image hotspot is a type of image with interactive hotspots. When the user hovers over a hotspot, a popup that may contain almost anything you want appears.
An image hotspot on your WordPress website is a beautiful way to share more information about any given topic – from culinary blogs to construction websites and everything in between. You can show meal ingredients and measures, types of materials used, names and titles as well as any other info about your website’s content. The popup may contain text, another, image, a video or a link. Apart from providing your users with more fine-tuned details, you’re also making your website more interactive by using image hotspots.
If you think you need a professional web designer to add this fancy element to your website, we’ve got great news! You can easily add it all by yourself. Stay tuned to read more about how to add an image hotspot in WordPress with a plugin:
Based on our experience, Qi Addons for Elementor is one of the best Elementor addons. It includes 60 free and 40+ premium widgets and many options for adding different elements to the site with lots of customization and styling options so you can be sure that they will fit into your site’s overall design. On top of it all, it is incredibly simple to use – that is why we very often opt for this addon, which greatly improves the site.
Image Hotspots custom widget is a premium widget. It allows you to add a specific image and position hotspots with specific information on them. The user then gets the information by hovering over the hotspot. The great thing is that we can determine the responsive positions so that it does not happen that on different devices the hotspot does not match the object to which it refers. On the widget demo itself, you can see some conceptual solutions by the author that can inspire you.
Once you’ve added Qi Addons to your site, find the Image Hotspots custom widget by typing in “image hotspot’ in the search field, or simply by browsing the elements. You will notice that all Qi widgets have recognizable red icons.
When you drag the widget to the desired location, you will see some of its default values. Widget has two tabs – Customize and Style that include a variety of options for adjusting the element, while the Advanced tab is an Elementor tab that comes with all the elements.
Let’s start with the general options for the custom tab. What you will notice first here is where the image and the three Items are inserted. These items are actually hotspots and their position and content settings. By default, there are three hotspots, but you can delete existing ones or add new ones.
Once you’ve inserted an image, from a library, or by uploading a new one, it’s time to position the hotspots and add content to them.
As for the content, you have the Title and Subtitle option to set and as soon as you start modifying those, you will see how the content changes live.
There is also a pin field here where you can select an icon for your pin, it doesn’t have to be a default one. The icon library is at your disposal, but you can also add your own SVG icon. For example – SVGREPO offers a large number of free icons that are available for commercial use.
As for the Horizontal Position and Vertical Position, they serve for the hotspot’s orientation on the left/center/right and top/middle bottom positions, while the Offset option actually allows us to fine-tune the positions. We will not explain this in detail as we are sure you will see for yourself how your videos move by changing the offset values. What is important to bear in mind is that when you customize the hotspots, you should also observe the preview page that does not have a settings bar, so that you can see how everything looks on a full-size screen.
Also, in addition to the offset, you will notice screen icons with the title, ie classic icons that indicate that responsive options are available for this setting. Make sure to check them out too. It is best not to place hotspots along the very edge of an image as you have to think how the image hotspot popup will look on different screen sizes.
The Fade Info Position option is where the info for the hotspot hover over appears.
This is the result after we added the picture and pins, now we can proceed to style it all to look exactly the way we want.
As for stylization, a variety of options are categorized within a special Style tab, so you can see where we stylize Pins, Info, Title and Subtitle.
As for the Pin, all the settings are easy to understand. You can choose an icon that will apply to all pins, unlike the settings in the items where you can choose a separate one for each. Also, you can specify the size and color for it. You can add a background icon using the Pin holder size. Our background is red and 15px size.
The Border radius option allowed us to make the background look like a circle because the radius is applied to the background.
Info style refers to the appearance of the field in which the info appears. Info display is an option that determines how the hover is displayed. It could be Fade and Reveal, we chose Reveal. Field color and padding are what you can also customize here. Info Border Radius is a particularly interesting option for the reveal layout we used because the radius helps to fit the info field and the pin icon itself. If we didn’t add a radius here, the white info field would go above the pin of the red icon box.
Info Title Style options refer to the title we added to each pin. The settings here will apply to every title in this image hotspot. You are probably familiar with the options and at first glance, you can specify the title tag, color, fine-tune the title typology. Title Margin Bottom is an important option when you also have subtitles in your info field because then you can add this margin to create a space between the title and the subtitle.
As for the Info subtitle style, in case you add a subtitle here, you can stylize its appearance in more detail. In typography options you can play with different settings.
This is how the final result looks. text that we added with We used the Section title Qi widget too add the text and made this website section a lot more interesting for the future users.
In Conclusion
Qi Addons is a very intuitive tool everyone can use with complete ease and with zero coding or any other technical knowledge. Feel free to explore this widget’s options on your own, experiment, play and enjoy the creative process of making your website more attractive for your users. Should you have any questions, don’t hesitate to contact us in the comment section – we look forward to hearing about your experiences with Qi and hotspot images!
We hope this article was helpful. If you liked it, feel free to check out some of these articles as well!
