Construcción de la Sección Hero 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:006:58

Construcción de la Sección Hero en Webflow

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

Clase 5 de 18

Clase 5 / 18

Recursos

¿Cómo se comienza a construir un sitio web en Webflow?

Para construir un sitio web en Webflow, es esencial dominar el diseñador de Webflow y entender cómo establecer una estructura efectiva desde el primer paso. En esta clase, comenzaremos con la construcción de la sección hero, una parte fundamental de cualquier sitio web. Sigamos el proceso paso a paso para garantizar que nuestro sitio tenga una base sólida y estéticamente coherente.

¿Qué es lo primero que se debe hacer antes de añadir contenido?

Antes de añadir contenido al cuerpo del sitio web, se debe seleccionar el cuerpo en el diseñador de Webflow haciendo clic en el espacio en blanco y luego seleccionarlo en el panel selector como "Body (All Pages)". Esto asegura que podemos definir los estilos tipográficos por defecto para todo el sitio web, permitiendo que cualquier otra sección herede estos estilos. El uso de una fuente coherente y un sistema de cuadrículas, como el sistema de cuadrículas de cuatro píxeles, es crucial para mantener una jerarquía visual coherente.

¿Cómo se configura la primera sección hero?

Una vez establecidos los estilos de fuente, es hora de agregar y estructurar la primera sección hero:

Añadir una sección: Vamos al panel de elementos y agregamos una sección, asignándole la clase "Section".
Relleno en secciones: Añadimos relleno superior e inferior (por ejemplo, 4em) para que el contenido tenga espacio para "respirar".
Uso de unidades relativas: Al emplear unidades relativas como "em", mantenemos la proporcionalidad respecto al estilo de fuente base.
Añadir un contenedor: Incluimos un bloque div que actúa como contenedor, con un ancho del 90% y márgenes automáticos para centrar el contenido.

¿Cómo se organiza el contenedor y las columnas?

La estructura del sitio fluye mejor con un contenedor bien organizado:

Clases y nombres claros: Los elementos reciben nombres claros, como "Container" y "Column", asegurando que la navegación web sea fácil de entender.
Espaciado interno (Padding): Añadimos un relleno interior de 20 píxeles a las columnas para que el contenido tenga espacio y esté bien distribuido.

¿Cómo se personaliza la sección hero con fondo?

Una de las características destacadas de la sección hero es su personalización:

Extensión de la sección en altura: Ajustamos la altura del elemento "Section" a 100vh (100% de la ventana gráfica) para que ocupe toda la pantalla.
Imagen de fondo: Añadimos una imagen y la ajustamos para cubrir todo el fondo, sin repetición (sin mosaico).
Superposición de color: Para lograr un efecto visual sutil, se agrega una capa de superposición usando un color oscuro con opacidad ajustada, permitiendo que el contenido principal retire la atención.

Con estos pasos, tu sección hero estará lista para llamar la atención de los usuarios de manera efectiva. La próxima etapa implica añadir contenido como títulos y botones, lo que exploraremos más adelante. Continúa aprendiendo y experimentando en Webflow para dominar completamente el diseño web.

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

Construcción de la Sección Hero en Webflow

Progreso del curso

Introducción a Webflow

Proyecto: portafolio

Interacciones en Webflow

Detalles finales

Recursos

Recursos