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.
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.
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.
First, add the image on which you want to place the hotspot/pinpoint pins.
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.
The Style tab is used for customizing the appearance of all the Hotspot/Pinpoint widget components. Let’s understand each of these customization options.
Set the Icon Size, Pin Width, Icon Radius, and Box Shadow of the Pin Icon here.
Set the Image Size, Pin Image Width, Border Radius, and Box Shadow of the Pin Image here.
Set Text Typography, Text Padding, Border Radius, and Box Shadow of the Pin Text here.
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