Design

0 views

4 min

How to Create a Calm Reading Mode in Webflow

Learn how to create a distraction-free reading mode in Webflow that hides everything except the article content.

In this tutorial, Sandro, cofounder of Gemeos Webflow agency, shows you how to create a zen reading mode in Webflow that hides everything except the article content.

Example

Article with distractions

How Webflow changed the way we work

Since we adopted Webflow at Gemeos, our delivery speed has tripled. The combination of the visual Designer and the built-in CMS lets us ship high-performing websites in just a few weeks.

The real advantage of Webflow is the autonomy it gives marketing teams. No more waiting on a developer to change a heading, add a section, or update a blog page. Teams publish directly, with no friction.

Performance comes first

Webflow generates clean, optimized code natively. Our clients' Core Web Vitals are, on average, 40% better after migrating from WordPress. The built-in Fastly CDN delivers excellent load times worldwide.

Image handling is automatic: compression, modern formats (WebP, AVIF), lazy loading. Optimizations that used to require plugins and complex setups are now included by default.

The CMS that changes everything

The Webflow CMS is a game changer for agencies. Create collections, define fields, connect elements visually. No SQL query, no PHP template, no plugin to maintain. Just an intuitive, powerful content system.

For content-heavy websites, Webflow lets you generate hundreds of pages automatically from a collection. Blog posts, product pages, team profiles: everything is dynamic, everything is fast.

Sidebar

Widget

Element	Description	Zen style
Overlay	Cream background that covers the page	background: #fffef9
Duplicated content	Centered article, larger typography	Font-size: 18px, Georgia, max-width: 680px
Close button	Fixed top right, Escape key on the keyboard	Always visible

1. Add the elements in Webflow

Create a button with the ID zen-mode-btn and the text "🧘 Zen mode" wherever you want it (article header, toolbar...). Add the article-content class to your content area.

2. Add the script in 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 = '✕ Exit zen mode';
  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 = '✕ Exit';
      document.body.style.overflow = 'hidden';
    } else {
      overlay.style.opacity = '0';
      overlay.style.pointerEvents = 'none';
      zenContent.style.display = 'none';
      closeBtn.style.display = 'none';
      btn.textContent = '🧘 Zen mode';
      document.body.style.overflow = '';
    }
  }

  btn.addEventListener('click', toggleZen);

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

good to know

Zen mode duplicates your article's HTML inside an overlay container. Scripts attached to the original elements (confetti, tooltips...) won't run in the zen version. That's intentional: zen mode is a stripped-down reading environment, with no distracting interactions.

Conclusion

Zen mode reduces distractions and increases the time spent on your articles. Use cases:

Long articles with a heavy sidebar
Technical tutorials that require focus
Archived newsletters on your website

Good to know

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.

Learn more

4.9/5 • 97 reviews

Lorem ipsum dolor sit amet consectetur.

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

Let's discuss