How to Create Interactive Images in WordPress

Do you want to add an interactive image to your WordPress blog?

By highlighting, linking, and animating certain areas of an image, you can catch the visitor’s attention. You can also create ‘more info’ boxes that open when people click on different areas of the image, which is perfecting for promoting your products.

In this article, we will show you how to create interactive images in WordPress.

What is an Interactive Image?

An interactive image has hotspot areas, highlights, links, colors, and more. Straight away, this is much more engaging than a simple, standard image that you upload to WordPress.

Interactive images can draw the visitor’s attention to specific features and content, and then provide extra information. For example, you might show a popup when the visitor hovers over a particular bar in a chart.

This interaction can encourage visitors to explore your images in more detail, which will keep them on the page for longer. It can also create a more interactive and interesting experience, which can increase your pageviews and reduce bounce rate in WordPress.

Interactive images can also show visitors the steps they should take next. For example, you might add links to other parts of your site, or show a call to action button when the visitor clicks on an image.

With that said, let’s see how you can create interactive images in WordPress.

Creating Interactive Images in WordPress

The easiest way to add clickable areas, also known as hotspots, is by using Draw Attention. This plugin allows you to either show a ‘more info’ popup or open a new URL when the user interacts with an image.

First thing you need to do is install and activate the Draw Attention plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, go to Draw Attention » Edit Image in the WordPress dashboard. This takes you to a screen where you can create different interactions and then add them to an image as clickable areas.

To start, type in a title for the interactive image.

This will appear next to the image on your WordPress website. For example, in the following image we’re using the title ‘OptinMonster Features.’

After typing in a title, scroll to the ‘Image’ section and choose the image that you want to use.

You can either select an image from the media library, or upload a new image.

After choosing an image, you can add colors, links, create clickable areas, and more by scrolling down to the Hotspot Areas section.

The plugin creates a Clickable Area 1 by default, so click to expand this section.

To start, you’ll need to highlight the area that you want to make interactive.

Draw Attention has a few different shapes you can use for the highlight, so simply click on the shape that you want to use. In the following image we’ve selected a rectangle.

Now, simply click and drag to highlight the area you want to use as the hotspot.

Draw Attention will now show some new settings for this clickable area. To start, type a name into the ‘Title’ field.

This will appear as a tooltip when the visitor hovers their mouse over the hotspot, so it’s a good idea to use something descriptive.

In the following image, we’ve turned the countdown area into a hotspot and added the title ‘Countdown Timer.’

Once you’ve done that, open the ‘Action’ dropdown and choose what will happen when a visitor clicks on this area. Draw Attention can either open a new link or show a ‘more info’ box.

You’ll see different settings depending on the options you select. For example, if you choose ‘Go to URL’ then you’ll need to add the link and specify whether it should open in a new tab.

If you select ‘Show More Info’ then you’ll need to type in the information that will be displayed when the visitor clicks on the hotspot.

You can also add an optional detail image or URL.

In the following image, we’ve added some text to the more info box.

We’ve also added the OptinMonster logo as a detail image.

When you’re happy with how the hotspot looks, click on the ‘Add Another Area’ button.

You can now configure the clickable area following the same process described above.

Simply repeat these steps to add all the clickable areas to the image.

With that done, you may want to customize how the highlights and more info box looks. For example, you can change the color that Draw Attention shows when visitors hover over a clickable area, using the ‘Highlight Color’ settings.

You can also change the highlight opacity, border color, border width, and more using the settings in the ‘Highlight styling’ section.

After that, you can scroll to ‘More Info Box Styling’ and fine-tune how the box looks. For example, you can change the background color, text color, and more.

All these options are fairly straightforward, so it’s worth trying different settings to see what looks the best on your website.

As you try the various options, you can preview how they will look on your WordPress website by clicking on ‘Preview Changes.’

When you’re happy with how the interactive image looks and acts, make sure you click on ‘Update’ to save your changes.

You can now add the interactive image to any page, post, or widget-ready area using the shortcode in the ‘Copy Shortcode’ block.

For more information on how to place the shortcode, please see our guide on how to add a shortcode in WordPress.

Import and Export Interactive Images

Sometimes you may want to re-use the same interactive image across multiple websites. For example, if you’re an affiliate marketer then you might create an interactive image that promotes one of your products. You can then use the same interactive image across all your Amazon affiliate stores and other affiliate marketing websites.

Uploading the same image and then recreating all the interactions manually can take a lot of time and effort.

Instead, we recommend creating the interactive image once and then using Draw Attention’s import / export feature. This allows you to re-use the same image across countless websites.

To do this, you’ll need to install the Draw Attention plugin on the original site that has the interactive image, and all the other websites where you want to use that image.

On your original site, go to Draw Attention » Import / Export and check the box next to each image that you want to export.

Then, click on the Generate Export Code button. After a few moments, Draw Attention will generate some code.

In a different tab, log into your other WordPress blog or website and go to Draw Attention » Import / Export.

Here, copy the export code into the ‘Import’ box and click on the ‘Import’ button.

Draw Attention will now import the image and all of its interactions, ready for you to use.

Simply repeat these steps on all the websites where you want to use the interactive image.

We hope this article helped you learn how to create interactive images in WordPress. You might also want to see our guide on how to create a custom Instagram photo feed in WordPress or see our expert pick of the best drag and drop WordPress page builders.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.