El Hero es una de las secciones más importantes de una Página web.

Normalmente aparece cerca del comienzo de la página y tiene como objetivo permitir que el visitante comprenda rápidamente:

• qué ofrece la empresa;

• para quién es;

• cuál es su principal beneficio;

• qué acción puede realizar a continuación.

Un Hero profesional no necesita ser complejo.

Puede estar formado simplemente por:

• un texto introductorio;

• un Heading principal;

• una descripción;

• uno o dos CTA;

• una Image;

o puede utilizar:

• Background Image;

• Overlay;

• una composición Full Width.

En este tutorial construiremos un Hero completo desde cero utilizando el Editor de bloques de Waclis.

¿Qué vamos a construir?

Primero realizaremos una versión con:

TEXTO + IMAGEN

En computadora:

┌──────────────────────────────────────────────────────────────┐
│                                                              │
│  SOLUCIONES DIGITALES              [                       ] │
│                                    [                       ] │
│  Crea una Página web que           [                       ] │
│  impulse tu negocio                [        IMAGEN         ] │
│                                    [                       ] │
│  Gestiona tu presencia digital     [                       ] │
│  desde una plataforma...           [                       ] │
│                                    [                       ] │
│  [ COMENZAR ]   CONOCER MÁS →                              │
│                                                              │
└──────────────────────────────────────────────────────────────┘

En celular:

SOLUCIONES DIGITALES

Crea una Página web
que impulse tu negocio

Descripción...

[ COMENZAR ]

Conocer más →

[ IMAGEN ]

Después veremos una segunda variante:

HERO CON IMAGEN DE FONDO

utilizando:

• Background;

• Overlay;

• contenido superpuesto.

¿Qué es exactamente un Hero?

Un Hero es una sección de presentación principal.

Su función no es simplemente:

“verse grande”

Debe responder rápidamente

¿QUÉ OFRECES?

¿PARA QUIÉN?

¿POR QUÉ ME INTERESA?

¿QUÉ PUEDO HACER AHORA?

Ejemplo

Crea y gestiona tu Página web desde una sola plataforma

Diseña, publica y administra tu presencia digital con herramientas pensadas para acompañar el crecimiento de tu negocio.

[ COMENZAR ]

El visitante obtiene inmediatamente

• producto;

• utilidad;

• propuesta;

• siguiente paso.

Hero vs Banner

Aunque pueden parecer similares, no necesariamente cumplen la misma función.

Hero

normalmente representa:

la presentación principal del contenido o de la Página web.

Banner

puede utilizarse para:

• una promoción;

• una campaña;

• un aviso;

• un mensaje puntual.

Ejemplo Hero

Tu negocio, preparado para crecer online

Crea y administra tu Página web...

Ejemplo Banner

20 % de descuento hasta el viernes

[ VER PROMOCIÓN ]

Un Hero puede utilizar una imagen de fondo

pero eso no lo convierte automáticamente en Banner.

La diferencia principal está en la función editorial

¿Todas las páginas necesitan un Hero enorme?

No.

La Home

puede necesitar una presentación de alto impacto.

Una página interna

puede utilizar un Hero mucho más compacto.

Por ejemplo

Página Servicios:

SERVICIOS

Soluciones pensadas para cada etapa de tu negocio

No es necesario ocupar:

100 % de la primera pantalla

en todas las páginas.

Primer principio

El Hero debe explicar antes de impresionar.

Un diseño espectacular que no comunica qué hace la empresa

es un Hero débil.

Ejemplo problemático

Transformamos el futuro

¿Qué significa?

Podría tratarse de:

• software;

• arquitectura;

• educación;

• logística;

• finanzas.

Falta contexto.

Mejor

Software de gestión para centralizar tu negocio

O:

Crea y administra tu Página web desde una sola plataforma

El visitante comprende inmediatamente la propuesta.

Antes de construir el Hero

Define cuatro elementos.

1. Propuesta principal

Completa esta frase:

Ayudamos a [TIPO DE CLIENTE]
a [RESULTADO]
mediante [SOLUCIÓN].

Por ejemplo

Ayudamos a empresas a gestionar su presencia digital desde una plataforma centralizada.

No necesariamente utilizarás esta frase literalmente.

Sirve para descubrir el mensaje central.

2. Beneficio principal

Pregunta:

¿Qué cambia para el visitante gracias a esta solución?

Puede ser:

• ahorrar tiempo;

• simplificar gestión;

• vender online;

• centralizar información;

• mostrar productos;

• automatizar procesos.

No enumeres diez beneficios en el Hero

Elige el principal.

3. CTA principal

¿Qué debería hacer el visitante?

Por ejemplo:

Solicitar información

Ver productos

Comenzar

Contactar

Debe existir una acción prioritaria.

4. Recurso visual

Puede ser:

• Image;

• captura;

• producto;

• fotografía;

• ilustración;

• Background Image;

• video de fondo, si realmente aporta.

No elijas una imagen solamente porque “queda bonita”

Debe reforzar la propuesta.

Estructura del Hero que construiremos

Conceptualmente:

Section
└── Container
    └── Grid Row
        ├── Column Texto
        │   ├── Paragraph
        │   ├── Heading H1
        │   ├── Paragraph
        │   └── CTA Group
        │       ├── Link principal
        │       └── Link secundario
        └── Column Visual
            └── Image

El orden es importante

Primero:

estructura

Después:

contenido

Después:

responsive

Y finalmente:

estilo

No empieces creando sombras o animaciones

Paso 1. Abre la posición donde crearás el Hero

Desde:

Menúes

ingresa al bloque editable correspondiente mediante el icono de paleta.

Si trabajas en Home

puede ser especialmente apropiado:

Bloque editable debajo del menú

O:

Bloque editable debajo del banner

dependiendo de la estructura de tu sitio.

Pero cuidado

Si tu plantilla ya tiene un Banner principal:

pregunta si necesitas además otro Hero.

Puedes terminar con:

BANNER PRINCIPAL
↓
HERO GIGANTE

duplicando la función.

Decide qué elemento realmente presenta la Página web.

Recuerda

el Header no se edita desde el Editor de bloques.

“Debajo del menú”

significa:

el Hero comienza después del Header.

Paso 2. Crea o selecciona una Section

Utiliza:

Secciones → Secciones de Página

y comienza con una:

Section

Selecciónala

y abre:

Contenido

Encontrarás opciones confirmadas como:

• Title;

• Container width;

• Container height;

• Background;

• Overlay;

• Top Separator;

• Bottom Separator.

Para nuestra primera variante

configuraremos conceptualmente:

Container width:
Boxed

Y:

Container height:
Auto

Background:

None

¿Por qué Boxed?

Porque queremos evitar que el contenido se extienda demasiado en monitores amplios.

Hero Full Width no significa necesariamente:

texto pegado a los bordes

Puedes tener una Section visualmente amplia

y mantener su contenido dentro de un área controlada.

Boxed suele ser una buena base para contenido textual.

Paso 3. Auto Height vs Full Height

Section permite elegir:

Auto

o:

Full

para Container height.

¿Cuál deberías utilizar?

Depende de la experiencia.

Auto

permite que la altura dependa del contenido.

Ejemplo

Texto
Imagen
Padding
→ determinan la altura

Full

puede utilizarse cuando quieres crear una experiencia de gran portada.

Conceptualmente

┌───────────────────────────────────┐
│                                   │
│                                   │
│             HERO                  │
│                                   │
│                                   │
└───────────────────────────────────┘

ocupando una altura considerable.

Full no significa automáticamente mejor

