“Above the fold” es un término heredado del diario físico: lo que estaba sobre el doblez era lo que se veía en el kiosco. En 2026, en mobile, “the fold” son los primeros 600 píxeles de tu landing. En desktop, los primeros 750. Todo lo que caiga fuera de esa ventana, el usuario no lo ve si no hace scroll — y más del 70% no hace scroll si no le diste razón para hacerlo en esos primeros píxeles.
La pregunta no es “¿qué meto en el hero?” sino “¿qué necesito que el visitante entienda, sienta y haga en 5 segundos?”. Este post contesta esa pregunta con estructura y antipatrones.
Los 5 elementos que SÍ deben estar above the fold
En orden de prioridad visual (lectura Z-pattern en desktop, F-pattern en mobile):
1 · Headline de resultado (no de servicio)
El H1 debe responder la pregunta mental del usuario: “¿qué gano yo si me quedo?” en menos de 10-12 palabras.
| Headline débil (servicio) | Headline fuerte (resultado) |
|---|---|
| “Diseño web profesional" | "Tu landing convierte 3% o no cobramos" |
| "Clases de yoga online" | "Mejora tu postura en 30 días con 10 min diarios" |
| "Estudio contable para pymes" | "Tu contabilidad al día sin salir de la oficina” |
2 · Subheadline que explica el “cómo”
Una línea de 15-25 palabras que sustenta el headline. Responde: “¿cómo lo harán?” o “¿por qué les puedo creer?”.
Fórmula SMX: [Método / Tiempo / Diferencial + Para quién es]
Ejemplo: “Auditamos tu cuenta de Meta Ads en vivo, contigo, en 30 minutos. Sin instalaciones, sin compromiso, sin venderte humo.”
3 · Prueba visual inmediata
Una imagen o video de 5-15 segundos que muestre resultado, producto en acción o cara humana. NO hero abstracto con shapes ni foto de stock genérica.
Jerarquía de efectividad:
- Video corto de 5-10s de producto/servicio en uso real.
- Foto del equipo (honesta, no stock).
- Captura de producto/dashboard específico.
- Antes/después (si aplica al servicio).
- Imagen editada/ilustrativa (último recurso).
4 · CTA principal visible
Botón primario. Color de contraste alto (el emerald en fondo oscuro, el azul en fondo claro). Texto específico con verbo de resultado:
- “Agendar auditoría gratuita →”
- “Calcular mi CPA estimado →”
- “Ver demo de 2 minutos →”
- “Descargar checklist →”
Evita: “Enviar”, “Más información”, “Clic aquí”, “Contáctanos”.
5 · Micro-prueba social
Una línea o logo strip. No necesita ser extenso. Ejemplos efectivos:
- “Usado por 47 pymes chilenas desde 2024” (cifra específica).
- Strip con 4-5 logos de clientes reconocibles.
- ”★★★★★ 4,9/5 sobre 83 reseñas”.
- Quote de 1 línea con autor nombrado.
La estructura visual que mejor convierte (plantilla)
Mobile (600px alto × 100% ancho):
- 0-60px: logo + nav comprimido (hamburger).
- 60-140px: micro-prueba social (strip logos, rating o cifra).
- 140-260px: H1 (2 líneas máximo, weight 700-800).
- 260-360px: subheadline (2-3 líneas, weight 400).
- 360-460px: CTA primario + secundario.
- 460-600px: imagen/video hero.
Desktop (750px alto × 1200px ancho): mismo orden pero en layout 2 columnas (contenido izquierda, hero visual derecha).
Los 7 errores que matan el above-the-fold
- Hero con slider de 5 slides. Cada slide pelea por atención y ninguna gana. El 85% de los usuarios no pasa del slide 2.
- Headline con más de 15 palabras. El cerebro necesita < 3 segundos para procesar. Si tu headline requiere leerlo 2 veces, es muy largo.
- Video hero con audio. Violación de expectativa en mobile. Siempre
mutedy sin sonido crítico. - CTA primario fuera de viewport. Si el visitante tiene que hacer scroll para ver el botón, ya perdiste al 40%.
- Demasiadas llamadas a acción. 3 CTAs primarios = 0 CTA primario. Uno solo dominante + uno secundario discreto.
- Pop-up de cookies cubriendo el 30% del hero. Si tu cookie banner tapa tu propuesta de valor, reconfigúralo (banner inferior no-intrusivo).
- Chat widget abierto ocupando el corner. Déjalo cerrado con burbuja discreta; abierto ocupa espacio premium.
Mobile vs desktop: qué ajustar
| Elemento | Mobile | Desktop |
|---|---|---|
| Nav | Hamburger (logo + icono) | Horizontal 4-6 ítems + CTA |
| H1 | Max 8 palabras, 1-2 líneas | Max 12 palabras, 1-2 líneas |
| Hero visual | Bajo el texto | A la derecha del texto (50/50) |
| CTAs | Full width, stacked | Side by side, medio ancho |
| Tamaño fuente H1 | 28-36px | 40-60px |
| Video hero | Poster + carga a tap | Autoplay muted loop |
| Prueba social | 1 línea compacta | Logo strip 4-6 logos |
Cómo validar si tu above-the-fold funciona
Test de 5 segundos (metodología UX):
- Muestra tu landing a 10 personas del target correcto.
- Déjalos verla exactamente 5 segundos.
- Cierra.
- Pregunta: “¿Qué ofrece? ¿Para quién es? ¿Qué harías después?”
Si 7 de 10 no pueden responder las 3 preguntas, tu hero necesita trabajo. Si 5 de 10 responden las 3, tu hero es decente. Si 8+ responden, es de élite.
La regla del visitante apurado
Diseña como si tu visitante tuviera 5 segundos antes de que le suene el teléfono y se fuera. En esos 5 segundos debe:
- Entender qué ofreces (headline).
- Saber si es para él (subheadline + visual).
- Confiar en que no es estafa (prueba social).
- Saber qué hacer si le interesa (CTA).
Si faltan elementos para los 4 puntos, tu above-the-fold está incompleto.
Landing de escuela de fotografía online. Above-the-fold original: video de 30s de fotos con música emocional, sin headline claro, CTA “Más información” al final del video.
Test de 5 segundos (n=12): 10/12 no pudieron responder qué se ofrecía. Decían “algo de fotos bonitas”.
Rediseño: headline “Curso online: toma mejores fotos con el celular que ya tienes” + subheadline específica + foto real del profesor + CTA “Ver primera clase gratis”. Test siguiente (n=12): 11/12 respondieron bien. Conversión de landing subió de 1,4% a 3,9% en 30 días.