Cómo deslizar hacia abajo para mostrar el título y la leyenda de la imagen de su galería con Divi

Si está creando un sitio web donde las imágenes juegan un papel central en el diseño, es posible que desee incluir una galería en algún momento. Ahí es donde entra el módulo de la galería Divi. Le permite seleccionar imágenes directamente de su biblioteca de medios y mostrarlas en una estructura organizada. De forma predeterminada, también puede mostrar dinámicamente el título y la leyenda de cada imagen. Sin embargo, si está buscando limitar la cantidad de texto que aparece en su diseño, es posible que desee deslizar hacia abajo para revelar el título y la leyenda de una imagen al colocar el cursor sobre ella. En este tutorial, le mostraremos exactamente cómo hacerlo. ¡También podrá descargar el archivo JSON de forma gratuita!

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Descarga The Layout GRATIS

Para poner sus manos en el diseño gratuito, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

https://youtu.be/p6Bh7wz3HMc

Suscríbete a nuestro canal de Youtube

1. Cargue imágenes con títulos y leyendas

Ir a la biblioteca de medios

La primera parte de este tutorial se centra en agregar las imágenes con títulos y leyendas dentro de su biblioteca de medios. Para llegar allí, vaya a su Panel de WordPress> Medios> Biblioteca.

Subir imágenes

Una vez allí, sube las imágenes que quieras incluir en tu galería.

Agregar títulos y leyendas

Deberá agregar un título y una leyenda a cada imagen individualmente. Para obtener el resultado más óptimo, intente mantener una longitud de texto similar para cada imagen.

2. Crea diseño con Divi

Crear una página nueva o abrir una existente

Una vez que se hayan cargado sus imágenes, es hora de crear el diseño en Divi. Cree una nueva página o abra una nueva y habilite Visual Builder en la parte superior.

Agregar la sección n. ° 1

Color de fondo

Agregue una nueva sección a su página y abra la configuración de la sección. Aplica el siguiente color de fondo:

• Color de fondo: #ededed

Agregar fila n. ° 1

Estructura de la columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

Espaciado

Sin agregar módulos todavía, abra la configuración de la fila, vaya a la pestaña de diseño y aplique el siguiente margen superior e inferior:

• Margen superior: 5%
• Margen inferior: 5%

Agregar módulo de texto a la columna 1

Agregar contenido H2

Es hora de agregar módulos, comenzando con un módulo de texto en la columna 1 que contiene algo de contenido H2.

Configuración de texto H2

Vaya a la pestaña de diseño del módulo y cambie la configuración del texto H2 en consecuencia:

• Fuente del encabezado 2: Montserrat
• Tamaño del texto del encabezado 2:
  • Escritorio: 62px
  • Tableta: 48px
  • Teléfono: 32px
• Altura de la línea del rumbo 2: 1.3em

Dimensionamiento

Modifique también el ancho máximo del módulo en diferentes tamaños de pantalla.

• Anchura máxima:
  • Escritorio: 500px
  • Tableta: 400 px
  • Teléfono: 250px

Agregar módulo divisor a la columna 1

Visibilidad

El siguiente y último módulo que necesitamos en la columna 1 es un módulo divisor. Asegúrese de que la opción "Mostrar divisor" esté habilitada.

• Mostrar divisor: Sí

Línea

Luego, pase a la pestaña de diseño y cambie el color de la línea.

• Color de línea: # ffc000

Dimensionamiento

Modifique también la configuración de tamaño del módulo.

• Peso del divisor: 5px
• Ancho máximo: 100px
• Alto: 5px

Agregar módulo de texto a la columna 2

Agregar contenido

En la columna 2, el único módulo que necesitamos es un módulo de texto con algún contenido descriptivo.

Configuración de texto

Cambie la configuración de texto del módulo de la siguiente manera:

• Fuente de texto: Lato
• Altura de la línea de texto: 2.2em

Espaciado

Aplique un poco de margen superior también.

• Margen superior: 50 px

Agregar sección n. ° 2

Agrega otra sección debajo de la anterior.

Fondo degradado

Abra la configuración de la sección y aplique un fondo degradado.

• Color 1: # editado
• Color 2: #ffffff
• Tipo de degradado: lineal
• Posición inicial: 20%
• Posición final: 20%

Espaciado

Vaya a la pestaña de diseño de la sección y elimine todo el relleno superior e inferior predeterminado.

• Relleno superior: 0px
• Acolchado inferior: 0px

Agregar fila n. ° 1

Estructura de la columna

Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:

Color de fondo

Sin agregar módulos todavía, abra la configuración de la fila y aplique un color de fondo.

• Color de fondo: # f4f4f4

Dimensionamiento

A continuación, continúe con la configuración de tamaño de la fila y aplique los siguientes cambios:

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 2
• Ancho: 90%
• Ancho máximo: 1580px

