Beginner's Guide for WordPress / Start your WordPress Blog in minutes

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.

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.

Description Demo for Interactive Images

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.

Creating an interactive image in WordPress

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.

The settings in the Draw Attention WordPress plugin

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.’

Adding a title to an interactive image in WordPress

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.

Adding interactions to an image in WordPress

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.

Adding a hotspot to an image in WordPress

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.

Adding clickable areas to an image in WordPress

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.

Adding a title to an interactive media file in WordPress

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.’

An example of an image with a clickable area

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.

How to create a custom animation for an image

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.

How to add an info box to an interactive image

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.

An example of an info box in an interactive 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.

How to create a clickable interaction in WordPress

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.

Changing how an interactive image looks in WordPress

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.

Creating a 'more info' box

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.’

How to preview an interactive image

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.

Copy Shortcodes

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.

Exporting an animation from a WordPress website

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.

Importing an interactive image into a WordPress website

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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

1 CommentLeave a Reply

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.