Tips to add interactive images in WordPress

December 25. 2020

Having an interactive image on a website may not be for everyone. But, for those that recognize its potential, adding interactive images can be just the right move. Unfortunately, not a lot of people are familiar with how useful interactive images are. And, if they are, they often don’t know how to add them. So, to help combat this, we are going to into how and why you should add interactive images in WordPress.

The benefits of having an interactive image on your website

For most of our readers, adding an interactive image to your website might seem like a strange idea. After all, having one won’t do you much good when it comes to SEO results or marketing efforts. So, why go through the trouble of adding it in the first place? Well, we do have to admit that not all websites can benefit from interactive images. Professional websites more focused on expert content usually have little use out of interactive media. But, for certain websites, adding an interactive image can be just the step to help them rise above the competition. Especially if they build their website with interactive images in mind from the start.

A set of good interactive images can help you:

• Have a more intuitive, user-friendly website.
• Help your website stand out among the similar.
• Boost the interest of your readers and help them understand your content more clearly.
• Give you a straightforward way to organize your content and run a beautiful website.

So, if you believe that your website can benefit from interactive images, don’t shy away from creating and implementing them. As you will soon learn, the process of doing so is far more simple than most people believe.

Add interactive images in WordPress

The easiest way to add an interactive image in WordPress is to use a plugin. Since there are numerous plugins that you can use, we will not cover all of them. Instead, we are going to cover the most popular one, Draw Attention. As you will see, adding an interactive image is a fairly straightforward endeavor. And once you get the gist of how to use one plugin, you should have a fairly easy time understanding others. So, if the plugin we recommend doesn’t work for you, don’t hesitate to try a different one.

Using Draw Attention plugin

The first thing to do, as you might guess, is to install the Draw Attention plugin. We would like to advise you that, while this is a fairly standard plugin with regular updates, you should still backup your website before installing it. Even decent plugins can cause harm or even completely disable a website in certain situations. And, while no situation is impossible to deal with, you really ought to avoid trouble whenever possible.

Once you’ve made a backup, successfully installed and activated the Draw Attention plugin, simply open the WP dashboard. Then, on your left, you should see a tab that says “Draw Attention”. It is usually just below the “Posts” tab. After this, you need to select the “Add New” tab.

Here you will need to add a title for your image (we suggest something easy to remember). You will have the option to either create a new image by clicking the “Upload image” button. Or, you can load one from Media Library. If there are any issues with the image, we suggest that you fix them before proceeding. Once you’ve uploaded, or selected your image, you need to click on the “Publish button”. This will take you to the edit window where you can enhance your image as you see fit.

Hotspot areas

By scrolling down you will arrive at the Hotspot Areas section. Here you can draw clickable areas on your image, and therefore make them interactive. Simply select an area, and then expand them to the desired size. Once you’ve selected the hotspot area, head down to the “Action” option. Here you will get a dropdown menu where you can select the action for the area. The two options available are:

• Show More Info – This will simply showcase a bit of text that you’ve previously added.
• Go to URL – This will take you to the webpage of your choosing.

If you go with URLs, try to use the ones that are SEO friendly. Another option is to visit the “General settings” tab and alter things like highlight styling, action text, and info background. Once you’ve done that, click on the “Update button”. You will get a shortcode that you need to copy and afterward add to the desired post.

Importing and exporting multiple images

While this process is straightforward, as you can see, it can be arduous to implement on multiple websites. For this reason, Draw Attention allows you to both import and export interactive images. To do this, you will first need to have Draw Attention installed on each website you plan on using.

Head on to the website from which you wish to export your images. Then, head to Draw Attention -> Import / Export section. There you need to check the mark next to the images you plan on exporting. After this, click on the Generate Export Code button. Now copy the code and paste it into the website where you want to import the image. You will do so by also visiting the Draw Attention -> Import / Export section and heading to the Import field.

Final thoughts

All things considered, adding interactive images is not a difficult task. If you know your way around WordPress, you can probably finish the whole ordeal within 20 minutes. The important thing to note is that, while you can add interactive images in WordPress, doesn’t mean that you should. As we mentioned, not all websites can benefit from interactive images, and you need to carefully consider whether your website is suitable. Know that having interactive media can slow down your website. And that it is always in your best interest to have as much loading speed as possible. So, only implement interactive images if they serve a purpose.