Puede generar un problema:

el visitante abre la página y solo ve:

Hero

sin saber que existe contenido debajo.

En determinadas páginas

eso puede estar bien.

En otras

es mejor permitir que una parte de la siguiente Section sea visible.

Para nuestro primer Hero

utilizaremos:

Auto

Paso 4. Agrega Grid Row

Dentro de la estructura agrega:

Grid Row

Crearemos:

2 columnas

Una para texto.

Otra para imagen.

Conceptualmente:

[       TEXTO       ][      IMAGEN      ]

Paso 5. Elige la proporción

No todos los Hero necesitan:

6 + 6

Una composición interesante puede ser:

7 + 5

Así:

[         TEXTO         ][    IMAGEN    ]

Esto da más espacio al mensaje.

Otra posibilidad:

5 + 7

Puede ser apropiada cuando la imagen tiene mayor protagonismo.

Para este caso utilizaremos:

7 + 5

en pantallas amplias.

Pero no es obligatorio.

El contenido debe determinar la distribución.

Si tu Heading es muy corto

6 + 6 puede funcionar perfectamente.

Paso 6. Configura responsive

Nuestro objetivo:

Desktop:

[ TEXTO ][ IMAGEN ]

Mobile:

TEXTO

IMAGEN

Utiliza las opciones de tamaño por dispositivo disponibles en Grid Row.

En mobile

cada Column debería poder utilizar todo el ancho.

Conceptualmente:

12
+
12

No conserves:

7 + 5

en una pantalla estrecha.

El resultado podría ser:

[TEXTO MUY
ESTRECHO][IMG]

Paso 7. Define el orden mobile antes de continuar

HTML / Navigator:

Grid Row
├── Texto
└── Imagen

En mobile

esto produce naturalmente:

Texto
Imagen

Esa será nuestra prioridad.

No construiremos:

Imagen
Texto

para después invertirla mediante CSS solo porque en desktop queremos la imagen a la derecha.

El orden lógico del contenido importa.

Paso 8. Configura alineación vertical

Selecciona Grid Row.

Utiliza:

Vertical align

para equilibrar ambas columnas.

Queremos conceptualmente:

        ┌─────────────┐
TEXTO   │             │
        │   IMAGEN    │
        │             │
        └─────────────┘

con el texto visualmente centrado respecto de la imagen.

No utilices:

margin-top: 130px;

Ese valor dependería de:

• tamaño de la imagen;

• cantidad de texto;

• pantalla.

Utiliza las herramientas de alineación del Grid.

Paso 9. Agrega un texto superior

Agrega:

Paragraph

Ejemplo:

PLATAFORMA DIGITAL PARA EMPRESAS

Este texto puede funcionar como:

• categoría;

• descriptor;

• contexto.

No necesita ser Heading

si no constituye un nuevo nivel de estructura.

Visualmente puede tener:

• Font size pequeño;

• Font weight elevado;

• Letter spacing moderado.

No lo conviertas en:

H4

solamente para hacerlo más pequeño.

Paso 10. Agrega el H1

Este es uno de los puntos más importantes.

El Heading principal del Hero puede ser:

Crea una Página web que impulse tu negocio

Si estamos construyendo la presentación principal de la página,

normalmente este Heading será el candidato natural para:

H1

¿Qué representa H1?

El título principal de la página.

No significa:

“el texto más grande”

Significa:

“el encabezado principal del contenido”

Por eso

no deberías elegir H1 únicamente para conseguir:

72px

Puedes utilizar un H1

y modificar su Font size desde:

Estilo → Typography

Jerarquía conceptual

H1
Crea una Página web...

    H2
    Beneficios

    H2
    Servicios

    H2
    Preguntas frecuentes

Mucho más claro que

H1
H1
H1
H1

en cada Section.

Paso 11. Escribe un H1 concreto

Evita frases excesivamente genéricas.

Ejemplo débil

El futuro comienza hoy

Ejemplo más claro

Gestiona tu Página web y tus herramientas digitales desde un solo lugar

El visitante comprende más rápidamente:

• qué es;

• qué puede hacer.

Otro ejemplo débil

Todo lo que necesitas

Mejor

Todo lo que necesitas para administrar tu presencia digital

La claridad tiene prioridad.

Paso 12. No conviertas el H1 en un párrafo

Ejemplo excesivo:

Crea, administra, optimiza y potencia completamente toda la presencia digital de tu empresa utilizando todas las herramientas que necesitas desde una única solución integrada pensada especialmente para ayudarte a crecer

Puede ser demasiado largo.

Divide:

H1:
Administra tu presencia digital desde un solo lugar

Después:

Paragraph:
Crea tu Página web, gestiona contenidos y utiliza herramientas diseñadas para acompañar el crecimiento de tu empresa.

H1:

idea principal.

Paragraph:

explicación.

Paso 13. Agrega la descripción

Debajo del H1 agrega:

Paragraph

Ejemplo:

Crea, organiza y administra tu presencia digital con herramientas pensadas para simplificar la gestión diaria de tu negocio.

No repitas exactamente el H1.

Ejemplo redundante

H1:

Crea una Página web profesional

Paragraph:

Crea una Página web profesional para tener una Página web profesional.

El Paragraph debe ampliar.

Puede responder:

• cómo;

• para quién;

• qué beneficio aporta.

Paso 14. Evita enumerar todo el producto

No escribas:

Página web, blog, productos, servicios, correo, hosting, inteligencia artificial, sincronizaciones, pagos, calendario, formularios, automatización...

en un solo Paragraph.

El Hero debe simplificar.

Puedes explicar funcionalidades más abajo.

Paso 15. Define un CTA principal

Agrega:

Link

Ejemplo:

COMENZAR

Configura su:

Url

con el destino real.

El CTA debería responder:

¿Cuál es el siguiente paso principal?

Dependiendo de la Página web

puede ser:

Comprar

Solicitar presupuesto

Ver productos

Comenzar

Contactar

No utilices siempre:

Ver más

Puede ser demasiado genérico.

Mejor:

Ver planes

O:

Solicitar asesoramiento

O:

Explorar productos

El CTA debería anticipar el destino.

Paso 16. Agrega un CTA secundario solo si aporta

Puedes agregar:

Conocer más →

Por ejemplo

CTA principal:

[ COMENZAR ]

Secundario:

Ver cómo funciona →

Esto permite:

• visitante decidido → acción principal;

• visitante que necesita información → acción secundaria.

No agregues cuatro CTA

Un Hero como:

[ COMPRAR ]
[ VER PRODUCTOS ]
[ CONTACTAR ]
[ NOSOTROS ]
[ BLOG ]

no tiene una prioridad clara.

El Header ya ofrece navegación general.

El Hero debe concentrarse en la acción principal.

Paso 17. CTA principal y secundario deben verse diferentes

Principal:

Button visual sólido

Secundario:

Link de texto

Conceptualmente:

[ COMENZAR ]   Ver cómo funciona →

No:

[ COMENZAR ] [ VER CÓMO FUNCIONA ]

con exactamente el mismo peso

si uno es claramente prioritario.

Paso 18. Revisa los Links inmediatamente

No esperes al final.

Selecciona cada Link

y comprueba:

• Url;

• Target;

• Rel;

• Download.

No dejes:

#

No dejes:

/pagina-ejemplo

Y si clonaste:

comprueba que el destino no pertenezca al bloque anterior.

Paso 19. Agrega la Image

Dentro de la segunda Column agrega:

Image

Utiliza:

Set Image

Después revisa:

• Width;

• Height;

• Alt;

• Align;

