Hotspots are also known as Pinpoint are small pins that can be placed on your images to highlight a particular area and explain it. You can hover over the pins to view the content inside them. You can add text, image, video or links inside the pin.
How to use the Hotspot/Pinpoint Block of The Plus Addons For Gutenberg
The Hotspot/Pinpoint block is easy to use. Let’s understand how to use this block in the tutorial below.
Gutenberg gives multiple ways to add Hotspot into the content building area or we say playground. Check for the “+” icon in the top toolbar or click the “+” icon in the content area or start typing Hotspot after “/” sign, eg.“/Hotspot”, in the content area. Gutenberg also provides drag & drop after opening the list of blocks panel.
After placing the block you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.
First, add the image on which you want to place the hotspot/pinpoint pins.
Select the Image size here. Select anyone 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 the Link option for your Pin.
Continues Effect: Select Continues effect for your Pin.
The Style tab is used for customizing the appearance of all the Hotspot block components. All these styling options include customizing the fonts, colors, background, margins and padding which are common across all the blocks. So, we have created a single detailed article explaining these Styling Options.
View The Style Tab Article
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.