Image hotspots
Several clickable regions on one picture, each linking somewhere different.
You have one finished picture — a category shot, a lookbook page, a floor plan — and you want different parts of it to go to different places. That's a hotspot: a region you draw on the image, with its own link.
Adding one
Select an Image block. In the properties panel, under Hotspots, press Add hotspot — or drag a rectangle straight onto the picture on the canvas.
Then, for each one:
- On click — where it goes. The same picker as any button: a page, an address, a file, a section on this page.
- Name — what it is. Screen readers and search engines only see this, because a transparent region has no text of its own.
Drag the box to move it, drag a corner or edge to resize. Boxes snap to each other and to the edges; hold ⌥ while dragging to turn snapping off.
Two things it changes about the image
The image keeps its original shape. Aspect ratio and cropping are hidden once there's a hotspot on the picture. Hotspots are positioned as a percentage of the picture, so any crop would slide every one of them out of place.
The image can't be a link itself. The "on click" field for the whole image disappears — a link inside a link isn't something browsers can render.
Because positions are percentages, hotspots stay correct at every screen width without you doing anything.
A different layout on phones
Hotspot positions are per breakpoint. If you swap in a differently composed picture for phones, switch to the phone breakpoint and lay the regions out again there.
Tessolo warns you when a hotspot is under 44px on some breakpoint — roughly the smallest thing a thumb can hit reliably. On the published page small hotspots get a minimum touch area; the editor deliberately doesn't, so what you draw is what you see.
A hotspot with no link doesn't publish
It's left out of the published page entirely, so there's no invisible region swallowing clicks. In the editor it stays visible so you can finish it, and the pre-publish check reminds you about both a missing link and a missing name.
Where it doesn't work
Section background images. A background picture is cropped to fit the section's height, and that height changes with whatever you put in the section — so the regions would drift. Use an image block set to full width instead.
When not to use it
If the regions are rectangles of roughly equal size, you probably want a grid of image blocks instead — easier to rearrange, and each one can have its own caption. Hotspots earn their keep when the picture itself is the design.