¿Qué es una sección hero?
Una sección hero es la primera pantalla de una web, lo que el visitante ve antes de hacer scroll. Tiene que decir qué es el sitio, mostrar por qué vale la pena quedarse y señalar el siguiente paso.
Suele llevar un titular, una línea de apoyo, una acción principal y una imagen, un vídeo o una escena 3D.
Qué hace que un hero funcione
Un buen hero deja leer una sola idea de un vistazo, y todo lo que hay en pantalla está al servicio de esa idea. Esto es lo que comprobamos en los nuestros:
- Una frase. El titular se lee en un par de segundos, sin necesitar la línea de apoyo.
- Una imagen que muestra la idea. La escena explica el negocio. Un fondo bonito que serviría para cualquier empresa no lo hace.
- Una acción principal. Puede haber otro enlace, pero no compite con el primero.
- Texto que se sigue leyendo. La tipografía mantiene un margen exterior y su contraste aguanta en cada fotograma del movimiento.
- Una versión real para móvil. Con su propio recorte y movimiento más ligero, probada en un teléfono, no el diseño de escritorio reducido.
- Algo que mostrar mientras carga. Una imagen de póster, para que una conexión lenta o un vídeo bloqueado nunca dejen la pantalla vacía.
¿Sección hero o landing completa?
Usa solo un hero cuando ya tienes web y necesitas una apertura más fuerte; usa una landing completa cuando todavía hay que contar toda la historia. Un hero es una pantalla, y quien hace scroll espera el mismo cuidado debajo.
Nuestras plantillas de landing llevan la idea por todas las secciones, hasta el cierre y el pie.
Cómo crear una sección hero con IA
Dale a la herramienta decisiones exactas, porque cada palabra que falta se convierte en su respuesta más habitual. Indica la fuente y el tamaño, los colores en hexadecimal, la composición, qué se mueve y cómo termina, y qué cambia en el móvil. La guía cómo escribir un prompt para crear una web muestra las partes que debe tener.
Para ver un prompt completo, empieza por Lune, que es gratis. Si tu hero necesita un fondo en movimiento, esta comparación te ayuda a elegir entre vídeo, WebGL y CSS.
Preguntas sobre secciones hero
¿Qué debe incluir una sección hero?
Un titular, una línea de apoyo, una acción principal y una imagen, un vídeo o una escena que muestre la idea. La navegación suele ir encima. Todo lo demás compite con el titular.
¿Qué altura debe tener una sección hero?
Normalmente la de la primera pantalla, para que el titular y la acción principal se vean sin hacer scroll. En móvil, mídela con las barras del navegador visibles, porque ocupan parte de la pantalla.
¿Una sección hero puede llevar vídeo?
Sí. Usa un bucle corto sin sonido, con una imagen de póster y un archivo aparte para móvil. Usa WebGL cuando la escena tenga que reaccionar al visitante, y CSS para degradados simples y tipografía.
¿Estas secciones hero son gratis?
Lune es gratis y su prompt completo es público. Las demás forman parte de la membresía de Orbital, y cada página muestra el vídeo y una parte del prompt.
¿Estas secciones hero funcionan con Lovable o Claude?
Están escritas como prompts para herramientas de IA, en versiones HTML y React cuando existen las dos. Cada plantilla indica en qué herramientas se ha probado de verdad.