Primera impresión que retiene
En pocos segundos la persona decide si se queda. Un hero claro responde «sí, es aquí» de inmediato y baja el rebote justo en el momento más frágil de la visita.
Módulo del sitio · Hero
El Hero: la primera impresión
El primer bloque grande de cada página, donde vive el H1 con la promesa principal. Pequeña ventana, gran responsabilidad: en segundos decide si la persona se queda o se va.
No es una ficha técnica más: es el módulo entero, abierto y explicado. Qué problema resuelve y por qué se gana su lugar, de qué piezas se compone, dónde encaja en el layout y cómo está construido —el recorrido completo, del criterio de diseño a la implementación.
Con una diferencia importante respecto al topbar y al header: el contenido del hero no es global, es de cada página. La promesa cambia de una página a otra, así que se pasa por props —no sale de site.ts—. Lo único que sí viene de la fuente única es el enlace de la acción, armado con waUrl().
Definición
¿Qué es un hero?
El bloque de apertura: el primer golpe de vista de una página, con el título principal (H1), un subtítulo y, a veces, una imagen o una acción.
El hero (o portada de sección) es el primer bloque grande que se ve al entrar a una página, antes de cualquier contenido. Reúne lo esencial: el título principal —el único H1—, una frase que lo amplía y, según el caso, una imagen, un apoyo o un botón. Es la respuesta inmediata a la pregunta que todo visitante trae: «¿es esto lo que buscaba?».
No es decoración ni una portada bonita por serlo: es un puesto de trabajo con una sola misión —enganchar en segundos y orientar hacia el siguiente paso—. Por eso prioriza la claridad sobre el adorno: un mensaje, una jerarquía limpia y, como mucho, una acción. Piensa en la portada de un periódico: el titular se entiende de lejos y te dice si quieres seguir leyendo.
Función e importancia
¿Para qué sirve?
Hace tres trabajos a la vez: causar la primera impresión, fijar la jerarquía (el H1) y empujar a una acción.
Su función es ganar los primeros segundos. Mientras el resto de la página desarrolla y convence, el hero tiene que lograr una sola cosa antes que nada: que la persona reconozca que está en el lugar correcto. Si ese «sí» no ocurre rápido, no hay segunda oportunidad —se va antes de ver el resto—.
Y ahí está su importancia: es el bloque más visto de toda la página y el que más pesa en la decisión de quedarse. Además, su H1 es la señal semántica más fuerte para el buscador. Un hero confuso cuesta visitas de inmediato; uno claro las retiene y las encauza. Es, a la vez, la cara de la página y su titular.
Jerarquía y SEO
El H1 único del hero le dice al buscador —y a la persona— de qué trata la página. Es la señal semántica más fuerte del documento; por eso va una sola vez y carga la palabra clave.
Foco en una acción
Un mensaje y una acción principal evitan la parálisis por exceso de opciones. El hero encauza la atención hacia el siguiente paso, en vez de dispersarla.
Anatomía
¿Qué va en el hero?
Cuatro piezas: un rótulo de contexto, el título-promesa (H1), un subtítulo que amplía y una columna de apoyo o acción.
Cada pieza cumple un papel claro. El badge ubica; el H1 promete y manda la jerarquía; el subtítulo concreta esa promesa; y la columna derecha sostiene —con contexto o con un botón—. Ni una sobra; juntas, dicen en un vistazo qué es la página y qué hacer.
Abajo lo ves montado a escala. Cada punto numerado se desglosa en su tarjeta —qué resuelve y de qué prop del componente sale—. A diferencia del topbar o el header, aquí los valores no salen de site.ts: son propios de cada página y se pasan por props.
1Plantilla Astro
2Lanza tu sitio profesional
3Contenido en Markdown, diseño listo y velocidad de fábrica.
4
Badge (eyebrow)
El rótulo corto sobre el título: ubica a la persona («Categoría», «Servicio», «Plantilla Astro») antes de leer la promesa. Es opcional, pero orienta de un vistazo.
Dato prop badge
Título (H1) + acento
La promesa principal de la página, y el ÚNICO H1. El acento resalta la palabra clave dentro del título. Es la señal semántica más fuerte para la persona y para el buscador.
Dato props title · accent
Subtítulo
Una o dos frases que amplían el H1 —beneficio o contexto—, sin repetirlo. Convierte la promesa en algo concreto y creíble.
Dato prop subtitle
Apoyo o acción
La columna derecha: dos párrafos de contexto (descRight) o las llamadas a la acción (ctas). En las páginas de esta serie va sin CTAs; en una landing, aquí va el botón principal.
Dato descRight[] · ctas[] · waUrl()
Variantes
Otros diseños y aplicaciones
El de esta plantilla es un hero a dos columnas, pero la portada adopta muchas formas según el objetivo de la página.
No hay un único hero: hay un primer bloque que cada tipo de página adapta a su meta. Una landing centra el mensaje sobre una foto; una tienda parte la pantalla para mostrar el producto; una herramienta mete un formulario para convertir ya. Mismo lugar, intención distinta.
Abajo, seis variantes reales —cada una con su réplica en vivo y el tipo de proyecto donde brilla—. Sirven para elegir la que encaja con tu objetivo y para ver cómo el mismo molde cambia de cara sin perder su función.
- Plantilla Tu sitio profesional Markdown + diseño listo
- Vive la experiencia Reservar
- El nuevo modelo Comprar
- Empieza gratis Sin tarjeta
- Diseño con criterio Ver trabajo
- Marca en movimiento video en bucle
Responsive y móvil
Cómo se comporta en el teléfono
En móvil el hero no es «el de escritorio encogido»: se apila, el título escala y la acción se hace cómoda de tocar.
La pantalla del teléfono cambia las reglas. Las dos columnas se apilan —primero el mensaje, después el apoyo o la imagen— y el título, que en escritorio luce grande, tiene que escalar para no romperse ni comerse la pantalla. La herramienta clave es la tipografía fluida: que el H1 crezca y encoja solo.
Y manda la ergonomía: la acción principal se vuelve cómoda de tocar —ancho completo, objetivo amplio— y la imagen se controla para que no empuje el texto ni se deforme. Abajo, cuatro patrones, cada uno con su vista en el teléfono y una receta comentada lista para copiar.
Plantilla Tu sitio profesional Markdown + diseño listo
1 · De dos columnas a una
Las columnas de escritorio se apilan en el teléfono: primero el mensaje (badge, H1, subtítulo) y debajo el apoyo o la imagen. Un orden pensado: lo que engancha va primero.
/* HERO MÓVIL · de dos columnas a una
En escritorio el hero es «texto | apoyo»; en el teléfono
se apila: primero el mensaje, luego el apoyo o la imagen. */
.hero__grid {
display: grid;
grid-template-columns: 1.1fr .9fr; /* texto | apoyo */
gap: 2rem; align-items: center;
}
@media (max-width: 900px) {
.hero__grid { grid-template-columns: 1fr; } /* se apila */
.hero__media { order: 2; } /* el apoyo, debajo */
} Lanza tu sitio profesional clamp() ajusta el tamaño
2 · Título fluido con clamp()
El H1 escala solo entre un mínimo y un máximo con clamp(): ni gigante en el teléfono ni diminuto en el escritorio, sin escribir un tamaño por cada breakpoint.
/* TÍTULO FLUIDO · el H1 escala con la pantalla
clamp(mínimo, preferido, máximo): nunca demasiado grande
en el teléfono ni diminuto en el escritorio. */
.hero__title {
font-size: clamp(1.9rem, 6vw, 3.5rem);
line-height: 1.08;
text-wrap: balance; /* reparte las líneas, evita una palabra suelta */
} Empieza hoy Respuesta inmediata Cotizar por WhatsApp Ver catálogo
3 · La acción, a ancho completo
En el teléfono la acción principal ocupa todo el ancho y tiene un objetivo táctil amplio (≈ 48 px); la secundaria queda debajo, clara pero sin competir.
/* CTA EN MÓVIL · ancho completo y cómodo
En el teléfono, la acción principal ocupa todo el ancho
y respeta el objetivo táctil mínimo (≈ 48px). */
@media (max-width: 600px) {
.hero__cta { display: flex; flex-direction: column; gap: .6rem; }
.hero__cta a {
width: 100%; min-height: 48px;
display: grid; place-items: center;
}
} Cobertura en tu zona imagen que no empuja el texto
4 · Imagen con altura controlada
La foto se sirve con object-fit: cover y una altura acotada para que no deforme ni desplace el contenido; con <picture> se da un recorte propio al móvil.
<!-- IMAGEN DEL HERO · altura controlada + art direction
La foto no debe empujar el texto ni deformarse. Con
<picture> sirves un recorte distinto en el teléfono. -->
<picture>
<source media="(max-width: 600px)" srcset="/hero-movil.avif" />
<img class="hero__img" src="/hero.avif" alt="…"
width="1200" height="800" fetchpriority="high" />
</picture>
<style>
.hero__img {
width: 100%;
height: clamp(200px, 42vh, 420px);
object-fit: cover; /* llena el área sin deformar */
border-radius: 12px;
}
</style>Posición
¿Dónde se coloca?
El primer bloque tras el topbar y el header: la parte alta de la página, «above the fold». Una sola vez por página.
Va arriba del todo del contenido, justo después del chrome (topbar + header). Es lo primero que se ve sin hacer scroll —lo que en la jerga se llama «above the fold»—, y por eso carga la promesa: si el visitante no baja, el hero es lo único que leyó. Debe bastarse solo.
Y va una sola vez por página, porque solo hay un H1. Las páginas internas (productos, servicios, blog) tienen su propio hero, más sobrio; la home, el más vistoso. En esta plantilla, el componente Hero se reutiliza en todas: cambia el contenido por props, no el molde.
Implementación
Cómo está construido
Un componente reutilizable cuyo contenido entra por props; lo único que sale de la fuente única es el enlace de la acción.
El hero vive en Hero.astro y se reutiliza en cada página. A diferencia del topbar o el header, no lee site.ts: su contenido —badge, título, acento, subtítulo, apoyo— se pasa por props, porque la promesa es distinta en cada página. El componente pone el diseño (el fondo oscuro con gradiente y un brillo radial, la rejilla de dos columnas, la tipografía); la página pone el mensaje.
La excepción es la acción: cuando el hero lleva CTAs, el enlace de WhatsApp se arma con waUrl() y el mensaje sale de WA_MESSAGES —nunca un wa.me a mano (regla D4)—. Accesibilidad de fábrica: un solo H1, aria-label en el bloque, contraste cuidado sobre el fondo oscuro. Y la regla del proyecto: en las páginas de la serie /modulos, el hero se usa SIN CTAs.
En concreto: el componente (src/components/Hero.astro) define la
estructura y el estilo; la página le pasa el contenido por props —
badge, title, accent, subtitle,
descRight y, si aplica, ctas—. El title + accent
forman el único H1 de la página.
El responsive apila las dos columnas en < 900px, el título usa
tamaño fluido con clamp() y las acciones pasan a ancho completo en el teléfono. Así
el mismo hero se ve grande en escritorio y cómodo en móvil, sin un molde distinto para cada uno.
Buenas prácticas
Qué hacer y qué evitar
La diferencia entre un hero que engancha y uno que confunde está en unos pocos hábitos.
Ninguno de estos hábitos es capricho: salen de observar qué retiene a la persona en los primeros segundos. Un hero que funciona dice una cosa con claridad y ofrece un paso; uno que falla amontona mensajes, multiplica botones o esconde el texto tras una imagen.
La ventaja es que son pocos y fáciles de sostener: un H1, un subtítulo que amplíe, una acción y buen contraste. Abajo, lo que conviene y lo que conviene evitar, enfrentados.
Sí conviene
- Un solo H1 por página, con la promesa principal: claridad antes que ingenio.
- Subtítulo que amplíe el H1 en 1-2 frases (beneficio/contexto), sin repetirlo.
- Una o dos acciones como máximo; destaca la principal y deja la otra secundaria.
- En las páginas de la serie /modulos, el hero va SIN CTAs (regla del proyecto).
- Cuida el contraste del texto sobre el fondo (AA): legible antes que bonito.
Mejor evita
- No pongas dos H1 ni varios mensajes compitiendo por la atención.
- No lo llenes de botones: más opciones = más parálisis, menos clics.
- No uses imágenes que tapen el texto o bajen el contraste.
- No escribas el wa.me a mano en las CTAs: usa waUrl() (regla D4).
- No conviertas el H1 en imagen: pierdes SEO y accesibilidad.