How to Edit Elements Behind Overlays

• This is an Inspector guide. Please make sure to refer to the Introduction to the Inspector guide first.
• When capturing screens with overlays, such as screens containing modals with full-screen backdrops, everything behind the overlay will not be accessible in the Demoboost Editor.
• This limitation is not exclusive to visible overlays; some screens may even have invisible overlays that prevent the editing of a demo. If you find that large parts of your screen are not selectable in the Editor, chances are they're behind an overlay. In such cases, you can follow the steps described in this guide to remedy the situation.
• Please note that, as with any inspector tweaks, the effectiveness of this method may vary on a case-by-case basis. The steps below should cover the vast majority of cases, but if it doesn't work for you, please contact us at support@demoboost.com so that we can provide information specific to your particular screen.

Effortlessly kickstart your journey with our beginner-friendly guides!

Here's how to edit elements behind overlays.

Step 1: Open up the demo in the Editor.

Step 2: Right-click one of the covered elements and click on Inspect.

Step 3: Hover over the element highlighted in the Inspector. Check if it has a blue highlight in the DemoBooster Editor to make sure it is an overlay that covers the element.

Step 4: Add the display: none property to the element in the Styles panel.

Step 5: The dropdown should disappear, enabling you to make the edits. If it didn't fully disappear, repeat steps 2-4. Minimize the inspector (don't close it) and make your changes.

Step 6: Once you're done, go back to the inspector and change the display: none property to display: block.

‍