Backdrop with Outline assigned to multiple elements.

A backdrop appears behind steps or widgets displaying contextual and actionable content. By making use of the Backdrop feature you will be able to help your users focus and redirect their attention towards the next steps. In this article, we'll describe all the Backdrop features and show you how to use them.

The Backdrop panel appears in the Authoring tool when you create and edit steps of your walkthroughs. This article will start from this point and won't discuss how to build a walkthrough. To learn how to create a walkthrough, please check this article.

Whilst you can override all the Backdrop settings per Step, we recommend setting a default style of the Backdrop and Outline under Site > Settings > Player appearance > Backdrop tab. This will set a global setting of a Backdrop for the Site you are working on. You can then quickly turn on and off each of the Backdrop features through the quick access panel checkboxes without the need to expand the entire Backdrop panel.

Backdrop panel in the Authoring tool.

Switching to version 2

We currently have two versions of Backdrop. Version 1 is the default. Version 2 requires the Beta Player enabled. To switch the Backdrop to version 2, check if you have the Beta Player enabled. Then in the Site > Settings > Player appearance > Backdrop tab switch to version 2.

Version 2 includes the Backdrop radius and Outline features.

Highlight one or more elements using Backdrop

Backdrop with element assigned.

Assign an Element to a Step under the Elements Panel and turn on Backdrop by checking the box next to the Backdrop Panel title. The Backdrop will highlight the selected element or a set of elements. This will make the user focus on the parts of the application you are mentioning in your Step’s content.

You can fine-tune the Backdrop through settings by setting the global values under Site > Settings > Player appearance on the Portal or by overriding the defaults within each Step.

Color: Sets the color of the background

Opacity: Sets the opacity of the background

Padding: Sets the padding around the selected element or a set of elements

Radius (v2): Sets the radius of the selection’s corners

Outline one or more elements using Outline (v2)

An Outline highlighting a single element.

Backdrop with Outline highlighting a single element.

Backdrop with Outline highlighting multiple elements.

You can fine-tune the Outline through settings by setting the global values under Site > Settings > Player appearance on the Portal or by overriding the defaults within each Step.

Color: Sets the color of the Outline

Opacity: Sets the opacity of the Outline

Padding: Sets the padding around the selected element or a set of elements, and the Outline

Stroke width: Sets the width of the Outline

Radius: Sets the radius of the selection’s corners

Prevent users from interacting with the page using Cover

If you want to highlight a specific element on the page but do not want the user to click on the element, turn on Cover. The user will be able to interact with the Step's UI (e.g. buttons or close button) but won't be able to interact with the application.

Useful when you have a walkthrough that users should not be able to dismiss. You can also remove each of the Step's UI, e.g. the close button within the Step and when you want to prevent the users from drifting away by clicking on the interactive elements, e.g. buttons and tabs within your application.

Tips and Tricks

Highlight an element without a dark overlay and prevent users from interacting with the application

Backdrop with zero opacity and Outline assigned to single element.

There might be a case where you would want to show a Step, point at an element, and give it an outline for a focus, but you still want to prevent the user from clicking anywhere within the application.

You can turn on the Outline, but that will not prevent the user from clicking on the other parts of the application. Next, turn on the Backdrop, which will add the overlay and reduce the opacity of the Backdrop to 0 (zero). This will show the same as in the image above, but this time, the user cannot interact with anything other than the outlined element.

Turn on Cover if you do not want the user to interact even with the outlined element.