Considering demo automation? Test drive Demoboost for free!
Start Your Trial
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
How to Build a Sandbox Demo
Managing Access to Demoboost Product: A guide for Admin Users
Knowledge Base Documentation
New Feature Explanations
Product Marketing Announcements
Website Conversions
Channel Partner & Reseller Demos
Conferences/Trade Shows
Digital sales rooms for customers
Sales Leave-Behinds
Live Demos
Using Variables in your demos
“Great Demo!” Training for Sales Teams
Sample Article
How to Replace images
How to Assign a Variable
How to Select or Create an Overlay
How to download the extension?
How to present Mailchimp to Tim Cook
How to Clear Your Browser Cache
How to Install Microsoft Clarity on Your Demos Using Google Tag Manager
Integrating Google Tag Manager with Demoboost: A Step-by-Step Guide
Scrolling Settings - Advanced
How to Translate Screens
Troubleshooting Saving Errors
How to Capture Local Web Pages
Advanced Guide Cutomisation
How to Embed Demos from Specific Screen
How to Share Demos From Specific Screen
How to Edit Elements Behind Overlays
Demo Building and Custom Requests
Comments in Demos
How to Export Data from Demoboost
Analytics Overview
Playback Settings
Live Demo Settings
Demo Email Notifications
How to Share Demos
How to Embed Demos on Your Website
How to Share With Presenters and Channel Partners
How to Duplicate Demos
How to Create Folders
Inspector Introduction
How to Remove Screen Elements
How to Blur Screen Elements
How to Edit Graphs
How to Change Images
How to Edit Textual Elements
Branding - Custom Theme
Branding - SSO Integration
Creating Mobile App Demos
Uploading Multimedia Screens (MP4, PDF, IMG)
How to Change Screen Order
How to Copy Screen to Another Demo
How to Duplicate Screen
How to Edit Screen Title
How to Add Speaker Notes
How to Add Video Narration
How to Add Guides and Styling
How to Link Screens
How to Capture Dynamic Dropdowns (Advanced)
Extension Settings
How to Capture Screens
How to Create Demos
How to Add Extension

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.