• Enable link;

• Id;

• Class.

Para este Hero

no necesitamos necesariamente que la imagen sea clicable.

No actives Link solo porque existe la opción.

Si la Image no debe realizar ninguna acción:

déjala como contenido visual.

Paso 20. Elige la imagen correcta

Una buena imagen de Hero puede mostrar:

• producto;

• interfaz;

• servicio;

• resultado;

• contexto real.

No necesariamente necesitas:

fotografía de banco de imágenes con personas mirando una notebook

Si tienes un producto digital

una captura o composición de la interfaz puede explicar mucho más.

Si vendes un producto físico

puede ser:

• producto;

• uso;

• resultado.

Si ofreces un servicio

puede ser:

• trabajo realizado;

• escena real;

• visual conceptual.

La pregunta es:

¿Esta imagen ayuda a comprender la propuesta?

Paso 21. Configura Alt

Ejemplo:

Vista del panel de gestión utilizado desde una computadora portátil

si eso representa realmente la imagen.

No utilices:

Hero

Ni:

imagen principal

si puedes describir mejor el contenido.

Paso 22. Decide Cover o Contain según la imagen

Supongamos que muestras:

captura completa de una interfaz

Probablemente quieras:

Contain

conceptualmente,

para evitar recortar la interfaz.

Si utilizas:

fotografía

dentro de un marco definido,

puede ser apropiado:

Cover

No utilices Cover automáticamente.

Puedes cortar:

• rostro;

• producto;

• texto dentro de una captura.

El objetivo determina el comportamiento.

Paso 23. No deformes la imagen

Evita configurar Width y Height incompatibles.

Original:

1200 × 800

Forzado:

600 × 150

Puede deformarse.

Mantén proporciones.

Si necesitas una caja fija:

utiliza recorte,

no deformación.

Paso 24. Agrega una Class a la Section

Por ejemplo:

custom-main-hero

Esto te permitirá limitar cualquier CSS adicional.

Mucho mejor que:

section {
}

También puedes asignar Classes específicas

a elementos cuando sea necesario.

Por ejemplo:

hero-eyebrow

hero-title

hero-description

hero-image

Son ejemplos.

No necesitas crear una Class para absolutamente todo

Utilízalas cuando te ayuden a:

• personalizar;

• organizar;

• limitar CSS.

Paso 25. Configura Padding general

El Hero necesita suficiente espacio.

Puedes trabajar:

Padding top

y:

Padding bottom

en la Section o contenedor correspondiente.

Ejemplo conceptual:

80px
arriba y abajo

No es un valor obligatorio.

Un Hero puede utilizar:

• 64;

• 80;

• 96;

• otro valor;

según el diseño.

Mobile normalmente necesitará menos.

Lo importante es evitar

texto pegado al Header

Y también:

300px de vacío

sin propósito.

Paso 26. No uses Height fija para crear “impacto”

Ejemplo problemático:

.custom-main-hero {
    height: 750px;
}

Parece simple.

Pero si:

• aumenta el texto;

• cambia el idioma;

• aumenta el zoom;

• cambia el dispositivo;

puedes terminar cortando contenido.

Para nuestro Hero:

Container height:
Auto

El impacto lo construiremos mediante:

• Padding;

• Typography;

• imagen;

• composición.

Paso 27. Typography del H1

Selecciona el H1.

Dentro de:

Estilo → Typography

puedes configurar:

• Font size;

• Font weight;

• Line height;

• Letter spacing;

• etc.

El H1 debe ser dominante

pero no necesariamente gigantesco.

Ejemplo conceptual desktop:

48–64px

puede funcionar en determinados diseños.

Es solo una referencia.

No es una medida obligatoria.

Mobile

puede necesitar:

32–40px

según:

• longitud;

• tipografía.

Lo importante

es evitar que el título ocupe:

8 líneas

en celular.

Paso 28. Line height

Un H1 grande con:

line-height demasiado amplio

puede sentirse separado.

Y demasiado bajo:

puede hacer que las líneas choquen.

Ajusta visualmente.

No existe un único valor.

Paso 29. No uses Letter spacing extremo

Especialmente en H1.

Esto:

C R E A   T U   P Á G I N A

puede dificultar la lectura.

Letter spacing más amplio puede funcionar mejor para:

texto superior corto

como:

SOLUCIONES DIGITALES

Paso 30. Controla el ancho del H1

Aunque la Column sea grande,

puedes utilizar:

Max Width

si el título queda demasiado extendido.

Por ejemplo

en un monitor grande:

Gestiona tu Página web y todas las herramientas digitales de tu empresa desde un solo lugar

podría convertirse en dos líneas muy largas.

Un Max Width puede ayudar a crear:

Gestiona tu Página web
y tus herramientas digitales
desde un solo lugar

de manera natural.

No fuerces los saltos mediante <br>.

Paso 31. Espacios entre elementos

Conceptualmente:

EYEBROW
↓
H1
↓
PARAGRAPH
↓
CTA

Utiliza:

• Margin;

• Padding;

para crear ritmo.

No:

<br><br><br>

Una composición puede utilizar, como ejemplo:

Eyebrow → 12px
H1 → 20px
Paragraph → 28px
CTA

No son valores obligatorios.

Mantén consistencia.

Paso 32. Imagen con profundidad visual

Puedes utilizar:

• Border radius;

• Border;

• sombra moderada;

según el diseño.

Ejemplo

Border radius:
16px

Una captura de interfaz también puede verse bien sin sombra.

No agregues automáticamente:

sombra
+
borde
+
rotación
+
perspectiva
+
Glow

El Hero ya tiene suficiente protagonismo.

Paso 33. ¿Necesita fondo?

Nuestra primera versión puede utilizar:

Background:
None

y tomar el fondo general.

También puedes elegir un Background visual mediante la configuración de la Section.

Por ejemplo:

Background:
Image

Esa será nuestra segunda variante.

Variante 2: Hero con Background Image

Ahora construiremos conceptualmente:

┌────────────────────────────────────────────────────────┐
│                                                        │
│     [             IMAGEN DE FONDO               ]      │
│                                                        │
│     SOLUCIONES DIGITALES                               │
│                                                        │
│     Construye una presencia digital                    │
│     preparada para crecer                              │
│                                                        │
│     Descripción...                                     │
│                                                        │
│     [ COMENZAR ]                                       │
│                                                        │
└────────────────────────────────────────────────────────┘

Paso 34. Selecciona Section

En:

Contenido → Background

elige:

Image

Configura la imagen correspondiente.

No utilices una imagen de fondo demasiado compleja

si el texto debe leerse encima.

Ejemplo problemático

rostros
logos
productos
texto dentro de imagen
fondos con alto contraste

todo detrás del H1.

Puede resultar ilegible.

Busca una imagen con zonas limpias.

Paso 35. Utiliza Overlay cuando sea necesario

Section dispone de:

Overlay

¿Qué hace conceptualmente?

Permite agregar una capa entre:

Background

y:

contenido

Conceptualmente:

TEXTO
────────────
OVERLAY
────────────
IMAGEN

Esto puede ayudar a mejorar el contraste.

Ejemplo

Imagen muy clara:

[ FOTO CLARA ]

texto blanco:

difícil de leer

Overlay oscuro:

[ FOTO + CAPA OSCURA ]

El texto blanco puede ganar legibilidad.

No utilices Overlay únicamente como efecto

Su función principal aquí es:

mejorar la relación entre fondo y contenido.

Paso 36. Background Image vs Image component

Esta diferencia es fundamental.

Image component

es contenido.

Por ejemplo:

