Hero section: qué es y 20 ejemplos de 2026 para inspirarte (con código)

La hero section es lo primero que ve quien entra en tu web, y para mucha gente lo único. Si esa primera pantalla no deja claro qué haces y para quién, el resto de la página da igual.

Aquí tienes 20 ejemplos de hero sections de 2026 agrupados por sector, con lo que puedes copiar de cada uno. Después verás la anatomía de una hero que convierte y una plantilla en HTML y CSS que no destroza el LCP. Y, al final, cómo montarla en WordPress.

Qué es una hero section

Una hero section es el primer bloque de una página web, el que ocupa la pantalla antes de hacer scroll. Suele tener un titular, un subtítulo, uno o dos botones de llamada a la acción y un visual de apoyo. Su trabajo es uno: que el visitante entienda en pocos segundos qué ofreces y qué tiene que hacer a continuación.

El nombre viene del inglés hero image, la imagen grande de cabecera. En español verás también «sección hero», «cabecera» o «above the fold», que es la parte visible sin desplazarte.

Qué hace inmersiva a una hero section

Una hero deja de ser estática y pasa a inmersiva cuando suma al menos dos de estos ingredientes: vídeo de fondo muteado, animaciones de scroll, tipografía protagonista, microinteracciones en los CTA y composición rota, con elementos que se salen del grid.

Los cinco juntos abruman. Dos o tres bien elegidos captan la atención sin tapar el mensaje. Esa es la diferencia entre inmersión y ruido.

Anatomía de una hero que convierte

Por mucha animación que le metas, una hero que funciona respeta siempre esta jerarquía:

• Titular claro (qué haces y para quién) en una o dos líneas, con el beneficio por delante.
• Subtítulo de apoyo que amplía sin repetir.
• CTA primario muy visible y, como mucho, uno secundario («ver demo», «explorar»).
• Soporte visual (producto, foto o animación) que ilustra, no que distrae.
• Prueba social ligera si cabe: logos de clientes o una valoración.

El orden de lectura debe ser titular > CTA > soporte visual. Si la animación tapa el CTA los primeros segundos, o hay tres elementos peleando por la atención, has perdido. Para el CTA secundario funciona muy bien un botón ghost, que no compite con el principal.

Tipos de hero y cuándo usar cada uno

Tipo de hero	Funciona en	Riesgo principal
Solo texto (tipografía grande)	Portfolios, agencias, marcas personales	Que no se entienda qué vendes
Texto + producto (captura o animación)	SaaS, apps, herramientas	Capturas ilegibles en móvil
Foto lifestyle a pantalla completa	E-commerce, turismo, restauración	Texto sin contraste sobre la foto
Vídeo de fondo	Marcas con producto visual, eventos	LCP alto y consumo de datos en móvil
3D o WebGL interactivo	Estudios creativos, lanzamientos	Rendimiento y accesibilidad
Dividida (texto a un lado, visual al otro)	Servicios, landing pages, B2B	Que en móvil el visual empuje el CTA hacia abajo

Un aviso antes de los ejemplos: las empresas cambian su hero a menudo. Si al abrir una ves otra cosa, quédate con el patrón, que es lo que de verdad sirve.

5 hero sections de SaaS B2B

El patrón que comparten es muy replicable: titular ultradirecto, CTA primario evidente y el producto «trabajando» a la derecha o debajo. La inmersión la dan animaciones suaves de la interfaz, no un vídeo pesado.

5 hero sections de portfolios

Aquí manda la dirección de arte. Estos estudios se permiten tipografías enormes, transiciones de cine y casi nada de texto, porque quien entra viene a ver trabajo, no a leer. Si te va este estilo, combínalo con la tipografía exagerada.

5 hero sections de e-commerce

Las marcas de moda y cosmética apuestan por fotografía de producto en contexto real, no solo el bodegón sobre fondo blanco. La inmersión viene del ambiente, no de efectos que retrasan la compra.

5 hero sections experimentales

Las que rompen las reglas a propósito, con 3D, WebGL o scroll que controla escenas. No son para cualquier cliente, pero estudiarlas te da repertorio. Encajan con la estética cyberbrutalism si tu marca es retadora.

Para encontrar más, revisa a diario galerías como Awwwards, Land-book o Godly. Tienes más en mi lista de sitios de inspiración para diseño web.

Plantilla de hero section en HTML y CSS

Esta es la base que uso: titular, subtítulo, dos CTA y una imagen. Está pensada para que el LCP no se dispare y para respetar a quien prefiere menos movimiento. Cópiala y cambia textos, colores e imagen.

<section class="hero">
  <div class="hero__texto">
    <h1>Diseño webs que convierten visitas en clientes</h1>
    <p>Webs rápidas en WordPress para pequeños negocios.</p>
    <div class="hero__ctas">
      <a href="/contacto/" class="btn btn--primario">Pide presupuesto</a>
      <a href="/proyectos/" class="btn btn--ghost">Ver proyectos</a>
    </div>
  </div>
  <img class="hero__visual" src="hero.webp" width="1200" height="900"
       alt="Captura de una web de ejemplo" fetchpriority="high">
</section>

.hero {
  display: grid;
  gap: 2rem;
  align-items: center;
  min-height: min(90vh, 760px);
  padding: 2rem 1.25rem;
}
@media (min-width: 900px) {
  .hero { grid-template-columns: 1.1fr 1fr; padding: 4rem; }
}
.hero h1 {
  font-size: clamp(2rem, 5vw + 1rem, 4.5rem);
  line-height: 1.05;
  max-width: 18ch;
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero__visual { width: 100%; height: auto; animation: entrada .6s ease-out both; }
@keyframes entrada { from { opacity: 0; translate: 0 1.5rem; } }
@media (prefers-reduced-motion: reduce) {
  .hero__visual { animation: none; }
}

Tres detalles que marcan la diferencia. El fetchpriority="high" le dice al navegador que esa imagen es la importante, porque suele ser el elemento LCP. Con width y height reservas su hueco y evitas saltos de diseño. Y clamp() ajusta el titular a cualquier pantalla sin media queries.

Si quieres ir más allá con el movimiento, tienes ideas en microinteracciones con código y en las animaciones con scroll.

Cómo hacer una hero section en WordPress

Sin plugins, el bloque Portada del editor ya te da una hero: imagen o vídeo de fondo, capa de color, titular y botones dentro. Para la mayoría de webs de negocio es suficiente.

Si necesitas animaciones o un diseño más elaborado, tira de un constructor visual. Tienes la comparativa completa en Elementor vs Divi. Y vigila el resultado con las Core Web Vitals en WordPress, porque es donde una hero pesada se nota primero.

Rendimiento: que no destroce el LCP

Una hero inmersiva mal montada arruina las Core Web Vitals, y eso es SEO y conversión perdidos. Estas son las reglas para que no pase:

• Vídeo: muteado, con poster (imagen de carga), en WebM o MP4 ligero, corto y comprimido. Si no puedes bajarlo de peso, usa una imagen con animación CSS.
• LCP: apunta a que cargue por debajo de 2,5 s en móvil, el umbral de «bueno» de Google.
• Animaciones en CSS siempre que puedas. Las scroll-driven animations de CSS 2026 evitan JavaScript pesado.
• Respeta prefers-reduced-motion: quien tenga sensibilidad al movimiento debe poder ver la hero sin efectos.
• Imágenes en WebP o AVIF y con el tamaño adecuado a cada pantalla, como explico en el diseño web sostenible.
• Nada de carga diferida en la imagen de la hero: el loading="lazy" retrasa justo el elemento que más importa.

Errores comunes en hero sections inmersivas

• Vídeo pesado que dispara el LCP a varios segundos en móvil.
• Animaciones que ocultan el CTA los primeros segundos u obligan a esperar para actuar.
• Demasiados elementos compitiendo: sin jerarquía clara no hay conversión.
• Titular dentro de una imagen: mata el SEO y la accesibilidad.
• Texto sin contraste sobre foto o vídeo. Añade una capa oscura semitransparente debajo.
• Ignorar el móvil: la hero se diseña primero para pantalla pequeña, no al revés.

Preguntas frecuentes

¿Qué altura debe tener una hero section?

No tiene por qué ocupar toda la pantalla. En móvil, lo importante es que el titular y el CTA principal se vean sin hacer scroll. En escritorio funciona bien entre el 70 % y el 90 % de la altura de la ventana. Así asoma la sección siguiente e invita a bajar.

¿Una hero inmersiva penaliza el SEO?

Solo si está mal hecha. Una hero con vídeo pesado y JavaScript bloqueante destroza el LCP. Con vídeo optimizado (poster y carga diferida) o con animaciones CSS no penaliza.

¿Cuánto debe pesar una hero section?

Lo menos posible en lo que carga en la primera pantalla: HTML, CSS, JS y el visual. Como referencia, mantente por debajo de unos 800 KB. Si te pasas mucho, verás LCP de 3 segundos o más en móvil.

¿Vídeo en la hero: sí o no en 2026?

Sí, con condiciones: muteado, autoplay con poster, corto, en formato moderno y bien comprimido. Si no puedes cumplirlas, mejor una imagen optimizada con animaciones CSS sutiles.

¿Cómo la adapto a móvil sin perder el efecto?

Diseña primero para móvil: titular grande, un CTA y un visual ligero. En pantallas pequeñas, cambia el vídeo por una imagen y reserva las animaciones más ambiciosas para escritorio.

Conclusión

La hero section es una de las mayores palancas de conversión de cualquier web. Estos 20 ejemplos te dan repertorio para no partir de cero. Identifica el patrón que encaja con tu proyecto, respeta la jerarquía titular > CTA > visual y no sacrifiques el rendimiento.

Para seguir, mira más ejemplos de diseños de páginas web y la guía de diseño web minimalista. Si te ha servido, compártelo. ¡Disfrútalo!