Adding Image Hotspots to Your WordPress Website
Adding images alone might not be enough to engage visitors. Image hotspots come to the rescue, turning simple pictures into interactive, informative experiences. They can highlight points on a map, tag team members in a photograph, and showcase product features. This guide presents two simple methods to create image hotspots for your WordPress website without code.
When to Use Image Hotspots
Image hotspots are clickable areas that transform simple images into interactive content for visitors to explore. They are especially useful when you want to highlight different aspects of a product image. For example, when selling a new phone, you can add hotspots to point out its camera, screen, and other features, making it easier for customers to learn about the product without lengthy descriptions. Many home goods websites use image hotspots to highlight details of staged product photos.
Hotspots also enhance infographics and data visualization by making them more engaging. Instead of cramming all the information into one image, you can hide extra details behind hotspots. This allows visitors to click on different parts of the infographic to see more facts and figures. If you run an eLearning website, hotspots can improve the user experience and make lessons more interactive. For example, you can add hotspots to a map, allowing students to click to learn about different countries or landmarks.
Method 1: Adding Image Hotspots with SeedProd
This method utilizes SeedProd, a drag-and-drop page builder, to add image hotspots to your WordPress website. It is recommended for creating custom landing pages or custom WordPress themes and offers a convenient image hotspot block. SeedProd provides over 350 landing page templates and theme kits for various industries, ensuring an option for every type of site.
Note that SeedProd’s hotspot block is only available in paid versions. If you need a free solution for creating image hotspots, method 2 might be a better choice. To utilize this method, download and install the WordPress plugin in your admin area. Navigate to **SeedProd » Settings** and enter your license key, which can be found on your SeedProd account page. Verify the key and then go to **SeedProd » Landing Pages** and click ‘Add New Landing Page.’
Browse through the available templates and preview them to choose the one that best suits your needs. Select a template, hover over it, and click the orange checkmark button. A popup will appear, prompting you to name the page and insert its URL slug. Save and start editing the page. This will open the SeedProd drag-and-drop editor, similar to the WordPress block editor, where you can drag and drop blocks and customize them. To create image hotspots, locate the ‘Hotspot’ block in the left sidebar and drag it onto your page.
Upload the desired image by clicking on the ‘Hotspot’ block and selecting either ‘Use Your Own Image’ or ‘Use a Stock Image.’ The first option opens the media library, where you can choose an existing image or upload a new one. Once the image is uploaded, you can input alt text to describe it for search engines and screen readers. Customize the image size and alignment. Scroll down to add hotspots by clicking the ‘+ Add Hotspot’ button. An orange dot will appear on your image, which you can adjust by dragging the horizontal and vertical orientation bars.
Add text that appears when a user’s cursor hovers over the hotspot. Change the hotspot’s color by clicking the ‘Color’ settings and selecting a color that matches your brand and website design. Enable the ‘Advanced Settings’ toggle to add a link to your hotspot’s tooltip text, redirecting users to your desired page. You can choose a custom icon to replace the default circle shape by clicking the ‘Choose Icon’ button. A popup window will appear where you can select various icons from SeedProd’s library or choose icons from Font Awesome for more options.
Select an icon, drag the ‘Icon Size’ bar to adjust its size, and repeat these steps to create more interactive image hotspots. Add an animated effect to your image hotspots, with options for ‘Soft Beat’ or ‘Expand.’ In the ‘Tooltip’ section, customize the tooltip’s position (right, left, above, or below the hotspot) and trigger (Click or Hover). The ‘Click’ trigger shows the tooltip when the user clicks on the hotspot, while ‘Hover’ displays it when the cursor hovers over it. Change the tooltip duration, which determines how long it takes for the tooltip to appear after hovering or clicking.
You can also disable the tooltip arrow. Switch to the ‘Advanced’ tab for further customization, such as adding a box shadow or adjusting the padding and margin. Save your changes by clicking the ‘Save’ button in the top right corner and click ‘Publish’ to make the page live. View the page on mobile, desktop, and tablet to ensure it looks good across all devices.
Method 2: Adding Image Hotspots with Image Hotspot Plugin
If using a page builder or switching themes seems overwhelming, you can use the free Image Hotspot plugin. This plugin offers a great alternative to method 1, but its free version allows for a maximum of 6 hotspots on a single image. Install and activate the Image Hotspot plugin in your admin area. Navigate to **Image Map Hotspot » All Image Map Hotspot** and click on the ‘Add New’ button.
Give your new image map hotspot a name and select a tooltip display type (Hover or Click). Save your changes. Upload your image by clicking the ‘Upload Image’ button, opening the media library where you can upload a new image or select an existing one. Add hotspots to your image map by clicking the ‘Add Point’ button.
A popup window will appear for configuring your interactive image hotspot. In the ‘Marker’ tab, customize the hotspot image’s appearance. Click the ‘+’ sign next to the ‘Icons’ and/or ‘Hover Icons’ fields to change the icons. ‘Icons’ refers to the default hotspot symbol when it is not being clicked or hovered over, while ‘Hover Icons’ is the symbol that appears when the user clicks or hovers on the hotspot.
Select an icon from the plugin’s library, click it, and hit the ‘Close’ button. Change the colors of the icons by clicking the square color selection button and choosing the desired color. The plugin allows you to make the default hotspot icon color different from the icon hover color. Adjust the hotspot’s icon size on desktop by entering a number, where higher numbers represent larger icons. Save the changes.
Switch to the ‘Content’ tab to customize the tooltip’s text and appearance. The plugin provides 4 templates, allowing you to choose the one that best suits your website design. Replace the default title content with your own text. Increase the font size and change the text color if needed for better readability. Save your changes.
In the ‘Link’ tab, you have the option to make your tooltip text hyperlinked to redirect users to a different page. Select ‘Yes’ in the ‘Do you Link Title?’ setting, insert the title link URL, and choose whether to open the link in a new tab. Save the changes. A new hotspot should appear on your image, which you can drag to the desired position. Repeat the steps to create more hotspots. Save your changes. To add the image hotspot to pages, posts, or widgets, copy the shortcode above the image and paste it into a shortcode block on your widget, page, or post in the block editor.
Discover More Exciting Design Features
Besides creating interactive image hotspots, there are various other ways to make your website design engaging. Explore these guides for inspiration:
* How to Add Infinite Scroll to Your WordPress Site (Step by Step)
* How to Create a Visual Sitemap in WordPress (The Easy Way)
* How to Create a Sticky Floating Footer Bar in WordPress
* How to Add a Font Resizer in WordPress for Accessibility
* How to Add a Click-to-Call Button in WordPress (Step by Step)
* How to Add a Custom Scrollbar in WordPress
* How to Add a Progress Bar in Your WordPress Posts (The Easy Way)
* How to Create a Custom Shape Divider in WordPress
* How to Add a Scrolling News Ticker in WordPress
This article is a summary of the original article. The original article can be found at: https://www.wpbeginner.com/wp-tutorials/how-to-add-image-hotspots-in-wordpress/.