Texto | Imagen

Background Image

forma parte del diseño de la Section.

Por ejemplo:

Texto
sobre
fondo fotográfico

Pregunta:

¿La imagen es información o ambientación?

Si muestra:

producto específico

puede ser mejor Image.

Si crea:

atmósfera visual

puede ser Background.

No escondas información importante dentro de un Background

porque:

• puede recortarse;

• no funciona igual que una Image semántica.

Paso 37. Recorte del Background

Background Image puede recortarse según:

• tamaño;

• proporción;

• pantalla.

Por eso no coloques información indispensable dentro de la fotografía en:

• extremos;

• bordes.

Desktop:

[ sujeto derecha | espacio izquierda ]

Puede funcionar perfectamente.

Pero mobile:

[ solo espacio ]

si el sujeto queda fuera del recorte.

Revisa siempre.

Paso 38. No pongas texto dentro de la propia imagen

Evita subir una imagen como:

[FOTO + “OFERTA 50%” + BOTÓN DIBUJADO]

y después agregar otro contenido encima.

Es mejor separar:

BACKGROUND
+
HEADING REAL
+
LINK REAL

Esto mejora:

• responsive;

• edición;

• accesibilidad;

• mantenimiento.

Paso 39. Hero Full Height

Ahora podemos evaluar:

Container height:
Full

¿Cuándo puede aportar?

En:

• presentación institucional;

• producto muy visual;

• Landing Page;

• campaña.

Puede crear:

una primera pantalla inmersiva

Pero pregunta:

¿El contenido realmente necesita esa altura?

No utilices Full solamente porque:

“parece más premium”

Puede perjudicar:

• velocidad de exploración;

• visibilidad del siguiente contenido.

Paso 40. Hero Full Height en mobile

Especial cuidado.

Una pantalla móvil ya es pequeña.

Un Hero Full puede dejar:

H1
Paragraph
Button

ocupando toda la pantalla,

y la Image o el resto del contenido quedar mucho más abajo.

Prueba el resultado real.

No asumas que Full desktop también debe ser Full mobile.

Si necesitas ajustes adicionales

puedes utilizar CSS localizado.

Pero primero intenta resolver la composición con:

• Auto;

• Padding.

Paso 41. Background Video

Section también permite:

Background:
Video

Esto puede crear un Hero con movimiento.

Pero debe utilizarse con mucho criterio.

Background Video no es lo mismo que:

Embed Video

Background Video:

ambientación visual

Embed Video:

contenido que el usuario reproduce

No utilices Background Video para:

• tutorial;

• demo que requiere controles;

• explicación importante.

El visitante no debería necesitar:

escuchar el fondo

para comprender la página.

Paso 42. Video de fondo y rendimiento

Puede aumentar:

• carga;

• consumo de datos;

• recursos.

Especialmente en celular.

Pregunta:

¿Una Image podría conseguir prácticamente el mismo resultado?

Si sí

Image puede ser más eficiente.

No agregues video únicamente por modernidad.

Paso 43. No pongas demasiada información en el Hero

Un Hero no necesita:

• historia completa;

• 10 beneficios;

• tabla de precios;

• FAQ;

• testimonios.

Su función es:

PRESENTAR
+
ORIENTAR
+
ACTIVAR

El resto de la página desarrolla la propuesta.

Ejemplo de Home

Hero
↓
Beneficios
↓
Servicios / Productos
↓
Testimonios
↓
CTA
↓
FAQ

No intentes colocar todo dentro del Hero.

Paso 44. No agregues un formulario enorme en el Hero sin necesidad

Puede ser apropiado en determinadas Landing Pages.

Pero si tu Home necesita solamente:

Presentación + CTA

un formulario de:

8 campos

puede generar fricción.

Puedes llevar:

Solicitar asesoramiento

hacia una sección o página de contacto.

Más adelante trabajaremos una Landing Page donde evaluaremos este caso.

Paso 45. No utilices un Slider como Hero automáticamente

Otra práctica habitual es convertir la portada en:

Slider con 5 mensajes

Pregunta:

¿Cuál es realmente tu propuesta principal?

Si tienes una sola:

un Hero estático puede ser más claro.

Slider obliga al visitante a esperar o navegar.

Y puede ocultar:

• ofertas;

• mensajes;

• CTA.

Utiliza Slider solo si varios contenidos realmente necesitan ese formato.

Paso 46. No utilices Carousel para el H1

El mensaje principal debería ser estable.

Evita:

H1 cambia cada 3 segundos

Puede generar:

• dificultad de lectura;

• falta de foco.

Una propuesta central clara suele funcionar mejor.

Paso 47. No agregues múltiples H1 dentro de Slides

Si construyes una presentación rotativa,

presta especial atención a la jerarquía de Heading.

No conviertas automáticamente cada Slide en otro H1.

El título principal de la página debe mantener una estructura coherente.

Paso 48. CTA sobre Background

Si utilizas fondo fotográfico:

comprueba el contraste del CTA.

Ejemplo

Button transparente:

borde blanco
texto blanco

sobre zona muy clara:

puede desaparecer.

Revisa:

• Normal;

• Hover;

• Active.

No compruebes solamente el H1.

Paso 49. Imagen principal y CTA no deberían competir

Si la imagen tiene demasiados elementos de atención:

• textos;

• flechas;

• colores intensos;

puede competir con:

COMENZAR

Simplifica el recurso visual.

El CTA debe seguir siendo evidente.

Paso 50. Responsive del Hero de dos columnas

Desktop:

[       TEXTO       ][  IMAGEN  ]

Tablet

puede continuar con dos columnas:

[     TEXTO     ][   IMAGEN   ]

si sigue siendo legible.

O apilarse.

Mobile:

TEXTO

IMAGEN

No existe obligación de mantener el mismo breakpoint para todos los Heroes.

Decide según el contenido.

Paso 51. Revisa H1 en tablet

Este tamaño suele descubrir problemas.

Desktop:

3 líneas

Mobile:

4 líneas

Pero tablet puede quedar:

6 líneas muy estrechas

si mantienes dos columnas demasiado tiempo.

Si ocurre

puede ser mejor apilar antes.

Paso 52. Revisa la Image en tablet

Puede convertirse en:

miniatura

si la Column queda demasiado estrecha.

No reduzcas la imagen indefinidamente.

Cambia la estructura cuando sea necesario.

Paso 53. Responsive del CTA

Desktop:

[ COMENZAR ]   Ver cómo funciona →

Mobile puede mantenerlo:

[ COMENZAR ]

Ver cómo funciona →

No obligues ambos CTA a permanecer en una línea.

Utiliza Wrap o una estructura adecuada.

Paso 54. Evita CTA demasiado largos

Problema:

[ COMIENZA AHORA MISMO A CONSTRUIR TU NUEVA PÁGINA WEB ]

Mobile:

puede ocupar múltiples líneas.

Mejor:

[ COMENZAR ]

O:

[ CREAR MI SITIO ]

si corresponde al flujo real.

Paso 55. Revisa los márgenes laterales

En celular

debe existir espacio entre:

contenido

y:

bordes de pantalla

No uses:

padding-left: 80px
padding-right: 80px

como valor fijo en mobile.

Utiliza el Container y estilos responsive.

Paso 56. No uses 100vw indiscriminadamente

Puede producir scroll horizontal debido a cómo se calcula el viewport.

Especialmente cuando existen:

• Padding;

• scrollbars.

Si quieres que la Section ocupe todo el ancho:

utiliza la configuración estructural correspondiente.

No fuerces:

width: 100vw;

