Código para crear un portfolio de trabajos sencillo y responsive

Este post es bastante específico, pues solo te va a interesar en el caso de que tengas la necesidad de crear tu propio portfolio.

Poco a poco se van acumulando los trabajos y siempre vienen bien que, si tu actividad profesional lo permite y viene a cuento, los clientes potenciales puedan ver el resultado de otros trabajos ya realizados.

Los testimonios están muy bien, pero hay personas que prefieren ver una muestra ya terminada de lo que les estás vendiendo.

Hace unos meses me planteé incluir el mio propio.

Lo cierto es que estuve mirando un montón de plugins, tanto gratuitos como de pago, y no me convencían mucho.

Al fina opté por picar código yo mismo y hacerlo sencillo y a mi gusto 🙂

Te explico cómo.

como-crear-un-porfolio-para-tu-web

Cómo crear un portfolio de trabajos

Antes de entrar en materia, quiero explicarte que hay muchas formas de plantear la visualización de un portfolio.

Por ejemplo al hacer click en cada miniatura:

  • Que se abra una única imagen más grande por cada trabajo.
  • Que se abra un slider en un popup y pasen varias imágenes.
  • Que se abra una página dentro de tu web con muchos detalles de cada trabajo.
  • Que simplemente se abra la web de destino de ese trabajo (mi caso)

Sí, yo escogí esta última opción para no complicarme la vida.

Pensé que si usaba un plugin, sería oootro más para la lista y a comer recursos.

Y crear una página específica para cada curro me parecía un poco coñazo, la verdad. ¿Para qué, si puedo hacer que el usuario vaya directamente a ver toda la web de mi cliente?

Total, que mi idea fue poner tres columnas de miniaturas e ir añadiendo trabajos, simplemente con el enlace para que se abra la web en una pestaña nueva del navegador.

Paso 1: trabajo previo con las imágenes

Aquí tenemos currito de Photoshop.

Tampoco hace falta hacer maravillas, simplemente yo lo que hice fue hacer pantallazos de cada web que quería incluir y darle un mismo tamaño.

Luego sí es cierto que les metí una bandita por encima a todas con lo de «VISITAR WEB», eso ya queda a gustos y manejo que tengas de tu programa de edición de imágenes, Photoshop o el que sea.

Eso sí, el tamaño te recomiendo que sea 300x194px.

¿Por qué? Porque si el ancho no supera los 300px, no necesitas hacer nada especial con las imágenes para que se adapten bien a los móviles en posición vertical, que sería la visualización en dispositivo más pequeña.

Lo que haremos (ahora lo verás) es meter por CSS que se vayan colocando debajo, de tal forma que en el móvil vertical tendremos una sola columna, pero no se tendrán que hacer más pequeñas las imágenes.

También es recomendable poner a todas las imágenes un borde finito, del mismo grosor y color a todas. Esto lo puedes hacer en Photoshop o directamente por CSS, como quieras.

Paso 2: crear una clase CSS para aplicar a cada trabajo

Simplemente vamos a «Apariencia/Editor», y dentro de nuestro style.css añadimos la clase «portfolio» con las siguientes carcaterísticas:

.portfolio {
margin: 10px 50px 20px 0px;
display: inline-block;
}
.portfolio a:hover {
opacity: 0.6;
}

Estamos haciendo algo muy sencillo: primero decimos que a lo que aplique esta clase, tendrá unos márgenes determinados respecto de los elementos que lo rodeen.

Dicho más sencillo: le estoy indicando cúanto espacio debe dejar entre las miniaturas, tanto a los lados como arriba y abajo en las filas.

Ese atributo «margin» lo puedes modificar a tu gusto, sabiendo que el orden de los valores es: «arriba, derecha, abajo e izquierda».

Después tenemos el truquillo para hacer que se adapte según el ancho del dispositivo, el «display: inline-block;»

Para mi gusto esto es más sencillo que hacer uso de las clases para columna de Genesis, porque el inline-block lo que hace es «meto las imágenes que quepan a lo ancho, y las que no las voy poniendo debajo.»

Pues justo lo que quiero 🙂

Por último, a esta clase portfolio le aplicamos un estado «:hover» para decirle que cuando estemos con el cursor encima, tenga una opacidad del 60%.

Al ser el fondo blanco, el efecto es que la imagen se aclare un poquito, sin más.

Paso 3: crear la página y meter los trabajos

Tan complicado como crear una página nueva y ponerle un nombre.

Dependiendo del theme que uses (con Genesis es muy sencillo) te será más o menos dificil el indicar que dicha página sea de «ancho total», pues aqui un sidebar no va a hacer otra cosa que molestarnos.

Si lo piensas, casi todos los themes de Genesis tienen alrededor de 1.000px de ancho total, por ello pongo 3 miniaturas de 300px más los márgenes, eso es jugar un poco con el tamaño de cada theme y los márgenes para que encajen bien.

Una vez que hemos hecho esto, metemos nuestras imágenes pero vamos a meterlas por código dentro de un DIV para poder aplicar bien la clase CSS.

Por ejemplo:

<div class="portfolio">
<h4 style="text-align: center;"><a href="http://blog.perfumesparis.com/" target="_blank">Blog de Perfumes París</a></h4>
<a href="http://blog.perfumesparis.com/" target="_blank"><img class="alignnone wp-image-6962 size-full" src="https://www.haciaelautoempleo.com/wp-content/uploads/2014/08/blog-perfumes-paris.jpg" alt="blog-perfumes-paris" width="300" height="194" /></a>
</div>

