Hotspot

The Hotspot component lets you upload images and add up to 10 clickable areas (links) for desktop, tablet, and mobile layouts.

What is the Hotspot component?

The Hotspot component lets you upload images for desktop, tablet, and mobile, and add up to 10 clickable areas (links) to each image. This is useful for large images with different sections that need links.

Open the CMS editor where you want to add or edit a Hotspot component.

Drag the Hotspot component onto your page.

Upload images for desktop, tablet, and mobile as needed.

Select areas of the image and add links (up to 10 per image).

Save your changes in the editor.

Please note that separate images may display in the cms editor after being saved in the hotspot editor, they do not render like this when published, they show the relevant image per breakpoint.

Hotspot Component Settings

All Hotspot components support the standard CMS settings below. Use these tabs to control layout, typography, and display for your hotspot image:

General

cms general

Selectors

In this box you can add classes that are defined elsewhere on the site to a specific page.

ID

ID is used to direct user to an element of the page or identify it for future use, so you can link to this aspect of the page.

Styles

Styles are used to add a specific style not predefined in a class. You can add style settings which can be applied against any component. Below are a list of styles you can add:

Margin (either just "margin:" or specific sides of a component like "margin-top:" or "margin-left:")
Padding (either just "padding:" or specific sides of a component like "padding-top:" or "padding-left:")
Max Width
Font
Border
ID

Examples:

max-width: 352px!important;
margin-bottom: 0 auto;
padding-top: 30px;

To center an image: margin:auto;
To center text/markdown: text-align: center;
To make a component go edge-to-edge: `margin-left:-15px;margin-right:-15px``