Above the fold

Above the fold es la porción de una página web que es visible en la ventana del navegador en el momento en que un visitante llega a ella — antes de que se desplace, haga clic o interactúe de ninguna manera. Todo lo que está más allá de ese límite inicial del viewport está below the fold.

La frase describe la primera pantalla de contenido: el titular, la imagen principal, la navegación y cualquier llamada a la acción que se carga sin necesidad de desplazarse. Es la zona de mayor visibilidad en cualquier página.

¿Qué significa “above the fold”?

En diseño web, above the fold (a menudo abreviado ATF) significa el área visible de una página web antes de que ocurra cualquier desplazamiento. El “pliegue” es la línea imaginaria en la parte inferior de la ventana del navegador — el límite entre lo que un visitante ve inmediatamente y lo que requiere acción para revelarse.

El término no describe una altura fija en píxeles. En un monitor de escritorio de 27 pulgadas, el pliegue podría situarse entre 900 y 1,000 píxeles desde la parte superior. En un teléfono en modo retrato, pueden ser solo 500–600 píxeles. El pliegue cambia con cada dispositivo, tamaño de pantalla, barra de herramientas del navegador y configuración de zoom.

Tres preguntas que el área above the fold debería responder casi instantáneamente:

1. ¿De qué trata esta página? — un titular claro y descriptivo
2. ¿Por qué debería quedarme? — una propuesta de valor o declaración de beneficios
3. ¿Qué debería hacer a continuación? — una llamada a la acción visible o una señal de navegación

Lanza tu programa de afiliados hoy

Configura el seguimiento avanzado en minutos. No se requiere tarjeta de crédito.

Solicitar demo Comenzar prueba gratuita de 30 días

¿De dónde viene “above the fold”?

El término se origina en la publicación de periódicos impresos. Los periódicos físicos se doblaban por la mitad en los quioscos. Solo la mitad superior de la portada era visible para los transeúntes. Los editores colocaban los titulares más importantes, las fotografías más llamativas y las noticias principales en ese espacio para captar la atención e impulsar las ventas.

La misma lógica se trasladó al diseño web temprano en la década de 1990. Los diseñadores adoptaron el concepto del “pliegue” para describir lo que los usuarios ven antes de desplazarse — el equivalente digital del escaparate del quiosco.

Sin embargo, a diferencia del papel periódico, una página web no tiene un pliegue físico. El pliegue es virtual, definido enteramente por el viewport del visitante.

¿Por qué es importante above the fold?

El contenido above the fold determina si un visitante se queda o se va.

Primeras impresiones y tasa de rebote

Un visitante se forma una impresión de una página en aproximadamente 50 milisegundos. Si el área above the fold se ve desordenada, confusa o irrelevante, la tasa de rebote aumenta. Las páginas que comunican claramente su propósito y valor en el viewport inicial experimentan un abandono mensurablemente menor.

Impacto en la conversión

Las llamadas a la acción, los formularios de registro y las ofertas clave colocadas above the fold superan consistentemente a aquellas enterradas más abajo.

Implicaciones para el SEO

Las señales de experiencia de página de Google y los Core Web Vitals recompensan a las páginas donde el contenido principal se carga rápidamente y es de acceso inmediato. Si bien el pliegue en sí mismo no es un factor de ranking directo, las páginas que colocan contenido sustancial debajo de intersticiales intrusivos o imágenes grandes corren el riesgo de ser degradadas. El contenido que es más difícil de alcanzar es contenido que rankea de manera menos competitiva.

Únete a nuestro boletín

Sé el primero en conocer las nuevas funciones y actualizaciones del producto.

Dirección de correo electrónico

Suscribirse

¿Dónde está el pliegue en un sitio web?

No existe una única línea de pliegue. El pliegue varía según:

1. Tamaño y resolución de pantalla — un monitor de escritorio de 1920×1080 muestra mucho más que una pantalla de teléfono de 375×667
2. Chrome del navegador — las barras de herramientas, barras de marcadores y filas de pestañas reducen el espacio vertical disponible
3. Orientación del dispositivo — horizontal vs. vertical en tabletas y teléfonos produce diferentes posiciones del pliegue

El viewport móvil más común es de aproximadamente 390×660 píxeles. Esto significa que los visitantes móviles ven aproximadamente la mitad del contenido vertical que los visitantes de escritorio — lo que hace que el diseño above the fold en móvil sea más restringido y más crítico.

¿Cómo se mide el above the fold?

Los diseñadores web y especialistas en marketing utilizan varios métodos para medir dónde cae el pliegue:

• Herramientas de mapas de calor (Hotjar, Crazy Egg, Microsoft Clarity) — muestran el alcance agregado del desplazamiento como gradientes de color
• BrowserStack y herramientas de pruebas responsivas — simulan viewports en diferentes perfiles de dispositivo
• Pruebas manuales — redimensiona el navegador a puntos de quiebre comunes y observa dónde se corta el contenido

La regla general de los 600 píxeles de principios de los años 2000 está obsoleta. Los diseñadores ahora tratan el pliegue como un concepto fluido y prueban en al menos cinco anchos de viewport: 390px (teléfono pequeño), 428px (teléfono grande), 768px (tableta vertical), 1024px (tableta horizontal / laptop pequeño) y 1440px (escritorio).

¿Sigue siendo relevante above the fold?

