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