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

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:0010:17

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

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

Clase 10 de 18

Clase 10 / 18

Recursos

¿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?

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.
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?

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.
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?

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.
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?

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!

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 Sección de Portafolio en Webflow CMS

Progreso del curso

Introducción a Webflow

Proyecto: portafolio

Interacciones en Webflow

Detalles finales

Recursos

Recursos