Los módulos de Divi son increíblemente flexibles en su estilo. La incorporación de efectos de desplazamiento junto con elementos de diseño más tradicionales puede elevar sus páginas de buenas a excelentes, o de excelentes a increíbles. Hoy, lo guiaremos a través de un módulo de galería Divi que comienza en escala de grises y cambia a color al pasar el mouse (o tocar en el dispositivo móvil). ¡Empecemos!
Para darle una idea de lo que vamos a trabajar hoy, puede ver los videos a continuación para ver el Módulo de la Galería Divi que comienza en escala de grises pero muestra una imagen en color cuando el mouse pasa sobre él. En dispositivos móviles, un simple toque mientras el usuario se desplaza iniciará el cambio.
Escritorio
Móvil
Puede ser evidente, pero deberá crear la nueva página o ir a la página existente que desea editar. A continuación, querrá asegurarse de que utiliza Visual Builder.
Si está creando una nueva página o modificando significativamente una existente, es posible que desee cargar uno de nuestros diseños prefabricados. Para este tutorial en particular, vamos a utilizar el paquete de diseño de estudio de cerámica . Específicamente, la página de la galería por razones obvias.
Reemplace la galería personalizada con el módulo de la galería
Al comenzar, querremos reemplazar la galería personalizada utilizada en el paquete de diseño con el módulo Divi Gallery. Debe ir a la segunda sección y eliminar todas las filas interiores. Al hacerlo, también se eliminarán los módulos contenidos. Eliminar las filas por completo aquí es más eficiente que eliminar los módulos individuales.
Agregar una nueva fila
Ahora, simplemente agregará una nueva fila para comenzar nuestro nuevo y fresco diseño.
Seleccionar estructura de filas
Para este tutorial, vamos a utilizar el diseño de 2 columnas, pero puede elegir el que mejor se adapte a su sitio.
Añadir módulos de galería
A continuación, querrá agregar los Módulos de la Galería Divi a la cantidad de columnas que haya incluido. (O tantos como quieras).
Cargar imágenes y galería de estilo
Como estamos usando una nueva galería, no solo querremos agregar las imágenes que queremos mostrar, sino también diseñar la galería para que coincida con la página en la que estamos trabajando.
Ajustar los estilos de texto
Debido a que la galería del estudio de cerámica es un paquete de diseño de temática oscura, queremos ir a la configuración de Texto en la pestaña Diseño para cambiar el Color del texto a claro para que los usuarios puedan leerlo.
Cambiar la fuente
Ajustamos la fuente predeterminada para que los títulos de las imágenes sean Poppins sobre la predeterminada y las configuramos en negrita.
Aplicar la escala de grises al efecto de color
Ahora es el momento de entrar en los aspectos prácticos del efecto en sí. Solo se necesitan unos pocos pasos simples para crear el efecto de desplazamiento de escala de grises a color.
Cambiar el icono de superposición y el color de fondo
A continuación, querrá navegar a la sección Superposición de la pestaña Diseño. Ajuste el color del icono de superposición a algo que coincida con el diseño de su página. Usamos #fdb467 para este ejemplo. Se utiliza como color en el resto del paquete de diseño del estudio de cerámica.
A continuación, desea ajustar el color de fondo de la superposición para que sea transparente.
Configuración de imagen
Ahora irá a la sección Configuración de imagen en la pestaña Diseño, un poco más abajo.
Cambiar la saturación predeterminada
Dentro de la configuración de la imagen, busque el control deslizante de saturación. Ajustará esto al 0%. Al hacerlo, las imágenes de esa galería aparecerán inmediatamente en escala de grises.
Aplicar Saturación a Hover
Pase el cursor sobre el control deslizante Saturación de imagen y busque el icono que parece una flecha. Haga clic en él y ahora puede ajustar la configuración específica para los efectos al pasar el mouse. Para este ejemplo, lo hemos vuelto a configurar al 100% de saturación porque esa es la foto normal. Sin embargo, si desea que la imagen se desplace aún más intensamente, puede ajustar la saturación aún más y ajustar cualquiera de las otras configuraciones de imagen.
Siempre que la saturación base sea 0 y la saturación de desplazamiento sea mayor, la transición funcionará con la intensidad que elija.
Guarde la configuración y la página de su módulo, y sus efectos de desplazamiento de escala de grises a color deberían estar funcionando. Es posible que deba dejar el constructor Divi para probar los efectos de desplazamiento debido a la selección de elementos. Entonces, si no ve el cambio de vista previa flotante, no se preocupe. Salga del constructor y funcionará.
Además, si desea que una imagen en color se convierta en escala de grises, simplemente invierta los pasos aquí. Establezca la saturación normal en 100%, pero baje la saturación de desplazamiento demasiado 0%. Eso agotará el color cada vez que alguien haga clic o toque la imagen de la galería.
Vista previa del efecto
La transición se puede ver entre 1 y 2 , mientras que 3 es un ejemplo de la configuración de diseño y superposición predeterminada de la galería. Puede ver el efecto en movimiento en computadoras de escritorio y dispositivos móviles a continuación.
Móvil
Conclusión
Crear un efecto de escala de grises a color usando las opciones de desplazamiento de Divi es rápido y fácil. Con solo unos pocos clics y el ajuste del control deslizante, puede tomar nuestro estilo predeterminado y convertirlo en algo que coincida perfectamente con su sitio. Las galerías de imágenes aparecen en casi todos los sitios, por lo que muchos usuarios pueden volverse ciegos a ellas a menos que estén buscando específicamente ese contenido. Al usar este efecto, tendrá una microinteracción que atraerá sus ojos a su galería y los mantendrá comprometidos con su sitio.
¿Qué opinas? ¡Cuéntanos en los comentarios!