Generador de sección hero (parte superior de la página)
Escribe la promesa, la explicación corta y el botón. Elige el diseño y los colores; la vista previa muestra el resultado en la computadora.
Cómo usarLa primera pantalla del sitio, lista
Disponible en: 
Generador de sección hero (parte superior de la página): para qué sirve
La sección hero es la primera pantalla del sitio, donde la persona decide en segundos si continúa. Necesita una promesa clara, una explicación corta y una acción principal.
El generador arma el hero con imagen de fondo y una capa oscura ajustable para que el texto sea legible, o con texto e imagen lado a lado, título con tamaño fluido, botón principal y secundario. La imagen entra como img con fetchpriority=high y sin carga diferida, porque normalmente es el elemento más grande de la primera pantalla (LCP).
Cómo usar
- Escribe el título, el subtítulo y los botones.
- Elige la imagen, el diseño y los colores.
- Copia el código y pégalo en la parte superior de la página.
Cuándo usar
- Página de inicio de un comercio local.
- Landing page de campaña.
- Página de lanzamiento.
Preguntas frecuentes
¿Qué poner en el hero?
El resultado que quiere el cliente, en una frase (el título), cómo lo entregas (el subtítulo) y una única acción principal, como "Pedir presupuesto por WhatsApp". Un segundo botón discreto es opcional. Todo debe caber en la primera pantalla, sin necesidad de desplazarse.
¿Cómo evito que la imagen vuelva lento el sitio?
La imagen del hero suele ser el elemento más grande de la primera pantalla, lo que Google mide como LCP. El código usa una etiqueta img (no background-image), con fetchpriority=high y sin loading=lazy, para que el navegador la descargue primero. Usa la imagen en WebP y con el tamaño correcto.
¿Y el texto sobre la foto?
La capa oscura (overlay) sobre la imagen garantiza el contraste del texto blanco en cualquier foto. Ajusta la opacidad hasta que el texto sea fácil de leer; de 45% a 60% suele bastar.
¿Es gratis de verdad?
Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.