# Diseño de la sección hero: la primera pantalla de tu web

[Canonical HTML page](https://gradiently.design/es/guide/hero-section-design)

Los visitantes deciden si se quedan antes de hacer scroll. El hero es donde lo deciden, así que cada palabra y cada píxel deben ganarse su sitio.

## The short version

- Una sección hero es la primera pantalla completa de una web, y debe decir qué es el producto, para quién es y qué hacer a continuación.
- Sus piezas básicas son un titular, una línea de apoyo, una llamada a la acción principal y un visual que muestre el producto o cree el ambiente.
- Los titulares concretos que nombran un resultado funcionan mejor que los eslóganes que podrían ser de cualquier empresa.
- Un hero necesita una acción principal; un segundo enlace más discreto está bien, pero más opciones la diluyen.
- Diseña a propósito la versión para móvil, porque muchos visitantes ven el hero por primera vez en una pantalla estrecha.

Un buen **diseño de sección hero** responde tres preguntas antes de que nadie haga scroll: qué es esto, si es para mí y qué hago ahora. El hero es la primera pantalla de tu web, normalmente un titular, una frase de apoyo, un único botón principal y un visual. Todo lo demás (logotipos, insignias, un segundo botón, un carrusel) tiene que justificar el espacio que les quita a esos cuatro. Esta guía trata las palabras, la composición y la construcción; para el fondo en sí, consulta [fondos para el hero de una web](https://gradiently.design/es/guide/website-hero-background).

## Qué va en una sección hero

| Pieza | Función | Extensión habitual |
| --- | --- | --- |
| Antetítulo (opcional) | Contexto o una categoría: «Para cafeterías independientes» | De 2 a 5 palabras |
| Titular | La promesa, con las palabras del lector | De 4 a 10 palabras |
| Línea de apoyo | Cómo funciona o qué lo hace distinto | Una frase, de 15 a 25 palabras |
| Botón principal | El único paso siguiente | De 2 a 4 palabras |
| Enlace secundario (opcional) | Una vía de menor compromiso: «Ver cómo funciona» | De 2 a 4 palabras |
| Visual | Mostrar el producto, el resultado o la sensación | Una imagen, un vídeo en bucle o un fondo |

Si una pieza no ayuda al visitante a decidir si se queda, va más abajo en la página.

## Cómo escribir el titular del hero

El titular es la frase más difícil de tu web. Los eslóganes ingeniosos fallan porque podrían ser de cualquiera. Uno bueno nombra para quién es, qué se consigue o qué problema elimina, con las palabras que usan de verdad tus clientes. Léelo en voz alta junto a la página de inicio de un competidor: si pudieras intercambiarlos sin que nadie lo notara, no es lo bastante concreto.

| Vago | Concreto |
| --- | --- |
| Impulsamos tu crecimiento | Contabilidad para freelances, hecha cada viernes |
| El futuro del café | Café de origen único, tostado el lunes, en tu puerta el jueves |
| Diseño fácil | Posts para redes que se parecen a tu marca, en todos los tamaños |
| Tu camino hacia el bienestar empieza aquí | Pilates en grupos reducidos en Leeds, seis personas por clase |
| Soluciones innovadoras para equipos modernos | Calendarios compartidos para clínicas que odian las citas duplicadas |

Las versiones concretas son más largas, y no pasa nada. En un titular, la claridad gana a la brevedad.

Reserva la línea de apoyo para el cómo o la prueba, no para repetir lo mismo. Para más sobre redacción, ayudan [escribir textos para visuales](https://gradiently.design/es/guide/writing-copy-for-visuals) y [jerarquía visual](https://gradiently.design/es/guide/visual-hierarchy).

## Tres composiciones de hero que funcionan

- **Centrada.** Titular, línea y botón apilados en el centro sobre un fondo. Fuerte para marcas, lanzamientos y productos que son más una sensación que una pantalla.
- **Dividida.** Palabras a la izquierda, imagen o captura del producto a la derecha. Ideal cuando ver el producto es el argumento: apps, productos físicos, comida.
- **Imagen o vídeo a sangre.** Una foto o un bucle llena la pantalla con las palabras sobre una zona tranquila. Va bien para hoteles, restaurantes, eventos y portfolios, si la legibilidad se resuelve bien.

Un hero web centrado para un tostador de café con titular y línea de apoyo sobre un degradado cálido

Centrada: las palabras lo sostienen y el fondo crea el ambiente.

Un hero web dividido para un software de agenda de clínicas con el texto a la izquierda y espacio para una imagen del producto

Dividida: palabras a un lado y espacio al otro para una captura del producto.

## La llamada a la acción

Un botón principal, visualmente el elemento más fuerte después del titular. Etiquétalo con lo que ocurre a continuación, no con un verbo genérico: «Empezar la prueba gratuita», «Reservar mesa», «Ver la carta». Si añades una opción secundaria, que sea un enlace de texto más discreto para que nunca compitan.

### Evita

- Tres botones con el mismo peso
- «Enviar», «Más información» o «Haz clic aquí»
- Un botón del mismo color que el fondo
- El botón por debajo del pliegue en un móvil
- Un carrusel automático con mensajes distintos

### Haz

- Un botón y un enlace más discreto
- Una etiqueta que dice qué ocurre a continuación
- Un color de botón que no se usa en ningún otro sitio de la pantalla
- Titular y botón visibles en un móvil de 390 px de ancho
- Un mensaje, bien dicho

## Fondos del hero y legibilidad

El fondo es la mitad de la impresión y el motivo más común por el que falla un hero. Las fotos recargadas y los degradados brillantes pelean con el titular, y una capa oscura sobre todo aplana el ambiente. Planifica una zona tranquila detrás de las palabras, mantén lejos de ellas el detalle más recargado y comprueba el [contraste](https://gradiently.design/es/guide/color-contrast-accessibility) en todos los anchos de pantalla, porque la zona que hay detrás del texto se mueve cuando la composición se reorganiza.

Aquí es donde un Mark de Gradiently resulta útil: su zona más tranquila y con mejor contraste se coloca detrás de tus palabras y el color del texto se elige de su propia paleta, así que el titular se lee a 1920×1080 y en un móvil sin cajas ni sombras. Para enfoques con CSS, consulta [superposición de degradado](https://gradiently.design/es/guide/gradient-overlay) y [texto sobre un degradado](https://gradiently.design/es/guide/text-on-gradient).

## Cómo diseñar el hero para móviles

En un móvil el hero es estrecho y alto, así que las composiciones divididas se apilan y las imágenes a sangre se recortan mucho. Decide qué muestra el móvil en lugar de dejar que pase: el titular y el botón deben verse sin hacer scroll, y el visual puede ir debajo o reducirse.

- Escritorio 1920×1080: 1920 × 1080
- Portátil 1440×900: 1440 × 900
- Móvil 390×844: 390 × 844

El mismo hero en tres tamaños de pantalla habituales. Lo que cabe junto al titular en escritorio tiene que ir encima o debajo en un móvil.

```css
.hero {
  min-height: min(100svh, 56rem);
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 5vw, 4rem);
  text-align: center;
}

.hero h1 {
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  line-height: 1.05;
  max-width: 18ch;
  text-wrap: balance;
}

.hero p {
  max-width: 40ch;
  margin-inline: auto;
}
```

`svh` ajusta el tamaño a la pantalla visible del móvil, `clamp()` escala el texto entre móvil y escritorio y `text-wrap: balance` equilibra las líneas del titular.

## Lista de control para una sección hero

1. **Escribe primero el titular** Antes de elegir imágenes, escribe cinco titulares y quédate con el más concreto. La composición sigue a las palabras.
2. **Redúcelo a una acción** Elige el único paso siguiente que quieres que dé la mayoría de visitantes y haz que sea el único botón.
3. **Elige un visual que demuestre o cree ambiente** Una captura, una foto de producto o un fondo que lleve la marca. No una foto de stock de gente señalando portátiles.
4. **Comprueba la legibilidad en todas partes** Cambia el tamaño del navegador de ancho a estrecho y vigila el texto contra el fondo durante todo el recorrido.
5. **Mantenlo rápido** La imagen del hero suele ser lo más pesado de la página. Dale el tamaño adecuado y sírvela en [WebP o AVIF](https://gradiently.design/es/guide/webp-images).

El hero abre la página; el resto de la página tiene que cumplir la promesa. [Diseño de landing pages](https://gradiently.design/es/guide/landing-page-design) trata las secciones que vienen después.

## FAQ

### ¿Qué es la sección hero de una web?

La primera pantalla completa de una página, por encima del pliegue. Suele tener un titular, una línea de apoyo, un botón principal y un visual.

### ¿Qué debe decir el titular de una sección hero?

Qué hace el producto y para quién, con las propias palabras del cliente. Los resultados concretos ganan a los eslóganes genéricos.

### ¿Cuántos botones debe tener una sección hero?

Un botón principal. Un segundo enlace de texto más discreto para una opción de menor compromiso está bien, pero más opciones debilitan la principal.

### ¿Qué tamaño debe tener una imagen de hero?

Diseña a 1920×1080 para escritorio y ofrece versiones más pequeñas para móviles mediante `srcset`, para que quien visita desde el móvil descargue un archivo más ligero.

### ¿Debe una sección hero ocupar toda la pantalla?

No necesariamente. Un hero a pantalla completa va bien en webs centradas en la marca; las webs de producto suelen salir ganando con un hero más corto que deje intuir el contenido de abajo.