Sección Hero: qué Poner Arriba para que Sigan Leyendo

La sección hero es la primera parte visible de una página, la que aparece antes de hacer scroll, y decide si el visitante sigue leyendo o se marcha. En pocos segundos debe responder tres preguntas: qué ofreces, para quién es y qué debe hacer ahora. Si no lo consigue, el resto de la página, por buena que sea, se queda sin lectores.

Esta guía explica qué elementos componen un buen hero, qué trabajo hace cada uno, cómo mantener la coherencia con el anuncio que trajo al visitante, por qué el diseño debe pensarse primero para el móvil y cómo cuidar la velocidad de carga. Cierra con una lista de pasos para revisar el tuyo.

¿Qué es la sección hero y por qué decide si siguen leyendo?

El hero es el bloque de cabecera de una landing: el titular, el subtítulo, el botón principal y una imagen o vídeo que ocupan la pantalla al cargar. Recibe su nombre del inglés «hero», por ser el protagonista de la página. También se conoce como «parte superior de la página» o por la expresión inglesa «above the fold».

Importa porque la atención es limitada y la decisión de quedarse se toma muy rápido. Antes de leer una sola frase del resto, el visitante ya ha formado una impresión con lo que ve de entrada. Un hero claro invita a seguir; uno confuso, saturado o lento provoca el abandono, y ninguna sección posterior puede arreglarlo porque nadie llega a ella.

¿Qué elementos debe tener una sección hero?

Un hero eficaz no necesita muchos componentes, pero sí que cada uno haga bien su trabajo. Estos son los cinco que no deberían faltar.

• Titular claro. Debe decir en una frase qué ganas tú, el visitante, con la oferta. Prioriza el resultado concreto sobre el eslogan ingenioso que nadie entiende a la primera.
• Subtítulo que completa. Una o dos líneas que aclaran cómo se logra el beneficio o para quién es. Si el titular promete, el subtítulo explica sin repetir.
• Botón de acción visible. Un único botón principal, con un verbo claro y un contraste que destaque sobre el fondo. Evita varias acciones que compitan entre sí.
• Prueba visual. Una imagen, una captura del producto o un vídeo corto que muestre lo que se ofrece en uso real. Las fotos genéricas de banco de imágenes aportan poco.
• Señal de confianza. Un dato breve que reduzca el riesgo: logotipos de clientes, una valoración, un número de usuarios verificable o un sello de garantía.

El titular es la pieza que más pesa, y merece su propio trabajo. Si quieres profundizar, repasa cómo escribir el titular de una página de ventas y prueba varias versiones antes de decidirte por una.

La señal de confianza no tiene por qué ser grande: basta una línea con una cifra real o un par de logotipos. Para elegir cuál mostrar, te servirá lo que se explica sobre la prueba social y el modo en que reduce la duda del visitante en los primeros segundos.

¿Qué función cumple cada elemento del hero?

Para revisar tu cabecera con criterio, conviene pensar en cada pieza por el trabajo que hace y por la señal que indica que algo falla. La tabla lo resume.

| Elemento | Su trabajo | Señal de que falla |

| --- | --- | --- |

| Titular y subtítulo | Comunicar qué ofreces y qué ganas en menos de cinco segundos | Los visitantes te preguntan qué haces o se van sin hacer scroll |

| Botón de acción | Indicar el siguiente paso con un único camino claro | Pocos clics en el botón o clics repartidos entre varias opciones |

| Imagen o vídeo | Mostrar el producto en uso y reforzar el mensaje | Una imagen decorativa que no explica nada o que ralentiza la carga |

| Señal de confianza | Reducir el riesgo percibido antes de pedir una acción | Dudas sobre la fiabilidad que aparecen en consultas y en el soporte |

Si un elemento no cumple su trabajo, no lo adornes: reescríbelo o elimínalo. Un hero con cuatro piezas que funcionan rinde más que uno con siete que se estorban entre sí.

Un matiz importante: que el hero sea decisivo no significa que el visitante no haga scroll. Las personas bajan por una página cuando lo que ven arriba les da un motivo para hacerlo. Por eso el objetivo del hero no es contarlo todo, sino despertar el interés suficiente para que el visitante quiera seguir leyendo y descubra el resto de tu argumento.

¿Por qué el hero debe coincidir con el anuncio?

Quien llega desde un anuncio, un correo o un resultado de búsqueda trae una promesa en la cabeza. Si el hero no la confirma de inmediato, el visitante piensa que se ha equivocado de página y se marcha. A esa coincidencia entre lo que prometiste fuera y lo que encuentra dentro se le llama coherencia de mensaje.

