Creating engaging websites that won’t be mentally dumped by users at a glance requires careful planning and the use of high-quality visual content. In most cases, words alone are simply not enough to keep visitors on a page because:
A particularly effective way to engage with your audience is to use interactive visual content because of its power to tell stories more vividly than static graphics.
Why interactive images are important
Interactive images allow you to go the extra mile when it comes to user engagement. For example, you can upload a photo of wildlife and then allow users to tap on each animal to learn more about it. Or, if you run an online store, people can click on each product to read user reviews and see more photos of it.
The thing is, by placing hotspots on images and then linking them to text, audio, video, or any other type of content, you can bring pages to life and make your website more memorable. You can also overload them with highlights, additional information, descriptions, links to other web pages, and play with colors to invite users to take action and get involved with your brand. .
How to Add Interactive Images in WordPress
When there’s something WordPress can’t do directly, that’s when plugins come into play. This time is no different.
The fastest way to add interactive images in WordPress is to use a plugin. While several premium plugins in the market could help you get the job done including Image Map Pro for WordPress, Advertising, and WooMapper, we really liked the features that the Draw attention plugin packs. You get a lot of value without having to spend any money since the plugin can be downloaded for free from the official WordPress plugin repository.
The first step is to install the plugin and activate it on your website. To start creating an interactive image, search for the Draw attention in your menu, and click on Edit image.
First, you can add the title of the image which will be visible once the image is displayed.
Then, on the right side of the screen, add the new image you want to edit or select one from the media library.
Once the image is uploaded, you can adjust many styling options and change colors, enter the default More information text, etc.
If you scroll down the page a bit, you will reach the Hotspot areas section. This is where you can start adding hotspots to your image.
To get started, click Clickable area #1. Your image will now appear under Contact details.
Now just click on the part of the image where you want to add the first point. You can draw various hotspot shapes by adding more dots which will then form a hotspot area.
Below the image you will find a set of additional options that allow you to add a title for your hotspot area, choose what will happen once a user clicks on a hotspot (you can insert more information or add a link that will take them to another web page), enter a description and upload an image that will display once the user clicks on the hotspot.
When you are satisfied with the final result, press the button Update button.
Now, to add your interactive image to a page or post, copy the shortcode displayed on the right of the screen.
Next, go to the page where you want to display the interactive image. If you are still using the classic editor, paste the code into the Text editor. In Gutenberg, add the Small code block first and insert your code. If Elementor is your preferred page builder, add the code to the Small code widget and the interactive image will appear on your page.
Import/export interactive images
The Draw Attention plugin contains another handy option that comes in handy if you work on multiple sites and want to import and export interactive images from one site to another.
In this case, you must first install the plugin on both websites. On the website from which you want to export the image, navigate to Attract attention > Import / Export, select the images in question and press the Generate export code button.
Now copy the entire code.
Then go to the other website where you want to import the image and again click on Attract attention > Import / Export, paste your code in the Import field and press the Import button.
The downside of using the free version of this plugin is that it allows you to add a single interactive image to your website.. If you choose to upgrade to one of their premium packages However, you will be able to add as many image maps as you want and set unlimited hotspots, select a preferred layout and one of 20 predefined color palettes, get a year of support and updates, and more.
Final Thoughts
Using interactive images can undoubtedly help you keep visitors on your website and possibly increase your conversion rates. The more interesting and engaging the content you offer, the more people will want to do business with you. The Draw Attention is a great plugin if you need a solution that will allow you to add an interactive image to your pages without hassle. Remember to optimize the images before uploading them so as not to compromise the performance and UX of the site.
