Blokken

Hotspot

Maak een interactieve afbeelding met klikbare punten die informatie tonen. Ideaal voor plattegronden, diagrammen en productfoto's.

Preview
Plattegrond

Nooduitgang

Richting dichtstbijzijnde nooduitgang.


Overzicht

Het Hotspot block laat je een afbeelding uploaden en daar interactieve markers op plaatsen. Wanneer een deelnemer op een marker klikt, verschijnt een tooltip met informatie. Dit is een krachtige manier om visuele content interactief te maken. Denk aan anatomische diagrammen, plattegronden met locatiegebonden info, productfoto's met specificaties of software-screenshots met uitleg per onderdeel.

Hoe het werkt

1Voeg het block toe
Klik op + of typ /hotspot in het slash command veld.
2Upload een afbeelding
Upload de afbeelding die als basis dient. Dit kan een foto, diagram, plattegrond of screenshot zijn.
3Plaats markers
Klik op de afbeelding om markers toe te voegen op de gewenste posities. Elke marker wordt een klikbaar punt.
4Voeg tooltip-content toe
Vul per marker de titel en beschrijving in die verschijnen wanneer de deelnemer erop klikt.
5Pas de stijl aan
Kies de kleur en grootte van de markers. De pulse-animatie trekt de aandacht van de deelnemer.

Instellingen

InstellingBeschrijvingStandaard
AchtergrondafbeeldingDe basisafbeelding waarop markers worden geplaatst-
MarkersKlikbare punten met positie, titel en beschrijving-
Marker kleurDe kleur van de hotspot-puntenOranje (#F05A29)
Marker grootteKlein, normaal of grootNormaal
Pulse-animatieMarkers pulseren om aandacht te trekkenAan
AnimatieGeen, Fade in, Slide omhoog, Slide links, Slide rechts, Bounce, Blur in, Zoom inGeen
Span achtergrondKleur, afbeelding of video als achtergrondWit

Tips & best practices

Gebruik hoge resolutie afbeeldingen

Een scherpe basisafbeelding zorgt voor een professionele uitstraling. Vermijd vage of pixelige foto's.

Beperk het aantal markers

3-6 markers per afbeelding is ideaal. Te veel markers maken de afbeelding onoverzichtelijk.

Houd tooltip-tekst kort

Een titel en 1-2 zinnen uitleg per marker werkt het beste. Voor meer detail, verwijs naar een apart tekstblock.

Gerelateerde blocks

  • Afbeelding - Voor afbeeldingen zonder interactieve markers.
  • Simulatie Block - Voor interactieve walkthroughs van software-interfaces.