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