El modulo galeria de divi. Cómo añadir links y mostrar texto on rollover

por | 21 Ago, 2017 | css, Divi, Galería Divi, Tutoriales | 38 comentarios

Destacada-galeria

La Idea

Este nuevo tutorial está inspirado en un post de Divisoup cuyo original puedes visitar aquí (en inglés).

Se trata de efectuar una modificación sobre el modulo galeria de Divi en la que incluiremos la posibilidad de crear vínculos a otras páginas al pulsar sobre cada imagen de la galeria de divi. Además, tambien será posible mostrar un texto (título y subtítulo) cuando posicionemos nuestro cursor sobre cada una de las imágenes que conforman este modulo galeria de divi.

Todo esto ocurrirá en lugar del efecto predeterminado, esto es, mostrar la imagen que pulsas, ampliada en una ventana lightbox.

Y va a ser posible gracias a un poco de código CSS, que podemos aplicar en distintas partes según sean nuestras necesidades.

De esta forma se ampliarán las posibilidades de acción de este módulo. Podríamos vincular cada imagen a una página distinta, interna o externa. Y, por su puesto, mostrar un texto que describa qué vamos a ver una vez pulsemos la imagen. O simplemente un texto descriptivo. En fin, cada cual que busque la funcionalidad apropiada.

Puedes ver una demo pulsando AQUÍ. Verás una galería con 8 imágenes, que serán las que usemos para esta práctica. Pero tú puedes utilizar las imágenes que necesites en tu modulo galeria de divi, claro.

El modulo galeria de divi. Cómo añadir links y mostrar texto on rollover

 

Crear la Sección y Ajustar la Fila

Lo primero que necesitamos hacer, claro, es crear una sección que contendrá el modulo galeria de Divi. Así que creamos la sección, elegimos una sola columna e insertamos el módulo galeria.

Captura-insertar-galeria

Una vez que hemos creado nuestro modulo galería vamos a configurar la fila. Recuerda, abre sus ajustes pulsando en las tres rayitas horizontales negras sobre el recuadro verde (la fila):

ajustes-modulo-fila-galeria-url

Como ves en la imagen superior, en la pestaña Diseño, activamos la opción Hacer que esta fila tenga anchura completa. Marcamos también Sí la opción El Uso Personalizado del Canalón De Ancho. Y por último, en Espacio entre columnas ponemos 1. Esto eliminará el espacio entre las imágenes y hará que podamos disponer de más espacio para mostrar las imágenes de la galería y el texto al pasar el ratón sobre ellas.

Preparación de la Galeria

ajustes-generales-modulo-texto-1

Una vez tenemos lista la configuración de la fila es hora de ajustar nuestra galería. De manera que pulsamos en ajustes del módulo de la galería y configuramos.

En los Ajustes de diseño no olvides verificar que el diseño esté en modo rejilla.

Y en Ajustes de contenido, tienes que marcar 8 en número de imágenes para hacerlo como yo, pero puedes importar las imágenes que necesites. Activa la opción Mostrar título y leyenda como ves en la captura. Ya puedes pulsar en Actualizar galería para importar tus imágenes. Nosotros hemos utilizado unas imágenes de perretes con un tamaño de 600×400 píxeles. Usa las tuyas, pero que todas tengan las mismas dimensiones.

configuracion-contenido-modulo-galeria

Una vez estés en tu biblioteca de medios de WordPress y hayas importado tus imágenes, debes seleccionar cada una de las imágenes de tu galería. Y a la derecha, donde aparece la información de tu imagen, debes poner en el campo leyenda esto:

<a href="url"><b>Titulo</b></br>Subtitulo</a>

• Debes incluir donde pone «url» la página a la que quieres ir al pulsar sobre la imagen.

• Sustituye la palabra título por lo que quieras. Yo he puesto el nombre de la raza de cada perro.

• Finalmente, cambia subtítulo por lo que quieras.

En la primera foto mis ajustes son: <a href=»https://www.elearning-aulamedia.com/blog-elearning/»><b>Soy un Boxer</b></br>Por favor, no molestar</a>

editar-fotos-galeria

 

Si previsualizas tu página, verás algo como la imagen siguiente:

aspecto-galeria-sin-css

El momento de CSS

Como ya hemos explicado en otros artículos, tienes 3 opciones donde integrar el código CSS. Te lo recordamos:

1. En la página

Pulsando en los ajustes de página, arriba a la derecha y en la pestaña CSS, pégalo ahí. Esta es la opción que nosotros hemos elegido. El código sólo afectará a las galerías que se encuentren en esa página.

ajustes-css-divi-builder-pagina

2. En opciones del tema Divi

Navegando desde tu escritorio de WordPres, accede al menú lateral hasta Divi > Opciones del tema >  CSS personalizado . Pégalo donde se te indica con una flecha en la imagen inferior. Recordarte que corres el riesgo de perder la configuración en alguna actualización del tema. El código afectará a toda galería de cualquier página.

Opción 3. En la hoja de estilos de tu tema hijo

Si estás usando un tema hijo, accede a tu hoja de estilo del tema hijo desde Apariencia > Editor. Puedes verlo en la imagen de abajo. Afectará el código a todas las galerías de tu sitio, igual que la opción anterior, pero tu CSS estará protegido ante futuras actualizaciones.

