Image with hotspots
An image with dots that open small cards with a title, text and an optional product. Use it to explain the details of a product, a room or a process.
- In the editor
- Image with hotspots
- Where it goes
- Any page template, with Add section
- In the presets
- Index: Home page
- Settings
- 24
- Blocks
- Hotspot
- App blocks
- Yes
When to use it
Hotspots answer questions a photo raises: What is the handle made of? Which lamp is that? The Index home page shows the section as A closer look.
Set it up
- Upload the Image.
- Add a Hotspot block for each detail and move its dot with Position from the left and Position from the top.
- Write the card: a Title, a Text and an optional Link. Pick a Product to show its photo, title and price – the title then defaults to the product's.
Phones
On phones, cards open across the bottom of the image instead of next to the dot, so they never cover what they describe. Add a Mobile image – a tighter crop, for example – and every hotspot gets its own Position from the left on mobile and from the top on mobile.
Dots
- Dot: a Plus, a Number or a plain Dot, in a size from 20 to 48 px.
- Dot color and Dot icon color: leave them empty to use the button colors of the color scheme.
- Pulse to draw attention: a soft pulse around the dots.
- Open cards: On click, or On hover with a mouse. Phones always open them with a tap.
Image
Shape: Like the image keeps every dot exactly where you placed it. Wide, Landscape, Square and Portrait crop the image, which can move dots near the edges – check them after changing the shape. Width: within the page, or full width.
All settings
Every setting in the order of the theme editor, with its options and its default value.
Section: Image with hotspots24 settings
| Setting | Options | Default |
|---|---|---|
| Heading | Rich text (one line) | Sample text |
| Text | Rich text | Sample text |
| Heading size | Large · Medium · Small | Medium |
| Heading alignment | Left · Center | Left |
| Image | ||
| Image | Image | – |
| Mobile imageOptional. Each hotspot then gets its own position on mobile | Image | – |
| ShapeLike the image keeps every dot exactly where you placed it | Like the image · Wide · Landscape · Square · Portrait | Like the image |
| Width | Page · Full width | Page |
| Hotspots | ||
| Dot | Plus · Number · Dot | Plus |
| Dot size | 20–48px | 36px |
| Dot colorEmpty uses the button color | Color | – |
| Dot icon colorEmpty uses the button text color | Color | – |
| Pulse to draw attention | Checkbox | On |
| Open cardsPhones always open them with a tap | On click · On hover | On click |
| Card color scheme | Color scheme | Scheme 1 |
| Color scheme | Color scheme | Scheme 1 |
| Section spacing | ||
| Top padding | 0–160px | 64px |
| Bottom padding | 0–160px | 64px |
| Top padding on mobile | 0–120px | 40px |
| Bottom padding on mobile | 0–120px | 40px |
| Advanced | ||
| Hide on mobile | Checkbox | Off |
| Hide on desktopMobile means below the width where the header switches to the mobile menu (Header > Switch to the mobile menu below). | Checkbox | Off |
| Animate on scroll | Checkbox | On |
| Anchor IDLink to this section with #anchor-id. | Text | – |
Block settings
Block: Hotspot9 settings
| Setting | Options | Default |
|---|---|---|
| Position from the left | 0–100% | 50% |
| Position from the top | 0–100% | 50% |
| Position from the left on mobile | 0–100% | 50% |
| Position from the top on mobile | 0–100% | 50% |
| Card | ||
| ProductOptional. Shows its photo, title and price and links to it | Product | – |
| TitleEmpty uses the product title | Text | Sample text |
| Text | Rich text | Sample text |
| Link labelEmpty with a product shows View full details | Text | – |
| Link | Link | – |