Construir la sección hero de un sitio web requiere más que una imagen de fondo llamativa. Los headings, la descripción y el botón de llamada a la acción son los elementos que convierten una sección visualmente atractiva en una herramienta de conversión real. Aquí se explica paso a paso cómo lograrlo dentro del Webflow Designer, aprovechando funciones como global color swatches, flexbox y spans para dar estilo profesional al contenido.
¿Cómo se agrega y estiliza un heading H1 en Webflow?
Dentro de la columna creada previamente, se abre el panel de elementos y se inserta un heading element [0:28]. Webflow lo genera como H1 por defecto, que representa el encabezado principal de cualquier página web. Como solo habrá un H1 en toda la página, no es necesario asignarle una clase personalizada; basta con seleccionar All H1 Headings en el selector para que los estilos se apliquen de forma global [0:44].
Para que destaque sobre el fondo, se le asigna color blanco. Aquí aparece una función muy útil: los global color swatches. Al elegir un color en el color picker, se puede pulsar el icono de + para guardarlo como muestra reutilizable [1:04]. Si en el futuro se decide cambiar el color de marca, solo hay que editar esa muestra y la actualización se refleja en todo el sitio.
El tamaño de fuente se ajusta a 50 píxeles —siguiendo la buena práctica de usar múltiplos de cuatro— y se reduce el letter spacing en las opciones tipográficas avanzadas para lograr un aspecto más compacto y elegante [1:30].
¿Cómo se resalta texto con un color diferente usando spans?
Para crear ese efecto de texto destacado en otro color, se hace doble clic sobre el heading y se selecciona el fragmento deseado [1:46]. Automáticamente aparece una barra de herramientas; al pulsar el icono del pincel, Webflow envuelve ese texto en un span, que es simplemente un contenedor en línea alrededor de una porción de texto. Se le asigna una clase, por ejemplo orange text, y se le da un color naranja. Nuevamente, ese color se guarda como swatch para reutilizarlo después [2:10].
¿Cómo se añaden la descripción y el botón de llamada a la acción?
Debajo del heading se inserta un paragraph element con la clase personalizada subheading [2:24]. Se le aplica color blanco, un tamaño de fuente de 20 píxeles y una altura de línea de 28 píxeles para garantizar legibilidad.
Para el botón, se arrastra un elemento button desde el panel. Por defecto viene con un azul poco atractivo, así que se le asigna la clase button y se cambia el fondo al naranja ya guardado como swatch [2:48]. Se redondean las esquinas con un border-radius de 8 píxeles y se añade un margen superior de 24 píxeles para separarlo del texto.
¿Cómo se centra el contenido con flexbox?
El contenido queda flotando hacia la parte superior y ocupando demasiado ancho horizontal. La solución es seleccionar la sección con clase hero y cambiar su modo de visualización a flex [3:20]. El flexbox es un modo de disposición que permite alinear elementos a lo largo de un eje horizontal o vertical. Basta con hacer clic en el icono de alineación central para que todo el contenido quede perfectamente centrado.
Para controlar el ancho del texto, se asigna a la columna la clase hero-column y se establece un max-width de 640 píxeles [3:48]. Así el contenido se expande hasta ese límite y luego se detiene, replicando el diseño original.
¿Qué es un eyebrow heading y cómo se crea?
El eyebrow heading es un pequeño título que aparece encima del headline principal y sirve como contexto o etiqueta [4:08]. Se copia el heading existente, se pega y se cambia la etiqueta de H1 a H4 mediante el icono de configuración del elemento, ya que su importancia semántica es menor.
Se le asigna la clase eyebrow-heading con color naranja, tamaño de fuente reducido y letter spacing positivo para separar las letras. Un detalle importante: por defecto ocupa todo el ancho de la columna. Para corregirlo, se cambia el display de block a inline-block, lo que hace que solo ocupe el ancho del texto [4:48].
Se añade padding horizontal y vertical, un fondo naranja con opacidad al 10% para lograr un efecto sutil, y un border-radius de 24 píxeles [5:10]. El último ajuste fino: como el letter spacing agrega espacio después de la última letra, se compensa con un poco más de padding en el lado izquierdo para que el texto quede visualmente centrado dentro de su contenedor [5:26].
Con estos pasos, la sección hero queda completa y lista para producción. Si algo no funciona como esperabas, comparte tu duda en los comentarios.
