Diseño web detalle proyecto portafolio

Play

La mejor opción para presentar tus trabajos creativos en internet es a través de tu propia página web. En esta novena clase del curso gratuito de diseño web de un portafolio, vamos a diseñar la página de detalle de proyecto. Este diseño te permitirá destacar cada uno de tus proyectos con todo lujo de detellaes y de manera muy 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.

La mejor opción para presentar tus trabajos creativos en Internet es hacerlo a través de tu propia web, porque, a diferencia de otras opciones, puedes explicar con todo lujo de detalles cada uno de los trabajos que has realizado.

Estamos ya en la novena clase del curso gratuito en el cual hacemos un sitio web completo que es un portafolio. A estas alturas del curso ya eres capaz de adaptar el diseño a tu caso concreto para explicar lo que a ti te interesa a través de las páginas de detalle de tus proyectos.

A continuación te dejo el resumen de todo lo que vemos en el video de la lección 9.

Antes de empezar, asegúrate de que todos tus temas y plugins están actualizados. Esto es crucial por razones de seguridad y para aprovechar nuevas funcionalidades. Para actualizar, ve al ítem de actualizaciones en la barra de administración de WordPress y sigue las indicaciones.

Vamos a la página de detalle de proyecto y ocultamos el título de la página. Añadimos un contenedor de una sola columna, y dentro de este, añadimos otro contenedor también de una columna. Dentro del contenedor interno, agregamos un encabezado y un párrafo. Configuramos el encabezado como H1 y añadimos un subencabezado con el texto correspondiente. Ajustamos el estilo del contenedor, aplicando un margen derecho del 50%.

Añadimos un nuevo contenedor de cuatro columnas. Dentro de cada columna, insertamos una caja de información desde el bloque de Spectra. Ocultamos la imagen o icono de la caja y configuramos el título y texto. Duplicamos la caja de información tres veces para rellenar las cuatro columnas. Ajustamos el espaciado del contenedor para que haya un margen superior e inferior de 3em.

Añadimos otro contenedor de dos columnas para una galería de imágenes. Dentro de cada columna, insertamos un bloque de imagen nativo de WordPress. Cargamos nuestras imágenes desde la biblioteca de medios y configuramos cada imagen para que se amplíe al hacer clic. Duplicamos las imágenes y ajustamos el CSS para añadir un efecto de opacidad al pasar el cursor.

Añadimos un contenedor de una columna y dentro de este, un bloque de vídeo. Cargamos el vídeo desde la biblioteca de medios y configuramos una imagen de póster. Ajustamos el comportamiento del vídeo según sea necesario, por ejemplo, silenciándolo por defecto.

Uno de los objtivos de estos es que vayas cogiendo soltura con el editos de bloques de WordPress, para de esta manera, adaptar el diseño a tus necesidades concretas.

Añadimos otro contenedor de una columna para el slider de testimonios. Utilizamos el bloque de recomendaciones de Spectra y configuramos las imágenes, nombres y empresas de los testimonios. Ajustamos los estilos de los textos y la navegación del slider.

Añadimos un bloque de botones con el texto «Volver a espacios». Configuramos el estilo del botón para que tenga un fondo degradado. Ajustamos el espaciado del botón para que tenga un margen inferior de 3em.

Para mejorar el diseño, aplicamos CSS personalizado. Esto incluye ajustar la opacidad de las imágenes al pasar el cursor y cambiar los colores de fondo y del icono de cierre en la galería de imágenes. Este CSS se puede añadir directamente desde el editor de bloques, en la zona CSS que habilita el plugin Spectra. De esta manera, el código solo aplicará a la página que se ha añadido.

Te dejo el fragmento de código CSS que añado en la lección, en el video tienes una explicación detallada de cada una de las líneas que añadimos, que hacen, porque y como las añadimos.

.efecto-imagen-proyecto:hover{
	opacity:0.8;
}

.scrim{
	background-color:#1B191A!important;
}

.close-button{
	fill: white!important;
}

Con estos pasos, hemos diseñado una página de detalle de proyecto completa y funcional para nuestro portafolio. Este diseño te permite destacar tus proyectos de manera profesional y detallada.

En la siguiente clase, aprenderemos a crear una página de enlaces, similar a Linktree, pero personalizada y alojada en tu propio dominio. Si tienes alguna duda o comentario, no dudes en hacérmelo llegar a través de la página de contacto del blog.