Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
25 Million+
Websites using our plugins
Years of WordPress experience
WordPress tutorials
by experts

How to Create Interactive Images in WordPress

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

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 perfect 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 can have hotspot areas, highlights, links, colors, and more. Straight away, this is much more engaging than a simple, standard image that you upload to your WordPress website.

Interactive images can draw the visitor’s attention to specific features and content and then show additional 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 the 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.

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

Creating Interactive Images in WordPress (Step by Step)

The easiest, most beginner-friendly way to add clickable areas or interactive 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.

An example of an interactive image in WordPress

Note: In this guide, we will be using the free version of the plugin. However, feel free to get the pro version of WP Draw Attention, as it allows you to create multiple interactive image maps, use tooltips and lightbox effects, and more.

The 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 are 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 and 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 will 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 image 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 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 a 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 appear when the visitor clicks on the hotspot.

You can also add an optional detail image or URL, which will be included in the info box.

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 are 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 look. 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 and border width, add a border, 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

Draw Attention also comes with different themes that you can apply to your interactive image.

To take a look at these themes, simply scroll to the ‘Apply Color Scheme’ box and open the dropdown menu. You can choose between Light, Dark, and Draw Attention.

Changing the color scheme for an interactive image

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

How to Import and Export Interactive Images

Sometimes, you may want to re-use the same interactive image across multiple websites.

For example, if you are 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 reuse the same image across countless websites or online stores.

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 in to 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 or online marketplaces 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 our expert picks for 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. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

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

2 CommentsLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

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.