Sí, pero no como se entendía hace una década. La idea de que todo el contenido crítico debe estar estrictamente por encima del pliegue está desactualizada. Los usuarios se desplazan, y lo hacen con frecuencia. Los feeds de redes sociales, los sitios de noticias con desplazamiento infinito y las plataformas de video de formato corto han entrenado a las personas para deslizar y desplazarse como algo natural.

Sin embargo, el contenido above the fold sigue determinando si un visitante decide desplazarse o no.

Consejos obsoletos:

• Meter cada CTA, titular e imagen por encima de una línea rígida de 600px
• Diseñar solo para escritorio e ignorar los viewports móviles
• Asumir que los usuarios nunca se desplazan

Mejores prácticas actuales:

• Coloca tu propuesta de valor central y un CTA principal above the fold
• Usa señales visuales — contenido parcial visible en el corte, flechas direccionales, animaciones activadas por desplazamiento — para indicar que hay más contenido debajo
• Diseña primero para el viewport común más pequeño, luego mejora para pantallas más grandes

¿Qué debe ir above the fold?

La combinación exacta depende del tipo de página. Una página de inicio, una landing page y un artículo de blog tienen objetivos diferentes.

Para páginas de inicio y landing pages

1. Un titular claro y centrado en beneficios — dile a los visitantes qué haces y por qué es importante
2. Subtítulo de apoyo — una frase que añade contexto o un beneficio secundario
3. Botón de llamada a la acción principal — prominentemente colocado, de alto contraste, con texto orientado a la acción
4. Imagen principal o video corto — visual relevante que refuerza el mensaje sin dominar el espacio
5. Navegación — limpia, mínima e intuitiva

Para artículos de blog y páginas de contenido

1. Título del artículo — descriptivo y rico en palabras clave
2. Imagen destacada — escalada para evitar empujar el texto debajo del pliegue
3. Párrafo de introducción — indica el tema y lo que el lector obtendrá
4. Tabla de contenidos — para publicaciones largas, un menú de salto ayuda a los lectores a navegar

Para páginas de producto de comercio electrónico

1. Nombre del producto e imagen clave
2. Precio — visible sin desplazamiento
3. Botón de añadir al carrito
4. Valoración de estrellas y número de reseñas — prueba social de un vistazo
5. Diferenciador clave — envío gratuito, garantía o característica única

¿Cómo aplica above the fold al marketing de afiliación?

Los profesionales del marketing de afiliación — ya sean anunciantes, editores o gestores de programas — dependen de la colocación above the fold para maximizar la visibilidad, los clics y las conversiones.

Para anunciantes (marcas que gestionan programas de afiliación)

Tus landing pages de afiliados deben comunicar valor de inmediato. Si un visitante referido llega a una página y el titular, la oferta o el CTA están enterrados below the fold, el clic que pagaste se desperdicia.

• Prueba los titulares de las landing pages above the fold con tus afiliados de mejor rendimiento
• Mantén el formulario o el botón de compra en el viewport inicial en dispositivos móviles

Para editores (afiliados que promocionan ofertas)

Los enlaces y banners de afiliados colocados above the fold generan significativamente más impresiones y clics que aquellos en barras laterales o pies de página. Sin embargo, las directrices de colocación de anuncios de Google penalizan las páginas que empujan el contenido debajo de un exceso de anuncios above the fold.

• Integra los CTA de afiliados de forma natural — los enlaces de texto contextual dentro de los dos primeros párrafos suelen superar a los banners publicitarios
• Evita apilar múltiples banners above the fold en páginas de contenido
• Revela claramente las relaciones de afiliación cerca del enlace, no enterradas en un pie de página

Para gestores de programas de afiliación

Cuando revises las solicitudes de afiliados y supervis el rendimiento de los socios, evalúa dónde colocan tus enlaces. Los afiliados que posicionan tus ofertas above the fold en páginas de alto tráfico tienden a generar la mayoría de las conversiones. Usa esos datos para:

• Identificar las colocaciones de mejor rendimiento y compartir esos patrones con los afiliados de bajo rendimiento
• Proporcionar activos creativos (banners, enlaces de texto) dimensionados para las dimensiones comunes above the fold
• Supervisar el cumplimiento — asegúrate de que los afiliados no utilicen colocaciones engañosas que violen tus términos

¿Deberían los CTA estar por encima o por debajo del pliegue?

La respuesta breve: coloca tu CTA principal above the fold e incluye CTA de apoyo debajo.

Un CTA above the fold captura a los visitantes que deciden rápidamente. Son usuarios con alta intención — llegaron sabiendo lo que quieren y solo necesitan el estímulo adecuado para actuar.

Un CTA below the fold sirve a los visitantes que necesitan más información. Después de leer beneficios, testimonios o detalles del producto, convierten con mayor confianza. Estas conversiones suelen tener valores de pedido promedio más altos y tasas de devolución más bajas.

Ninguna ubicación es universalmente superior. El patrón más efectivo, validado a través de miles de pruebas A/B, es:

• Un único CTA principal above the fold — la acción que la mayoría de los visitantes están listos para realizar de inmediato
• CTA secundarios distribuidos below the fold — colocados después de cada sección importante que presenta un argumento convincente
• CTA fijo en móvil — un botón persistente anclado en la parte inferior de la pantalla mientras el usuario se desplaza

Prueba ambas ubicaciones. No solo hagas seguimiento de los clics, sino de las conversiones completadas. Un CTA que genera muchos clics above the fold pero pocas finalizaciones puede estar atrayendo a la audiencia equivocada. Un CTA below the fold con menos clics pero tasas de finalización más altas puede estar mejor calificado.