Diseño de Encabezados y Botones en Webflow

Curso de Webflow para Crear Sitios No-code: Componentes, Layouts e Interacciones

Contenido del curso

Introducción a Webflow

Proyecto: portafolio

Interacciones en Webflow

Detalles finales

18
Optimizar y publicar tu sitio en Webflow
08:16 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:55

Diseño de Encabezados y Botones en Webflow

Curso de Webflow para Crear Sitios No-code: Componentes, Layouts e Interacciones

Clase 6 de 18

Clase 6 / 18

Recursos

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.

Introducción a Webflow

Creación de un Portafolio Web en Webflow paso a paso

Creación de un Portafolio Web con Webflow

Principios de HTML, CSS y modelo de caja en diseño web

Diseño y Herramientas del Editor Webflow

Proyecto: portafolio

Construcción de la Sección Hero en Webflow

Diseño de Encabezados y Botones en Webflow

Diseño de Barra de Navegación en Webflow

Construcción de la Sección de Servicios en un Sitio Web

Creación de Colecciones CMS en Webflow para Portafolios Dinámicos

Diseño de Sección de Portafolio en Webflow CMS

Creación de la Sección Acerca de en Webflow

Creación de un Footer en Webflow para Sitios Web

Diseño Responsivo en Webflow para Todos los Dispositivos

Diseño de Barra de Navegación Responsive en Webflow

Interacciones en Webflow

Interacciones y Animaciones en Webflow: Guía Práctica

Formulario de Contacto en Webflow: Creación y Diseño Interactivo

Interacciones de Webflow: Animar Formularios Emergentes

Detalles finales

Optimizar y publicar tu sitio en Webflow

Diseño de Encabezados y Botones en Webflow

Progreso del curso

Introducción a Webflow

Proyecto: portafolio

Interacciones en Webflow

Detalles finales

Recursos

Recursos