Skip to Main Content

How to create interactive images on WordPress

Divi: the easiest WordPress theme to use

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

Would you like to create an interactive image for your WordPress blog? 

An interactive image allows you to highlight, link, and animate certain areas of your image. 

In this tutorial, we will show you how to create interactive images on WordPress.

But before, if you have never installed WordPress discover How to Install a WordPress Blog in 7 Steps et How to search, install and activate a WordPress theme on your blog 

Then back to why we are here.

How to create interactive images on wordpress e1567777631422

What is an interactive image?

An interactive image includes areas of access points, highlights, links, colors, etc.

Make your blog smoother and more efficient by trying these 6 WordPress image compression plugins for your Blog

It's different from a simple image you upload to WordPress. The interactive images are eye-catching and grab the attention of users. You can add description to different parts of an image, add links to pages, highlight sections, and more.

demo dune interactive image on WordPress.jpg

In this image, you can see the description of the fruits next to the mouse above the different bars. You can use these interactive images to boost user engagement and website time.

Discover How to use FOMO on WordPress for better conversions

Let's take a look at how you can grab the attention of your visitors with interactive images.

How to create interactive images on WordPress

The first thing to do is to install and activate the plugin Draw Attention. For more details, see our step-by-step guide to way to install a WordPress plugin.

After activation, you will see a new custom post type on your WordPress dashboard. You have to go to Draw Attention »Add New to create an interactive image.

draw attention WordPress.png

Start by adding a title for this new interactive image so you can easily remember it. On this page, you can create an interactive design on new or already uploaded images. You can add a new image by clicking the upload image icon, or you can select an image from your WordPress media library.

Go further by discovering these 9 premium WordPress plugins to optimize your media library

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

drop a picture to start.png

Then you have to click on the button Publish .

After posting, the plugin allows you to edit the image and highlight specific areas, add colors, links, draw hotspot areas, and more. You can scroll to the section Hotspot zones and expand the clickable area to preview the image.

Just move your mouse and draw clickable areas on the image. You can easily select the access point areas and expand them to create a selection.

to create zones on WordPress.gif

After drawing the hotspot area, you need to scroll down the drop-down list Action and select an action for the selected area on the image. If you choose Show more info, you can just add a description to explain the access point area on the picture. You can also add a link on the selected area using the option " Go to url" page (in French).

Learn How to backup and recover your blog with Snapshot Pro

save image hotspot.jpeg

You can also manage general settings and highlight style for action link, action text, background, and more. These settings can help you make your image more interactive.

general settings

Then you have to click on the button Update profile and copy the shortcode to add it to your WordPress post or page.

copy the shortcode.jpg

The plugin allows you to create as many interactive images as you want using your previously uploaded or new images.

click on an interactive image.jpeg

Import and export interactive images

If you work on multiple websites and want to import / export interactive images, the Draw Caution plugin must be installed on both websites.

On the first website, you must visit Draw Attention »Import / Export and check the images you want to export. Then click on the button Generate the export code and copy the code.

export a hotspot.png code

Divi: The best WordPress theme of all time!

With over 701.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

After that, you have to go to the second website and make sure you have activated the Draw Caution plugin. Then you have to go to Draw Attention »Import / Export on the dashboard and paste the code into the import field.

to import a code hotspot.jpg

Go ahead and click the button Import and your images will be imported.

Discover also some premium WordPress plugins  

You can use other WordPress plugins to give a modern look and optimize the grip of your blog or website.

We offer you here some premium WordPress plugins that will help you do that.

1. Opt-In Content Locker

Opt-In Content Locker is a WordPress plugin, which allows you to lock important content on your blog and display it only for subscribers. 

Opt in content locker wordpress plugins lock website content

All you need to do is enclose the locked content with [optinlocker]… [/ optinlocker] shortcodes. If people want to view this content, they have to submit their name / email. After submission, all locked content will become visible.

Its main features are: a tool msafe and secure, the vblocking important content, theupport of MailChimp, AWeber, GetResponse, iContact, Campaign Monitor, Mad Mimi, Benchmark, Sendy and MyMail, support for shortcodes, export of data in CSV format, the possibility of being translated into several languages, feasy to install, an excellent customer support, et others.

Download | Demo | Web hosting   

2. Click to WhatsApp Chat

The WordPress Click to WhatsApp Chat plugin allows WordPress customers to easily connect with the website owner or customer support using their WhatsApp account.  

Click to whatsapp chat for wordpress

Just a click on the WhatsApp account and it will be directed directly to the mobile WhatsApp account with a default message. And if the client is on desktop or laptop, he will be redirected to WhatsApp Web.

This plugin requires the WhatsApp number and time and day, which the website owner or support team will use to discuss. The chat button can be added on the WooCommerce product detail page, which is directly related to that product.

Download | Demo | Web hosting

3. Was this Helpful

Was This Helpful is a WordPress plugin used to value comments from your readers. Note that if a positive comment motivates you to do better, a negative comment on the other hand helps you to find the gaps, and to improve your blog; making it more useful for other visitors.

Was this helpful wordpress plugin

This plugin is unique because it asks visitors to answer the question of why they don't find a post useful when they click the "NO" option. Likewise, it asks visitors what they like the most when they click on the "YES" option.

In addition, you can go to the page / article listing where you will see a Yes / No section, which allows you to quickly see the statistics, finally to have a complete overview on the quality of your articles and your pages.

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

Download | Demo | Web hosting

Recommended Resources

Find out about other recommended resources to help you build and manage your website.

Conclusion

Here ! That's it for this tutorial, I hope it allows you to create interactive images. Do not hesitate to share with your friends on your favorite social networks

However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation.

And if you have any suggestions or remarks, leave them in our section Comments.

... 

This article features 0 comments

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
12 shares
Share10
tweet1
Save1