La versión corta
- 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.
En esta página
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.
Qué va en una sección hero
Función
Extensión habitual
Extensión habitual
Función
Extensión habitual
Función
Extensión habitual
Función
Extensión habitual
Extensión habitual
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.
Concreto
Concreto
Concreto
Concreto
Concreto
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 y jerarquía visual.
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.
Centrada: las palabras lo sostienen y el fondo crea el ambiente.
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 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 y texto sobre un degradado.
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
.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.
El hero abre la página; el resto de la página tiene que cumplir la promesa. Diseño de landing pages trata las secciones que vienen después.
Preguntas frecuentes
¿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.
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil