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

Did this answer your question?