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":
- Full shadow / shroud / overlay: this 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 dot (or custom icon) over a specific element to bring subtle attention to that element
Shadow (on page)
To add a Shadow, use the "Focus" section when editing a step.
Ensure the Position is "Relative to screen" and then select "Add page overlay" as "Yes"
This will present further options to adjust the config for the overlay:
You can click into these input fields to adjust these values.
Here are some examples of what you could do:
1. Color = #000000; Opacity = 0%; Blur = 0
2. Color = #000000; Opacity = 0%; Blur = 4
3. Color = #000000; Opacity = 40%; Blur = 0
4. Color = #000000; Opacity = 40%; Blur = 4
Lightbox (around element)
Similar to the "Overlay", you can find this within the "Focus" menu, but when the Position of the step is "Anchor to element".
When positioning in this way, the step is attached to a specific element on the page.
In the Add highlight dropdown, select "Lightbox".
This will place a shadow behind the step, but with the selected element cut out. You can adjust many aspects of this by clicking "Configure highlight":
Here are some examples of what you can do:
1. Default lightbox (Color = #000000; Opacity = 50%; Border width = 0px)
2. Outlined lightbox (Opacity = 0%; Border width = 3px; Border color = #0087AB)
3. Colored shadow and outlined lightbox (Color = #0087AB; Opacity = 50%; Border width = 3px; Border color = #0087AB)
4. Curved lightbox (as above, but with Radius = 50px; Padding = 20px)
5. Circular lightbox (as above, when square element selected)
Hotspot (on element)
If instead of "Lightbox", you select "Hotspot" from the above menu, this will place a pulsing dot on the selected element.
If you click "Configure highlight" here, you will have the option to adjust the position of this Hotspot (using px or % values, relative to the element center) and also the color of the Hotspot. If you prefer, you can upload a custom icon or image to use instead.
This could include a specific word or illustration to draw attention to the element. The image will show at the same size as the image you upload, so be sure to resize it first!
Note: this will soon be deprecated in favor of hotspots being set within the "Trigger" section:
Hotspot (as a trigger)
You can introduce a hotspot for a step within the "Triggers" menu. This means the step will show upon clicking a hotspot.
To do this: set the required user action for a step to trigger as "Click" or "Hover", followed by "Hotspot".
You can adjust the styling of the hotspot by clicking "Adjust". By default the hotspot will disappear when the step shows, but you can configure it to continue pulsing by choosing "Hotspot trigger persists" as "Yes"
Learn more about "Trigger" functionality here.