Guide complet pour gérer les pop-ups cachées dans Webflow

Introduction Webflow

De nombreux clients nous signalent que leurs pop-ups ne s’affichent pas dans le Designer Webflow, rendant la modification complexe, voire impossible. Cela est souvent dû au fait que ces éléments sont masqués avec la propriété CSS display: none, soit via des classes, soit via des interactions. Ce comportement peut entraîner des erreurs de contenu, des oublis de mise à jour ou des frustrations inutiles.

Ce guide vous accompagne pas à pas pour retrouver, afficher temporairement, modifier, puis masquer à nouveau correctement votre pop-up avant de publier votre site en toute sécurité.

Objectif Webflow

Afficher une pop-up cachée (en display: none) dans Webflow pour la modifier, puis la masquer à nouveau avant de publier.

Avant de plonger dans les étapes pratiques, commençons par une courte démonstration vidéo d’une pop-up typique dans Webflow : comment elle est structurée, pourquoi elle est souvent masquée (display: none), et comment cela peut compliquer sa modification dans le Designer.

▶️ Dans cette vidéo, vous verrez comment identifier une pop-up, l’afficher temporairement pour la modifier, puis la masquer à nouveau en toute sécurité avant publication.

Voici nos étapes détaillées

1. Identifier le pop-up dans le Designer
   • Ouvre Webflow Designer.
   • Dans le Navigator, repère la div de ta pop-up (souvent nommée Popup, Modal, Overlay, etc.).
   • Elle est probablement cachée avec la propriété CSS : display: none (via une classe comme .hidden, .popup-hidden...).
2. Afficher temporairement la pop-up🅰️ Méthode rapide via les styles🅱️ Méthode alternative via l’inspecteur Webflow
   • Sélectionne la div dans le Navigator.
   • Dans le panneau Style, section Layout, change :
     display: none → display: block (ou flex selon le design).
   • Supprime temporairement la classe qui applique display: none.
   • Ajoute une nouvelle classe (ex : popup-visible) avec display: block pour travailler plus confortablement.
3. Modifier le contenu de la pop-up
   • Modifie le texte, les images, les liens, etc.
   • Utilise le mode Preview (👁️) pour vérifier le rendu.
4. Masquer à nouveau la pop-up
   • Remets display: none sur la classe d’origine.
   • Supprime les classes temporaires si tu en as ajouté.
     💡 Si une interaction contrôle l’apparition de la pop-up, assure-toi qu’elle est masquée au chargement de la page.
5. Enregistrer et publier
   • Clique sur Save (Cmd + S).
   • Clique sur Publish en haut à droite.
   • Sélectionne ton ou tes domaines.
   • Clique sur Publish to Selected Domains.