Detail, detail, detail … It’s hard to convey loads of important small product details without alienating your customers with a wall of detailed text. If you want to pinpoint an object, room, or area – plus provide detailed information without interrupting the customer’s journey by sending them off to different parts of your website – then a WordPress image map is your answer.
A WordPress image map is the best way to showcase your beautiful pictures and add loads of details effectively, without spoiling the effect. You get maximum information compressed in the smallest amount of internet real estate – but done beautifully.
The zoom-in function for images in e-commerce stores deals with the problem in an elegant way, but installing a WooCommerce store is not the solution for businesses that need extra “oomph” for their photos.
Read our in-depth guide to learn how easy it is to create interactive image maps in WordPress with the WP Draw Attention plugin.
Overview of WordPress image maps and WP Draw Attention
A WordPress image map is an interactive graphic element that contains clickable areas.
An obvious use is by property developers, realtors, and guest house or hotel owners. They use image maps to showcase interactive floor plans with beautiful images attached to each area.
However, there are more advantages to image maps in WordPress, as proven by the WP Draw Attention image map tool. It’s fast becoming a secret marketing tool of choice for handymen, crafters, artisans, artists, and other internet traders.
WP Draw Attention’s interactive image (e.g. a floor plan) allows your customers to zoom in to incredible detail. You can add a detailed explanation, text, numbers, images, or even video for each area to highlight your product’s unique features. You can elaborate on all the advantages of your product without overwhelming the visitor with a wall of text.
Responsive image maps created with the WP Draw Attention plugin generate their own meta-data according to your input and therefore are SEO-friendly from the get-go.
We’ll mention the differences between the free and premium WP Draw Attention plans below, but we must tell you about this fabulous feature of the free plugin… You get just one interactive drawing per site, but the irresistible factor is that you can add any number of detail areas to that drawing.
Let’s use a floor plan as an example. You can link areas on the floor plan to photos of each room, but you can also outline specific items of interest on the general floor plan. You could end up with detailed photos of artwork, antiques, flower arrangements, and soap … all linked to your one free base image.
Let’s start our guide without further ado!
How to create an image map in WordPress with WP Draw Attention
It’s remarkably easy to set up an interactive portfolio with the WP Draw Attention plugin. You’ll take care of styling within each drawing.
Step 1: Install WP Draw Attention
Get the free Draw Attention plugin from the WordPress plugin library or your WordPress dashboard.
In WordPress, navigate to Plugins → Add New. Search for “Draw Attention”. Install and then activate the plugin. After activation, access it from the menu on the left (Settings → WP Draw Attention).
Step 2: Create your first image map
Once installed, click on the “Draw Attention” menu item to get started.
Since the free version only allows you to create one image map, you’ll see an “Edit image” option that we’re going to take a closer look at below.
On this “Edit Image” page, type a title (name) for your new interactive image. It will be visible on your website, so choose a descriptive, SEO-friendly name.
Step 3: Upload the base image and add a hotspot area
Click on the “Drop image here” section on the right-hand side of the screen to choose or upload your base image.
In our case below, we’ve uploaded an apartment plan as an example of how a developer, architect, or even interior designer may showcase the designs for a particular property.
In the “hotspot” section you will now see the image that you just uploaded with the instruction to “draw the clickable areas of our image”.
Next, highlight each section that you want to link to more information. To do that, click on each point of the area you want to highlight on the interactive image map, as we’ve done below.
You may want to instinctively use your mouse to drag the cursor to trace the image, but you need to create an outline of dots, rather than a drawing. Place your cursor on the first spot of the area you want to highlight. Click and move to the next spot. Repeat until you have created an outline of the area.
Once you have marked three dots, you can grab the outline by a corner, add more points to the outline, move the block, and otherwise play with your diagram in an instinctive way.
Move to the “title” box below the drawing. Type the name of the highlighted area (in the example above, the bedroom of the apartment).
Next, add a more detailed description of the room or object. Then, add a link to the photo in your media library (or an outside URL) that you want to pop up when someone clicks or taps on your image map.
Save the image map (go to the WordPress Publishing section in the top right corner) before you move on to the next step.
That’s it – you’ve added the first clickable area to your base image!
Step 4: Add more hotspot areas and preview
Stay in the “Hotspot area” section. Now click on the next dropdown area called “Clickable Area #2”
Repeat the steps of making a series of clicks all along the outline of the area that you want to highlight. Name the map image (in this case, “bathroom”), link the area to the photo of your choice, and save.
Continue until you’ve covered all the areas, and have named and linked all your hotspots. Save and publish your image.
You can now preview the image map to see what it may look like on your website.
Step 5: Style your interactive image
Click on “Edit interactive Image” to follow the auto-link that appears at the top of the page under the name of your image. It opens a new page with your interactive image. The image initially has the default WP Draw Attention styling.
Open/expand the “More Info Box Styling” feature on your page. Choose the Image background color, the color of the title that will appear above the linked image, and the text description color.
The “More Info Background Color” box refers to the color of the WordPress block containing the additional information. You can also edit the “highlight” styling. That’s the color of the highlighted area as it appears on your base image. The premium version comes with a good range of pre-set themes for quick styling.
Update the changes. Next, we’ll add your brand new WordPress image map to a new page.
Step 6: Add the interactive image map to your website
The shortcode appears on the right-hand side of your edit screen, below the “Add Image” box. It simply reads “Copy Shortcode” since the free plugin only offers one interactive diagram. That changes if you use the premium plugin and have more than one interactive image.
Copy the shortcode, create a new page on your website, and insert it in a shortcode block.
That’s it.
The image map is now visible on your WordPress site and visitors can interact with it at will, as you can see in the video below.
Upgrade to WP Draw Attention Pro for more features
Apart from the unlimited number of image maps in WP Draw Attention Pro, these three special features could clinch the deal for savvy digital marketers:
- You can change the type of interaction to either “hover” or “click”.
- You can “always show” hotspots for the image. The highlighted area will stay highlighted so visitors can instantly see which area they’re exploring.
- Additionally, you can use different highlight colors on different parts of images. It makes your image maps instantly recognizable as interactive images.
Take a look at the additional styling options below and notice how you have an “All images” option in the Dashboard menu to the left. You’ve unlocked the option to create unlimited image maps in WordPress.
General styling options increase and become easier with a choice of several preset themes. You can also fix the alignment of each image map on your web page.
If you have several different floor plans or units that you would like to highlight, WP Draw Attention Pro is a great investment, not just because you get an unlimited number of image maps, but also because they’ll look even better than the basic version.
So that’s it. Creating image maps in WordPress is that easy with WP Draw Attention.
Keep reading the article at WP Mayor. The article was originally written by Adeline Devlin on 2022-07-14 09:08:37.
The article was hand-picked and curated for you by the Editorial Team of WP Archives.