Diseño de la página de categorías del portafolio

Play

¡Bienvenida, bienvenido! En este tutorial vas a aprender cómo diseñar las páginas de categoría para tu portafolio web. Estas páginas son el resumen de tus trabajos organizados por categorías. Haremos un diseño sencillo, pero visualmente muy atractivo para mostrar tus proyectos de manera profesional.

Antes recuerda que puedes suscribirte gratis al blog.
Si te suscribes puedes proponer artículos y cursos. También te envío un email semanal con todas las novedades que publico en el blog.

Estamos en la octava clase del curso gratuito en el que diseñamos un sitio web completo para un portafolio creativo. En esta lección, nos enfocaremos en las páginas de categorías. Por ejemplo, en la categoría «Espacios», mostraremos todas las ilustraciones relacionadas con espacios creadas por nuestro ilustrador imaginario. En vez de utilizar las entradas y categorías predeterminadas de WordPress, crearemos nuestras propias páginas de categorías para mantener la flexibilidad de añadir un blog en el futuro sin necesidad de tocar nada de código.

Para comenzar, deshabilitamos el título en la página de WordPress. Luego, añadimos un contenedor con dos columnas, donde la columna de la izquierda, más grande, incluirá el título y un párrafo descriptivo. A continuación, insertamos un segundo contenedor con cuatro columnas para las imágenes de los proyectos, utilizando el bloque de imagen del plugin Spectra.

En el primer contenedor, insertamos un encabezado con el título «Espacios» y un párrafo descriptivo. Aplicamos superposición a cada imagen, configurando encabezados y descripciones, y ajustando el estilo para que las imágenes tengan un efecto de acercamiento al pasar el cursor. Además, añadimos enlaces a cada imagen para dirigir a la página de detalle del proyecto correspondiente.

Creamos un patrón no reutilizable llamado «Imágenes páginas categorías» seleccionando una imagen configurada. Luego, reutilizamos este patrón en las otras columnas, manteniendo la coherencia visual sin necesidad de configurar cada imagen manualmente.

Añadimos un espaciado inferior en el contenedor de imágenes para evitar que queden demasiado pegadas. Luego, actualizamos y revisamos la página para asegurarnos de que el diseño final sea el deseado.

En esta clase seguimos avanzamos en el manejo del editor de bloques de WordPress, que es realmente una maravilla y super fácil trabajar con el cuando le has pillado el truquillo. En esta clase ves como copiar estilos de un bloque y pegarlos a otro, como copiar bloques y también creamos un patrón de diseño con todos los estilos definidos para utilizarlo siempre que añadas un nuevo trabajo a tu página de categoría.

Existe la posibilidad de añadir un nuevo item en el menú de administración de WordPress con la misma lógica que tiene las entradas nativas y, de esta manera, asignar etiquetas y categorías a tus páginas de detalle de proyecto. Si estás interesado en aprender cómo hacerlo, házmelo saber a través del formulario de contacto y si hay petición popular lo haré encantado.

En la próxima clase, diseñaremos la página de detalle de proyecto, donde podrás describir tu trabajo con todo lujo de detalles. Si tienes alguna duda, déjamela en los comentarios, estaré encantado de ayudarte. No olvides suscribirte al canal y darle un like si te está gustando el curso. ¡Nos vemos en la siguiente clase!

Descargar archivos utilizados en el curso.