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.

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 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. 

Table Of Contents

Setting Up

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.

1. Layout


Hotspot Image

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

Image Size

Select the Image size here. Select anyone from the dropdown.

Pin Content

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.

2. Style

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

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. 

3. Advanced

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

View The Advanced Tab Tutorial

4. Error 404 (Dynamic CSS)

In this tutorial, we have explained when this option will be needed.

View The Server Error Tutorial

Was this article helpful?
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?
Please submit the reason for your vote so that we can improve the article.