1. Home
  2. Troubleshooting
  3. Building
  4. Launchers and SmartTips
  5. WalkMe Items Appearing Above or Below Site Elements? Change the Layer Order (Z-Index)

WalkMe Items Appearing Above or Below Site Elements? Change the Layer Order (Z-Index)

Updated on June 17, 2019 Download PDFDownload as PDF
Download PDF

Brief Overview

Z-index specifies the stack order of an element compared to other existing elements on the same webpage. An element with a greater stack order will be in front of an element with a lower stack order.

In some cases, you will wish to change the stack order, for example, when a balloon is blocking a calendar menu to which the user needs access. This article will show you how!

Steps for Changing Your Elements’ Layer Orders (Z-Index)

  1. Click on the WalkMe item whose stack order (z-index) you would like to adjust in the Smart Walk-Thru canvas;
    • This will reveal the Step’s Step Options Menu:
  2. Click the Appearance tab;
  3. If you have not already done so, click on Arrange Layer Order (z-index) and toggle z-index ON. If you have done this, skip to the next step:
  4. Now, either click Customize On Screen within the Arrange Layer Order (z-index) section, or click the Customize on Screen! button atop the Step Options Menu:

    The element related to the step you selected must be available on an open screen in order to complete this step.

  5. You should now see the Step you created in context, and the Editor will show your layer order arrangement options:
  6. Depending on your intent, either click Bring forward (if your element is being hidden by a different website element undesirably) or Send backward (if your element is hiding a website element it shouldn’t be);
  7. Click Select on-screen Element;
  8. Click on the on-screen element you want your Step’s anchor element to either go in front of or move behind.
    • Once you click the element, look at the Define z-index value manually section; you should see the z-index value change automatically (if a change was necessary) to reflect the required z-index to achieve your desired effect:

Z-Index Pro-Tips

  • You can also modify the z-index value manually by entering a value under Define z-index value manually;
  • Depending on your website’s structure, in some cases changing the z-index won’t have the desired effect. In this case, we recommend using Lock to Element in addition to z-index;
  • Salesforce Lightning does not support Arrange Layer Order (z-index).  Instead, you can adjust z-index value manually or use Lock to Element;
  • This feature is available for use in Smart Walk-Thrus, SmartTips, and Launchers.

Was this article helpful?

Related Articles