La sección hero es lo primero que ve alguien al entrar en tu web: el bloque superior con titular, subtítulo, imagen y botón de acción. Tienes entre 3 y 5 segundos para explicar qué haces, para quién y por qué deberían quedarse. Si ese mensaje es genérico o confuso, el visitante se va antes de ver tus servicios, casos de éxito o formulario de contacto.
Si ya trabajaste el menú de navegación, los CTA y la página de inicio que convierte, el hero es el punto de partida: concentra tu propuesta de valor en un solo vistazo.
Qué es la sección hero y por qué decide tu conversión
El hero (también llamado above the fold) es la zona visible sin hacer scroll en la pantalla inicial. En webs de empresa suele incluir:
- Titular (H1): el beneficio principal en lenguaje claro.
- Subtítulo: amplía la promesa y reduce la primera objeción.
- CTA principal: una acción concreta (pedir presupuesto, reservar llamada, ver servicios).
- Imagen o vídeo: muestra el resultado, el equipo o el producto en contexto.
- Prueba social breve: logos de clientes, valoración o cifra relevante.
En estudios de comportamiento web, más del 80 % de la atención inicial se concentra en esta zona. No es decoración: es tu carta de presentación comercial.
Anatomía de un hero que convierte
| Elemento | Función | Buena práctica |
|---|---|---|
| Titular | Comunicar el beneficio principal | 8-12 palabras, sin jerga interna |
| Subtítulo | Contextualizar y generar confianza | 1-2 frases con audiencia y resultado |
| CTA principal | Guiar la siguiente acción | Verbo + beneficio («Solicitar presupuesto gratuito») |
| Imagen | Humanizar y demostrar | Fotografía real, no stock genérico |
| Prueba social | Reducir el riesgo percibido | Logos, reseñas o cifra verificable |
La regla de oro: un mensaje, un CTA principal. Si pides al visitante que llame, escriba y descargue un PDF a la vez, no hará ninguna de las tres cosas.
Errores habituales en webs de empresa
- Titular corporativo vacío: «Bienvenidos a nuestra web» no dice nada sobre el problema que resuelves.
- Carrusel de mensajes rotativos: nadie espera a leer el tercer slide; diluye el mensaje.
- Imagen decorativa sin contexto: un paisaje bonito no vende servicios de consultoría.
- CTA genérico: «Más información» o «Enviar» no comunican qué obtiene el usuario.
- Hero demasiado alto en móvil: si el botón queda fuera de pantalla, pierdes conversiones.
- Texto sobre imagen ilegible: contraste insuficiente entre fondo y titular.
Cómo escribir un titular que retenga al visitante
Usa la fórmula resultado + audiencia + diferenciador cuando sea posible. Ejemplos adaptables:
- «Webs a medida para pymes que necesitan captar clientes desde el primer mes»
- «Reformas integrales en Barcelona con presupuesto cerrado y plazos garantizados»
- «Asesoría fiscal para autónomos que quieren dejar de perder horas con papeles»
Si el copywriting de tu web ya define tu tono de marca, el hero debe ser su versión más condensada: misma voz, máxima claridad.
Diseño y jerarquía visual
El ojo recorre la página en patrón F o Z. Coloca el titular donde empieza la lectura (arriba a la izquierda en escritorio), el CTA en el punto final del recorrido y la imagen como apoyo, no como distracción.
- Contraste: ratio mínimo 4,5:1 entre texto y fondo (WCAG AA).
- Tamaño del titular: entre 32 y 48 px en escritorio; legible sin zoom en móvil.
- Espacio en blanco: deja respirar al mensaje; un hero saturado abruma.
- Coherencia con el resto de la web: colores y tipografía alineados con tu identidad de marca.
Hero en móvil: prioridad absoluta
Más del 60 % del tráfico de webs de empresa llega desde el teléfono. En móvil, el hero debe mostrar titular, subtítulo y CTA sin scroll. Comprueba en dispositivos reales, no solo en el inspector del navegador.
- Reduce el texto del subtítulo a una frase.
- Usa un botón de ancho completo o casi completo.
- Evita vídeos de fondo que consuman datos y ralenticen la carga.
- Comprueba que el menú hamburguesa no tape el titular.
Cómo medir si tu hero funciona
Configura estos indicadores en tu herramienta de analítica:
- Tasa de rebote de la home: si supera el 60 %, revisa el mensaje del hero.
- Clics en el CTA principal: compáralos con visitas a la página.
- Scroll depth: si nadie baja del 25 %, el hero no engancha.
- Mapas de calor: herramientas como Hotjar o Clarity muestran dónde hace clic la gente.
Haz pruebas A/B con un solo cambio cada vez: titular, color del botón o imagen. Así sabrás qué mejora la conversión de verdad.
Checklist antes de publicar tu nuevo hero
- ¿El titular comunica un beneficio concreto en menos de 5 segundos?
- ¿Hay un solo CTA principal visible sin scroll en móvil?
- ¿La imagen refuerza el mensaje y no es stock genérico?
- ¿El contraste de texto cumple accesibilidad?
- ¿El hero carga en menos de 2,5 segundos (LCP)?
- ¿Incluye prueba social breve (logos, cifra o testimonio)?
Conclusión
La sección hero no es un banner decorativo: es el argumento comercial más importante de tu web. Un mensaje claro, un CTA específico y una imagen que demuestre resultado pueden marcar la diferencia entre un visitante que se va y uno que solicita presupuesto.
Si quieres revisar el hero de tu web con criterios de conversión, UX y rendimiento, en aatsoft analizamos la página de inicio y proponemos mejoras concretas adaptadas a tu sector.
