Create a Hidden Element Rule
- Open the Demohacks side panel and select Hide Distractions
- Click the + button to create a new rule
- Enter a Title for your rule (optional)
- Click the element selector button next to Hidden Distractions
- Hover over the page to highlight elements, then click the element you want to hide
- Optionally add a URL Filter to limit the rule to specific pages
- Save the rule
Toggle Elements On and Off
In the hidden distractions list, each rule has a checkbox:
- Checked: Element is hidden
- Unchecked: Element is visible
Toggle rules on or off without editing them. Changes apply immediately when demo mode is enabled.
How It Works
Hidden elements are removed from view using display: none. The extension:
- Preserves the original display value for restoration
- Works with CSS selectors (you can target multiple elements)
- Applies changes instantly when demo mode is enabled
- Handles dynamic content that loads after page load
Tips
- Use the element inspector to select elements visually—it generates the CSS selector automatically
- You can enter multiple selectors separated by commas:
.ad, .sidebar, #promo - Toggle rules during demos to show or hide elements as needed
- Hidden elements are restored when demo mode is disabled