Using the Labeled Image element

Add clickable hotspots to an image that trigger an assigned element to pop up.

Lewis Bowen avatar
Written by Lewis Bowen
Updated over a week ago

Labeled images are a great way to add interactivity to your design while offering the end-user more information about your product or project.

Adding a Labeled image in Vev

Adding a labeled image

As an Element

  • From the top menu, click on the Add Menu (Shortcut: M)

  • Search for and select Labeled Image

  • Click and drag the element onto your canvas

As a Section

  • From the top menu bar, click on the Add Menu (Shortcut: M)

  • Search for and select Labeled Image

  • Click it

  • Press Alt (Windows) or Option (Mac)

  • Click Add section here when hovering over your canvas

Uploading an Image

  • Double-click the Labeled Image element

  • Click the Add icon (+)

  • Select Add image or choose an image from one of our free stock images libraries

Styling a labeled image

  • Spacing top: Add padding to the top of the Labeled Image section in pixels or % to keep spacing between sections

  • Spacing bottom: Add padding to the bottom of the Labeled Image section in pixels or % to keep spacing between sections

  • Width: The width of a Labeled Image section can't be altered, it'll always be set to cover the 100%

  • Height: Set the height of the Labeled Image section in Pixels, % or set it to Auto so that it grows as you add content to it

  • Min H: Sets the minimum amount of height pixels a Labeled Image section can be. A red stippled horizontal line inside your section will reflect the minimum height

  • Clip content: Toggle to hide the content that goes beyond the section's edges

  • Resize to fill vertically: Click to set the section's height to 100%

  • Cropping:

    • Auto Crop: Automatically crop an image based on the percentages to the left

    • Contain: Increases or decreases the size of the image to fill the container and preserves the aspect ratio

    • Stretch to Fill: Stretches the image to fit the container, regardless of its aspect ratio

  • 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

  • Effects: Add different types of shadows or blur effects. Learn more about effects

  • 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: The hotspot marker's position from the left edge of the section, Measured in percentage units.

Y: 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.

Setting up a labeled image element

Adding a Hotspot Marker

  • Double-click the Labeled Image element

  • Click Add Item to add a new Hotspot

  • Adjust the X and Y fields to position it where you want

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.

Assigning a widget to a hotspot

  • Double-click the Labeled Image element

  • Under the Widget field, specify the name of the widget from your project which should show when that hotspot is clicked (you must name it in the layers panel previously so it appears)

    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.

Did this answer your question?