Hotspots are buttons that live in the background of a block, allowing you to highlight a particular piece of the background image. In this article, you'll learn how to add a hotspot and link it to specific content.
💡 You can set the default styling of a hotspot in the brand settings.
In this article
What is a hotspot?
A hotspot is a button you can place on top of a background image. Your reader will be able to click on it, after which they will be taken to the content of their choice. You can link from a hotspot to the following places:
- External URL
- Page
- Overlay
- Document
- Block
💡When you're working with the Content Builder, it's not possible to add a hotspot to your page. Block templates also don't include any hotspots. You can add hotspots to your page when you're working in the Content Studio.
A hotspot is always attached to a block background image, which makes sure it stays in place when viewed on a larger- or smaller screen. This means that the hotspot works in a different way than the other elements, as it does not have to follow the column structure.
⚠️ Hotspots can only be placed on background images, not background videos.
How to add a hotspot
Go to the elements tab and drag and drop a hotspot onto your page. You can control where it links to in the general settings of the element. You will learn more about this in the next section of our article.
💡 Have you added a hotspot to the background image of a block? Make sure to check the tablet and mobile view modes as well to verify if the complete background image is visible and the hotspot is visible on the screen. If not, drag and drop the hotspot on the screen to make them visible on that device too.
Element settings
In the element settings of your hotspot element, you can style your hotspot the way you want to. Hover over the hotspot and click on the cogwheel icon. A pop-up with the element settings will appear. We will go over each of the element settings below.
💡 You can also create a hover state for the hotspot, allowing you to control what the hotspot looks like when the reader hovers over it. This is also known as the "mouse-over" effect.
-
General settings
In the general settings of the hotspot, you can determine where you want the element to link to. When you click edit link, you can choose from external URL, page, overlay, document, and block. When the reader clicks the hotspot, they will then be taken to the selected option.It’s possible to replace the default hotspot with a custom hotspot — which lets you replace the default hotspot with an image or alternative icon.
When you don’t use a custom hotspot, the type, background color, and icon color can be found in this menu.
When in the hover section of the settings, go to hover text at the bottom of the list. This will allow you to determine the display text when a reader hovers over the hotspot. You can then inform the reader about what they’re about to click on. From these settings, you can decide on the text and position.
-
Background
Here you can set the background color of the hotspot.
💡 You can also set a background for the hover state.
-
Border
The border option allows you to create a full border or a border on specific sides of your element. all sides at once is selected by default, which 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 for each 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 also set a border for the Hover state.
-
Shadow
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 bit more faded.
💡 You can also set a shadow for the hover state.
-
Visibility
With this option, it is possible to choose where the hotspot element is visible. This allows you to show certain elements on desktop but hide them on mobile, or the other way around.
Using a custom hotspot
As stated above, it's possible to use a custom hotspot — which lets you replace the default hotspot with an image or alternative icon.
To implement a custom hotspot, go to the hotspot settings general settings. Toggle on custom hotspot, making it possible to upload an image. Click on add image and select an image from the media library.
💡 Your hotspot will have rounded corners by default. If you want to show a rectangular image, you can reduce the rounded corners to 0 in the border settings.
In the example below, we replace the default hotspot with an umbrella icon. The hotspot will have rounded corners by default, but you're able to control this in the border settings.
To make your hotspot even more engaging, you can consider adding a hover state. When you navigate your cursor over the hotspot — before clicking — the hotspot will show an alternative image.
You'll only be able to add an alternative image to the hover state if the normal state of the hotspot has a custom hotspot. To prevent your hover image from being stretched, it needs to be in the same ratio as the custom hotspot in its original state.
💡In the example below, the custom hotspot has a hover state with the rounded corners reduced to 0.