Guarda los cambios sea cual sea el método elegido.

Vale, pero ¿Dónde está el código?

Aquí tienes el código. Lo hemos comentado para que puedas ver cómo actúa y cómo personalizarlo.

¿Que podemos hacer con este código CSS?

  • Ocultar el título y el efecto de superposición predeterminado.
  • Ajustar la posición de las imágenes a absoluta para que podamos mover el texto de la leyenda encima de las imágenes.
  • Configurar el color de la superposición de imagen y del texto de la leyenda.
  • Añadir un relleno al texto del título para que la superposición cubra toda la imagen y convierta toda la zona en clicable.
  • Añadir algunas configuraciones de medios (móviles, tablets) para que también se vea correctamente en los dispositivos más pequeños.

Échale un ojo a los comentarios del código CSS para ver qué valores puedes cambiar para que se ajuste a tus necesidades.

Evidentemente, no van a ser lo mismo los valores de tamaño de fuente, por ejemplo, dependiendo de la cantidad de texto que uses. Tal vez necesites reducir el cuerpo para agregar más texto. O todo lo contrario, hacer textos más grandes porque usarás poco texto. O cambiar el color de tu texto, o el marco. En fin, que trastees si lo consideras necesario y modifiques algunos valores a tu conveniencia.

 /*Ocultamos el título de la imagen y el efecto de superposición por defecto*/
 .et_pb_gallery_item h3,
 .et_overlay {
 display: none;
 }
 /*Establecemos la posición y el tamaño de las imágenes y añadimos un píxel
 extra para deshacernos del espacio en blanco entre las imágenes*/
 .et_pb_gallery_grid .et_pb_gallery_image {
 position: absolute;
 width: calc(100% + 1px) !important;
 }
 .et_pb_gallery_caption {
 margin: 0 !important;
 }
 /*Configuramos el color del texto (blanco aquí)*/
 .et_pb_gallery_caption a {
 color: #fff;
 }
 /*Establecemos el tamaño de la fuente del título y convertimos a mayúsculas*/
 b {
 font-size: 20px;
 text-transform: uppercase;
 }
 /*Configuramos la posición del texto de subtítulos de modo que se muestre
 on hover y añada el contorno*/
 p.et_pb_gallery_caption {
 position: relative;
 background: rgba(0, 0, 0, .5);
 /*Este es el color de la superposición de imagen cuando estamos sobre ella*/
 border: none;
 outline: 5px solid rgba(255, 255, 255, .5);
 /*El color del borde*/
 outline-offset: -20px;
 /*Esto mueve el borde un poco desde el exterior*/
 text-align: center;
 padding: 25% 5%;
 /*Ajusta el primer valor dependiendo de si usas mas o menos texto*/
 cursor: pointer;
 opacity: 0;
 /*Oculta el texto hasta que no pasemos por la imagen*/
 -webkit-transition: all 1s ease;
 -moz-transition: all 1s ease;
 transition: all 1s ease;
 }
 /*Muestra el contenido al pasar*/
 p.et_pb_gallery_caption:hover {
 opacity: 1;
 }
 /*Media queries: Ajusta estos valores si utilizas más o menos texto */
 @media only screen and (max-width:1366px) {
 p.et_pb_gallery_caption {
 padding: 23.7% 5%;
 /*Adjust the first value if using more or less text*/
 }
 }
 @media only screen and (max-width:1280px) {
 p.et_pb_gallery_caption {
 padding: 19% 5%;
 /*Adjust the first value if using more or less text*/
 }
 }
 @media only screen and (max-width:1024px) {
 p.et_pb_gallery_caption {
 padding: 15% 5%;
 /*Adjust the first value if using more or less text*/
 }
 }
 /*Esto hace que la galería se muestre en dos columnas en lugar de tres
 en las tablets en vertical */
 @media only screen and (min-width: 768px) and (max-width: 980px) {
 .et_pb_column .et_pb_grid_item:nth-child(2n+1) {
 clear: both !important;
 }
 .et_pb_gutters1 .et_pb_grid_item:nth-child(n) {
 width: 50% !important;
 margin: 0 !important;
 clear: none;
 }
 p.et_pb_gallery_caption {
 padding: 26.5% 5%;
 /*Ajusta el primer valor si se utiliza más o menos texto */
 }
 }
 @media only screen and (max-width: 480px) {
 .et_pb_gallery_grid .et_pb_gallery_image {
 width: 100% !important;
 max-width: 100% !important;
 }
 p.et_pb_gallery_caption {
 padding: 24.8% 5%;
 /*Ajusta el primer valor si se utiliza más o menos texto */
 }
 }
 @media only screen and (max-width: 320px) {
 .et_pb_gallery_grid .et_pb_gallery_image {
 width: 100% !important;
 max-width: 100% !important;
 }
 p.et_pb_gallery_caption {
 padding: 19.4% 5%;
 /*Ajusta el primer valor si se utiliza más o menos texto */
 }
 }

 

Este es el aspecto que tendrá tu galería una vez finalices la práctica:

 

galeria-divi-final

Aspecto final de la galería

 

Pulsa AQUÍ para ver la demo en acción.

Y si prefieres seguir el tutorial en video: