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

Soon:

Now:

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

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


Discover more

Did this answer your question?