How to Create Image Hotspot in Elementor (Without Add-on)

Having a good visual is one of the critical factors in sales. Because we believe that the more exciting visuals you present, the more likely your website visitors are interested in the products or services you offer. One of the tricks you can use to impress your visitors is the image hotspot.

So, what is an image hotspot? Image Hotspot is a feature that you can add different image areas to a single image. The Hotspots define the location of the particular image. This feature is a game-changer in this industry. Luckily, only with the help of Elementor Pro you can create an image hotspot very easily without writing a single line of code. Elementor released this feature (Hotspot widget) on version 3.3.0.

How to Design an Image Hotspot in Elementor

In this tutorial, we will show you how to design an interactive image hotspot for a website about gadgets.

On your WordPress Dashboard, go to Pages -> Add New. Click the Edit with Elementor button, and this brings you to the Elementor editor.

Once you enter the Elementor editor, continue to select the Hotspot widget from the widget panel, then drag and drop it into the canvas area. After that, insert the image that you want to. Feel free to select a horizontal image or a vertical image. In this example, we create a new section with two columns. We will use the first column for the Hotspot widget, and the second column for the Heading widget.

Now, we continue to edit the settings and apply some changes. As your reference, you can check our settings as below:

Content tab -> Hotspot

• Animation: Soft Beat
• Sequenced Animation: ON
• Sequenced Duration (ms): 2000

For your information, by default, all the hotspots load simultaneously on page load, so if you want to keep the hotspots loading simultaneously, you don’t need to make any changes on the Sequenced Duration (ms) field.

Next, click Item #1, and you will see the hotspot item settings. There are two tabs; CONTENT and POSITION. We will use Item #1 as a hotspot for the TWS Bluetooth Earphone. Click the POSITION tab and start to adjust the hotspot position and point it to TWS Earphone by sliding the Offset toggles (horizontal and vertical orientation).

There are four ways to design the layout of your hotspot:

• Default Dot
• Text Label
• Label + Icon
• Icon

In this tutorial, we will design the hotspot layout with an icon. Click the CONTENT tab on the settings panel, go to the Icon option, and choose the icon from the Icon Library. In this example, we select the Music icon.

You will see a field to add the tooltip text on the bottom. In this example, we will write the name product and add a link to direct visitors to a specific page related to the product.

As you can see in the picture above, there are three gadgets. So, we need to add two more items. Click the (+) ADD ITEM button to add two more items. Like what you’ve just done with Item #1, you can adjust the position, change the icon and add the tooltip text.

Content tab -> Tooltip

On the tooltip setting, there are some options that you can set. You can set the Position, Trigger, Animation, and Duration (ms). You can set it with your preference. In this example, we set the Trigger to Hover.

Next, we move to the Style tab. Same as on the Content tab, there are three settings that you can set (Image, Hotspot, and Tooltip). In this example, we don’t change the Image setting.

style -> Hotspot

• Color: #FFFFFF
• Size: 20 PX
• Box Color: #004AA14D

Style -> Tooltip

• Typography:
  • Size: 12 PX
• Alignment: Center
• Color: #0E2D53C7

How to Optimize for Responsive Viewing on Tablet and Smartphone

Well, now the design is looking good. But, there is one thing that we need to do. We need to make sure that our design is still looking good while accessing via a tablet and smartphone. Let’s get started.

To enter the mobile editing mode, use a keyboard shortcut:

• Ctrl + Shift + M (Windows)
• command + shift + M (Mac)

Once you enter the mobile editing mode, there are two things that you need to check. The first is the hotspot position, and the second is the tooltip trigger. Why? Because the screen size for both devices is smaller than the PC, so might be affected the hotspot position. Then why do you have to be concerned about the tooltip trigger? Because commonly, people don’t use the pointer (mouse/ trackpad) to operate the devices. So, make sure to set the Tooltip Trigger to Click.

The Bottom Line

Elementor is a very intuitive tool for everyone. Especially for you that want to add an image hotspot to your WordPress site. Without the help of any addon and without writing a single line of code. We think this is the best choice for you if you don’t have any knowledge about coding. Feel free to play around with the Hotspot widget, experiment with all the customization, and enjoy the creative process of making your website more engaging for your visitors.