How to: add backdrop (the Backdrop panel)

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 especially useful 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 features of the Backdrop panel and show you how to use them.

The Backdrop panel appears in the Authoring tool when you create and edit steps of your walkthroughs and tooltips. In this article, we 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.

With the Backdrop panel, you dim and lock the area behind the popover. In this part of the article, we will outline the options of the Backdrop panel 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 color by picking the desired one from the color palette and opacity by using the scroll. The more you scroll to the right - the more solid the color 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 appearance of the backdrop 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 for instance you made a mistake in using the override and you want to revert to the original settings, open the color palette, click the X button, 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.

Was this article helpful?