ElegantThemes

Cree una galería de escala de grises a color con el módulo de galería Divi

Los módulos Divi son increíblemente flexibles en su estilo. Al incorporar efectos de desplazamiento junto con elementos de diseño más tradicionales, puede cambiar sus páginas de buenas a excelentes, o de excelentes a sorprendentes. Hoy lo guiaremos a través de un módulo de la Galería Divi que comienza en escala de grises y cambia de color cuando mueve el mouse (o cuando lo toca en el teléfono). ¡Vamos a empezar!

avance

Para darle una idea de en qué vamos a trabajar hoy, puede ver los videos a continuación para ver cómo el módulo de la Galería Divi comienza en escala de grises pero muestra una imagen en color cuando el mouse pasa sobre él. En los dispositivos móviles, el cambio se inicia con un simple toque mientras el usuario se desplaza.

Escritorio

Teléfono celular, teléfono móvil

Crear / navegar a la página con el módulo de galería Divi

Puede ser evidente, pero deberá crear la nueva página o cambiar a la página existente que desea editar. A continuación, debe asegurarse de que está utilizando el constructor visual.

Si está creando una nueva página o realizando cambios importantes en una existente, es posible que desee cargar uno de nuestros diseños prefabricados. Para este tutorial en particular, usaremos el Paquete de diseño de estudio de cerámica. Especialmente la página de la galería por razones obvias.

Reemplazar la galería personalizada con el módulo de galería

Para empezar, nos gustaría reemplazar la galería personalizada utilizada en el paquete de diseño con el módulo de galería Divi. Debe ir a la segunda sección y eliminar todas las filas internas. Esto también eliminará todos los módulos contenidos. Eliminar las líneas aquí por completo es simplemente más eficiente que eliminar los módulos individuales.

Quitar líneas

Agregar una nueva línea

Ahora solo agregue una nueva línea para comenzar nuestro nuevo diseño.

la línea

Seleccionar estructura de línea

Para este tutorial usaremos el diseño de 2 columnas, pero puede elegir lo que funcione mejor para su sitio.

Agregar columnas

Agregar módulos de galería

A continuación, desea agregar los módulos de la Galería Divi a tantas columnas como haya incluido. (O tantos como quieras).

módulos de galería de columna divi

Sube imágenes y galería de estilos

Dado que estamos usando una nueva galería, no solo queremos agregar las imágenes que queremos mostrar, sino que también queremos que la galería coincida con la página en la que estamos trabajando.

Color flotante

Personaliza los estilos de texto

Dado que Pottery Studio Gallery es un paquete de diseño oscuro, queremos ir a Configuración de texto en la pestaña Diseño para cambiar el color del texto a claro para que los usuarios puedan leerlo.

Agregar color de texto

Cambiar la fuente

Estamos adaptando la fuente estándar para los títulos de las imágenes. Poppins sobre el predeterminado y ponerlo en negrita.

audaz

Aplicar el efecto de escala de grises al efecto de color

Ahora es el momento de profundizar en los conceptos básicos del efecto en sí. Solo se necesitan unos pocos pasos para crear el efecto flotante 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. Nosotros usamos # fdb467 para este ejemplo. Se utilizará como color en el resto del paquete de diseño de Pottery Studio.

Configuración de superposición

Luego, desea establecer el color de fondo de la superposición en transparente.

Configuraciones de imagen

Ahora llegará a la sección Configuración de imagen un poco más abajo en la pestaña Diseño.

Configuraciones de imagen

Cambiar la saturación predeterminada

En la configuración de la imagen, busque el control deslizante de saturación. Lo ajustará a 0%. Esto renderizará instantáneamente sus imágenes en escala de grises en esta galería.

Saturación a 0

Aplicar saturación para desplazarse

Desplácese sobre el control deslizante de saturación de la imagen y busque el ícono que parece una flecha. Haga clic en él y ahora puede ajustar la configuración específica para los efectos de desplazamiento. Para este ejemplo, lo restablecemos al 100% de saturación, ya que esta es la foto normal. Sin embargo, si desea que la imagen flote aún más vívidamente, puede establecer la saturación aún más alta y ajustar todas las demás configuraciones de imagen.

Siempre que la saturación de base sea 0 y la saturación de desplazamiento sea más alta, la transición funcionará con la intensidad que haya elegido.

Saturación de imagen

Guarde la configuración y la página del módulo, y sus efectos de desplazamiento de escala de grises a color deberían funcionar. Es posible que deba salir del generador Divi para probar los efectos de desplazamiento debido a la selección del elemento. Entonces, si no ve el cambio de vista previa flotante, no se preocupe. Salga del constructor y funcionará.

Si desea convertir una imagen en color a escala de grises, simplemente invierta los pasos aquí. Establezca la saturación normal al 100%, pero la saturación de desplazamiento más baja al 0%. Esto drenará la pintura cuando alguien haga clic o toque la imagen de la galería.

Vista previa del efecto

Vista previa de escritorio

La transición se puede ver entre 1 y 2, tiempo 3 es un ejemplo de la configuración de tema y superposición de desplazamiento estándar para galerías. A continuación, puede ver el efecto en movimiento en computadoras de escritorio y dispositivos móviles.

Teléfono celular, teléfono móvil

graduación

Crear un efecto de escala de grises a color con las opciones de desplazamiento de Divi es rápido y fácil. Con solo unos pocos clics y ajustes del control deslizante, puede convertir nuestro estilo estándar en algo que se adapte perfectamente a su sitio web. Las galerías de imágenes aparecen en casi todos los sitios web, por lo que muchos usuarios pueden volverse ciegos a menos que estén buscando específicamente ese contenido. Cuando usas este efecto, obtienes una micro-interacción que llama la atención sobre tu galería y los mantiene ocupados con tu sitio web.

¿Qué piensas? ¡Háznoslo saber en los comentarios!

El cargo Cree una galería de escala de grises a color con el módulo de galería Divi apareció primero Blog temático elegante.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *