Adding shrouds, lightboxes, and hotspots to Tour steps

Learn how to add a shroud, lightbox, hotspot, or blur to your page along with your step.

Written by Pulkit Agrawal
Updated over a week ago

When creating steps, you can add a highlight to help bring the step into focus or draw a user's attention to something particular on the page.

You have a few options, that depend on whether the step is positioned Relative to screen or Anchor to element:

Shroud: appears behind the step and covers your interface so users focus on the step.
Lightbox: creates an overlay around a specific element to bring sharp attention to that element.
Hotspot: pulsing icon over a specific element to bring subtle attention to it.

Shroud

You can add a shroud from the Add Content menu. You will be presented with the following adjustment options:

Color
Opacity
Blur

Example usages

Color: #000000
Opacity: 0%
Blur: 0

Color: #000000
Opacity: 0%
Blur: 4

Color: #000000
Opacity: 40%
Blur: 0

Color: #000000
Opacity: 40%
Blur: 4

You can add a lightbox from the Add Content menu. You will be presented with the following adjustment options:

Example usages

Color: #000000
Opacity: 50%
Border width: 0px

Opacity: 0%
Border width: 3px
Border color: #0087AB

Color: #0087AB
Opacity: 50%
Border width: 3px
Border color: #0087AB

Color: #0087AB
Opacity: 50%
Border width: 3px
Border color: #0087AB
Radius: 50px
Padding: 20px

Hotspot

You can introduce a hotspot for a step within the Actions menu. This means the step will show upon clicking a hotspot icon.

To do this: define an on-page trigger of type icon click or hover and select the hotspot icon.

You can adjust the hotspot according to the following options:

Target element
Icon width
Offset (X and Y axis)
Fill color
Hotspot trigger persists after the step is displayed (yes or no)

👉 Learn more about the different trigger options

Discover more