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

¿Cómo crear una sección de portafolio en Webflow utilizando colecciones CMS?

Diseñar un portafolio web con Webflow CMS es más sencillo de lo que parece. En esta clase, aprenderás a crear una sección que muestre dinámicamente los proyectos de tu portafolio utilizando la colección CMS que previamente configuraste. Siguiendo estos pasos, podrás optimizar no solo la apariencia de tu sitio sino también su funcionalidad.

¿Qué necesitas antes de empezar?

Antes de zambullirte en el diseño, asegúrate de tener:

• Una colección CMS configurada con proyectos que quieras mostrar.
• Un diseño previo o plantilla que te sirva de referencia visual.

¿Cómo configurar la sección de portafolio?

1. Creación de la sección:

   • Inicia accediendo al diseñador de Webflow.
   • Selecciona el cuerpo de la página y añade una nueva sección.
   • Denomina esta sección como "Portfolio Section" para diferenciarla y aplícale un fondo oscuro similar al de la sección hero.

2. Estructura del encabezado:

   • Copia el encabezado de la sección hero y pégalo en la nueva sección.
   • Asegúrate de que el texto sea legible sobre el fondo oscuro aplicándole una clase de "White Text".

¿Cómo vincular la colección CMS?

1. Lista de colecciones:

   • Añade una lista de colecciones desde el panel de elementos.
   • Vincula esta lista a la colección CMS de tus proyectos.

2. Estructuración del contenido CMS:

   • Cada lista de colección consta de tres elementos: envoltura, lista y elemento de colección.
   • Asigna clases específicas: "Portfolio Wrapper" para la envoltura, "Portfolio List" para la lista y "Portfolio Item" para el elemento de colección.

¿Cómo agregar contenido dinámico?

1. Imágenes de portafolio:

   • Añade un bloque div dentro del elemento de portafolio y nómbrelo "Portfolio Image".
   • Establece una altura de aproximadamente 400 píxeles.
   • Configura una imagen de fondo que se tomará dinámicamente de tu colección CMS.

2. Detalles del proyecto:

   • Añade otro div dentro del elemento de portafolio para el contenido como nombre y botón. Llama a este div "Portfolio Details".
   • Introduce un encabezado H2 para el nombre del proyecto con la clase "Portfolio Name". Trae el contenido dinámico directamente desde el CMS.
   • Copia un botón existente, pégalo dentro del div "Portfolio Details" y personaliza su etiqueta a "View Project", enlazándolo con las URLs de tu CMS.

¿Cómo ajustar la disposición con CSS Grid?

1. Configuración de grid:
   • Asigna el modo de visualización de grid CSS a tu elemento de portafolio.
   • Webflow coloca dos filas por defecto. Elimina una para simplificar el diseño.
   • Verifica que el botón y el nombre estén dentro del div contenedor adecuado para mantener la estructura visual deseada.

¿Qué reto puedes intentar?

Ajusta los márgenes, rellenos y espaciado del diseño para que coincida con tu plantilla de ejemplo. Intenta añadir más contenido dinámico si lo deseas. Explora el alcance de estas herramientas y no dudes en interactuar con otros estudiantes o instructores para optimizar tu aprendizaje.

Sigue estos pasos para crear una sección de portafolio funcional y visualmente atractiva. Mantén siempre tus objetivos de diseño en mente y sigue experimentando con las capacidades de Webflow CMS para alcanzar resultados sorprendentes. ¡Estás a solo un paso de convertirte en un experto en diseño web!