How to Create Image Hotspots with Elementor's Hotspot Widget

A picture often explains complex concepts better than a thousand words. You can zoom in on the image to see every detail of the product or item. And adding hotspots of information to the image can make the product picture more vivid and interesting.

Image hotspots are a way to present information. It draws the user's attention to the product and prompts a click or purchase.Elementor The image hotspot widget can easily achieve this effect.

This article will describe how to use the Elementor (used form a nominal expression) Hotspot Widget to create image hotspots. Before you start, understand what an image hotspot is.

What is an image hotspot?

Image hotspots are clickable areas added to an image that display additional information or action prompts when the user clicks on them. You can overlay buttons or shapes on the image and set the exact location.

After clicking on the hotspot, the content will be displayed. As shown in the image below, the image is marked with a plus sign. You can display content such as product description, price or jump link.

Creating Hotspots on Images with the Happy Addons Hotspot Widget

If your site is based on WordPress Built by Elementor, this feature is very easy to implement. Simply install Elementor and the HappyAddons plugin, a powerful extension to Elementor with hundreds of widgets and dozens of useful features.

Step 1: Install Elementor and HappyAddons plugins

HappyAddons is an extension plugin for Elementor, so its widgets are categorized as Elementor widgets.Hotspots is a premium widget for HappyAddons, make sure you have the following plugins installed:

• Elementor
• HappyAddons
• HappyAddons Pro

Tip: After using HappyAddons Pro, you don't necessarily need the Elementor ProThe

Step 2: Drag and drop the Hotspot widget into the Elementor editing area

exist Elementor Find the Hotspots widget for HappyAddons in the panel and drag and drop it to the appropriate place on the page.

Step 3: Select the image you need to add hotspot

Click on the image upload area to select an existing image or upload a new one.

Step 4: Add hotspots to your images

After adding the image, you will see a default hotspot appear on the image. Next, in the Content tab of the Elementor panel, find the Spot option. The first hotspot is named item #1 by default, click on it to enter the settings.

Click the "+ Add Item" button to add more hotspots.

You can customize each hotspot one by one, adding text, icons, and even inserting images. The specifics depend on your background image.

Use the X Position and Y Position settings to precisely move the hotspot location.

Next, enter the hotspot information in the "Tooltip" option. Fill in the paragraph box with the text and format it by bolding, italicizing, underlining, or adding a link.

Repeat the same operation for the remaining hotspots.

Step 5: Adjust the hotspot style

Each hotspot can be styled separately. In the Elementor The following can be adjusted in the "Style" tab of the

• height
• high degree
• inner margin
• frame
• color
• text color
• Cue box background color

It can be freely set to meet the visual needs of the page.

If you need to modify the style of the cue box, click the Tooltip option and continue to adjust the relevant parameters until the appropriate effect is presented.

Step 6: Add extensions using advanced options

Want to addanimeWhat are your background or responsive settings? Click the "Advanced" options button to explore more. "Advanced is the default configuration for Elementor. You can read the documentation to learn more about how to use these features.

Tip: There is no limit to the number of image hotspots.

With Elementor's responsive mode, it is also possible to check that the image is displayed appropriately on different devices.

Context and meaning of the use of image hotspots

The saying "a picture is worth a thousand words" is familiar. But a picture can't cover all the information, and image hotspots can solve this problem. It provides additional content to the image, making it more interactive and expressive.

The combination of images with text often leads to better feedback. Here are some typical application scenarios:

Infographic Showcase

Infographics are commonly used for tutorials, statistics, processes, and other content, and are great for visual presentation.

Adding a hotspot allows users to get more explanatory information while clicking without disrupting the original typography.

pedagogical application

Hotspot images are perfect for teaching scenarios, especially in the following types of courses:

• Bio: When learning about the structure of the human body, hot spots can be labeled for each organ or part to aid in understanding and memorization.

• Geography: Having trouble remembering country and place names? Set up a hotspot on the map and know the exact location and name at the click of a button.

• Historiography: When explaining historical events, you can label the pictures with the identities of the characters to make it easier for students to remember the context of the story.

Frequently Asked Questions

What is an image hotspot?

An image hotspot is a specific area on an image that, when clicked, brings up a pop-up window with content that may be a tip message, text, video, or link.

What are the types of image hotspots?

The common types currently available are:

1. Image Content Display
2. jigsaw puzzle layout
3. drag-and-drop hotspot
4. Still image hotspot
5. Slide image hotspot

What styles can be set for hotspot shapes?

Common shapes are:

• rectangles
• orbicular
• polygonal

How is the Image Interactive Hotspot configured?

If you want to make images with clickable interactive effect, you need to use the hotspot function. When the user clicks on it, a graphic, image or video content can pop up.

You can set the following:

1. Number of hot spots
2. Location of each hotspot
3. Display style for each hotspot

This is the complete process of creating image hotspots. If you want to make your page content more attractive, get your hands dirty and try this design approach. In just a few steps, you can achieve a highly interactive graphic display.

summarize

leverage Elementor With the Hotspot widget provided by Happy Addons, images are no longer just static displays, but an interactive medium that can convey more information. With a simple drag and drop operation, you can add multiple clickable areas to the image to display text and icons,link (on a website)and other content to make the page more expressive

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off