I want to share with you all the details about the excellent image map plug-in for WordPress. This is a plug-in for WordPress that enables you to make your images interactive. What do I mean by that? Well, you can draw off certain areas of that image.
When people click on those areas:
- you can give them some extra information
- you can show them another image or
- you can send them to another site or another page via a link
You might want to use it for a floor plan, for example, that you have on your website. You can allow people to click on the different rooms and get more information and see more pictures. Or maybe you'd like to add an interactive map to your WordPress website. Then people can click on different areas of the map and again look at pictures or get more information or go off to another page on your website.
Why I used WP Draw Attention plug-in
I've used the plug-in to create an interactive image for my affiliate marketing website wheelalong.co.uk. It's a fantastic way of showcasing one of my electric wheelbarrows. Let me take you through what this plug-in is and how it works. The plug-in I'm talking about is called the WP Draw Attention. It cost $74 for one website or $124 for unlimited websites. If you want to try it out, there is a free version which you can find via the plug-ins section of your website. I installed it on wheelalong.co.uk, which is my wheelbarrow and trolley affiliate site. I was looking to create an interactive image around one of the powered wheelbarrows. And the reason for this is that I sold one of these via an affiliate link just the other week. It's the Makita powered wheelbarrow. It runs on batteries, and it's a pretty impressive bit of kit. But the problem with it is when you order it off Amazon, it doesn't come with everything you need.
Here are the things you need when buying this wheelbarrow:
- batteries
- the actual barrow
That's where this plug-in is good at overcoming that. That's because I've been able to create an image that I've inserted into my content of the wheelbarrow with the accessories attached. And enable people to click on the image and hover over it. That way, they see what the different elements are and then when they click, they get redirected off to Amazon via one of my affiliate links. You can see that's pretty cool. And it's great for affiliate marketers who want to showcase a load of products in one image. Maybe you've got a picture of a car, and you want to show all the different elements. Perhaps you've got a picture of a room, and you want to show the different bits of furniture. It's great for that. If you've got those big images with lots of other things you want to link off to or share more information on.
How to use WP Draw Attention plug-in
Let me show you how easy it was to create that image for my blog content. You need to get an image. Then you need to install the plug-in, which is pretty straightforward. And then, you get an extra area within your WordPress dashboard where you can create your interactive images. You will see an “add new” button within there, and that's where you create a new image. The first thing to do is give it a name. Put that at the top, and then the second thing I did was to upload my image. You do that down the bottom right-hand corner. Across the top, there are some general settings where you can adjust the colours of the background. You can also add more text. I'm not bothered with that because I will add some text around the image using Elementor.
However, it's a nice feature if you want to add a description next to your images. Further down, we've got our options around the highlighted styling. They're the actual areas that you're going to draw onto your image to make it interactive, and you can adjust the colours and opacity. At the bottom, you've got the fun bit. You've got the hotspot areas, and it basically shows you your image, and you simply click around the bits you want to highlight. For example, I've got the barrow on my image that I want to link off to on Amazon, so I drew around the barrow like this.
You can be really precise with this. And I've got an excellent fit over the barrow bit. And then you've got your options where you can either add some text or maybe another image. That'll pop up when someone clicks. Or you can add my Amazon affiliate link, and you can set it to open in a new window. I added a few different clickable areas. You can add as many as you want. Then you save the new interactive image. And then, if you scroll down, you can see that there is a shortcode. You can use that shortcode to insert the image wherever you like on your WordPress website. I'm using Elementor, and there is a shortcode widget. I just dropped that into the content, pasted the shortcode in, and that's it. There is my interactive image in all its glory with the image maps. Now people can click on the barrow. They can see where that is on Amazon, they can click on the batteries, and they can see where they are.
Who is the WP Draw Attention plug-in made for?
Here you can look at that post at wheelalong.co.uk to see how it looks. I think it's an excellent little plug-in, and I'm going to be using it on all of my sites going forward. And I know that there are people out there that have been waiting for something like this. Maybe they've got some map they want to add to their website. Perhaps they've got a technical diagram where they want to highlight specific areas and make them clickable. This plug-in is going to be perfect for you.
Final Word
If you've only got the one interactive image that you want to add to your site, then the free version will probably do what you need. But I prefer paid version, where I can use all the options and features that WP Draw Attention provides to make my website look much better.
