In this tutorial, we will learn how to use the hotspot widget to visually organize information on your Elementor website. The Hotspot widget allows you to create advanced interactive designs and engage your visitors. This tutorial will cover:
✔︎ How to add hotspots to your website
✔︎ How to add tooltips and links to the hotspots
✔︎ How to fully style hotspots and tooltips
✔︎ How to optimize your hotspots and tooltips for responsive viewing
✔︎ And much more!
Hey there. It’s Aviva from Elementor. Today I’ll show you how to use Elementor’s hotspot widget to create advanced, interactive designs for your website.
Hotspots offer a creative way to display and highlight information in a highly visual and playful manner, that will be sure to engage your visitors.
And with Elementor’s customization options, you can create varied hotspot designs, without writing a single line of code.
So let’s get started.
For this tutorial, we’ll create this interactive hotspot design for a website about Wines. From the Elementor Editor, I’ll go ahead and delete the existing hotspot widget, so we can recreate it from scratch, by right clicking … Delete.
In the widgets panel, search for the Hotspot widget, and drag it into the content area. Great.
The first thing you’ll see is a placeholder image and a default hotspot. Clicking the hotspot displays a tooltip.
Beginning with Image, click to select an image to use as the background of the hotspot, and insert it.
You can select the image size, and alignment.
Moving on to the hotspot section, let’s set up the hotspot animation. You can see here that you have several options to choose from. I’ll select Soft beat.
By default, all the hotspots load at the same time on page load, but if you’d like them to load one by one, toggle Sequenced Animation ON, and set the sequence duration in milliseconds. We’ll get to preview this at the end of the tutorial, after we’ve set everything up.
Going back to the hotspots, the hotspot widget starts you off with one hotspot. To add more hotspots, you can click to duplicate any one, or click Add Item to add a new hotspot. Delete unneeded hotspots, like this.
Click to expand the hotspot item, where you’ll see its settings. There are two tabs, one for the Hotspot’s Content, and one for its Position.
There are several ways to design the layout of your hotspot. You can leave it on the default dot, as you see here, use a text label, a label together with an icon, or an icon on its own.
To use a label, type in your text here. To add an icon to the text label, either upload your own svg file, or you can use one from the icon library.
Just search for an icon, select it, and click Insert.
You’ll then see settings for icon position… and icon spacing. For our design, I’ll delete the label text to display just the icon.
Next, you can set a custom Hotspot size, by setting a minimum width and height. Note that this setting will apply only to this specific hotspot, and only if there is text or an icon in the hotspot, not with a default hotspot.
We will set the hotspot size in the Style section instead, since we want the same size to apply to each hotspot.
The hotspot can be linked to an external source, or to a tooltip.
To link the hotspot to another web page, enter a URL in the field below, or click the dynamic tags icon, to link to dynamic content, such as a popup. Edit the link options here.
To link to a tooltip, as we will do for our example, leave the link field blank.
Because each hotspot is connected to its own tooltip, the individual tooltip content is located in the hotspot settings.
So I’ll go ahead, and add tooltip text here. You can use the built in formatting options or add HTML in the Text tab.
Ok, let’s check out the Position tab.
You can position your hotspot anywhere you’d like, by using the Horizontal and Vertical orientation settings. You can also drag the offset sliders to visualize the location, or type in a precise value.
And, switching to Responsive mode, you can see, the hotspot position is fully responsive.
The general tooltip settings are controlled below in the tooltip section. However, settings for a specific tooltip are controlled from here, by toggling the Custom Tooltip Properties ON. [I’ll click the tooltip in the Editor so you can preview the changes].
Here, you can change this tooltip’s position. The default position for desktop is great for this design, but this setting will come in handy when we make responsive edits, a bit later. We’ll adjust the minimum width later, from the Style settings to apply it to all the tooltips. Toggle ON to wrap the tooltip text.
Ok great, the first hotspot’s content settings are all set. Let’s duplicate it, to create a second identical hotspot. All our settings have copied over, so we only need to update the Tooltip text…. and hotspot Position.
We’ll repeat this process for the third hotspot.
Ok great, now expand the Tooltip section.
By default, the tooltips will all be aligned to the bottom of the hotspot, but you can change this. Just keep in mind that changes to the tooltip position from this area will only apply to the hotspots that do not have custom tooltip position settings applied. Since we have applied custom tooltips settings, we’ll leave this as is.
Next, choose the tooltip trigger. As you’ve already seen, the default trigger is set to display on Click. You can also change the trigger to None to always display your tooltips, or Hover, so they show when moused over, as I’ll do for this design.
Below that, you have several options for the Animation, as well as a setting for the animation duration.
Ok great, we’ve completed the content settings, and we’re ready to move on to the Styling.
You can adjust the width of your background image, as well as the maximum width…and height.
