Gated content

게이트 콘텐츠

Balance open access with a request for contact details.

···
html
<div class="gate"><div class="page"><b>FIELD GUIDE</b><span>OPEN PREVIEW</span><div class="masked">DEEP-DIVE PAGES</div></div><div class="lock">UNLOCK</div><div class="meter"><i></i></div></div>
css
.gate{width:min(78%,440px);font:900 clamp(10px,max(2vmin,1vw),17px) sans-serif}.page{height:clamp(90px,37vmin,200px);border:2px solid var(--fg);background:var(--surface);padding:clamp(8px,3vmin,20px);display:flex;flex-direction:column;gap:10px}.page b{font-size:1.3em}.page span{color:var(--accent)}.masked{flex:1;border:1px dashed var(--line);display:grid;place-items:center;color:var(--muted);filter:blur(2px);animation:reveal 5s infinite}.lock{background:var(--accent);color:white;text-align:center;padding:clamp(5px,1.5vmin,11px);width:50%;margin:-12px auto 0;position:relative;animation:unlock 5s infinite}.meter{height:5px;background:var(--line);margin-top:10px}.meter i{display:block;background:var(--fg);height:100%;animation:meter 5s infinite}@keyframes reveal{0%,30%{filter:blur(2px)}50%,80%{filter:none;color:var(--fg)}100%{filter:blur(2px)}}@keyframes unlock{0%,30%{transform:none}50%,80%{transform:translateY(13px)}100%{transform:none}}@keyframes meter{0%{width:80%}50%,80%{width:45%}100%{width:80%}}

Gated content offers part or all of an asset after a visitor shares contact details. It may start a follow-up conversation, but it adds friction.

Hiding even the basics can reduce discovery and trust. Show enough value up front and explain what the extra asset contains and how submitted data will be used.

When to use

Use it for a deeper asset when readers can knowingly opt into a follow-up.

Open as page ↗