Un visitante llega a tu landing page desde un anuncio de Google Ads. Le costó entre US$0.21 y US$0.47 a tu negocio en Lima. Y en los próximos 5 segundos va a decidir si se queda o cierra la pestaña. Esos 5 segundos ocurren en la hero section: la primera sección visible de tu landing page, lo que aparece antes de hacer scroll.
En Perú, con 18.7 millones de compradores online y el 83% navegando desde celular, esos primeros 5 segundos son tu oportunidad más valiosa (y más corta) para captar la atención. La hero section no es solo un banner bonito con tu logo. Es donde tu visitante decide si vale la pena seguir leyendo o volver a Google a buscar otra opción.
Tabla de Contenidos
- 1 ¿Qué es la hero section y por qué es tan importante?
- 2 El headline: la frase que detiene el scroll
- 3 5 fórmulas para escribir headlines que convierten
- 4 El subheadline: amplía sin aburrir
- 5 Imagen vs video de fondo: cuál elegir
- 6 El CTA en la hero: visible sin hacer scroll
- 7 Ejemplos de hero sections que convierten
- 8 Preguntas frecuentes sobre la hero section de una landing page
¿Qué es la hero section y por qué es tan importante?
La hero section (también llamada banner principal o sección hero) es el bloque de contenido que ocupa la pantalla completa del visitante cuando llega a tu landing page. Es lo que ve sin hacer scroll, lo que técnicamente se llama «above the fold».
Según estudios de comportamiento web, el 55% de los visitantes pasa menos de 15 segundos en una página. Y la decisión de quedarse o irse se toma en los primeros 3-5 segundos basándose exclusivamente en lo que ven en la hero section.
Tu hero section necesita responder tres preguntas instantáneamente: ¿Qué ofreces? (headline), ¿Por qué me importa? (subheadline con beneficio) y ¿Qué hago ahora? (CTA visible). Si alguna de estas tres falta o no es clara, pierdes al visitante.
Para entender cómo la hero encaja en el contexto completo de tu página, revisa los 12 elementos esenciales de una landing page. Aquí nos enfocamos exclusivamente en hacer que esos primeros 5 segundos cuenten.
El headline: la frase que detiene el scroll
Tu headline (titular principal) es el elemento más importante de tu hero section. Si no captura la atención, nada más importa. No importa qué tan buena sea tu imagen de fondo, tu animación o tu diseño: si el titular no conecta, el visitante se va.
Un buen headline para landing page cumple tres criterios: habla del beneficio para el visitante (no de tu empresa), es específico (con números, plazos o resultados concretos) y se entiende en menos de 3 segundos.
Malos headlines que vemos en landing pages de negocios peruanos: «Bienvenido a nuestra empresa» (no dice nada), «Somos líderes en el mercado» (genérico), «Soluciones integrales para tu negocio» (vacío), «Comprometidos con la excelencia» (frase de relleno).
Buenos headlines: «Duplica tus leads en Lima con una landing page que sí convierte», «Tu contabilidad al día por S/350/mes. Nosotros nos encargamos de la SUNAT», «Envíos en Lima en 24 horas. Tu pedido mañana en tu puerta».
La diferencia es clara: los buenos headlines le dicen al visitante qué gana él, no qué haces tú.
5 fórmulas para escribir headlines que convierten
| Fórmula | Estructura | Ejemplo para negocio peruano |
|---|---|---|
| Beneficio + especificidad | [Resultado concreto] + [para quién] + [en cuánto tiempo/precio] | «Landing pages profesionales desde S/950. Lista en 7 días» |
| Pregunta de dolor | ¿[Problema que tu cliente tiene]? + [Solución implícita] | «¿Tu página web recibe visitas pero no genera clientes?» |
| Número + resultado | [Número] + [beneficio] + [contexto] | «+950 negocios en Perú ya captan clientes con landing pages» |
| Cómo + resultado | Cómo [lograr resultado] + [sin obstáculo] | «Cómo conseguir clientes en Lima sin depender del boca a boca» |
| Directo al grano | [Servicio/producto] + [beneficio principal] + [diferenciador] | «Diseño web en Lima. Tu página profesional en 7 días. Desde S/950» |
La fórmula que mejor funciona depende de tu audiencia. Si tu tráfico viene de Google Ads (búsqueda con intención), la fórmula «Directo al grano» funciona porque el visitante ya sabe qué busca. Si viene de Facebook/Instagram (interrupción), la «Pregunta de dolor» funciona porque necesitas captar atención en un contexto donde no te estaban buscando.
El subheadline: amplía sin aburrir
Debajo de tu headline va el subheadline: una oración de 15-25 palabras que amplía la propuesta de valor. Si el headline es el gancho, el subheadline es la explicación rápida de por qué vale la pena quedarse.
El subheadline funciona bien cuando responde la pregunta que el headline deja abierta. Si tu headline es «¿Tu página web recibe visitas pero no genera clientes?», tu subheadline puede ser «Diseñamos landing pages enfocadas en conversión para negocios peruanos. Planes desde S/950 con formulario, WhatsApp y Analytics incluido».
No repitas lo mismo que dice el headline con otras palabras. No agregues frases vacías como «Con nosotros, tu negocio crecerá» o «Ofrecemos soluciones de primer nivel». Usa el subheadline para dar un dato concreto que el headline no tenía espacio para incluir: precio, plazo, método, garantía.
Para profundizar en cómo comunicar tu propuesta en esos primeros segundos, revisa nuestra guía de propuesta de valor en 5 segundos.
Imagen vs video de fondo: cuál elegir
La hero section generalmente tiene un fondo visual: puede ser una imagen, un video o un color sólido/gradiente.
Imagen de fondo: Es la opción más común y la más segura. Funciona cuando tienes una foto de alta calidad que comunica tu servicio (tu equipo trabajando, tu producto en uso, tu espacio de trabajo). La imagen debe estar comprimida (menos de 200KB) y tener una superposición de color oscuro semitransparente (overlay) para que el texto se lea bien encima.
Video de fondo: Más impactante pero con riesgos. En celular (83% de tu tráfico peruano), los videos de fondo cargan lento, consumen datos del plan del visitante y a veces ni se reproducen porque el navegador los bloquea. Si usas video, que sea corto (10-15 segundos en loop), sin audio automático, comprimido y con una imagen de respaldo para cuando el video no cargue.
Color sólido o gradiente: La opción minimalista. Funciona para SaaS, tech y marcas que quieren un look limpio y moderno. Un fondo oscuro (azul marino, negro) con texto blanco y un botón de color contrastante es un clásico que convierte bien.
Mi recomendación para MYPEs en Perú: usa imagen con overlay. Es la combinación que mejor equilibra impacto visual, velocidad de carga y compatibilidad con celulares. Reserva el video para marcas que ya tienen producción audiovisual profesional y hosting rápido.
El CTA en la hero: visible sin hacer scroll
Tu primer botón CTA (call to action) tiene que ser visible en la hero section. Sin excepciones. Si el visitante tiene que hacer scroll para encontrar cómo contactarte, ya perdiste a los más impacientes (que son la mayoría).
El CTA en la hero puede ser un botón que lleve al formulario de la página, un botón directo de WhatsApp (que en Perú funciona mejor que cualquier formulario), o un mini formulario integrado en la hero (nombre + teléfono + botón «Enviar»).
El texto del botón importa. «Enviar» o «Click aquí» son genéricos y no comunican valor. Usa textos que le digan al visitante qué recibe: «Quiero mi cotización gratis», «Hablar con un asesor ahora», «Ver precios y planes», «Agendar demo gratuita».
El color del botón debe contrastar con el fondo de la hero. Si tu hero tiene overlay oscuro, un botón naranja, rojo o verde brillante va a destacar. En KOM usamos nuestro rojo #FF4B36 como color de CTA porque contrasta con la mayoría de fondos y transmite acción.
Un detalle para celular: el botón CTA en la hero móvil debe ocupar todo el ancho de la pantalla. Un botón chiquito centrado es difícil de tocar con el pulgar. Para más sobre cómo optimizar el above the fold completo, revisa nuestra guía de above the fold en landing pages.
Ejemplos de hero sections que convierten
Para agencia de marketing digital: Fondo: foto del equipo trabajando con overlay azul oscuro. Headline: «Tu negocio en Lima necesita clientes, no seguidores». Subheadline: «Diseñamos landing pages y campañas de Google Ads que generan leads reales. +950 clientes confían en nosotros». CTA: botón rojo «Quiero mi diagnóstico gratis».
Para restaurante con delivery: Fondo: foto del plato estrella con overlay oscuro suave. Headline: «El mejor ceviche de Miraflores, en tu mesa en 40 minutos». Subheadline: «Pide por WhatsApp y recibe tu pedido fresco. Delivery gratis dentro de Miraflores». CTA: botón verde WhatsApp «Pedir ahora».
Para academia de inglés: Fondo: color sólido azul con gradiente. Headline: «De traductor de Google a pensar en inglés. En 6 meses». Subheadline: «Clases en vivo con profesores nativos. Horarios flexibles. Desde S/450/mes». CTA: botón naranja «Reservar clase de prueba gratis».
Para servicio de contabilidad: Fondo: imagen de oficina moderna con overlay. Headline: «¿Cansado de perder horas con la SUNAT?». Subheadline: «Nos encargamos de tus declaraciones, planillas y PDTs. Desde S/350/mes. Tú concéntrate en vender». CTA: botón «Agendar consulta gratis por WhatsApp».
En todos los ejemplos, nota el patrón: headline que habla del beneficio del cliente, subheadline que da un dato concreto (precio, plazo, método), CTA que dice exactamente qué va a pasar al hacer clic. Sin «Bienvenido a…» ni «Somos expertos en…».
Preguntas frecuentes sobre la hero section de una landing page
¿Qué es exactamente la hero section?
Es la primera sección visible de tu landing page, lo que el visitante ve sin hacer scroll. Incluye el titular principal (headline), un subtítulo (subheadline), una imagen o video de fondo y el primer botón de acción (CTA). Es la sección más importante porque determina si el visitante se queda o se va.
¿Es mejor poner imagen o video en el fondo de la hero?
Para la mayoría de negocios peruanos, imagen con overlay oscuro es la mejor opción. Carga más rápido (crítico para el 83% de tráfico móvil), es compatible con todos los dispositivos y es más fácil de implementar. El video funciona bien solo si tienes producción profesional y hosting rápido.
¿Cuántas palabras debe tener mi headline?
Entre 6 y 12 palabras es el rango ideal. Suficiente para comunicar un beneficio concreto, pero no tanto como para que el visitante tenga que detenerse a leer. En celular, un headline de más de 15 palabras ocupa demasiado espacio vertical y empuja el CTA fuera de la pantalla.
¿Debo poner el CTA dentro de la hero section?
Sí, siempre. Tu primer CTA debe ser visible sin hacer scroll. El visitante que ya está convencido (tráfico caliente) necesita poder actuar inmediatamente. Si lo obligas a scrollear hasta el fondo para encontrar el formulario, pierdes conversiones.
¿Puedo poner un formulario completo en la hero section?
Sí, pero solo si es corto (2-3 campos). Un formulario de nombre + teléfono en la hero funciona bien para servicios donde la consulta o cotización es el primer paso. Formularios largos (más de 3 campos) son mejor ubicarlos en una sección dedicada más abajo en la página.
Tu hero section tiene 5 segundos para convencer. Cinco. No los desperdicies con «Bienvenido a…» o con fotos genéricas de stock. Usa ese espacio para decir exactamente qué ofreces, por qué le importa a tu visitante y qué debe hacer ahora. Si esas tres cosas están claras, el visitante va a seguir leyendo.
¿Quieres una hero section que capture la atención y convierta desde el primer segundo? En KOM diseñamos landing pages con hero sections probadas para el mercado peruano. Planes desde S/950. Escríbenos por WhatsApp y te mostramos ejemplos.
