Las galerías de imágenes continúan 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 extra para considerar formas de hacer que esas imágenes se destaquen. Una forma sencilla de hacer que sus imágenes 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 cursor sobre la imagen. Este efecto ha existido por un tiempo, pero continúa siendo una forma efectiva y creativa de atraer a los usuarios con una sorprendente visualización de una imagen hermosa.
En este tutorial, le 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 de galería de Divi. ¡Con los efectos de filtro incorporados de Divi y las opciones de desplazamiento , puede hacer esto con unos pocos clics!
¡Empecemos!
Así es como se ve la galería de imágenes de forma predeterminada usando la Galería de imágenes Divi:
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.
Lo que necesitas para empezar
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 parte delantera. 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.
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.
Para este ejemplo, estoy agregando un total de 12 imágenes para que las imágenes se muestren bien con el diseño de cuadrícula predeterminado de cuatro columnas en el escritorio.
Luego actualice las siguientes opciones:
Número de imágenes: 12
Mostrar título y subtítulo: NO
Mostrar paginación: NO
Ahora salta a la pestaña de diseño y actualiza lo siguiente:
Color del icono de zoom: transparente
Color de superposición de desplazamiento: transparente
Saturación de imagen: 0 % (predeterminado), 100 % (desplazamiento)
Brillo de imagen: 50 % (predeterminado), 100 % (desplazamiento)
Establecer la saturación de la imagen en 0% de forma predeterminada básicamente reduce 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.
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 ocupe todo el ancho con un pequeño 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 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 de canalón: 1
Relleno personalizado: 0px arriba, 0px abajo
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 de la galería, abra el módulo de la galería y actualice lo siguiente:
Margen personalizado: 5 px arriba, 5 px abajo, 5 px a la izquierda, 5 px a la derecha
Ancho del borde: 5 px
Color del borde: transparente
Resultado final
Ahora veamos el resultado final de nuestro diseño.
Y, dado que los bordes de nuestra imagen son transparentes, podemos cambiar fácilmente el fondo de nuestra fila a diferentes colores o degradados.
Pensamientos finales
Espero que este tutorial le brinde un poco de inspiración para hacer que sus galerías de imágenes se 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 sobre ellas. Y no olvide explorar las innumerables variaciones de diseño posibles con las opciones de estilo integradas de Divi. ¡Divertirse!
Espero escuchar de usted en los comentarios.
¡Salud!