Hotspots are buttons that stick to the background of a block. This way you can highlight a certain place on the block background image and link it to another Page, External URL or an Overlay.

In this article

  • What are Hotspots
  • Customising a hotspot
  • Responsive design
  • Linking a hotspot
  • Element settings

What are hotspots

Hotspots can be used to create a highlight on a page. It is often used to make markers on an image of a map. The Hotspot can be linked to an External URL, a Page in the publication or an Overlay. 

Customising a hotspot

Hotspots can be styled from the General Settings in the Settings menu of the element. 

Responsive design

Because the hotspot is attached to the block background, it will always stay in place when viewed on a larger- or smaller screen. Make sure you check the tablet and mobile view to check if the whole background image is still visible and all the hotspots are still on the screen. If not, simply drag and drop the hotspot on the screen to make them visible on that device too.

Linking a hotspot

Linking a hotspot can be done in the General Settings. Here you can choose to link the hotspot to an External URL, a Page or an Overlay. When a Hotspot is finished, it can be copied to create a duplicate with the exact same settings. The link that is created will also be copied and can be changed in the General settings. 

Element settings

The general setting of the Hotspot is the place where the Hotspot is customized. First start with linking the Hotspot to an External URL, a Page or an Overlay. If desired it is possible to replace the default hotspot by a custom hotspot. The custom hotspot has rounded corners by default. When an image is used that is rectangular the rounded corners have to be reduced to 0 to show the entire image. The rounded corners option is also in the General settings menu. 

When you don’t use a custom hotspot the Hotspot type, Background color and icon color can be chosen in the General Settings menu. 

  Mouse over text
A mouse over text can be added to the hotspot. This shows a text around a hotspot when hovering over the hotspot. This way you can let the reader know what they’re about to click on. In these settings you can determine the text that is shown and the position.

The border option allows you to create a full border or a border on certain sites of your element. All sides at once is selected by default, this means that when you increase the Border thickness the same amount of border will appear on all sides at the same time. 

When All sides at once is deselected the option to increase the amount of the border per side will appear. It is also possible to add more than one border. Every border will have the same color that is selected at the Border color picker. 

You can add a shadow to most of the elements. Choose the Shadow color with the color picker. After selecting the color you can choose the Horizontal position and Vertical position. The Blur radius can be used to make the shadow less harsh and a little more faded.

With this option, it is possible to choose where the element is visible. This allows you to show certain elements on desktop but hide them on mobile, or the other way around. 

Related articles:

Did this answer your question?