Hotspots zijn klikbare elementen die eenvoudige afbeeldingen in interactieve content transformeren. Ze zijn ideaal voor wanneer je bijvoorbeeld verschillende onderdelen of details van een productafbeelding wil uitlichten. Voor het toevoegen van afbeelding hotspots in WordPress zijn vooral betaalde plugins beschikbaar, maar wij hebben ook een gratis plugin gevonden die prima werkt! In deze blogpost laat ik aan de hand van een voorbeeld zien hoe eenvoudig de Image Hotspot plugin werkt.
Afbeelding hotspots in WordPress toevoegen met de Image Hotspot plugin
Log in op je WordPress dashboard en installeer en activeer de Image Hotspot plugin.
Ga op je WordPress dashboard naar Image Map Hotspot > All Image Map Hotspot en klik op de ‘Add New’ knop. Je kunt nu de afbeelding uploaden waar je hotspots aan wil toevoegen.
Klik op de groene ‘Add point’ knop. Hou er rekening mee dat je met de gratis versie van de plugin maximaal zes hotspots aan een afbeelding kunt toevoegen.
In het ‘Marker Settings’ tabblad dat geopend wordt kun je achter ‘Icons’ op de + klikken, waarna je een icoon kunt selecteren. Vervolgens kun je de kleur en afmetingen van dat icoon instellen. In het ‘Content’ tabblad voer je de hotspot tekst in. Indien gewenst kun je in het ‘Link’ tabblad ook een link invoeren.
Nadat je op ‘Save’ hebt geklikt kun je het icoon naar de gewenste plek op je afbeelding slepen.
Zodra je alle gewenste hotspots aan de afbeelding hebt toegevoegd, klik je op ‘Save’. Vervolgens kopieer je de shortcode die onder de ‘Save’ knop staat.
Plak de shortcode op de pagina waar je de afbeelding met hotspots wil weergeven, sla de wijzigingen op en bekijk de pagina aan de front-end om het resultaat te bekijken.
Tot slot
De mogelijkheden van de gratis versie zijn vrij beperkt, maar volstaan prima om tot zes hotspots aan een afbeelding toe te voegen. Mocht je op een gegeven moment behoefte hebben aan meer hotspots en features, dan kun je natuurlijk altijd upgraden naar de premium versie. Deze is beschikbaar vanaf $27,99.
