Hotspots
Hotspots bring interactive, contextual pop-ups that contain rich content (text, images, buttons, links, icons, and more) to your images.
To add a hotspot, select any uploaded image and click the ‘Add hotspot’ button – either in the Upper Contextual Toolbar, in the bottom right corner of the image, or in the right-click menu.
Hotspots settings in Upper Contextual Toolbar of the Setka Editor interface
Hotspots settings in the Right Corner of the Image of the Setka Editor interface
Hotspots settings in the right-click menu of the Setka Editor interface
Once the hotspot dot appears on the image, it can be placed (or moved) anywhere in the image. There’s no limit to the amount of hotspots you can add to an image (but try to keep it to a reasonable number).
When you click the ‘Add hotspot’ button, a pop-up window opens. In the pop-up you can insert either (or both) text and any element from the right panel: a picture, button, divider, icon, grid, etc.
Hotspot rich content in the Setka Editor interface
You can set the format for your hotspots: choose the most preferable shape for the dots, the way the pop-up appears in a published post and also make the dots animated. By selecting several elements, you can apply changes to all selected dots at once.
Hotspot Settings in Upper Contextual Toolbar of Setka Editor interface
Feature settings
Feature limitations
- Shape: select a circle, rhombus, square, or rounded square.
- Color: at the moment you can change the color of hotspots via custom CSS.
- If you want to use the same hotspot's color for all posts, add the following custom CSS in the Styles:
.stk-image-figure { --stk-hotspot-color: rebeccapurple; }Replacerebeccapurplewith the desired color. - If you want to change the hotspot color for a single image in the post, click on the image and add this code to the Custom CSS field
--stk-hotspot-color: green;Replacegreenwith the desired color.
- Select an ‘action’ when the Hotspots open: on hover, on click.
- Hotspots animation: on / off.
- Settings can be applied to either one or several selected Hotspots, or to all at once.
- Within the same image, you can add Hotspots in different settings.
- You can't change the width of the popup/widget ;
- You can't apply animation to an element inside the popup (widget) ;
- You can't add a footnote or add another hotspot inside the popup (widget);
- Hotspots can’t be used on PDF pages.
Click ‘Done’ and your Hotspots are now set up.
When your reader clicks or hovers over your Hotspots, a pop-up opens with all the information you shared – description, price, link, CTA button, or other.
In the Preview Mode, you can check how your end-users see the Hotspots both on desktop, and mobile.
If you want to remove the hotspot, click on it, and then click Remove.
Check out the video below to see how to use Hotspots in action!
Video tutorial on how to use Hotspots in Setka Editor
Last modified 1yr ago