Galería Divi. Sombra flotante al pasar por cada imagen

por | 9 Jul, 2018 | css, Galería Divi

El módulo galería de Divi. 

No cabe duda de que las galerías en Divi son uno de los módulos más populares. Ya hemos realizado varios tutoriales sobre este módulo. Efectivamente, hemos visto cómo hacer un zoom on hover. En otro tutorial hemos añadido texto y links al pasar por cada imagen. También diseñamos galerías tipo fotografías antiguas, tipo Polaroid. Y por supuesto, hicimos un megapost con un montón de configuraciones y ajustes referentes a las galerías de Divi.

Galeria Divi. Efecto Sombra flotante

Así que hoy toca repasar un nuevo efecto. Añadiremos un efecto de sombra flotante cuando pasemos por cada imagen de nuestra galería. Esto dará cierta sensación de profundidad y mejorará la interactividad. Lo conseguiremos ajustando distintos parámetros de la propiedad sombra y agregando movimiento vertical. Por supuesto, vamos a usar un poco de CSS, pero verás que es bastante sencillo. A continuación puedes ver el ejercicio completado.

La estructura de nuestro tutorial

Primeramente, crea una nueva página o entrada. A continuación, habilita el constructor Divi e inserta una columna en la fila. De esta forma, tendremos lista nuestra fila para incorporar un módulo. Por lo tanto, hacemos clic en la columna y añadimos un módulo tipo galería.

Galeria Divi. Efecto zoom.insertar-modulo-galeria-DiviAhora, cerramos el configurador del módulo. Ajustaremos después el módulo galería, pero primero vamos a configurar algunos detalles en los distintos contenedores (sección, fila y modulo). Lo haremos de mayor a menor, de manera que empezamos con la sección.

Configurando la sección

Por lo tanto, para configurar la sección, pulsamos en ajustes de sección. Solamente vamos a cambiar el fondo. Así que, desde la pestaña contenido, pulsa en fondo y cambia el color. Yo he puesto un amarillo como puedes ver. El código de color es #ffd05b.

Ya sabes, experimenta sin miedo.

Configurando la fila

Seguidamente, el turno es para la fila. Abrimos los ajustes de fila. En la pestaña Diseño > tamaño, marcamos el uso personalizado de Canalón de Ancho. El espacio entre columnas debe ser 2. Si está en 1, estarán las imágenes demasiado juntas, sin espacio entre ellas. Si es mayor que 2, habrá demasiado espacio. Pero vamos, tú decides cómo te gusta más.

ajustes-canalon-ancho-divi

Si tienes otros contenidos encima y debajo de la galería quizás tienes que corregir espacios. En este caso, para que haya un poco de “aire” en las zonas superior e inferior de las fila, ajustamos los valores. De manera que, sin salir de la pestaña diseño, en separación > Relleno personalizado, agregamos 48px en relleno superior y 30 en base. Sin embargo, dependiendo de algunas variantes igual debes aumentar o reducir relleno. Prueba la configuración que mejor se ajuste a tus necesidades.

Ajustando el módulo galería

usar-constructor-visualA partir de aquí, te recomiendo que sigas con el constructor visual. Tendrás más opciones y más control sobre el diseño. Verás los cambios que vayas haciendo de forma inmediata.

Además, las capturas que te voy a ir proporcionando son de la vista en modo constructor visual.

Pues lo dicho, abrimos la configuración del módulo y hacemos los siguientes ajustes en las distintas pestañas.

Pestaña contenido.

En imágenes de galería, haz click en añadir imagenes a la galería y elige las imágenes para tu galería. En esta práctica, 4 serán suficientes. Es conveniente que todas tengan igual anchura y altura. Yo he utilizado fotografías de 600px de anchura por 360px de altura. En Elementos, descactiva mostrar título y leyenda y mostrar paginación. No nos sirve para nada.

Pestaña Diseño

En esta pestaña haremos algunos ajustes. En el panel capa superpuesta, elimina tanto el color de icono para ampliar como el color de capa superpuesta al pasar el ratón. Hazlo pulsando el círculo sin color. Esto hará que se oculte tanto el icono como la capa semitransparente al pasar el cursor por cada imagen. Te adjunto una captura a continuación.

galeria-divi-capa-superpuesta

En el panel imagen ponle un marco blanco de 6 pixeles como ves en la imagen inferior.

borde-galeria-divi

Añade ahora una sombra básica. Sin salir del panel imagen, baja hasta Image Box Shadow (sombra de imagen) y elige La tercera configuración establecida por defecto. Cuando incorporemos el CSS, verás que cambia de una sombra a otra transicionando.

galeria-Divi-sombra-imagen

Pestaña Avanzado

En esta pestaña ponemos la clase css que hará que funcione nuestro efecto. En Id y Clases de CSS, en el campo Clase CSS, escribe sombra-flotante.

avanzado-clase-CSS

Ahora insertamos el código CSS. Podemos ponerlo en nuestra hoja de estilos del tema hijo si lo tenemos, en el panel CSS de las opciones de Divi o en el panel de CSS de la página que es donde yo la he puesto. Así, solo se ejecutará el código al entrar a esta página en concreto y no cuando entremos a cualquier página del sitio.

Ajustes de página desde la vista estándar

ajustes-css-divi-builder-pagina

Ajustes de página desde la vista Constructor Visual

ajustes-css-constructor-visual-Divi

El código CSS

Copia el código de abajo y pégalo en cualquiera de los tres lugares de las que te comenté recientemente. Además, he comentado el código por si quieres cambiar sus ajustes. Cambiar la veliocidad de la animación, más o menos desplazamiento…

.sombra-flotante .et_pb_gallery_image {
/*--configuramos la velocidad a la que se produce el efecto--*/
 -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -ms-transition: all .4s ease;
    transition: all .4s ease;
}

.sombra-flotante .et_pb_gallery_image:hover {
/*--aplicamos el desplazamiento de la imagen hacia arriba--*/
-webkit-transform: translateY(-20px);
  transform: translateY(-20px);
/*--ajustamos los valores para la sombra--*/
-webkit-box-shadow: 0px 40px 19px -30px rgba(50, 50, 50, 0.54);
-moz-box-shadow:    0px 40px 19px -30px rgba(50, 50, 50, 0.54);
box-shadow:         0px 40px 19px -30px rgba(50, 50, 50, 0.54);
 
}

Conclusión y vídeo

Y ya estaría listo nuestro tutorial. Si te ha sido útil, comparte, por favor. Abajo, el vídeo que complementa esta práctica.