< All Topics
Widget Used
Hotspot/Pinpoint
Knowledge Required
Novice

Hotspot also know as Pinpoint are small pins which can be placed on your images to highlight a particular area and explain about it. You can hover over the pins to view the content inside it. You can add text, image, video or links inside the pin.

Pro tip
If your business is having multiple franchise locations, then add your country map image and place pins to highlight different locations your business is located in.

How to use the Hotspot/Pinpoint widget of The Plus Addons For Elementor

The Hotspot/Pinpoint widget is easy to use. Let’s understand how to use this widget in the tutorial below. 

Table Of Contents

General Steps

Search for the Hotspot/Pinpoint Widget from the Elementor screen in the left and then drag and drop it into the content building area. After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to this widget. First, click on the Content tab.

1. Content

Content

Select the Hotspot Image for Hotspot/Pinpoint widget.

Hotspot Image

First, add the image on which you want to place the hotspot/pinpoint pins.

Image Size

Select the Image size here. Select any one from the dropdown.

Add Multiple Pin Hotspot

You can add multiple Pin Hotspot here by clicking Add Item.

Pin Type: Select your Pin Type. It can be an Icon, Image or Custom Text.
Icon Font: Select your icon font family. You can select FontAwesome or Icons Mind.
Colors: Set the Normal and Hover colors of the pin icon and backgrounds here.
Orientation: Set the orientation of the pin for Desktop, Tablet, and Mobile here. You can set the Left and Top values.
Pin Content: Add the content for your pin here and set its typography, colors, and animation effect.
Link: Slide this button to enable Link option for your Pin.

2. Style

The Style tab is used for customizing the appearance of all the Hotspot/Pinpoint widget components. Let’s understand each of these customization options. 

Pin Icon

Set the Icon Size, Pin Width, Icon Radius, and Box Shadow of the Pin Icon here. 

Pin Image

Set the Image Size, Pin Image Width, Border Radius, and Box Shadow of the Pin Image here. 

Pin Text

Set Text Typography, Text Padding, Border Radius, and Box Shadow of the Pin Text here.

Extra Options

Set and specify the Hover Overlay Color, Tooltip Visibility Delay, Delay Timeout and Transform CSS here. 

On Scroll View Animation

On Scroll View Animation Options are used to set beautiful animations to your sections. They are a common option for almost all the widgets. So, we have written a detailed tutorial explaining how to use these options.

View On Scroll View Animation Tutorial

3. Advanced

Advanced Tab Options are common across all the widgets. So, we have written a detailed tutorial explaining how to use these options

View The Advanced Tab Tutorial

Do you want to rate this article?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Need help?