Cuida que el titular, la oferta y hasta las imágenes de tu hero repitan el lenguaje del anuncio. Es la idea que desarrolla la congruencia entre anuncio y página: si el anuncio habla de un descuento del primer mes, el hero debe mostrarlo, no esconderlo en la mitad de la página.

Cuando tienes varias campañas con promesas distintas, lo ideal es un hero adaptado a cada una, aunque el resto de la página sea el mismo. Cambiar solo el titular y el subtítulo suele bastar para mantener el hilo.

¿Cómo diseñar un hero pensado primero para el móvil?

Una gran parte de las visitas llega desde el teléfono, y allí el espacio visible es mucho menor. Diseña primero la versión móvil y después amplíala al escritorio, no al revés. Conviene revisar cómo se comporta una landing en móvil con conexión 4G antes de dar por bueno el diseño.

• Prioriza lo esencial. En pantalla pequeña caben el titular, el subtítulo corto y el botón. Si la imagen empuja el botón fuera de la vista, redúcela o muévela debajo.
• Texto legible sin hacer zoom. Usa un tamaño de letra cómodo y un contraste suficiente; un titular demasiado largo se parte en cinco líneas y pierde fuerza.
• Zona táctil cómoda. El botón debe ser lo bastante grande y estar separado de otros elementos para pulsarlo con el pulgar sin errores.

¿Cómo afecta la velocidad de carga al hero?

El hero es lo primero que se carga, así que su peso marca la primera impresión. Una imagen enorme o un vídeo que arranca de forma lenta deja al visitante mirando una pantalla en blanco, y muchos no esperan. Aplicar buenas prácticas de optimización de la velocidad web en esta zona rinde más que en cualquier otra parte de la página.

Comprime la imagen principal y usa formatos modernos como WebP, define su tamaño para que la página no se desplace al cargar y evita sliders animados o vídeos de fondo pesados. Es recomendable que el elemento visible más grande, que Google mide como LCP dentro de las Core Web Vitals, aparezca en menos de dos segundos y medio. Si dudas entre una imagen espectacular y una rápida, quédate con la rápida.

¿Cómo revisar tu sección hero paso a paso?

Usa esta lista cada vez que crees una landing o quieras mejorar una existente. No lleva más que unos minutos.

1. Enseña tu página a alguien que no la conozca durante cinco segundos y pídele que te diga qué ofreces y para quién.
2. Comprueba que el titular promete un resultado concreto y que el subtítulo lo explica sin repetirlo.
3. Verifica que hay un único botón principal, visible sin hacer scroll en móvil y en escritorio.
4. Confirma que el hero repite la promesa del anuncio o del enlace desde el que llega el visitante.
5. Mide la carga: reduce el peso de la imagen principal y vuelve a probar hasta que el hero aparezca casi al instante.

Con Atomicat puedes montar un hero con titular, botón, imagen y señal de confianza a partir de bloques ya optimizados para móvil, y cambiar los textos por campaña sin tocar código.

Preguntas frecuentes

¿Qué es la sección hero de una página web?

Es el bloque de cabecera que se ve al cargar la página, sin hacer scroll. Suele incluir un titular, un subtítulo, un botón de acción y una imagen o vídeo, y su función es captar la atención y orientar al visitante.

¿Qué debe llevar la sección hero de una landing?

Un titular claro, un subtítulo que lo complete, un único botón de acción, una prueba visual del producto y una señal de confianza breve. Todo ello debe coincidir con la promesa del anuncio que trae al visitante.

¿Qué diferencia hay entre hero y above the fold?

Se refieren casi a lo mismo. «Above the fold» es la zona visible sin desplazarse y el hero es el bloque de diseño que la ocupa, aunque en pantallas pequeñas lo visible varía según el dispositivo.

¿Cuánto debe pesar el hero para cargar rápido?

No hay una cifra única, pero conviene comprimir la imagen principal, usar formatos modernos y evitar vídeos de fondo pesados. El objetivo es que el elemento más grande aparezca en menos de dos segundos y medio.

¿Cómo sé si mi hero funciona?

Observa si el visitante hace scroll, cuántos clics recibe el botón principal y cuántos abandonan nada más entrar. Después prueba una versión distinta del titular o de la imagen y compara los resultados.

Gana los primeros segundos y el resto vendrá después

Todo lo que escribas debajo del hero solo tiene valor si el visitante llega hasta allí. Un titular claro, un botón único, una prueba visual real y una carga rápida convierten la cabecera en el mejor argumento de tu página, y es la parte donde cualquier mejora se nota antes.

Comienza tu prueba gratis y crea una landing con un hero que retenga desde el primer segundo, sin escribir una sola línea de código.