Design

2 vues

4 min

Comment créer un mode lecture zen dans Webflow ?

Apprenez à créer un mode lecture zen dans Webflow qui masque tout sauf le contenu de l'article.

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment créer un mode lecture zen dans Webflow qui masque tout sauf le contenu de l'article.

Exemple

Article avec distractions

Comment Webflow a changé notre façon de travailler

Depuis que nous avons adopté Webflow chez Gemeos, notre vitesse de livraison a été multipliée par trois. La combinaison du Designer visuel et du CMS intégré nous permet de livrer des sites performants en quelques semaines seulement.

Le vrai avantage de Webflow est l'autonomie qu'il donne aux équipes marketing. Plus besoin de passer par un développeur pour changer un titre, ajouter une section ou mettre à jour une page de blog. Les équipes publient directement, sans friction.

La performance comme priorité

Webflow génère du code propre et optimisé nativement. Les Core Web Vitals de nos clients sont en moyenne 40% meilleurs après migration depuis WordPress. Le CDN Fastly intégré assure des temps de chargement excellents partout dans le monde.

La gestion des images est automatique : compression, formats modernes (WebP, AVIF), lazy loading. Des optimisations qui nécessitaient auparavant des plugins et des configurations complexes sont désormais incluses par défaut.

Le CMS qui change tout

Le CMS Webflow est une révolution pour les agences. Créez des collections, définissez les champs, connectez les éléments visuellement. Pas de requête SQL, pas de template PHP, pas de plugin à maintenir. Juste un système de contenu intuitif et puissant.

Pour les sites avec beaucoup de contenu, Webflow permet de générer des centaines de pages automatiquement depuis une collection. Articles de blog, pages produits, fiches équipe : tout est dynamique, tout est rapide.

Sidebar

Pub

Widget

Élément	Description	Style zen
Overlay	Fond crème qui couvre la page	background: #fffef9
Contenu dupliqué	Article centré, typographie agrandie	Font-size: 18px, Georgia, max-width: 680px
Bouton fermeture	Fixed top right, Échap au clavier	Toujours visible

1. Ajoutez les éléments dans Webflow

Créez un bouton avec l'ID zen-mode-btn et le texte "🧘 Mode zen" à l'endroit souhaité (header article, barre d'outils...). Ajoutez la classe article-content sur votre zone de contenu.

2. Ajoutez le script dans Footer code

(function() {
  var btn = document.getElementById('zen-mode-btn');
  var content = document.querySelector('.article-content');
  if (!btn || !content) return;

  var active = false;
  var overlay = document.createElement('div');
  overlay.style.cssText = 'position:fixed;inset:0;background:#fffef9;z-index:9998;opacity:0;transition:opacity 0.3s;pointer-events:none;';
  document.body.appendChild(overlay);

  var zenContent = document.createElement('div');
  zenContent.style.cssText = 'position:fixed;inset:0;z-index:9999;overflow-y:auto;padding:4rem 1rem;display:none;';
  var inner = document.createElement('div');
  inner.style.cssText = 'max-width:680px;margin:0 auto;font-size:18px;line-height:1.9;color:#1a1a1a;font-family:Georgia,serif;';
  zenContent.appendChild(inner);
  document.body.appendChild(zenContent);

  var closeBtn = document.createElement('button');
  closeBtn.textContent = '✕ Quitter le mode zen';
  closeBtn.style.cssText = 'position:fixed;top:24px;right:24px;z-index:10000;padding:8px 16px;' +
    'background:#111;color:#fff;border:none;border-radius:100px;font-size:13px;' +
    'cursor:pointer;font-family:inherit;';
  closeBtn.addEventListener('click', toggleZen);
  document.body.appendChild(closeBtn);
  closeBtn.style.display = 'none';

  function toggleZen() {
    active = !active;
    if (active) {
      inner.innerHTML = content.innerHTML;
      overlay.style.opacity = '1';
      overlay.style.pointerEvents = 'auto';
      zenContent.style.display = 'block';
      closeBtn.style.display = 'block';
      btn.textContent = '✕ Quitter';
      document.body.style.overflow = 'hidden';
    } else {
      overlay.style.opacity = '0';
      overlay.style.pointerEvents = 'none';
      zenContent.style.display = 'none';
      closeBtn.style.display = 'none';
      btn.textContent = '🧘 Mode zen';
      document.body.style.overflow = '';
    }
  }

  btn.addEventListener('click', toggleZen);

  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && active) toggleZen();
  });
})();

bon à savoir

Le mode zen duplique le HTML de votre article dans un conteneur overlay. Les scripts attachés aux éléments originaux (confettis, tooltips...) ne seront pas actifs dans la version zen. C'est volontaire : le mode zen est un environnement de lecture épuré, sans interactions parasites.

Conclusion

Le mode zen réduit les distractions et augmente le temps passé sur vos articles. Cas d'usage :

Articles longs avec sidebar chargée
Tutoriels techniques nécessitant concentration
Newsletters archivées sur votre site

bon à savoir

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

4.9/5 • 97 avis

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum dolor sit amet consectetur. Aliquam orci sagittis dignissim sapien praesent donec.

on en discute