Labeled images are interactive visuals with clickable hotspots that reveal pop-up information. They’re great for engaging users, providing product details, and boosting conversions.
How to Set Up a Labeled Image in Vev
Add a Hotspot Marker
Double-click the labeled image on your canvas.
Click "Add Item" to create a hotspot.
Adjust the X and Y fields (in percentages) to position the hotspot.
Add a Caption on Hover
Double-click the labeled image.
Click the "Caption on hover" field and write a short, clear caption.
The caption will appear when users hover over the hotspot.
Create a Pop-Up Overlay
Double-click the labeled image.
Under "Widget," select the component to display as a pop-up when the hotspot is clicked.
The widget will appear when the hotspot is clicked in preview mode.
Styling a Labeled Image
If the default options aren’t enough, use the Interactions component for more customization.
Background: Change colors for hotspots, hover text boxes, and overlays.
Text: Adjust the size of icons, captions, and close buttons.
Padding: Add spacing to hover text boxes and close buttons.
Border: Customize border color, opacity, and thickness for hotspots and text boxes.
Icons: Replace default icons with custom shapes, SVGs, or images.
Configuration Options
Background Image: The image where hotspots are placed.
Points: Set hotspot positions using X (left edge) and Y (top edge) percentages.
Caption on Hover: Add a short description that appears on hover.
Widget: Choose the component to display as a pop-up when the hotspot is clicked.
Animations: Set show/hide animations, easing styles, and duration for pop-ups.
Labeled images are a powerful tool for making your website more interactive and informative. Use them to highlight key features or provide additional details in a visually appealing way.