Learn how to add hotspots to any image using the Hotspot widget by the JetTricks plugin for WordPress and configure its settings to add explanatory markers to website images.
Before you start, check the tutorial requirements:
- Elementor (free version)
- JetTricks plugin installed and activated
- a page or post created
Things to know
A hotspot is a mark placed on the image to focus the user’s attention on a specific part of it. They are usually used in online stores to give users links to products they see in photos. Hotspots are also commonly supported by tooltips that display some additional information.
Add the Hotspot Widget
Go to the dashboard of your site and look at the page or post where you want to add an image with hotspots. Proceed to edit it with Elementor.
Find the Hotspots widget in the left-side widget menu. Drag and drop it to the page.
Configure the Image Settings
Once the widget is added to the page, the Image tab will be unrolled by default.
Here, click the Choose Image field and select an image that you want to be the base for your hotspots.
After that, the size of the image needed is set. In this case, we select the “Custom” Image Resolution, set the “500” Width and the “500” Height, and click the “Apply” button.
Finally, choose the required Alignment.
Configure the Hotspot Settings
The first toggle, called Use JetEngine query, allows you to use the Custom Query created with the JetEngine’s Query Builder as a source for the carousel.
When the Use JetEngine query toggle is on, the new Select Query input appears. Choose the needed custom query from the dropdown list.
When the custom query is used, you need only one Item to be set. Use the one that is added by default. Thus, the Hotspot widget enables you to display a list of results from a Custom Query, where only one item should be set as a template.
Things to know
Ensure you have the 1.5.7 version of the JetTricks plugin installed to utilize the JetEngine query as a source for the Hotspot.
When you need to set the Hotspot manually, proceed to the Item’s settings.
First, you can change the content or position of the hotspot here. Here, we start with the position and then move to the Style tab, using the Horizontal Position (%) and Vertical Position (%) switchers to place the first hotspot item. You can either move the hotspot by dragging the sliders horizontally or type in the values as percentages.
After that, we navigate to the Content tab. Here, we click the “Icon” button and choose one from the icon library. Next, we enter the necessary Text, which will be displayed directly on the hotspot by the icon. Additionally, we add the Description — the text that will be shown as a tooltip for this hotspot.
If you want users to instantly see all the Description texts without having to hover or click, enable the Show Tooltip on Init toggle. If you prefer the hints to appear only when interacted with, leave it disabled. After that, we add the Link where the user will be led when they click on the hotspot.
If needed, you can return to the Style tab and correct the position of the hotspot.
Finally, add as many items as needed by clicking the “Add Item” button. Additionally, you can select one of the animation effects, which will be applied to all hotspots. Six animation types will be shown in the “waiting mode,” when the user doesn’t hover the pointer over the image.
Configure the Tooltip Settings
In this step, unroll the Tooltip tab. As was said previously, the text to be shown as a tooltip should be entered into the Description text area of the Hotspot item. Here, we set the following.
First, we disable the Show All Tooltips on Init toggle to make tooltips visible only when hovering. When the toggle is on, all tooltips will be visible as soon as the page loads.
Next, we enable the Interactive Tooltip toggle to allow interactions within elements inside the tooltip.
After that, we set the “Top Start” Placement of the hotspot and the ”Fade” Animation.
Then, we set the Animation Delay — the value that defines the time between the activation of the trigger and the appearance of the tooltip; Appearance Duration – a value that determines how fast the tooltip shows up after the trigger is activated; and the Disappearance Duration – the value that specifies how fast the tooltip is hidden after the pointer leaves the hotspot.
In the next step, we set the “Focus” Trigger, which means the hotspot will appear only after the user focuses on it, and enable the “Use Arrow” toggle. When this toggle is turned on, the tooltip displays a small arrow pointing to the hotspot.
Style the Hotspots and Tooltips
Go to the Style tab and adjust the design of hotspots and tooltips to suit your preferences and needs.
First, we unroll the Hotspot settings and design the hotspot. First, we set the Icon Size, Icon Color, Padding, and Border Radius.
Next, we unroll the Tooltip tab and set the Arrow Color, background colors, Padding, and Border Radius.
Finally, press the “Publish” button to save the page.
That’s it. Now you know how to add hotspots to any image using the Hotspot widget by the JetTricks plugin for WordPress and configure its settings to add explanatory markers to website images.
