Walkthroughs / How to: add backdrop (the Backdrop panel)

How to: add backdrop (the Backdrop panel)

Walkthrough
Tooltips
Backdrop

With the Backdrop panel, you can darken the area behind the popover and make it impossible for users to click-through. You are in total control of what your users can click on in your application. The backdrop feature is handy in walkthroughs when you don't want your users to lose attention or get lost.

With the Backdrop panel, you can:

  • Dim the area behind a popover,
  • Highlight single or multiple selected elements,
  • Lock the area behind the popover,
  • Lock highlighted elements.

In this article, we'll describe all the Backdrop panel features and show you how to use them.

Opening the Backdrop panel

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

To open the Backdrop panel:

  1. In the Authoring tool, while you're editing or adding a walkthrough or a tooltip, select a step from a list of steps or click "+" to create a new one.

  1. Scroll down to the Backdrop panel and expand the tab. Now, you see the Backdrop panel.

Functionalities of the Backdrop panel

With the Backdrop panel, you dim and lock the area behind the popover. In this part of the article, we will outline the Backdrop panel's options and show you how to use them.

To display the backdrop:

  1. Switch ON. By default, the backdrop is OFF.

Note that when the Backdrop is ON, anything under the backdrop is disabled.

To lock the assigned elements:

  1. If you want to, you can also switch the Cover ON. By default, the cover is OFF, and users can click assigned elements.

When the cover is ON, it locks the whole page including any element assigned to the step. Use a Next button trigger to advance to the next step. See How to: the Step Options Panel for more information.

To change the appearance of the backdrop:

  1. Click Override.

  1. Change the colour by picking the desired one from the colour palette and opacity by using the scroll. The more you scroll to the right - the less transparent the colour becomes. For example, you may want a completely transparent backdrop that locks all of the elements but doesn't dim the page.

  1. You can also adjust the padding to control the backdrop's appearance around highlighted elements.

Note that by default the backdrop is black and at 50% opacity. You can change the default appearance in your site settings. Go to Inline Manual portal, then click Sites in the upper menu, and choose the correct Site. Proceed to Settings, in the Player appearance tab, click the Backdrop tab, and make desired changes. See Player Appearance for more information.

If you made a mistake in using the override and want to revert to the original settings, open the colour palette, click the X button, and confirm with the choose button. If the settings don't change, first click the Save button and then click the Refresh button within the Authoring tool.

Walkthroughs
How to: manage steps (the Step Options Panel)
Customize the look - the player appearance settings