como primera solución.

Paso 57. No utilices left:50% + Transform para centrar el Hero

No necesitas:

position:absolute;
left:50%;
transform:translateX(-50%);

para una composición básica.

Utiliza:

• Container;

• Grid;

• alineación.

Paso 58. No coloques el contenido con coordenadas

Evita:

top: 160px
left: 240px

Ese Hero se romperá fácilmente en otros tamaños.

Diseña en flujo.

Paso 59. No utilices espacios vacíos para hacer el Hero alto

Evita:

Paragraph vacío
Paragraph vacío
Paragraph vacío

O:

<br><br><br><br>

Utiliza:

• Padding;

• Container height.

Paso 60. Background y texto responsive

Cuando la imagen de fondo cambia de recorte:

puede cambiar el contraste.

Desktop:

texto sobre zona oscura

Mobile:

texto sobre zona clara

Aunque el Overlay siga siendo el mismo.

Revisa cada tamaño.

Puede necesitar:

• otra alineación;

• mayor Overlay;

• otra imagen.

No asumas que un Background funciona igual en todas las pantallas.

Paso 61. Alineación del Hero

Nuestro primer diseño utiliza:

Text align:
left

Es una opción muy robusta.

Pero también puedes construir Hero centrado:

            TEXTO

           [ CTA ]

           IMAGEN

Es apropiado para:

• mensajes cortos;

• Landing Page;

• producto simple.

No centres automáticamente textos muy largos.

Párrafos extensos centrados

pueden ser más difíciles de leer.

Paso 62. Hero centrado: estructura

Puede ser:

Section
└── Container
    ├── Paragraph
    ├── H1
    ├── Paragraph
    ├── CTA
    └── Image

No necesitas Grid Row

si no tienes dos columnas.

Este es un principio importante

No agregues Grid porque “toda Section debe tener Row”.

Utiliza estructura según necesidad.

Paso 63. Hero de producto

Un Hero de producto puede priorizar:

[ TEXTO ][ PRODUCTO ]

Ejemplo:

Conoce el modelo X

Descripción...

[ COMPRAR ]

[ PRODUCTO ]

La Image puede necesitar:

Contain

para mostrar el producto completo.

No uses Cover si corta:

• bordes;

• accesorios;

• packaging.

Paso 64. Hero de servicio

Puede utilizar:

beneficio principal
+
CTA de contacto
+
imagen contextual

Ejemplo:

Transforma la gestión de tu empresa

Centraliza...

[ SOLICITAR ASESORAMIENTO ]

No necesitas mostrar:

20 características

Paso 65. Hero institucional

Puede utilizar un mensaje más de marca:

Tecnología que acompaña el crecimiento de tu empresa

Pero agrega contexto.

Por ejemplo:

Desarrollamos soluciones digitales...

El mensaje emocional no debe eliminar la claridad.

Paso 66. Hero de campaña

Puede tener:

• oferta;

• plazo;

• CTA.

Ejemplo:

LANZAMIENTO

Nueva solución para...

[ CONOCER LA PROPUESTA ]

Si existe información temporal

debe mantenerse actualizada.

No dejes:

Disponible hasta el 30 de junio

después de esa fecha.

Paso 67. Reutilizar un Hero

Puedes clonar la Section completa.

Después actualiza:

• texto superior;

• H1;

• Paragraph;

• CTA;

• URLs;

• Image;

• Alt;

• Background;

• IDs.

Classes pueden mantenerse

si quieres compartir estilo.

Pero no dupliques:

id="hero-principal"

Un ID debe ser único.

Paso 68. No copies el H1 de una página interna sin revisarlo

Si clonas un Hero:

Home:

H1:
Crea tu Página web...

Página Servicios:

puede necesitar:

H1:
Servicios digitales para tu negocio

No dejes el mismo H1 por comodidad.

Cada página tiene su propio propósito.

Paso 69. Linked styles

Supongamos que:

Hero Home

y:

Hero Servicios

comparten:

hero-title

Si cambias Font size

pueden cambiar ambos.

Pregunta:

¿Quiero que los Heroes compartan ese tamaño?

Si sí:

perfecto.

Si el Hero Home necesita una variante:

hero-title hero-title-home

Utiliza una Class adicional.

No dupliques todo el CSS.

Paso 70. CSS localizado

Supongamos que nuestra Section tiene:

custom-main-hero

Un ajuste responsive puede ser:

@media (max-width: 576px) {
    .custom-main-hero {
        padding-top: 48px;
        padding-bottom: 48px;
    }
}

Mucho más seguro que:

section {
    padding-top: 48px !important;
}

No modifiques todas las Sections por un ajuste del Hero.

Paso 71. CSS del H1

Si asignaste:

hero-title

Puedes utilizar:

.custom-main-hero .hero-title {
    max-width: 720px;
}

Ejemplo conceptual.

No utilices:

h1 {
    max-width: 720px;
}

globalmente.

Puede afectar otros H1.

Paso 72. CSS de Image

Si necesitas garantizar adaptación:

.custom-main-hero .hero-image {
    max-width: 100%;
}

Pero primero revisa las opciones visuales.

No agregues CSS manual innecesariamente.

Paso 73. No agregues Bootstrap CDN

Waclis utiliza Bootstrap 4.

Si una IA genera:

<link rel="stylesheet" href="bootstrap...">

retíralo.

No necesitas cargar otra versión para construir un Hero.

Tampoco necesitas agregar:

• jQuery;

• frameworks;

• librerías de animación;

para este caso.

Paso 74. JavaScript no es necesario

Nuestro Hero:

texto
+
imagen
+
Links

no requiere JavaScript.

No agregues código para:

• centrar;

• responsive;

• Hover.

Eso puede resolverse con:

• estructura;

• CSS.

Paso 75. Animación opcional

Una vez que todo funciona:

puedes evaluar:

Avanzado → Animate on scroll

Por ejemplo

animar:

Section completa

o:

columna visual

de forma moderada.

Pero no necesitas:

eyebrow fade
H1 zoom
Paragraph slide
Button bounce
Image rotate

Demasiado movimiento reduce claridad.

Paso 76. No retrases el H1

El mensaje principal debería estar disponible inmediatamente.

No configures un Delay enorme para el H1.

El visitante no debería esperar para saber:

qué ofrece la página.

Paso 77. Hide based on device

No utilices:

ocultar H1 en mobile

Evidentemente es contenido esencial.

Tampoco ocultes la descripción únicamente porque ocupa espacio.

Si es demasiado larga:

edítala.

Ocultar puede utilizarse para elementos realmente prescindibles.

Por ejemplo

una decoración visual secundaria.

Pero no como sustituto de buen responsive.

Paso 78. Hero y rendimiento

El Hero es visible muy pronto.

Por eso evita una Image:

enorme e innecesariamente pesada

Especialmente si se trata de:

• Background;

• fotografía grande.

Utiliza una resolución apropiada para la visualización.

No subas:

una imagen gigantesca

solo porque existe en alta resolución.

El objetivo es equilibrio entre:

• calidad;

• peso.

Paso 79. No cargues varias imágenes invisibles sin necesidad

Evita crear:

Hero desktop
+
Hero tablet
+
Hero mobile

como tres Sections completas

solo para cambiar una imagen,

si puedes resolver el diseño de forma responsive.

Duplicar contenido genera:

• mantenimiento;

• peso;

• IDs duplicados;

• riesgo de inconsistencias.

Una sola Section responsive es preferible cuando sea posible.

Paso 80. Comprueba el Hero sin CSS personalizado

Antes de agregar CSS:

