The Labeled Image component allows you to add interactive hotspots to an image. When a user hovers over these hotspots, they trigger a pop-up containing specific information. This component can be used as either a full section or an individual element within your design.
How to Set Up a Labeled Image
Under Properties on the right-hand side of the editor, click edit labels.
Click anywhere on the image to add labels.
After adding your labels, you can now add a Caption on Hover by adding text to the caption.
Styling and Configuration
The Labeled Image component has several styling and configuration options to help you customize its appearance. While Text and Margin only edit the captions themselves, you can access all the styling options for the Labels and Captions by clicking the "+" sign next to Background, Border, Border Radius, or Effects.
Background:
Caption: Configure the background of the hotspots.
Label: Configure the look of the Labels themselves.
Text:
Configure the caption text appearance.
Margin:
Adds space around the caption, allowing you to position the caption.
Border:
Caption: Customize the color, opacity, and thickness of borders for Captions.
Label: Configure the border of the label, the border stroke, and its color.
Border Radius:
Edit the border radius of the container or the label.
Effects:
Gives you the option to add and configure Drop Shadow, Layer Blur, Background Blur, and Inner Shadow of the Container or Label.