Galería Divi. Sombra flotante al pasar por cada imagen
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.
Ahora, 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.
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
A 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.
En el panel imagen ponle un marco blanco de 6 pixeles como ves en la imagen inferior.
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.
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.
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 de página desde la vista Constructor Visual
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.
Galería con URL con botón invisible se puede? es que se tiene que poner leyenda para hacer un enlace y se mira feo
Hola, Bismarck
El módulo galería no permite enlaces (de momento). He estado buscando incluso he abierto una consulta en soporte de Elegant Themes y no es posible. Hay algunas alternativas como esta: https://aulamedia.net/anadir-links-y-texto-modulo-galeria-divi/ pero me temo que no se adapta a lo que realmente necesitas
Seguiré buscando y si encuentro algo te digo.
Saludos
Hola, ¿podríais hacer un tutorial para poner texto sobre una imagen de anchura completa en DIVI?
Yo lo estoy intentando y no hay manera.
Muchas gracias.
Miguel Gil