Vev Help Center
Search…
Labeled Image
Add clickable hotspots to an image that trigger an assigned element to pop up.

Configuration Options

Parameter
Type
Description
Background Image
Image file
The image to go in the background of the section, over which the hotspots will be placed.
Points > x
Percentage number
The hotspot marker's position from the left edge of the section, Measured in percentage units.
Points > y
Percentage number
The hotspot marker's position from the top edge of the section, Measured in percentage units.
Points > Caption on hover
Text
A small blurb of text that appears beneath the marker when the user hovers over that marker.
Points > Widget
Widget
The name of the widget that should pop up when the user clicks on the hotspot marker.
Show Animation
Dropdown
The animation used to bring the popup into view.
Hide Animation
Dropdown
The animation used to hide the popup from the view.
Easing
Easing
The animation speed style used for the popup show and hide animations.
Duration
Number
Length of time over which the popup show and hide animation plays.

Adding a Hotspot Marker

Double click anywhere on the Labeled Image Section to open its settings modal. Here, click the "+" button under "Hotspots" to add a new hotspot.

Position the marker on the image

Double click anywhere on the Labeled Image Section to open its settings modal. Each hotspot added to the image has an x and y field which define the position of that hotspot.
  • x: the percentage distance from the hotspot marker to the left edge of the section
  • y: the percentage distance from the hotspot marker to the top edge of the section.

Adding a marker caption

Adding a caption to the hotspot marker gives users an idea of what to expect if they were to open that hotspot. A marker's caption will only be visible when the cursor hovers over that marker. A good caption is short and concise

Assigning a widget to the hotspot

Double click anywhere on the Labeled Image Section to open its settings modal. Each hotspot added to the Labeled Image Section has a widget field. Here, specify the name of the widget from your project which should show when that 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.
To specify a widget, the widget must be given a custom name in the layers panel. To provide a custom name, locate the widget in the layers panel, double click on it, type a custom name.

Hotspot Marker Styling

Color

Customize the color of the hotspot marker points using the color interface located under Editor Styles Panel > Background > Marker.

Size

Customize the size of the hotspot marker points by setting the width and height fields located under Editor Styles Panel > Transform > Marker.

Overlay Color

When a hotspot marker is clicked, and the assigned widget becomes visible, it will be placed overtop of an overlay. The overlay's purpose is to create contract between the popup widget and the background, as well as to direct the user's focus to the popup widget. Designers can change the overlay's color by tweaking the property found under Editor Styles Panel > Background > Overlay.
​
​
​
​
​
Last modified 6mo ago