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 en juego el módulo Divi Gallery. Te permite seleccionar imágenes directamente de tu biblioteca multimedia 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 pasar el mouse sobre ella. En este tutorial, le mostraremos exactamente cómo hacerlo. ¡También podrá descargar el archivo JSON de forma gratuita!
Hagámoslo.
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Descarga el diseño 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 nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
https://youtu.be/p6Bh7wz3HMc
Suscríbete a nuestro canal de Youtube
1. Cargue imágenes con títulos y subtítulos
Ir a la biblioteca de medios
La primera parte de este tutorial se enfoca en agregar las imágenes con títulos y subtítulos dentro de su biblioteca de medios. Para llegar allí, navegue 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 subtítulos
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 un diseño con Divi
Crear una nueva página o abrir una existente
Una vez que se hayan cargado sus imágenes, es hora de construir el diseño en Divi . Cree una nueva página o abra una nueva y habilite Visual Builder en la parte superior.
Añadir Sección #1
Color de fondo
Agregue una nueva sección a su página y abra la configuración de la sección. Aplicar el siguiente color de fondo:
- Color de fondo: #ededed
Añadir Fila #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
Pase a la pestaña de diseño del módulo y cambie la configuración de texto H2 en consecuencia:
- Título 2 Fuente: Montserrat
- Título 2 Tamaño del texto:
- Escritorio: 62px
- Tableta: 48px
- Teléfono: 32px
- Encabezado 2 Altura de línea: 1,3 em
Dimensionamiento
Modifique también el ancho máximo del módulo en diferentes tamaños de pantalla.
- Anchura máxima:
- Escritorio: 500px
- tableta: 400px
- Teléfono: 250px
Agregue el 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, vaya 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
- Altura: 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 de descripción.
Configuración de texto
Cambie la configuración de texto del módulo de la siguiente manera:
- Fuente del texto: Lato
- Altura de línea de texto: 2,2 em
Espaciado
Aplique un poco de margen superior también.
- Margen superior: 50px
Añadir Sección #2
Añade otra sección debajo de la anterior.
Fondo degradado
Abra la configuración de la sección y aplique un fondo degradado.
- Color 1: #ededed
- Color 2: #ffffff
- Tipo de gradiente: lineal
- Posición inicial: 20%
- Posición final: 20%
Espaciado
Pase a la pestaña de diseño de la sección y elimine todo el relleno superior e inferior predeterminado.
- Relleno superior: 0px
- Relleno inferior: 0px
Añadir Fila #1
Estructura de la columna
Continúe agregando una nueva fila a la sección utilizando 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
Pase a la configuración de tamaño de la fila a continuación y aplique los siguientes cambios:
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 2
- Ancho: 90%
- Ancho máximo: 1580px
Espaciado
También estamos personalizando los valores de relleno.
- Relleno superior: 150px
- Relleno inferior: 0px
- Relleno izquierdo: 5%
- Relleno 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 cargó en 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 el toque activará un efecto de caja de luz en su lugar. Por esa razón, solo mostramos el título y la leyenda en el escritorio, y los estamos deshabilitando en pantallas más pequeñas. También estamos deshabilitando la paginación. Puede encontrar estas opciones en la configuración de los elementos.
- Mostrar título y subtítulo
- Escritorio: Sí
- Tableta y teléfono: Sí
- Mostrar paginación: No
Disposición
Pase 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 miniaturas: Retrato
Cubrir
También estamos modificando la configuración de superposición.
- Color del icono superpuesto: #ffffff
- Color de fondo superpuesto: rgba(0,0,0,0.25)
Configuración de texto
A continuación, cambiaremos el color del texto en la configuración de texto.
- Color del texto: Claro
Configuración del texto del título
Luego, diseñaremos el texto del título.
- Título Nivel de encabezado: H3
- Fuente del título: Montserrat
- Tamaño del texto del título: 20px
Ajustes de texto de subtítulos
También estamos cambiando la configuración del texto de los subtítulos.
- Fuente del título: Lato
- Color del texto de la leyenda: #efefef
- Espaciado entre letras de subtítulos: 0.5px
- Altura de la línea de subtítulos: 1,9 em
Elemento CSS de la galería
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:
|
01
02
03
|
padding-top: 20px;padding-left: 7%;padding-right: 7%; |
Título del 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:
|
01
02
03
04
|
padding-top: 20px;padding-left: 7%;padding-right: 7%;padding-bottom: 20px; |
3. Aplicar efecto de revelación
Agregar ID de CSS al módulo de galería
Ahora que nuestro diseño está en su lugar, podemos centrarnos 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.
- CSS ID: 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.
Para crear el efecto, vamos a usar 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.
Y copiaremos y pegaremos las siguientes líneas de código CSS entre las etiquetas de estilo:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
|
#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 pasa el cursor sobre 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 incorporado de Divi. Más específicamente, le mostramos cómo deslizar hacia abajo para revelar el título y la leyenda de una imagen al pasar el mouse sobre ella 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 de forma gratuita! 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 regalos de Divi, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.