desactiva mentalmente cualquier “maquillaje”.

Pregunta:

• ¿la estructura funciona?

• ¿el contenido es claro?

• ¿el CTA funciona?

• ¿el responsive funciona?

Si la respuesta es sí:

la base es sólida.

Paso 81. Comprueba el Hero sin Image

Pregunta:

¿Comprendo la propuesta solo con H1 + Paragraph + CTA?

Si no:

la Image está compensando un problema de mensaje.

Corrige el contenido.

Paso 82. Comprueba el Hero sin Paragraph

Lee:

Eyebrow
+
H1
+
CTA

¿Entiendes la oferta?

Si no:

el H1 puede ser demasiado abstracto.

Paso 83. Comprueba el CTA sin contexto

Lee solamente:

Comenzar

Puede ser correcto si la acción es evidente.

Pero:

Hacerlo ahora

puede ser ambiguo.

El texto del CTA debe ser claro.

Paso 84. Comprueba que el Hero no repita el Header

Header:

Waclis
Inicio
Productos
Servicios
Contacto

Hero no necesita repetir:

Inicio
Productos
Servicios
Contacto

Utiliza Hero para:

• propuesta;

• CTA.

No como segundo menú.

Paso 85. Comprueba que no repita el Banner

Si tu plantilla ya muestra:

Banner:
Tu negocio, más simple

y luego Hero:

Tu negocio, más simple

estás duplicando contenido.

Decide cuál debe mantenerse.

Paso 86. Ver página

Una vez terminada la composición:

utiliza:

Guardar Cambios

Después:

Ver página

No existe un segundo paso de publicación.

Paso 87. Prueba CTA principal

Haz clic.

Debe ir al destino correcto.

No basta con:

“parece un Button”

Debe funcionar.

Paso 88. Prueba CTA secundario

Mismo procedimiento.

Especialmente si clonaste.

Paso 89. Revisa desktop real

Comprueba:

• ancho total;

• tamaño H1;

• relación texto/imagen;

• Padding;

• CTA.

Paso 90. Revisa monitor grande

Pregunta:

¿El Hero se vuelve demasiado vacío?

Boxed puede ayudar.

Si H1 queda demasiado ancho:

usa Max Width.

No aumentes Font size únicamente para llenar espacio.

Paso 91. Revisa tablet

Comprueba:

• cantidad de líneas del H1;

• ancho Image;

• distribución.

Este es uno de los tamaños más importantes.

Paso 92. Revisa celular

Comprueba:

• orden;

• H1;

• descripción;

• CTA;

• Image;

• Padding lateral;

• scroll horizontal.

Paso 93. Revisa scroll

El Hero no debería impedir continuar.

Especialmente si:

• Full Height;

• Background;

• mapa o video;

• elementos interactivos.

Paso 94. Revisa orientación horizontal

En móvil horizontal:

el Hero también debería permanecer usable.

Evita depender de un único tamaño de pantalla.

Paso 95. Revisa Zoom del navegador

El contenido debería crecer sin cortarse.

Una razón adicional para evitar:

• Height fija;

• Position absolute.

¿Qué hacer si H1 ocupa demasiado?

Primero:

• simplifica texto.

Después:

• Font size;

• Line height;

• Max Width.

No cambies H1 a H3 para hacerlo más pequeño.

¿Qué hacer si ocupa muy poco?

No lo agrandes automáticamente a:

100px

Puedes mejorar:

• wording;

• Width de columna;

• composición.

¿Qué hacer si la Image domina demasiado?

Puedes cambiar:

5 + 7

por:

7 + 5

O limitar:

Max Width

de la Image.

¿Qué hacer si la Image queda pequeña?

Revisa:

• Grid;

• Width;

• Max Width.

No uses Transform.

¿Qué hacer si el Hero parece vacío?

No agregues elementos solamente para llenar.

Puede necesitar:

• menos Height;

• mejor Padding;

• una Image más adecuada.

Espacio vacío no siempre es un problema

Puede ayudar a:

• foco;

• jerarquía.

¿Qué hacer si el Hero está demasiado cargado?

Reduce:

• textos;

• CTA;

• iconos;

• Badges;

• animaciones.

El Hero no necesita contar toda la historia.

¿Qué hacer si quiero agregar un Badge “Nuevo”?

Puede funcionar si realmente corresponde.

Por ejemplo:

[NUEVO]

Nueva solución...

Pero recuerda:

el Badge es manual si no existe una integración específica.

Cuando deje de ser nuevo:

actualízalo.

¿Qué hacer si quiero agregar Counter?

Probablemente no dentro del Hero principal,

salvo que la cifra sea realmente parte de la propuesta.

Puede ser mejor una Section posterior:

500+
clientes

No conviertas el Hero en un tablero de métricas.

¿Qué hacer si quiero incluir estrellas o testimonios?

Puede utilizarse una pequeña prueba social,

pero con moderación.

Por ejemplo:

★★★★★
Más de...

solo si los datos son reales.

No inventes calificaciones.

Una Section de Testimonios posterior suele ofrecer más contexto.

¿Qué hacer si quiero colocar un formulario?

Para Landing Pages puede tener sentido.

Por ejemplo:

[ TEXTO ][ FORMULARIO ]

Pero debes tener en cuenta:

• cantidad de campos;

• validación;

• procesamiento;

• privacidad.

Lo abordaremos en el tutorial de Landing Page.

¿Qué hacer si quiero un video junto al texto?

Puedes reemplazar:

Image

por:

Embed Video

si el video es esencial.

Pero recuerda:

• más peso;

• mayor interacción.

No utilices video si una Image comunica lo necesario.

¿Qué hacer si quiero Background Video?

Utiliza la opción de Section cuando corresponda.

Pero asegúrate de:

• mantener texto legible;

• no depender de audio;

• revisar rendimiento.

¿Qué hacer si el texto queda ilegible sobre Background?

Utiliza:

• Overlay;

• otra imagen;

• otra ubicación del texto.

No agregues:

text-shadow gigantesca

como primera solución.

El problema puede estar en el Background.

¿Qué hacer si Overlay oscurece demasiado?

Ajusta el diseño.

El Background debe seguir siendo reconocible

si es importante.

Pero la legibilidad tiene prioridad.

¿Qué hacer si el Background se ve bien desktop y mal mobile?

Puede ocurrir por recorte.

Evalúa:

• otra imagen;

• otra composición;

• utilizar Image component.

No intentes corregir todo mediante Position x/y sin comprobar otras pantallas.

¿Qué hacer si el contenido queda debajo del Header?

Recuerda que el Hero está dentro de un bloque.

No lo posiciones manualmente hacia arriba para introducirlo dentro del Header.

Header pertenece a la plantilla.

Evita:

margin-top: -150px;

sin comprender la estructura.

Puede superponerse en mobile.

¿Qué hacer si quiero un Hero “overlap” visual?

Eso es una composición avanzada.

Puede requerir:

• Margin negativo;

• Position;

• z-index.

Primero asegúrate de que la versión básica funciona.

No comiences con una superposición avanzada si todavía no dominas la estructura responsive.

¿Qué hacer si quiero un Hero diagonal o con separadores?

Section incluye:

• Top Separator;

• Bottom Separator.

Puedes explorar estas opciones si el diseño lo necesita.

No es obligatorio.

Un Hero profesional no necesita decoraciones complejas.

Utilizar IA para redactar el Hero

Puedes utilizar ChatGPT, Claude o Gemini.

Prompt para propuesta de valor

Necesito redactar el Hero de una Página web.

Empresa:
[describir]

