Article
Webflow popup and modal: edit hidden popups in the Designer
Webflow2 min read

James BrunettoCo-fondateur & CEO

Learn how to create and manage hidden popups in Webflow. A tutorial to improve user experience and your conversions.
Explore this post with…
Webflow introduction
Many clients tell us their popups don't show up in the Webflow Designer, which makes editing them hard, sometimes impossible. This usually happens because these elements are hidden with the CSS property display: none, either through classes or through interactions. That behavior can lead to content errors, forgotten updates or needless frustration.
This guide walks you step by step through how to find, temporarily show and edit, then properly hide your popup again before you publish your site safely.
Webflow goal
Show a hidden popup (set to display: none) in Webflow so you can edit it, then hide it again before publishing.
Before we get to the practical steps, let's start with a short video demo of a typical popup in Webflow: how it is structured, why it is often hidden (display: none), and how that can make it harder to edit in the Designer.
▶️ In this video, you'll see how to spot a popup, show it temporarily to edit it, then hide it again safely before publishing.
Our detailed steps
- Find the popup in the Designer
- Open the Webflow Designer.
- In the Navigator, find your popup's div (often named Popup, Modal, Overlay, etc.).
- It is probably hidden with the CSS property display: none (through a class like .hidden, .popup-hidden...).
- Show the popup temporarily🅰️ Quick method through styles🅱️ Alternative method through the Webflow inspector
- Select the div in the Navigator.
- In the Style panel, Layout section, change:
display: none → display: block (or flex, depending on the design). - Temporarily remove the class that applies display: none.
- Add a new class (e.g. popup-visible) with display: block so it's easier to work on.
- Edit the popup content
- Edit the text, images, links, etc.
- Use Preview mode (👁️) to check how it looks.
- Hide the popup again
- Set display: none back on the original class.
- Remove any temporary classes you added.
💡 If an interaction controls when the popup appears, make sure it is hidden on page load.
- Save and publish
- Click Save (Cmd + S).
- Click Publish in the top right corner.
- Select your domain or domains.
- Click Publish to Selected Domains.


