Sign up for our newsletter and be the first to get all the latest Qode news and updates.
BACK TO TOP

How to Add Interactive Images in WordPress

How to Add Interactive Images in WordPress

To create appealing websites that won’t be mentally dumped by users in a blink of an eye 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, since:

  • some people might be overwhelmed by too much text on a page and they may flee;
  • most users don’t even read the content word-by-word but rather skim through it and therefore are more likely to leave your site;
  • text is just not as engaging and enticing as graphics are.

A particularly good way of engaging with your audience is by using interactive visual content because of its power to tell stories more vividly than static graphics.

Why Are Interactive Images Important

Interactive images allow you to take things up a notch when it comes to user engagement. For instance, you can upload a wildlife picture and then enable users to tap on each animal to learn more about it. Or, if you run an online store, people could click on each product to read user reviews and see more pictures of it.

The thing is, by placing hotspots on pictures and then linking them to textual, audio, video, or any other kind of content you can bring pages to life and make your website more memorable. You can also supercharge them with highlights, additional information, descriptions, links to other web pages, and play with colors in order to invite users to take action and become involved with your brand.

Qode Themes: Top Picks
Bridge WordPress Theme Banner
Bridge

Creative Multi-Purpose WordPress Theme

Stockholm WordPress Theme
Stockholm

A Genuinely Multi-Concept Theme

Startit WordPress Theme
Startit

Fresh Startup Business Theme

How to Add Interactive Images in WordPress

When there’s something WordPress can’t do straight out of the box, that’s when plugins come into the spotlight. This time is no different.

The fastest way of adding interactive images in WordPress is by using a plugin. While several premium plugins on the market could help you do the job, including Image Map Pro for WordPress, Adverty, 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.

Draw Attention

The first step is to install the plugin and activate it on your website. To start creating an interactive image, look for the Draw Attention option within your menu, and click on Edit Image.

Draw Attention Edit Image

First up, you can add the image title that will be visible once the image is displayed.

Draw Attention Title

Then, on the right side of the screen add the new image you wish to edit or select one from the media library.

Draw Attention Upload Image

Once the picture uploads, you can adjust numerous styling options and modify colors, enter the default More Info text, etc.

Draw Attention Image Style

If you scroll a bit down the page, you’ll reach the Hotspot Areas section. This is where you can start adding hotspot areas on your image.

For starters, click on Clickable Area #1. Your image will now appear under Coordinates.

Draw Attention Coordinates

Now simply click the part of the image where you wish to add the first point. You can draw various hotspot shapes by adding more points which will then form a hotspot area.

Draw Attention Coordinates

Below the image, you’ll find a set of additional options that allow you to add a title for your hotspot area, choose what’s going to happen once a user clicks on a hotspot (you can insert more info or add a link which will take them to another web page), enter a description, and upload an image which will be displayed once the user clicks on the hotspot.

Draw Attention Coordinates Options

When you’re happy with the final result, press the Update button.

Now, to add your interactive image to a page or post, copy the shortcode displayed at the right-hand side of the screen.

Copy Shortcode

Then, go to the page where you wish to display the interactive image. In case you’re still using the Classic Editor, paste the code in the Text Editor. In Gutenberg, add the Shortcode block first and insert your code. If Elementor is your preferred page builder, add the code to the Shortcode widget and the interactive image will appear on your page.

Import / Export Interactive Images

The Draw Attention plugin packs another practical option that comes in handy in case you’re working on multiple sites and you wish to import and export interactive images from one site to the next.

In that case, you should first install the plugin on both websites. On the website you’d like to export the image from, go to Draw Attention > Import / Export, select the images in question, and press the Generate Export Code button.

Generate Export Code

Now, copy the entire code.

Export Code

Next up, go to the other website where you wish to import the image and again, click on Draw Attention > Import / Export, paste your code in the Import field, and press the Import button.

Import Code

The downside of using the free version of this plugin is that it allows you to add just one interactive image to your website. If you choose to upgrade to one of their premium plans though, you’ll have the option to add as many interactive images as you need and set an unlimited number of hotspots, select a preferred layout and one of the 20 predefined color palettes, get one year of support and updates, and more.

Final Thoughts

Using interactive images can indubitably help you keep the visitors on your website and possibly increase your conversion rates. The more interesting and appealing the content you offer is, the more people will want to do business with you. The Draw Attention is a terrific plugin if you’re in need of a solution that will allow you to add an interactive image to your pages hassle-free. Just don’t forget to optimize images before uploading them in order to avoid jeopardizing the website’s performance and UX.

Post your comment

Comments0