Cliente ideal:
[describir]

Producto/servicio:
[describir]

Beneficio principal:
[describir]

Redacta:
- texto superior de máximo 5 palabras;
- H1 de máximo 12 palabras;
- Paragraph de máximo 30 palabras;
- CTA principal de máximo 4 palabras;
- CTA secundario opcional.

No inventes beneficios, cifras ni funcionalidades.

Prompt para evaluar claridad

Este es mi Hero:

Eyebrow:
[...]

H1:
[...]

Paragraph:
[...]

CTA:
[...]

Responde:
1. ¿Se entiende qué ofrece la empresa?
2. ¿Se entiende para quién?
3. ¿Existe un beneficio concreto?
4. ¿El CTA anticipa correctamente la acción?
5. ¿Hay frases demasiado genéricas?

No reescribas todavía.

Prompt para mejorar sin cambiar significado

Mejora la claridad de este Hero:

[contenido]

Reglas:
- no inventes beneficios;
- no agregues estadísticas;
- no agregues funcionalidades;
- H1 máximo 12 palabras;
- Paragraph máximo 30 palabras;
- español neutro.

Prompt para elegir 6+6, 7+5 o 5+7

Voy a crear un Hero en Waclis.

Contenido textual:
[pegar]

Recurso visual:
[describir]

Necesito elegir entre:
- 6 + 6;
- 7 + 5;
- 5 + 7.

Analiza cuál da mejor prioridad al contenido.

Waclis utiliza Bootstrap 4.

No generes código.

Prompt para revisar imagen

Quiero utilizar esta imagen en un Hero:

[describir imagen]

El texto estará:
[a la izquierda / encima]

Analiza:
- si la imagen comunica el servicio;
- si tiene zonas limpias para texto;
- si Cover podría cortar información importante;
- si sería mejor como Image o Background.

No inventes elementos que no aparecen en la imagen.

Prompt para revisar responsive

Mi Hero tiene esta estructura:

Desktop:
7 + 5
Texto | Imagen

Mobile:
Texto
Imagen

H1:
[texto]

Paragraph:
[texto]

Analiza si la longitud del contenido puede generar problemas en tablet o celular.

No generes CSS todavía.

Prompt para revisar HTML

Este es únicamente el HTML de un Hero creado en Waclis:

[pegar]

Waclis utiliza Bootstrap 4.

Identifica:
- Section;
- Container;
- Row;
- Columns;
- H1;
- Paragraph;
- Links;
- Image;
- IDs;
- Classes.

No modifiques nada.

Prompt para detectar H1 incorrecto

Esta página tiene estos Headings:

[lista]

Indica:
- cuál parece ser el título principal;
- si existen varios H1 innecesarios;
- si algún nivel parece elegido solo por tamaño visual.

No cambies el texto.

Prompt para CSS localizado

Tengo un Hero en Waclis.

Class raíz:
.custom-main-hero

Necesito:
- Padding 88px desktop;
- Padding 52px mobile;
- no modificar otras Sections;
- no modificar Header;
- no modificar Footer;
- no alterar Bootstrap Classes.

Waclis utiliza Bootstrap 4.

No cambies HTML.
No agregues JavaScript.

Devuélveme solamente CSS localizado.

Prompt para diagnosticar scroll horizontal

Este Hero genera scroll horizontal en celular.

HTML:
[pegar solamente Hero]

CSS:
[pegar solamente CSS relacionado]

Busca:
- width fija;
- min-width;
- imagen;
- margin;
- position;
- transform;
- Grid Column;
- padding.

No utilices overflow-x:hidden como solución.
No reescribas toda la Section.

Prompt para Background

Tengo un Hero con Background Image.

Problema:
el H1 se lee bien en desktop pero pierde contraste en mobile.

HTML:
[pegar]

CSS:
[pegar]

Analiza:
- recorte;
- background-position;
- Overlay;
- ubicación del texto.

Prioriza legibilidad.
No agregues text-shadow extrema.

Prompt para detectar exceso visual

Mi Hero contiene:

[listar elementos]

Analiza si existen demasiados:
- CTA;
- animaciones;
- iconos;
- Badges;
- textos.

Objetivo:
que el visitante comprenda la propuesta en pocos segundos.

No elimines nada todavía.
Indica qué elementos son prioritarios y cuáles secundarios.

Prompt para comparar Hero y Banner

Actualmente mi Home tiene:

Banner:
[contenido]

Hero:
[contenido]

Analiza si ambos cumplen funciones diferentes o si están duplicando el mismo mensaje.

No propongas eliminar ninguno sin explicar el motivo.

Buenas prácticas

Recomendamos:

• comunicar primero;

• utilizar un H1 claro;

• mantener un beneficio principal;

• utilizar uno o dos CTA;

• seleccionar una imagen relevante;

• utilizar Grid Row;

• definir mobile desde el principio;

• mantener Container controlado;

• utilizar Auto Height cuando sea suficiente;

• utilizar Full conscientemente;

• aplicar Overlay por legibilidad;

• revisar Background en todos los dispositivos;

• utilizar Classes propias;

• mantener CSS localizado;

• limitar animaciones;

• probar todos los Links;

• revisar rendimiento.

Errores frecuentes

Utilizar frases muy abstractas

Prioriza claridad.

Crear un Hero enorme que no explica qué ofrece la empresa

Tamaño no sustituye contenido.

Utilizar H1 solo porque es grande

Respeta la jerarquía.

Utilizar varios H1 por diseño

No es necesario.

Convertir el H1 en un párrafo

Resume.

Repetir exactamente el H1 en el Paragraph

Amplía la información.

Incluir diez beneficios

Desarróllalos más abajo.

Utilizar cinco CTA

Define una prioridad.

Utilizar “Ver más” sin contexto

Utiliza una acción específica.

Dejar URL #

Configura un destino real.

Utilizar Html Button para navegación sin necesidad

Utiliza Link.

Mantener 7+5 en celular

Apila.

Utilizar Margin top para centrar verticalmente

Utiliza Grid.

Colocar Image primero en HTML y corregir después con reverse

Planifica mobile desde el principio.

Utilizar imágenes genéricas que no aportan

Busca una relación con la propuesta.

No completar Alt

Revísalo.

Deformar la Image

Mantén proporción.

Utilizar Cover sobre una captura que necesita verse completa

Considera Contain.

Utilizar Background para información importante

Puede recortarse.

Colocar texto dentro de la imagen

Utiliza Heading real.

No utilizar Overlay cuando hace falta contraste

Prioriza legibilidad.

Utilizar Overlay demasiado fuerte sin necesidad

Equilibra.

Utilizar Full Height solo porque parece moderno

Evalúa la experiencia.

Utilizar Height fija de 700px

Puede cortar contenido.

Usar Position absolute para maquetar

Utiliza Grid.

Usar Margins gigantes

Utiliza estructura.

Utilizar espacios vacíos

Utiliza Padding.

Utilizar <br> para controlar responsive

Deja fluir el texto.

Mantener Background Video aunque no aporte

Image puede ser mejor.

Utilizar Slider con cinco mensajes como primera opción

Define una propuesta principal.

Animar cada elemento

Simplifica.

Retrasar el H1 mediante animación

El mensaje debe ser inmediato.

Ocultar contenido esencial en mobile

Adapta.

Duplicar Hero desktop/mobile como primera solución

Mantén una sola Section responsive cuando sea posible.

Agregar Bootstrap desde CDN

Waclis ya utiliza Bootstrap 4.

Agregar JavaScript para responsive

No es necesario.

