What if you could bring your floor plans to life? Using Image mapping, can highlight completed tenant improvements or remodels or highlight your staged home for sale.What if you could bring your floor plans to life? Using Image mapping, can highlight completed tenant improvements or remodels or highlight your staged home for sale.

Visual marketing is not new. It’s not new in real estate or construction. Yet, so many websites in this industry — if they even have project profiles — feature one image of the outside of the building and a few sentences to describe the project.

What if I told you it would be affordable and simple to jazz up your completed projects posts or real estate listings with image mapping?

What is Image Mapping?

Image mapping is the ability to create a custom clickable area on an image. In other words, you define an area on a photograph, scan, or drawing that allows the user to get more information or go to another website.

Wikipedia notes:

“The intention of an image map is to provide an easy way of linking various parts of an image without dividing the image into separate image files.”

Introducing Draw Attention:

It’s not a new plugin, by any means, but perhaps you didn’t know that this is a plugin you need desperately. With my background in construction, of course, I’m biased and think all home builders, general contractors, architects, property managers, real estate agents, and commercial brokers should use this on their WordPress-powered web properties.

What’s wrong with a floor plan?

Sure, you can see a floor plan and understand how a space will represent itself in three dimensions. If you didn’t you wouldn’t be a contractor. But the general public doesn’t always translate two-dimensional floor plans into three-dimensional space.

Adding image mapping to your floor plan will allow you to translate the appeal of your project to potential customers. And this is the goal of your website in the first place, yes?

So, now that you’re interest in Draw Attention is piqued, let’s talk about installing it.

Installing Draw Attention:

2-installnow-2
Adding Plugins in WordPress via Upload

First, we installed the premium plugin by navigating to plugins, add new, in our dashboard. Premium plugins are not hosted in the WordPress Repository unless they follow the freemium model (the core is free but they offer extensions or add-ons for an fee). In this case, after you purchase Draw Attention, find the zip file you downloaded from them — unless you moved it, it’s in your downloads folder.

When you’re in the Add Plugin screen, click the button “Upload Plugin.” This will take you to another screen that will prompt you to find the zip file you downloaded from the premium plugin vendor.

4-willhaveownmenu
The Draw Attention plugin in your list of plugins.

Draw Attention’s menu and settings will appear on the sidebar of your dashboard.

To start, add a new image that you want to map. Title the image. You can either drop the image, upload it with a button, or choose from the media library. Select your image.

This plugin functions similarly to Foo Gallery. You’re creating what seems to be a post with the ability to save a draft and preview it. Once you’re ready to insert it into your actual post or page, use the shortcode it generates.

But first, you have options: color schemes and layouts in addition to highlight and info box styling. For the styling, you can choose color by the slider or by hex code. You can look up colors here. If one of the pre-made themes works for you, that will save you a lot of time. I decided to use the “Draw Attention” Theme.

HighlightStyling
The highlight styling color picker in the Draw Attention plugin.

If you want images to open up in a lightbox when the user clicks on the area, change the setting in the layout widget on the right hand sidebar choose lightbox.

To draw your first area, go to the metabox called Hotspot areas. Expand “Clickable Area #1” by clicking on the triangle in the right hand corner.

clickableareas-1_jpg
The clickable areas can be edited after you create them.

Clicking coordinates will automatically make shapes, you choose the title, action, description, and detail image. You can even highlight half of a room or just a part of it. It’s very fast and draws the shapes for you.

Masterbedroom1
A highlighted clickable area.
Masterbedroom-popup
The modal popup of that clickable area.

When you’re ready to add another area, click the button that says “Add Another Area.”

It took me about two hours to map this two bedroom model home with 27 clickable areas from William Lyon Homes in the Vireo community. That example lives on my website here if you’d like to see how it works.

What’s stopping you from leveling up your marketing?

Have you considered image mapping? Will you try Draw Attention?