Utilizing labeled images on your website provides an engaging way to present information and enhance user experience. By incorporating interactive elements such as pop-up overlays and hotspots, labeled images allow you to offer additional details about e.g. your products. This not only makes your content more informative but also encourages user interaction, leading to increased engagement and potentially higher conversion rates.
Setting up a labeled image
Adding a Hotspot Marker
Double-click the labeled image component on your canvas
Click Add Item to create a new Hotspot
Adjust the X and Y fields (in %, so max. 100%) to position the hotspot where desired (you may need to adjust through trial and error).
Adding a Caption on Hover
Adding a caption to the hotspot marker gives users an idea of what to expect if they were to open that hotspot. Follow the steps below to add it.
Double-click the Labeled Image element
Click the Caption on hover field
Write your caption (A good caption is short and concise)
A caption will only be visible when the cursor hovers over the Hotspot.
Create Pop-up as Overlay
Double-click the Labeled image component
Under Widget, select the component from your project that should be shown as a pop-up when the hotspot is clicked.
Once a widget is assigned to a hotspot, it will automatically become hidden upon entering preview mode. Clicking the appropriate hotspot will bring its assigned widget into view.
Styling a labeled image
Note: If you feel that the Labeled image doesn't offer enough customization options, we recommend using the Interactions component instead.
It will enable you to unleash your creativity and tailor it to your specific needs.
Background:
Point: Change the background color's hotspot
Hover Text Box: Change the Caption on hover's background color
Overlay: Change the overlay's background color (window appearing when clicking the hotspot)
Text:
PO: Change the size of the + icon inside the hotspot
HO: Style the text Caption on hover's text
CL: Change the size of the overlay's close button
Padding: Add padding to both the Hover text box and the Close button
Border: Set a border color, opacity, and line weight for both the Hotspot and Hover text box
Border Radius: Curve the radius of the border for both the Hotspot and Hover text box
Transform: Change the Hotspot's width and height
Icons:
Set custom shape: Replace the preset icons with a shape or a custom SVG
Set custom image: Replace the preset icons logo with an image
Configuration Options
Once you've added the Labeled Image element or section to your canvas, you can now deep-dive into the configuration options and set your label points.
To start, double-click the Labeled image element or section to open the configuration options.
Parameter | Description |
Background Image | The image to go in the background of the section, over which the hotspots will be placed. |
Points | x(-axis): The hotspot marker's position from the left edge of the section, measured in percentage units.
y(-axis): The hotspot marker's position from the top edge of the section, measured in percentage units. |
Caption on hover | A small blurb of text that appears beneath the marker when the user hovers over that marker. |
Multiline caption? | Allows you to add an extra line to the caption on hover and set the textboxes' width in pixels. |
Widget | The name of the widget that should pop up when the user clicks on the hotspot marker. (Has to be previously named in the layers panel) |
Show Animation | The animation used to bring the popup into view. |
Hide Animation | The animation used to hide the popup from the view. |
Easing | The animation speed style used for the popup show and hide animations. |
Duration | Length of time over which the popup show and hide animation plays. |