Aplicar CSS global a h1

Limita al Hero.

Aplicar CSS global a .container

Puede afectar todo el sitio.

Aplicar CSS global a .row

Puede romper otros bloques.

Aplicar CSS global a img

Puede afectar otras imágenes.

No revisar Linked styles

Puedes cambiar varios Heroes simultáneamente.

No utilizar Ver página

La prueba final ocurre en el frontend.

Flujo profesional recomendado

1. DEFINIR LA PROPUESTA
↓
2. DEFINIR BENEFICIO PRINCIPAL
↓
3. DEFINIR CTA
↓
4. ELEGIR IMAGE O BACKGROUND
↓
5. CREAR SECTION
↓
6. ELEGIR BOXED / FULL
↓
7. ELEGIR AUTO / FULL HEIGHT
↓
8. AGREGAR GRID ROW
↓
9. DEFINIR 6+6 / 7+5 / 5+7
↓
10. DEFINIR MOBILE
↓
11. AGREGAR EYEBROW
↓
12. AGREGAR H1
↓
13. AGREGAR PARAGRAPH
↓
14. AGREGAR CTA
↓
15. AGREGAR IMAGE
↓
16. CONFIGURAR ALT
↓
17. AJUSTAR TYPOGRAPHY
↓
18. AJUSTAR ESPACIADO
↓
19. AGREGAR BACKGROUND / OVERLAY SI CORRESPONDE
↓
20. REVISAR LINKED STYLES
↓
21. REVISAR DESKTOP
↓
22. REVISAR TABLET
↓
23. REVISAR CELULAR
↓
24. AGREGAR CSS SOLO SI ES NECESARIO
↓
25. GUARDAR CAMBIOS
↓
26. VER PÁGINA
↓
27. PROBAR CTA

Checklist de contenido

• Se entiende qué ofrece la empresa.

• Se entiende para quién es.

• Existe un beneficio principal.

• El H1 es claro.

• El H1 no es excesivamente largo.

• El Paragraph amplía el H1.

• No repite exactamente la misma frase.

• Existe un CTA principal claro.

• El CTA anticipa la acción.

• El segundo CTA aporta valor.

• No existen demasiadas acciones.

Checklist de estructura

• Utilicé una Section.

• Elegí Boxed o Full conscientemente.

• Elegí Auto o Full conscientemente.

• No agregué Containers innecesarios.

• Utilicé Grid Row cuando corresponde.

• La proporción de columnas tiene sentido.

• El orden del HTML funciona en mobile.

• Utilicé Navigator.

• No utilicé Position absolute para la estructura.

• No utilicé Margins gigantes.

Checklist del H1

• Existe un título principal claro.

• El nivel Heading corresponde a su función.

• No elegí H1 solamente por tamaño.

• No existen H1 repetidos innecesariamente.

• Desktop tiene buena legibilidad.

• Tablet tiene buena legibilidad.

• Mobile tiene buena legibilidad.

• Line height es apropiado.

• No utilicé <br> solamente por diseño.

Checklist de CTA

• El CTA principal tiene URL real.

• No utiliza #.

• El CTA secundario tiene URL real.

• Target es coherente.

• El texto explica la acción.

• El CTA principal tiene mayor jerarquía.

• Hover mantiene contraste.

• Active mantiene legibilidad.

• Mobile puede utilizarlo cómodamente.

• Probé los Links mediante Ver página.

Checklist de Image

• La imagen aporta contenido.

• Utilicé Set Image.

• Alt está configurado.

• No deformé la proporción.

• Cover o Contain fueron elegidos conscientemente.

• La imagen tiene calidad suficiente.

• No es innecesariamente pesada.

• Desktop funciona.

• Tablet funciona.

• Mobile funciona.

• No genera scroll horizontal.

Checklist de Background

• La imagen funciona como fondo y no como contenido esencial.

• El texto mantiene contraste.

• Overlay está configurado si es necesario.

• Desktop tiene buen recorte.

• Tablet tiene buen recorte.

• Mobile tiene buen recorte.

• El sujeto principal no desaparece.

• No hay texto incrustado dentro de la imagen.

• Background Video solo se utiliza si aporta valor.

Checklist responsive

• Desktop funciona.

• Tablet funciona.

• Celular funciona.

• El H1 no ocupa demasiadas líneas.

• Las columnas se apilan correctamente.

• El orden del contenido es lógico.

• Los CTA no desbordan.

• La Image no desborda.

• El Padding lateral es suficiente.

• No utilicé Hide para evitar arreglar el layout.

• No existe scroll horizontal.

Checklist técnico

• La Section tiene una Class propia si necesito CSS.

• Los IDs son únicos.

• Revisé Linked styles.

• No modifiqué h1 globalmente.

• No modifiqué .row globalmente.

• No modifiqué .container globalmente.

• No modifiqué img globalmente.

• No agregué Bootstrap.

• No agregué jQuery.

• No agregué JavaScript innecesario.

• El CSS adicional está localizado.

• No utilicé !important como primera solución.

Checklist final

• Guardé los cambios.

• Utilicé Ver página.

• Probé CTA principal.

• Probé CTA secundario.

• Revisé desktop real.

• Revisé tablet.

• Revisé celular.

• Revisé un dispositivo real cuando fue posible.

• El Hero se entiende en pocos segundos.

• El Hero no repite innecesariamente el Header.

• El Hero no duplica un Banner existente.

• La siguiente Section puede encontrarse fácilmente al desplazarse.

• El Hero funciona incluso sin animaciones.

En resumen

Un Hero profesional no comienza con:

Background espectacular

Comienza con:

PROPUESTA CLARA

Su estructura fundamental es:

CONTEXTO
↓
H1
↓
DESCRIPCIÓN
↓
CTA
↓
RECURSO VISUAL

En una composición de dos columnas

puedes utilizar:

Section
↓
Container
↓
Grid Row
↓
7 + 5

Desktop:

[        TEXTO        ][   IMAGEN   ]

Mobile:

TEXTO

IMAGEN

Si utilizas Background

puedes trabajar con:

Background:
Image

y:

Overlay

para mejorar la legibilidad.

Pero recuerda

IMAGE
→ puede ser contenido

mientras:

BACKGROUND IMAGE
→ forma parte de la presentación visual

No escondas información esencial dentro del Background.

Respecto de la altura

AUTO
→ contenido determina la altura

Mientras:

FULL
→ experiencia de mayor ocupación vertical

No utilices Full solamente porque parezca más impactante.

Respecto del Heading

H1
→ título principal

No:

H1
→ cualquier texto que quiero hacer grande

El tamaño se controla desde Typography.

Respecto del CTA

CTA PRINCIPAL
→ una acción prioritaria

Puedes complementar con:

CTA SECUNDARIO

Pero evita saturar.

Y técnicamente

no necesitas:

Position absolute

Ni:

Height fija

Ni:

Bootstrap adicional

Ni:

JavaScript

para construir un Hero sólido.

La metodología correcta es

MENSAJE
↓
ESTRUCTURA
↓
RESPONSIVE
↓
ESTILO
↓
DETALLES

Y al finalizar

GUARDAR CAMBIOS
↓
VER PÁGINA
↓
PROBAR CTA
↓
REVISAR DESKTOP
↓
REVISAR TABLET
↓
REVISAR CELULAR

Un buen Hero permite que una persona que llega por primera vez pueda responder rápidamente:

“Entiendo qué ofrece esta Página web, por qué podría interesarme y cuál es el siguiente paso que puedo dar.”

Cuando eso ocurre, el Hero está cumpliendo correctamente su función.