MÓDULO PORTAFOLIO FILTRABLE EN DIVI: INTRODUCCIÓN

Hola a todos,

Os traigo hoy una entrada express sobre cómo ebellecer el módulo de PORTAFOLIO FILTRABLE de Divi.

Y es que es muy útil para que tus proyectos se vayan incluyendo de forma automática con la posibilidad de filtrado…pero algo que a priori debería ser fácil con las opciones del módulo, como poner el título en hover (al pasar el ratón por encima) o eliminar totalmente el espacio entre imágenes (muy de moda), no lo es tanto y requiere hasta de un poquito de código.

Para los que estáis perdidos, estamos hablando de convertir esto:

En esto:

PASO 1: ELIMINAR LOS ESPACIOS ENTRE IMÁGENES

Para eso, nos iremos a la configuración de la fila donde hemos incluido el módulo portafolio filtrable – DISEÑO – TAMAÑO – USO PERSONALIZADO DE CANALÓN ANCHO, lo activaremos y bajaremos el tamaño al mínimo (1).

Es un poco engañoso…porque uno a priori pensaría que el canalón ancho debería trabajarse a nivel de módulo…pero no!

Por eso los hay que se vuelven locos buscando la solución a esta parte.

PASO 2: AÑADIR EL EFECTO HOVER MEDIANTE CSS

Y añadiremos una clase CSS que conseguirá que al pasar el ratón por encima, el fondo se oscurezca y el título del proyecto aparezca por encima con un efecto muy visual y elegantón.

Para ello, añadiremos el seguiente scripts en el CSS PERSONALIZADO DE DIVI.

OJO! Porque si estás utilizando un tema hijo (que deberías seriamente), entonces el CSS lo incluiremos en el editor de temas, seleccionas tu tema hijo, te vas al style.css y lo colocas al final, antes del cierre de archivo CON EXTREMADO CUIDADO. Recuerda que estás editando archivos importantes, puedes corromperlos y que l web deje de funcionar.

Y..sorpresa! Aquí tenemos ya el título del proyecto sobre la imagen (overlay) al pasar el ratón sobre ella (hover).

El script lo saqué de este hilo de foro después de mucho probar y mucho rebuscar, y en él profundizan en sus opciones y problemas, por si necesitáis más info!

Un besote a todos,

Lara.