Espaciado

También estamos personalizando los valores de relleno.

• Relleno superior: 150 px
• Acolchado inferior: 0px
• Acolchado izquierdo: 5%
• Acolchado derecho: 5%

Agregar módulo de galería a la columna

Seleccionar imágenes cargadas

¡Es hora de agregar las imágenes, usando un módulo de galería! Seleccione las imágenes que ha subido a su biblioteca de medios en la primera parte de este tutorial.

Elementos

El efecto de desplazamiento solo tiene sentido en el escritorio. En tamaños de pantalla más pequeños, no hay desplazamiento y, en su lugar, el tacto activará un efecto de caja de luz. Por esa razón, solo mostramos el título y la leyenda en el escritorio, y los estamos deshabilitando en tamaños de pantalla más pequeños. También estamos desactivando la paginación. Puede encontrar estas opciones en la configuración de elementos.

• Mostrar título y pie de foto
  • Escritorio: si
  • Tableta y teléfono: No
• Mostrar paginación: No

Diseño

Vaya a la pestaña de diseño del módulo y cambie el diseño a continuación.

• Diseño: cuadrícula
• Orientación de la miniatura: vertical

Cubrir

También estamos modificando la configuración de superposición.

• Color del icono de superposición: #ffffff
• Color de fondo de superposición: rgba (0,0,0,0.25)

Configuración de texto

A continuación, cambiaremos el color del texto en la configuración del texto.

• Color del texto: claro

Configuración del texto del título

Luego, aplicaremos estilo al texto del título.

• Nivel de encabezado del título: H3
• Fuente del título: Montserrat
• Tamaño del texto del título: 20px

Configuración del texto de los subtítulos

También estamos cambiando la configuración del texto de los subtítulos.

• Fuente de leyenda: Lato
• Color del texto del subtítulo: #efefef
• Espaciado de letras de subtítulos: 0.5px
• Altura de la línea de subtítulos: 1.9em

Elemento de galería CSS

Luego, pasaremos a la pestaña avanzada. Una vez allí, agregaremos las siguientes líneas de código CSS al cuadro CSS del título del elemento de la galería:

padding-top: 20px;
padding-left: 7%;
padding-right: 7%;

Título de elemento de la galería CSS

Y usaremos estas líneas de código dentro del cuadro CSS del título del elemento de la galería:

padding-top: 20px;
padding-left: 7%;
padding-right: 7%;
padding-bottom: 20px;

3. Aplicar efecto Revelar

Agregar ID de CSS al módulo de la galería

Ahora que nuestro diseño está en su lugar, podemos enfocarnos en algunos pasos necesarios para crear el efecto de revelación. Lo primero que haremos es agregar una ID de CSS a nuestro módulo de galería.

• ID de CSS: divi-gallery

Agregar módulo de código debajo del módulo de galería

Luego, agregaremos un módulo de código debajo del módulo de galería.

Agregar etiquetas de estilo

Para crear el efecto, usaremos código CSS. Para preparar nuestro módulo de código para ese código, colocaremos algunas etiquetas de estilo dentro del cuadro de código.

Insertar código CSS entre etiquetas de estilo

Y copiaremos y pegaremos las siguientes líneas de código CSS entre las etiquetas de estilo:

#divi-gallery .et_pb_gallery_item h3, #divi-gallery .et_pb_gallery_item p {
visibility: hidden;
opacity: 0;
transform: translateY(-50px);
background-color: #FE7541;
margin-bottom: 0px !important;
margin-top: 0px !important;
}
  
#divi-gallery .et_pb_gallery_item h3, #divi-gallery .et_pb_gallery_item p, #divi-gallery .et_pb_gallery_image {
-webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
-moz-transition: 300ms all cubic-bezier(.4,0,.2,1);   
-o-transition: 300ms all cubic-bezier(.4,0,.2,1); 
-ms-transition: 300ms all cubic-bezier(.4,0,.2,1);   
transition: 300ms all cubic-bezier(.4,0,.2,1); 
}

#divi-gallery .et_pb_gallery_item:hover h3, #divi-gallery .et_pb_gallery_item:hover p {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
  
#divi-gallery .et_pb_gallery_item:hover div {
transform: translateY(-10px);
}

¡Eso es todo! Guarde la configuración de su página y salga de Visual Builder para ver el resultado cuando pase el mouse por uno de los elementos de la galería.

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo ser creativo con el módulo de galería integrado de Divi. Más específicamente, le mostramos cómo deslizar hacia abajo para revelar el título y el título de una imagen cuando la coloca en el escritorio. Esto le ayuda a mantener un diseño visual sin mostrar demasiado texto a la vez. ¡También pudo descargar el archivo JSON gratis! Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación.

Si está ansioso por aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.