Qué es above the fold
Above the fold es la parte de una página web que una persona puede ver sin hacer scroll. En diseño web, UX y CRO se usa para hablar de la primera impresión de una página: el bloque visible donde el usuario decide si entiende la propuesta, si confía y si continúa navegando.
En una frase: above the fold es el contenido visible en la primera pantalla de una web antes de desplazarse, normalmente compuesto por mensaje principal, apoyo visual, CTA, navegación y señales de confianza.
Qué significa above the fold literalmente
La expresión viene del mundo editorial: en los periódicos impresos, “above the fold” era la parte superior visible antes del pliegue. En web, el “fold” no es físico, sino el límite inferior de la pantalla visible antes de desplazarse.
| Concepto | Significado | Aplicación en web |
|---|---|---|
| Above the fold | Contenido visible sin scroll. | Primera impresión, propuesta de valor, CTA y orientación inicial. |
| Below the fold | Contenido que aparece después de hacer scroll. | Explicaciones, beneficios, pruebas, detalles, casos, FAQ y cierre. |
| Fold | Límite entre lo visible y lo no visible al cargar. | No es fijo: cambia por dispositivo, navegador, zoom, idioma y resolución. |
Para qué sirve el above the fold
El above the fold sirve para reducir la incertidumbre inicial. Cuando alguien llega a una página, necesita entender rápido qué hay ahí, si es relevante para su problema y qué puede hacer a continuación.
Explica dónde está el usuario
Un buen primer pantallazo evita que la persona tenga que adivinar qué ofrece la página, para quién es o qué puede conseguir.
Prioriza el mensaje principal
El titular, el subtítulo y el visual deben concentrar la idea más importante, no competir con demasiados elementos.
Facilita el siguiente paso
Un CTA visible ayuda a convertir interés en acción: pedir presupuesto, ver servicios, comprar, reservar o descargar.
Qué debe incluir un buen above the fold
No todas las páginas necesitan los mismos elementos, pero la zona superior debe resolver cinco preguntas: qué es, para quién es, por qué importa, qué hago ahora y por qué debería confiar.
| Elemento | Función | Ejemplo práctico | Error habitual |
|---|---|---|---|
| Titular | Resume la promesa principal. | “Diseño webs rápidas para captar clientes locales”. | Usar frases vagas como “Creamos experiencias únicas”. |
| Subtítulo | Amplía el titular con contexto y concreción. | “Webs en WordPress optimizadas para SEO, móvil y conversión”. | Repetir el titular sin aportar información nueva. |
| CTA principal | Indica la acción más importante. | “Solicitar presupuesto” o “Ver servicios”. | Poner cinco botones con la misma importancia visual. |
| Señal de confianza | Reduce dudas iniciales. | Casos, reseñas, años de experiencia, logos o dato verificable. | Colocar claims genéricos sin prueba ni contexto. |
| Visual | Ayuda a comprender la oferta o el resultado. | Captura del producto, foto real, mockup, antes/después o interfaz. | Usar una imagen decorativa pesada que no explica nada. |
Cómo se ve el above the fold en una página
El límite del fold no siempre se ve en el diseño, pero se puede imaginar como la línea inferior de la primera pantalla. Lo importante es que antes de esa línea aparezca lo suficiente para entender la página.
Above the fold en móvil y escritorio
En escritorio suele caber más contenido horizontal: titular, texto, CTA, visual, navegación y alguna prueba social. En móvil, el espacio es mucho menor; por eso la prioridad no es replicar el escritorio, sino decidir qué debe verse primero.
| Dispositivo | Prioridad | Qué conviene evitar |
|---|---|---|
| Móvil | Titular claro, subtítulo breve, CTA visible y navegación limpia. | Menús enormes, sliders, imágenes pesadas y textos largos antes del CTA. |
| Tablet | Equilibrar lectura, visual y acción sin comprimir demasiado. | Diseños a medio camino donde todo queda pequeño o demasiado espaciado. |
| Escritorio | Aprovechar anchura para mostrar propuesta, visual, prueba y acción. | Vacío excesivo, titulares abstractos o visuales que empujan el mensaje hacia abajo. |
Above the fold, SEO y Core Web Vitals
Above the fold no es una etiqueta SEO, pero sí influye en la experiencia inicial. Una primera pantalla lenta, confusa o inestable puede perjudicar cómo se percibe la página y cómo interactúa el usuario con ella.
Elemento principal rápido
Si el elemento más grande de la primera pantalla tarda demasiado en aparecer, la página se percibe lenta aunque el resto cargue después.
Sin saltos visuales
Reservar espacio para imágenes, fuentes, banners y módulos evita que el contenido se mueva al cargar.
Claridad semántica
El H1, el copy inicial y la estructura deben confirmar que la página responde a la búsqueda o necesidad del usuario.
Qué poner above the fold según la página
Esta herramienta orienta qué elementos priorizar en la primera pantalla según el tipo de página y el objetivo principal.
Selector de above the fold
Elige el tipo de página y el objetivo. Obtendrás una recomendación inicial para ordenar la primera pantalla.
Para una página de servicio orientada a captar contacto, muestra un titular específico, subtítulo con alcance, CTA principal y una prueba de confianza visible.
Ejemplos de above the fold por tipo de página
La primera pantalla debe responder a la intención de cada página. Una home no necesita el mismo above the fold que una landing, un artículo, una ficha de producto o una página de servicios profesionales.
| Página | Above the fold recomendable | CTA típico |
|---|---|---|
| Servicio profesional | Titular orientado al problema, beneficios, zona/sector, prueba y contacto. | Solicitar presupuesto |
| Landing de Ads | Oferta clara, coincidencia con anuncio, formulario o CTA, prueba y objeción principal resuelta. | Reservar / Descargar / Comprar |
| Home corporativa | Qué hace la empresa, para quién, diferenciador, navegación a servicios clave y confianza. | Ver servicios |
| Ecommerce | Producto/categoría, beneficio, precio o rango, imagen, disponibilidad, envío y acción de compra. | Añadir al carrito |
| Artículo SEO | Título, respuesta inicial, índice, contexto y promesa de lo que aprenderá el lector. | Leer guía / Ir al índice |
Above the fold vs hero section vs header
Estos términos suelen mezclarse, pero no significan lo mismo. Diferenciarlos ayuda a diseñar mejor la zona superior de una web.
| Término | Qué es | Diferencia clave |
|---|---|---|
| Above the fold | Todo lo visible sin scroll en la primera pantalla. | Depende del dispositivo y puede incluir header, hero y parte de otra sección. |
| Hero section | Bloque principal de presentación de una página. | Puede estar above the fold, pero no siempre ocupa exactamente toda la zona visible. |
| Header | Zona de cabecera con logo, navegación y acciones globales. | Es una parte concreta; no equivale a toda la primera pantalla. |
| Banner | Bloque promocional o informativo destacado. | Puede aparecer arriba, pero suele tener una intención más puntual o comercial. |
Errores habituales en el above the fold
Titular bonito pero vacío
Frases como “Impulsamos tu futuro digital” pueden sonar bien, pero no explican qué haces ni para quién.
Imagen que ocupa demasiado
Si el visual desplaza el mensaje, el usuario ve una foto pero no entiende la propuesta.
Demasiados CTAs
Cuando todos los botones parecen igual de importantes, la página no guía: obliga a decidir demasiado pronto.
No adaptar a móvil
Un diseño perfecto en escritorio puede esconder el CTA en móvil o dejar visible solo una imagen sin contexto.
Cargar elementos pesados
Vídeos, sliders, scripts y fotos grandes pueden ralentizar el contenido crítico de la primera pantalla.
Parecer final de página
Si el primer bloque cierra visualmente demasiado, el usuario puede no intuir que hay más contenido debajo.
Checklist para optimizar el above the fold
Una buena primera pantalla combina claridad, jerarquía visual, velocidad y continuidad. Este checklist ayuda a revisar si la zona superior cumple su función.
El titular explica la propuesta.
No depende de una frase genérica ni de una imagen para entenderse.
El CTA principal es visible.
Hay una acción prioritaria y no compite con demasiadas alternativas.
El contenido carga rápido.
La imagen, el H1 y el bloque principal no se retrasan por scripts o recursos pesados.
Hay continuidad visual.
La composición invita a seguir bajando sin parecer que la página termina.
La versión móvil está priorizada.
En móvil se ve primero lo esencial, no una versión comprimida del escritorio.
La confianza aparece pronto.
Si la decisión requiere credibilidad, se muestra una prueba real y concreta.
FAQ sobre above the fold
Significa la parte de una página que se ve nada más cargar, antes de que el usuario haga scroll. En español puede entenderse como “primer pantallazo” o “zona visible inicial”.
No exactamente. La hero section es el bloque principal de presentación. Above the fold es todo lo que cabe en la pantalla inicial visible, incluyendo header, hero y a veces parte de la siguiente sección.
Debe ir lo necesario para entender la página y avanzar: titular claro, apoyo breve, CTA, navegación útil, visual relevante y señales de confianza cuando sean necesarias.
No. Hay que poner lo suficiente para orientar y motivar. Los detalles, casos, argumentos, FAQ y contenido largo pueden ir debajo si la primera pantalla deja claro por qué merece la pena seguir.
No. Cambia según resolución, navegador, zoom, sistema operativo, barras visibles, idioma, orientación y tamaño de pantalla. Por eso se diseña por prioridades, no por una altura única.
Sí, puede influir mucho. Una primera pantalla clara reduce fricción, mejora la comprensión y ayuda a que el usuario haga clic, lea más o continúe el recorrido.
¿Quieres mejorar la primera pantalla de tu web?
Puedo revisar tu above the fold, detectar problemas de mensaje, jerarquía, CTA, diseño responsive, velocidad y conversión, y proponerte una versión más clara y orientada a resultados.
