Galería Divi. Efecto blanco y negro a color sin usar código
Crear efecto blanco y negro a color sin usar código en galería Divi
Ya se hizo un tutorial sobre el mismo efecto en nuestro megatutorial más visitado: El módulo galería del tema Divi para WordPress. Si aún no lo has visto te lo recomiendo. En ese tutorial se enfoca la galería de Divi desde muchas perspectivas, entre ellas el efecto que nos ocupa en esta ocasión. Sin embargo, se usó código CSS para conseguir el efecto, algo muy recomendable por el nivel de control que nos aporta. Pero desde que Elegant Themes incorporó la posibilidad de agregar valores distintos a propiedades para los estados por defecto y hover en los ajustes de los módulos, es mucho más sencillo. Y no se necesita echar mano del CSS.
En esta ocasión vamos a usar este método, usaremos los filtros de imagen, y lo haremos sobre una galería Divi. Pero podrás hacerlo con infinidad de propiedades (color, estilo de texto, bordes,etc) y en cualquier tipo de módulo de Divi.
Así que vamos a empezar, pero antes, puedes echar un vistazo a cómo nos va a quedar cuando acabemos.
Primeros pasos
Crea una nueva página o entrada y activa el constructor Divi. Tendremos una sección estándar. Crea una fila de una columna y añade un módulo tipo galería. A partir de aquí vamos a seguir la práctica en el constructor visual. De esta manera, en cada paso que hagamos se reflejarán los cambios de manera inmediata en pantalla. Por lo tanto pulsa el botón de constructor visual (Buid On The Front End) y cuando cargue la página, abre los ajustes del módulo galería.
Configurando el módulo galería
En la primera pestaña, contenido, añade las imágenes que desees. Yo he elegido 8 imágenes del mismo tamaño. Abre la subsección elementos y desactiva las opciones mostrar título y leyenda y mostrar paginación.
Ahora activa la pestaña de diseño y actualiza lo siguiente:
Color del icono de zoom: transparente
Color de superposición al posar el ratón: transparente
En realidad lo que estamos haciendo es ocultar el cursor cuando pasemos por cualquier imagen de la galería.
Podríamos haberlo hecho con un poco de CSS, pero habíamos quedado que no usaríamos ni una sola línea de código. ¿Verdad? Pues eso.
El siguiente paso será activar la opción de hover para un par de efectos de imagen, que van a ser saturación, y brillo.
La configuración de la saturación de la imagen a 0% por defecto básicamente atenúa el color de la imagen hasta el final, dejando solo el blanco y negro. Luego simplemente volvemos a establecer la saturación en 100% para devolver el color. El brillo de la imagen establecido en 50% solo hace que la imagen sea un poco más oscura por defecto. Por supuesto, esto es opcional, pero puede resultar interesante el contraste que crea cuando se desplaza sobre la imagen. En mi opinión, hace que la imagen en color se destaque aún más. Por lo tanto, los valores serán:
Imagen Saturación: 0% (predeterminado), 100% (Hover)
Imagen Brightness (Brillo): 50% (predeterminado), 100% (Hover)
Llegados a este punto, el efecto para cada imagen debería ser completamente funcional y al pasar el cursor por ellas, deben cambiar las imágenes de tu galería de una versión en blanco y negro a una versión en color.
Lo único que nos queda por hacer es conseguir que nuestra galería tenga un ancho completo con un poco de espacio entre cada imagen.
Configurando la fila que contiene la galería Divi
Para crear el diseño de ancho completo para la galería de imágenes, guardamos la configuración de nuestra galería por ahora y abre la configuración de la fila. De manera que, en la pestaña de diseño (1), actualiza lo siguiente:
Hacer esta fila de ancho completo: SÍ (2)
Usar ancho de canal personalizado: SÍ (3)
Ancho de canal: (4)
Acolchado personalizado: 0px superior, 0px inferior
Así conseguimos que la galería abarque todo el ancho de la página y elimine cualquier margen entre las imágenes. Si te gusta este estilo, puedes mantenerlo, por supuesto, pero vamos a ver cómo agregar tu propio margen personalizado entre esas imágenes.
Ultimos retoques en nuestra galería Divi. Añadir semparación entre las imágenes
Para agregar un margen personalizado entre las imágenes de la galería, abre el módulo de la galería y actualiza lo siguiente:
En Diseño >> separación:
Relleno personalizado:
Superior: 5 píxeles
Base: 5 píxeles
Izquierdo:5 píxeles
Derecho: 5 píxeles
En Diseño >> Borde:
Anchura del borde: 3 píxeles
Color del borde : transparente
Y ya tendríamos listo nuestro ejercicio.
Comentar por último que dado que nuestros bordes de imagen son transparentes, podemos cambiar fácilmente el fondo de nuestra fila a diferentes colores o degradados. Experimenta, equivócate, vuelve a probar…es la mejor forma de aprender.
Si quieres ver el vídeo por si te parece más cómodo, aquí te lo dejo. No dejes de compartir si te ha molado.
