Cómo crear una galería de imágenes que cambie de blanco y negro a color con el módulo Galería de Divi


Las galerías de imágenes siguen siendo una característica popular para los sitios web. Y con Divi, agregar una galería de imágenes hermosa y receptiva a su sitio web es casi demasiado fácil. Esto deja algo de tiempo adicional para considerar formas de resaltar esas imágenes. Una forma sencilla de hacer que sus imágenes se destaquen es comenzar con una versión en blanco y negro de cada imagen que cambia a la versión en color al pasar el mouse sobre la imagen. Este efecto ha existido por un tiempo, pero sigue siendo una forma eficaz y creativa de atraer a los usuarios con una visualización sorprendente de una imagen hermosa.

En este tutorial, les mostraré lo fácil que es crear una galería de imágenes que cambie de blanco y negro a color con el Módulo Galería de Divi. Con los efectos de filtro integrados de Divi y las opciones de desplazamiento, ¡puede hacer esto con unos pocos clics!

¡Empecemos!

El antes y el después de hoy

Así es como se ve la galería de imágenes de forma predeterminada usando la Galería de imágenes de Divi:

galería de imágenes en blanco y negro a color

Aquí está la nueva galería de imágenes que cambia las imágenes en blanco y negro a color al pasar el cursor sobre cada imagen.

galería de imágenes en blanco y negro a color

Lo que necesitas para empezar

(incrustar) https://www.youtube.com/watch?v=T5-08J4PzjA (/ incrustar)

Suscríbete a nuestro canal de Youtube

Para este tutorial, todo lo que necesitará es el tema Divi instalado y activo. Después de eso, deberá crear una nueva página, agregar un título y hacer clic para usar Divi Builder. Luego seleccione la opción "Construir desde cero". Publique su página y luego haga clic en el botón para construir en la interfaz. Ahora estás listo para ir.

Configuración de la galería de imágenes

Usando Divi Builder en la parte frontal, agregue una nueva sección regular con una fila de una columna. Luego agregue el Módulo de Galería a la fila.

galería de imágenes en blanco y negro a color

En la Configuración de la Galería, seleccione el ícono gris más en el cuadro Imágenes de la Galería para comenzar a agregar las imágenes de su biblioteca de medios.

galería de imágenes en blanco y negro a color

Para este ejemplo, estoy agregando un total de 12 imágenes para que las imágenes se vean bien con el diseño de cuadrícula de cuatro columnas predeterminado en el escritorio.

Luego actualice las siguientes opciones:

Número de imágenes: 12
Mostrar título y pie de foto: NO
Mostrar paginación: NO

galería de imágenes en blanco y negro a color

Ahora salte a la pestaña de diseño y actualice lo siguiente:

Color del icono de zoom: transparente
Color de superposición de desplazamiento: transparente
Saturación de la imagen: 0% (predeterminado), 100% (desplazamiento)
Brillo de la imagen: 50% (predeterminado), 100% (desplazamiento)

Establecer la saturación de la imagen en 0% de forma predeterminada 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 al 100% para recuperar el color. El brillo de la imagen establecido en 50% solo hace que la imagen sea un poco más oscura de forma predeterminada. Esto es opcional, por supuesto, pero me gusta el contraste que crea al pasar el cursor sobre la imagen. En mi opinión, hace que la imagen en color resalte aún más.

galería de imágenes en blanco y negro a color

En este punto, el efecto de desplazamiento de cada imagen es completamente funcional y cambiará sus imágenes de una versión en blanco y negro a una versión en color.

Todo lo que tenemos que hacer es hacer que nuestra galería sea de ancho completo con un poco de espacio entre cada imagen.

Creación de un diseño de ancho completo para la galería de imágenes

Para crear el diseño de ancho completo para la galería de imágenes, guardemos la configuración de nuestra galería por ahora y abramos la configuración de la fila. En la pestaña de diseño, actualice lo siguiente:

Hacer esta fila de ancho completo: SÍ
Usar ancho de canalón personalizado: SÍ
Ancho del canal: 1

Relleno personalizado: 0px arriba, 0px abajo

galería de imágenes en blanco y negro a color

Esto hará que la galería abarque todo el ancho de la página y eliminará cualquier margen entre las imágenes. Si le gusta este estilo, puede conservarlo, por supuesto, pero le mostraré cómo agregar su propio margen personalizado entre esas imágenes.

Para agregar un margen personalizado entre las imágenes en la galería, abra el módulo de la galería y actualice lo siguiente:

Margen personalizado: 5px superior, 5px inferior, 5px izquierda, 5px derecha
Ancho del borde: 5px
Color del borde: transparente

galería de imágenes en blanco y negro a color

Resultado final

Ahora veamos el resultado final de nuestro diseño.

galería de imágenes en blanco y negro a color

Y, dado que los bordes de nuestra imagen son transparentes, podemos cambiar fácilmente el fondo de nuestra fila a diferentes colores o degradados.

galería de imágenes en blanco y negro a color

Pensamientos finales

Espero que este tutorial te sirva de inspiración para hacer que tus galerías de imágenes destaquen. Por alguna razón, cambiar las imágenes de blanco y negro a color parece hacer que esas imágenes se vean aún más hermosas al pasar el mouse. Y no olvide explorar las innumerables variaciones de diseño posibles con las opciones de estilo integradas de Divi. ¡Que te diviertas!

Espero tener noticias tuyas en los comentarios.

¡Salud!