Complete guide to managing hidden pop-ups in Webflow

Webflow Introduction

Many customers tell us that their Pop-ups don't show up in the Webflow Designer, making the modification complex, if not impossible. This is often due to the fact that these elements are hidden with the CSS property. Display: none, either through classes or through interactions. This behavior can lead to content errors, missed updates, or unnecessary frustrations.

This guide takes you step by step to find, temporarily display, modify, then Hide your pop-up correctly again Before publish your site safely.

Webflow objective

Show a hidden pop-up (en) Display: none) in Webflow to edit it, then hide it again before publishing.

Before diving into the practical steps, let's start with a short video demonstration Of a Typical pop-up in Webflow : how it is structured, why it is often hidden (Display: none), and how that can complicate editing it in the Designer.

▶️ In this video, you'll see how to identify a pop-up, show it temporarily for editing, and then safely hide it again before publishing.

Here are our detailed steps

1. Identify the pop-up in the Designer
   • Open Webflow Designer.
   • In the Navigator, spot the Div of your pop-up (often called Popup, Modal, Overlay, etc.).
   • It's probably hidden with the CSS property: Display: none (via a class like .hidden, .popup-hidden...).

2. Show the pop-up temporarily🅰️ Quick method via styles
   • Select the Div in the Navigator.
   • In the panel swag, section Layout, change:
     Display: none → Display: block (or Flex depending on the design).
   🅱️ Alternative method via the Webflow inspector
   • Temporarily remove the class that applies Display: none.
   • Add a new class (ex: Popup-visible) with Display: block to work more comfortably.

3. Edit the content of the pop-up
   • Edit text, images, links, etc.
   • Use the mode Preview (👁️) to check the rendering.

4. Hide the pop-up again
   • Put it back Display: none on the original class.
   • Remove temporary classes if you have added them.
     💡 If an interaction controls the appearance of the pop-up, make sure it is hidden when the page loads.

5. Save and publish
   • Click on Save (Cmd + S).
   • Click on Publish at the top right.
   • Select your domain (s).
   • Click on Publish to Selected Domains.