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 Shroud 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
After positioning your step around an element, you can then add a Lightbox by clicking on the Lightbox panel under the Design header on the Control Panel.
Example Lightbox settings
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 On-page Trigger panel under the Display Rules header on the Control Panel. 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
Multi-step Tours using shrouds
Generally, it is not a good UX practice to use a shroud with multiple steps in sequence but we understand that occasionally this need may arise.
If you set up back-to-back steps with shrouds, you may notice a brief "flicker" during the brief moment between steps if they are image intensive and take slightly longer to render.
To prevent this "flicker" from occurring, you can manually add in a shroud for those steps and remove it at the end of the Tour.
You'll add a script in the body of the 1st step to display the shroud. Then on the last step, add an Additional Action to 'Run Code' on the button that will remove the shroud and complete the Tour (or move to another step without a shroud).
Add to body of step to add shroud
<script>if(chmln.$('#new-shroud').length==0){var rshroud=chmln.$('<div id="new-shroud"></div>');rshroud.insertBefore( "#chmln-dom" );rshroud.css({position:'fixed',top: 0,left: 0,right: 0,bottom: 0,'background-color': '#000000',opacity: 0.4,'z-index': 9999999});}</script>
You can adjust the background-color and opacity as you'd like.
Add to Additional Actions of a button to remove shroud
rshroud.remove();delete window.rshroud;