Puedes meter primero la imagen normal, y al insertarla le pones su atributo «alt», le dices que alineación «ninguna» y le puedes poner del tirón la URL de destino. Eso sí, luego tendrás que volver a entrar en las opciones de edición de dicha imagen para activar que el enlace se abra en una pestaña nueva (recomendado)

Después te vas a la pestaña de texto, y manipulas para que tu código quede como este, obviamente con tu imagen.

Yo he metido un titulo en H4 centrado, para el nombre del trabajo o la web. Esto ya como quieras.

La cuestión es que cuando tengas uno a tu gusto, copies y pegues desde la pestaña de «Texto» ese mismo código tantas veces como trabajos vayas a meter, y luego ya solo tienes que ir a la de «Visual» y puedes borrar la imagen y darle a «Añadir objeto» para que te meta otra imagen distinta en su lugar.

Puedes ver el resultado en mi portfolio de trabajos web.

¿Y si lo vemos con un video?

 

Y tú, ¿tienes un porfolio en tu web o blog?

¿Qué método o plugin has utilizado? Nos vemos en los comentarios.

¿Has visto ya el contenido de mi curso gratuito?

Compártelo si crees que puede ser de utilidad para otros. ¡Gracias!

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on whatsapp
WhatsApp

CURSO GRATUITO

PARA EMPRENDEDORES ONLINE

Algunos emprendedores buscan la libertad encerrados en una cárcel diaria de tareas infinitas.

Otros entienden su web y ganan mucho dinero con ella.

No te vayas sin dejar tu comentario...

11 comentarios en “Código para crear un portfolio de trabajos sencillo y responsive”

  1. Hola Omar. El thive content archtect en la opción POST GRID ¿No hay opción de utilizar esta estructura? Vi un vídeo en ingles realizado con thive content builder que se ve que se puede quitar los post y añadir el contenido personalizado pero con el architect no se cono quitar los post y utilizar mi propio contenido ¿No tendrás algún vídeo que explique como hacerlo así?

    Parece interesante utilizar ya la estructura que viene predefinida con el Post Grid ¿No crees?

  2. Fantástico. Muchísimas gracias. Precisamente estaba buscando para hacer algo parecido.
    Este post, me ha solucionado la papeleta y dolores de cabeza para los que no dominamos CCS.
    Saludos.

  3. ¡Justo había pensado en el portfolio esta semana! Pero en principio me interesa ponerlo oculto para enseñarlo solo a los clientes que me interesa, y poder así mostrarles los trabajos de forma más personalizada. Por ahora lo que he pensado ha sido crear una landing con mis trabajos, pero no enlazarla desde la web, así puedo darle el link a quien yo quiera.

    Saludos.

    1. Omar de la Fuente

      Cuando publicas una página dentro de tu WordPress (web) si no pones un item desde el menú que lleve a ella ni desde ningún otro sitio, en realidad tienes el enlace tú (porque sabes donde está) pero nadie más la va a encontrar.
      Te quiero decir con esto que no necesitas hacer algo «fuera de tu web» ni nada por el estilo, simplemente tener tu página creada pero no enlazarla ni ponerla a la vista.
      Un saludo.

  4. Buenos días Omar
    Conocí tu página a través de Maïder Tomasena, visité tu página y me gustó tu enfoque. He recibido tu PDF al suscribirme y quería darte las gracias por poner a nuestra disposición este regalo.

    Un saludo y, ya sabes, te sigo ;D

  5. Lo haces que parece sencillo 😉 Ideal para los que no controlan CSS y/o HTML.

    Yo uso una extensión de Chrome para comprobar un sitio en tamaños de pantalla típicos.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Responsable » Omar de la Fuente Prieto (servidor)
Finalidad » gestionar los comentarios.
Legitimación » tu consentimiento.
Destinatarios » los datos que me facilitas estarán ubicados en los servidores de Webempresa (proveedor de hosting de Haciaelautoempleo) dentro de la UE. Ver política de privacidad de Webempresa. (https://www.webempresa.com/aviso-legal.html).
Derechos » podrás ejercer tus derechos, entre otros, a acceder, rectificar, limitar y suprimir tus datos.

Ir arriba
foto_Omar_Zoom

¿Tienes que irte ya?

Ok… pero no te vayas con las manos vacías.

Tengo un regalo para ti.

MI CURSO GRATUITO PARA EMPRENDEDORES ONLINE

megafono.png
#UNTRAININGDIFERENTE
Días
Horas
Minutos
Segundos

¿Ya tienes que irte?

Ok, pero échale un vistazo a esto, aún estás a tiempo.

VIDEO #1 [01/09/2020]

La gran oportunidad que nos ofrece hoy en día Internet
(sabiendo cómo aprovecharlo)

VIDEO #2 [03/09/2020]

Por qué parece tan complicado tener una web y un proyecto
(y porqué no debería serlo)

VIDEO #3 [07/09/2020]

El camino se hace mucho más sencillo si estás acompañado
(montamos el puzzle de tu web)

Cómo tener una web efectiva que convierta a tus lectores en suscriptores y clientes

megafono.png
#UNTRAININGDIFERENTE
Días
Horas
Minutos
Segundos