Hotspots are buttons that live at the background of a block allowing you to highlight a certain piece of the background image and link it to another Page, External URL or an Overlay.
In this article
- What are Hotspots
- Customizing a hotspot
- Responsive design
- Linking a hotspot
- Element settings
What are hotspots
Hotspots can be used to create a highlight within a page and can be linked to another Page, External URL or an Overlay.
Customizing a hotspot
Hotspots can be styled from General Settings from the Settings menu of the element.
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 is possible from 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 new link will also be copied and changed from the General 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. It’s possible to replace the default hotspot by a custom hotspot. The custom hotspot has rounded corners by default. For a rectangular image to show, the rounded corners have to be reduced to 0. The rounded corners option is also in the General settings menu.
When you don’t use a custom hotspot, the type, background color, and icon color can be found 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 inform the reader about what they’re about to opt-in for. From these settings, you can choose the text and 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, 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 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.