How to add interactive images in WordPress

Several images on the screen of a laptop

Words are not enough to attract visitors to your website and maintain their interest. Many people will leave a site quickly if they see too much text and nothing else. To create an attention-grabbing website, you need high-quality visuals. Using interactive visual content is an excellent way of engaging with your website visitors. Adding interactive images can help you keep people on your site, which leads to higher conversion rates. This brief guide will teach you how to add interactive images in WordPress in a few simple steps.

Why you need interactive images

Strong visuals are crucial to creating a professional website. Adding interactive images in WordPress has several advantages in comparison to standard photos. When you add hotspots to pictures and then link them to audio, video, textual, or any other type of content, you are making your site more interesting and appealing. Moreover, you can include additional information, descriptions, highlight any section of an image, play with colors, link to other pages, etc.

For example, if you own an online store, you could incorporate interactive images of your products. By clicking on a particular product, site visitors could get more pictures and more information about it.

How to add interactive images in WordPress – step-by-step

The fastest way to do this is by using a plugin. WP is famous for its useful plugins that offer a wide variety of features. Image Map Pro for WordPress, Adverty, and WooMapper are some of the premium WP plugins that you can use to add interactive images in WordPress. However, the Draw Attention plugin is our favorite. As you can download it for free from the WordPress plugin repository, it is the most cost-effective option.

However, opting for the free version of this plugin has one significant disadvantage – you can add only one interactive image to your WP website. With its premium version, you’d be able to add as many pictures as you want. Plus, you’d be able to set as many hotspots as you need.

The first thing to do is to install and activate this plugin on your WP site. First, log in to your WP admin panel and look for the Plugins link in the left column navigation. Then, click the Add New link and type “Draw Attention” in the Search plugins box. After you find the plugin you need, click the Install Now button and then the Activate button.

After activation, you’re ready to create interactive images. To start creating interactive images in WP, locate the Draw Attention option within the menu, and click Edit Image. When you decide which image you wish to use, enter the image title. This title will be visible when the interactive image is displayed. Then, on the right side of the screen, upload the image you’ll be editing or choose a photo you have already uploaded from the media library. After uploading the image, you can adjust colors, try different styling options, enter the default More Info text, and more.

If adding interactive images in WP sounds overwhelming, and you lack time or expertise for this task, seeking professional help from WP Full Care or other WordPress experts might be the best course of action.

Adding hotspot areas to your images

Scroll down the page to the Hotspot Areas section to start adding hotspot areas to your image. If you click on the Clickable Area #1 link, your chosen image will appear in the Coordinates section. To draw your first coordinates, simply click the part of the image where you want to add your first point. By clicking the first two points, you create a line. Keep clicking on the rest of the points to create the shape. You can draw different hotspot shapes by adding more points that will make a hotspot area. To remove one point, hold down the Ctrl key and click the point you want to remove. To remove all the points, click the Reset button you’ll find just below the image.

Below the image to which you added a hotspot, there will be several additional options. For instance, you can enter a title for your hotspot area, enter a description, choose what happens when someone clicks on the image hotspot, etc. The Title section is where you can add a title for the hotspot you just created. In the Action section, you can choose what happens when someone clicks on the hotspot –  the two options are “Show More Info” and “Go to URL.” Once you finish, click the Update button.

Adding an interactive image to a page or post on your site

To add an image to a page or post, scroll down and find the Copy Shortcode box in the right column of the image editing section. First, copy the shortcode and then choose the page/post where you’ll display the interactive image and paste it into that page/post. The image will be added after you update the page/post.

Importing and exporting interactive images

If you’d like to import and export interactive images from one site to another, the Draw Attention plugin can help you, but you need to install it on both sites. First, go to the site you wish to export the interactive image from and go to Draw Attention. Then go to Import/Export, mark the photos you’re exporting, click the Generate Export Code button, and copy the entire code. Next, on the other website, click Draw Attention, then click Import/Export. Finally, paste the code in the Import field and click the Import button.

Interactive images are great for improving your WordPress SEO and attracting visitors. However, to boost site performance, make sure you compress before you add interactive images in WordPress.

Leave a Reply