Crear un portafolio personalizado en Divi (con CSS)

El módulo de portafolio que trae Divi por defecto cumple, pero se queda corto en personalización: pocas opciones de diseño, una presentación bastante estándar, y poco margen para que tu trabajo destaque como merece. Si quieres un portafolio que se vea realmente bien y refleje tu nivel, necesitas ir un paso más allá. En este tutorial te muestro cómo crear un portafolio personalizado en Divi con CSS, añadiendo unas clases de código que transforman la presentación por completo.

Este tutorial es la base de uno posterior sobre portafolios filtrables: primero construimos el portafolio bien presentado, y luego se le puede añadir la funcionalidad de filtrado por categorías. Vamos a usar un layout de Divi como punto de partida y un código CSS personalizado que le da ese acabado más cuidado.

¿Por qué personalizar el portafolio de Divi con CSS?

El módulo de portafolio nativo de Divi tiene opciones de diseño limitadas. Con un poco de CSS personalizado puedes controlar los efectos hover, la presentación de cada proyecto, las transiciones, el tratamiento de las imágenes y el espaciado de una forma que el módulo no permite por sí solo. El resultado es un portafolio con personalidad, adaptado a lo que tú necesitas mostrar, en lugar de la presentación genérica que todos reconocen como "plantilla de Divi". Si quieres entender a fondo cómo trabajar CSS dentro de Divi, el Curso de Divi 5 completo te da las bases.

Paso 1: Parte de un layout base

En el tutorial uso un layout de Divi como punto de partida — una estructura de filas y columnas donde cada proyecto del portafolio ocupa una columna con su imagen y su información. Puedes descargar el layout exacto que uso en los recursos de este tutorial (más abajo). Importar el layout te ahorra el trabajo de maquetar la estructura desde cero y te permite enfocarte en la personalización con CSS.

Consejo: si importas el layout, recuerda que el efecto visual depende del código CSS que aplicamos en este tutorial. Sin ese CSS, el layout se verá plano. Asegúrate de copiar el código personalizado en las opciones de la página (o en Opciones de Divi) para que la presentación se vea tal como en el ejemplo.

Paso 2: Estructura cada proyecto del portafolio

Cada elemento del portafolio se construye con una columna que contiene la imagen del proyecto y, opcionalmente, un texto con el título o la categoría. La idea es que cada proyecto sea una unidad visual coherente. En el layout, los proyectos se distribuyen en una rejilla — por ejemplo, tres columnas por fila — para una presentación tipo galería.

Paso 3: Aplica el código CSS personalizado

Aquí está el corazón del tutorial. El código CSS personalizado controla el efecto que se aplica cuando el usuario pasa el cursor por encima de cada proyecto: puede ser un oscurecimiento de la imagen que revela el título, un zoom suave, un desplazamiento, o una combinación. Estos efectos hover son los que le dan ese acabado profesional que distingue un portafolio cuidado de uno básico.

El código se pega en las opciones de CSS personalizado de la página (en la pestaña Avanzado de la configuración de la página) o en Opciones de Divi si lo quieres global. En los recursos del tutorial dejo el código completo listo para copiar y pegar.

🎓 ¿Quieres dominar el CSS personalizado en Divi?
En uxdivi.com/cursos tenemos el Curso de Divi 5 completo donde aprendes a aplicar CSS personalizado, clases, IDs y efectos avanzados para llevar tus diseños más allá de lo que permiten los módulos por defecto. Accede como suscriptor y diseña sin límites.

Paso 4: Ajusta colores, tipografía y espaciado

Con la estructura y el efecto hover funcionando, personaliza el resto: los colores del overlay que aparece al pasar el cursor, la tipografía de los títulos, el espaciado entre proyectos. Estos detalles son los que hacen que el portafolio se sienta parte de tu marca y no un componente aislado. Aprovecha las opciones de diseño de Divi para los ajustes visuales y reserva el CSS para los efectos que el módulo no cubre.

Paso 5: Revisa el responsive

Un portafolio en rejilla necesita comportarse bien en todos los tamaños de pantalla. En escritorio puedes mostrar tres o cuatro proyectos por fila; en tablet, dos; en móvil, uno. Revisa que las imágenes mantengan su proporción, que los efectos hover tengan sentido en táctil (en móvil no hay hover, así que decide cómo se muestra la información ahí), y que el espaciado se vea equilibrado en cada breakpoint.

Consejo: si manejas muchas unidades de medida en tu CSS (porcentajes, vw, em, px), conviene entender bien cuándo usar cada una para que el portafolio escale correctamente. Te puede ayudar el tutorial sobre unidades de medida CSS en Divi y, para los breakpoints, el de custom media queries en Divi.

El siguiente paso: portafolio filtrable

Una vez que tienes el portafolio personalizado y bien presentado, el siguiente nivel es añadirle filtrado por categorías — que el usuario pueda hacer clic en "Diseño web", "Branding" o la categoría que sea, y ver solo esos proyectos. Eso lo cubro en el tutorial de filtros para cualquier módulo en Divi con Divi Filter, que usa este mismo portafolio como base. La combinación de un portafolio bien diseñado con filtrado funcional es lo que realmente impresiona a un cliente potencial.

Preguntas frecuentes sobre el portafolio personalizado en Divi

¿Necesito saber programar para hacer este portafolio?

No necesitas ser programador. El CSS que se usa está listo para copiar y pegar, y la estructura se arma con el Divi Builder de forma visual. Entender qué hace cada línea de CSS te ayuda a personalizarlo, pero no es indispensable para replicar el resultado.

¿Funciona este portafolio en Divi 5?

La lógica de aplicar CSS personalizado a un layout de portafolio funciona igual en Divi 4 y Divi 5. La interfaz cambia ligeramente, pero el concepto de pegar CSS en las opciones de la página y estructurar los proyectos en columnas es el mismo.

¿Puedo usar mi propio diseño en lugar del layout del tutorial?

Sí. El layout es solo un punto de partida para ahorrar tiempo. Si ya tienes una estructura de portafolio, puedes aplicar el mismo CSS adaptando las clases a tus elementos. Lo importante es entender qué selecciona cada regla de CSS para apuntar a los elementos correctos.

¿Los efectos hover funcionan en móvil?

En dispositivos táctiles no existe el hover como en escritorio. Por eso conviene decidir cómo se muestra la información del proyecto en móvil — normalmente se deja visible el título permanentemente, en lugar de revelarlo al pasar el cursor.

Conclusión

Un portafolio es tu carta de presentación, y el módulo por defecto de Divi no le hace justicia a un buen trabajo. Con un layout base y un poco de CSS personalizado, transformas esa presentación genérica en una galería con efectos hover cuidados y una identidad propia. Y cuando le sumas el filtrado por categorías, tienes un portafolio que compite con cualquier sitio profesional. Empieza con la personalización de este tutorial y construye desde ahí.

🎓 ¿Quieres construir sitios y portafolios de nivel profesional con Divi?
En uxdivi.com/cursos tienes el Curso de Divi 5 completo donde dominas el CSS personalizado, los efectos avanzados y todo lo necesario para diseñar sitios que destacan. Accede como suscriptor y lleva tus proyectos a otro nivel.

Recursos y descargas del tutorial

Si te ha gustado este contenido no olvides compartirlo con tus amigos y conocidos, además recuerda que puedes compartirnos el enlace de tu creación en los comentarios de este contenido, así todos veamos los resultados maravillosos que conseguiste con este contenido prémium.

Descarga los recursos mencionados en este tutorial acá abajo 👇 siendo premium ⭐