Original title: How to create an interactive image map in WordPress
The image map of WordPress is the best way to show your beautiful pictures and effectively add a lot of details without damaging the effect. You can get the maximum information compression in the smallest Internet space -- and you can do it well. Let's see how to create your picture in a few minutes. It is difficult to convey a large number of important small product details without alienating your customers with a detailed text wall. If you want to pinpoint an object, room or area -- plus provide customers with detailed information and send them to different parts of the site -- then using a WordPress image map is your answer.
WordPress picture maps are the best way to show beautiful pictures and effectively add a lot of details without damaging the effect. You get the most information compression in the smallest Internet space -- and you can do it well.
The image magnification function of e-commerce stores handles this problem in an elegant way, but installing WooCommerce stores is not a solution for enterprises that need to provide additional "power" for their photos.
By reading our in-depth guide, you can understand how easy it is to create interactive image maps in WordPress with the WP Draw Attention plug-in.
Overview of WordPress picture map and WP Draw Attention
The WordPress image map is an interactive graphic element containing clickable areas.
One obvious use of it is for real estate developers, real estate brokers and hotel or hotel owners. They use image maps to show interactive floor plans and attach beautiful images to each area.
However, the image map in WordPress has more advantages - as the WP attention attracting image map tool has proved. It is rapidly becoming the preferred secret marketing tool for handymen, craftsmen, craftsmen, artists and other Internet merchants.
WP Draw Attention's interactive images (such as floor plans) can magnify your customers to incredible details. You can add detailed explanations, words, numbers, pictures, and even videos to each area to highlight the unique features of the product. You can explain all the advantages of the product in detail, without using a wall of text to overwhelm visitors.
The responsive image map created with WP Attention Getter will generate its own metadata based on your input, so it is very search engine friendly from the beginning.
We will mention the difference between the free and advanced WP Draw Attention programs below, but we must tell you the magic function of the free plug-in You can only get one interaction map on each website, but the irresistible factor is that you can add any number of detail areas to the map.
Let's use a floor plan as an example. You can connect the area on the floor plan with the photos of each room, but you can also outline the specific items of interest on the general floor plan. You can finally use detailed photos of artworks, antiques, flower arrangements and soap All of these are linked to one of your free basic pictures.
Let's begin to explain the guide!
How to create a picture map with WP Draw Attention in WordPress
It is very easy to use the WP Draw Attention plug-in to create an interactive collection of works, and you will handle the shapes in each picture.
Step 1: Install WP Draw Attention
Get the free Draw Attention plug-in from the WordPress plug-in library or your WordPress dashboard.
In WordPress, navigate to Plug ins → Add New. Search for "Draw Attention". Install and activate the plug-in. After activation, access it from the menu on the left (Settings → WP Draw Attention).
Step 2: Create the first image map
After installation, click the "Attention Attraction" menu item to start.
Since the free version only allows you to create a picture map, you will see an option of "Edit Picture", which we will take a closer look at below.
On this Edit Image page, enter a title (name) for your new interactive image. It will be visible on your website, so please choose a descriptive name that is conducive to SEO.
Step 3: Upload the basic image and add a hotspot area
Click the "Place pictures here" section on the right side of the screen to select or upload your basic pictures.
In our case below, we uploaded an apartment floor plan as an example for developers, architects, and even interior designers to show specific property design.
In the "Hotspot" section, you will now see the picture you just uploaded, with the indication of "Draw the clickable area of our picture".
Next, highlight each section that you want to link to more information. To do this, click each point in the area you want to highlight on the interactive image map, as we do below.
You may want to instinctively drag the cursor with the mouse to track the image, but you need to create an outline of a point, not a graph. Place your cursor on the first point of the area you want to highlight, click and move to the next point. Repeat the above steps until you have created the contour of the area.
Once you have marked three points, you can grasp one corner of the outline, add more points to the outline, move blocks, and instinctively play with your chart in other ways.
Move to the "Title" box below the drawing, and enter the name of the highlighted area (in the above example, it is the bedroom of the apartment).
Next, add a more detailed description of the room or object. Then, add a link of photos (or an external URL) in the media library. When someone clicks your image map, this link will pop up.
Before you continue to the next step, save the image map (go to the WordPress publishing section in the upper right corner).
That's it -- you've added the first clickable area to the base image
Step 4: Add more hot spots and previews
Keep in the "hot area" section. Now click the next drop-down area, called "clickable area # 2"
Repeat the steps and make a series of clicks along the outline of the area you want to highlight. Name the map image ("bathroom" in this case), link the area with the photo you selected, and save it.
Continue until you have covered all areas and named and linked all hotspots. Save and publish your image.
You can now preview the image map to see what it will look like on the website.
Step 5: Design your interactive image style
Click "Edit Interactive Image" and follow the automatic link under the image name that appears at the top of the page. It will open a new page with an interactive image. The image initially has the default WP attention grabbing style.
Open/expand the "More Information Box Modeling" function on the page. Select the image background color, and color the title color and text description that appear above the linked image.
The More information background color box refers to the color of the WordPress block that contains additional information. You can also edit the Highlight shape. That will be the color of the highlighted area because it appears on the base image. The advanced version comes with a series of good preset themes, enabling you to quickly shape.
Update changes. Next, we will add the new WordPress image map to a new page.
Step 6: Add an interactive image map to the website
The short code will appear on the right side of the editing screen, under the "Add Picture" box. It simply says "copy short code", because the free plug-in only provides an interaction diagram. If you use advanced plug-ins and have more than one interactive picture, the situation will change.
Copy the short code, create a new page on the website, and insert it in the short code block.
This is it.
The image map is now visible on your WordPress website, and visitors can freely interact with it, as you can see in the video below.
Upgrade to WP Draw Attention Pro for more functions
In addition to the unlimited number of picture maps in WP Draw Attention Pro, these three special functions can enable smart digital marketers to close deals.
You can change the type of interaction to "hover" or "click".
You can "always show" the hotspots of pictures. The highlighted area will remain highlighted so visitors can immediately see which area they are exploring.
In addition, you can use different highlight colors in different parts of the image. It will enable your image map to be instantly recognized as an interactive image.
Look at the additional styling options below, and notice that there is an option of "All Images" on the left side of the dashboard menu. You have unlocked the option to create an unlimited image map in WordPress.
General styling options have been added, and it is easier to select several preset themes. You can also fix the arrangement of each image map on the web page.
If you have several different plans or units that you want to highlight, WP Attention Getter Professional is a good choice. It not only gives you an unlimited number of image maps, but also looks better than the basic version.
That's all. You see, it is so simple to create a picture map in WordPress with WP Draw Attention.
come from: //cn.bluehost.com/blog/wordpress/16631.html
Go back to Sohu to see more
Editor in charge:
