Etiquetado de esquinas de imágenes en una cuadrícula de galería impresionante con Divi

¿Busca una forma única y hermosa de mostrar imágenes en una galería en su sitio web? Si es así, estamos seguros de que te encantará esta publicación. Le mostraremos cómo cortar las esquinas de la imagen con los módulos de texto como parte de un hermoso diseño que permanece 100% sensible en todos los tamaños de pantalla. Esta es una excelente manera de agregar etiquetas numeradas a sus imágenes mientras mantiene un diseño impresionante. También podrá descargar el archivo JSON del ejemplo de diseño 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.

Descargue el diseño de la sección de la galería GRATIS

Para poner sus manos en el diseño de la sección de la galería gratuita, 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!

Suscríbete a nuestro canal de Youtube

Empecemos a recrear

Agregar nueva sección

Espaciado

Lo primero que deberá hacer es agregar una nueva sección a la página en la que está trabajando. Abra la configuración de la sección y elimine todo el relleno superior e inferior predeterminado.

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

Agregar nueva fila

Estructura de la columna

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

Color de fondo

A continuación, agregue un color de fondo blanco.

• Color de fondo: #ffffff

Dimensionamiento

Pase a la configuración de tamaño y elimine todo el espacio entre las columnas, la fila y la sección aplicando la siguiente configuración:

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ancho: 100%
• Ancho máximo: 100%

Espaciado

Continúe eliminando todo el acolchado superior e inferior predeterminado.

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

Columna 1, 2, 3 y 4 Elemento principal

Ahora, para asegurarnos de que se mantenga una estructura de 4 columnas en todos los tamaños de pantalla, nos aseguraremos de que cada una de las columnas mantenga su ancho del 25% agregando la siguiente línea de código CSS a cada elemento principal de la columna individualmente:

width: 25% !important;

Agregar módulo de imagen a la columna 1

Subir imagen 1: 1

¡Es hora de comenzar a agregar módulos! Agregue un nuevo Módulo de imagen a la primera columna y cargue una imagen cuadrada de su elección (o use una que pueda encontrar en la carpeta comprimida que pudo descargar al comienzo de esta publicación).

Caja ligera

Habilite la opción de caja de luz en la configuración del enlace a continuación.

• Abrir en Lightbox: Sí

Dimensionamiento

Para asegurarnos de que la imagen siga respondiendo en todos los tamaños de pantalla, también habilitaremos la opción 'Forzar ancho completo'.

• Forzar ancho completo: Sí

Filtros predeterminados

También estamos cambiando el brillo.

• Brillo: 50%

Filtros flotantes

Y lo devolveremos al '100%' al pasar el mouse.

• Brillo: 100%

Índice Z predeterminado

Pase a la configuración de visibilidad y asegúrese de que el índice Z permanezca en '0' en su estado predeterminado.

• Índice Z: 0

Hover Z Index

Pero, al pasar el mouse, queremos que se superponga a la etiqueta numerada Módulo de texto que agregaremos en los próximos pasos. Para hacer eso, aumentaremos el valor del índice Z de desplazamiento.

• Índice Z: 100

Clonar el módulo de imagen 3 veces y colocarlo en las columnas restantes

Una vez que haya completado el Módulo de imagen en la columna 1, puede clonarlo tres veces. Coloque los duplicados en las tres columnas restantes de la fila.

Cambiar imágenes

Cambia las imágenes en los duplicados.

Agregar margen superior al módulo de imagen en la columna 2

Y agregue un margen superior al Módulo de imagen en la segunda columna.

• Margen superior: 24,7 vw

Agregar módulo de texto debajo del módulo de imagen n. ° 1

Agregar contenido

El siguiente módulo que necesitamos en la columna 1 es un módulo de texto. Agregue un número al cuadro de contenido.

Color de fondo

A continuación, cambie el color de fondo. Este color debe coincidir con el color de fondo que haya asignado a la fila.

• Color de fondo: #ffffff

Configuración de texto

Vaya a la pestaña de diseño y cambie la configuración del texto.

• Fuente de texto: Lora
• Alineación de texto: derecha
• Color del texto: # 000000
• Tamaño del texto: 3vw
• Altura de la línea de texto: 3vw

Dimensionamiento

También estamos reduciendo el ancho del módulo.

• Ancho: 7vw

Espaciado

Cree algo de espacio para el módulo en la configuración de espaciado a continuación.

• Acolchado superior: 0.5vw
• Acolchado inferior: 2.5vw
• Acolchado derecho: 0.9vw

Índice Z

Y aumente el índice Z.

• Índice Z: 99

Clonar el módulo de texto 3 veces

Una vez que haya completado los pasos generales para el módulo de texto, puede clonarlo tres veces.

Posicionamiento

Coloque los duplicados en consecuencia:

Personalizar módulos de texto

Módulo de texto # 1

Margen superior negativo

¡Es hora de comenzar a personalizar los diferentes módulos de texto de acuerdo con su posición! Abra el Módulo de texto en la columna 1 y agregue un margen superior negativo.

• Margen superior: -5.9vw

Sombra de la caja

También estamos agregando una sombra de cuadro usando la siguiente configuración:

• Posición horizontal de la sombra de la caja: 7vw
• Posición vertical de la sombra de la caja: 5.9vw
• Fuerza de propagación de la sombra de caja: 0px
• Color de sombra: rgba (35,50,255,0.94)

Módulo de texto # 2

Cambiar numeración

Continúe abriendo el Módulo de texto en la segunda columna y cambie el número.

Alineación del texto

Modifique también la alineación del texto.

• Alineación de texto: izquierda

Alineación del módulo

Y cambie la alineación del módulo en la configuración de tamaño.

• Alineación del módulo: derecha

Espaciado

Continúe con la configuración de espaciado y agregue un margen superior negativo. Agregue el relleno a la izquierda en lugar de a la derecha también.

• Margen superior: -6vw
• Acolchado izquierdo: 0.9vw

Sombra de la caja

Complete el diseño del módulo de texto agregando una sombra de cuadro.

• Posición horizontal de la sombra de la caja: 7vw
• Posición vertical de la sombra de la caja: -6vw
• Fuerza de propagación de la sombra de caja: 0px
• Color de sombra: #ededed

Módulo de texto n. ° 3

Cambiar numeración

¡Vamos al módulo de texto en la columna 3! Cambie el número en el cuadro de contenido.

Margen superior negativo

Pase a la pestaña de diseño y agregue un margen superior negativo.

• Margen superior: -6vw

Sombra de la caja

Usa también una sombra de caja.

• Posición horizontal de la sombra del cuadro: -7vw
• Posición vertical de la sombra de la caja: -6vw
• Fuerza de propagación de la sombra de caja: 0px
• Color de sombra: # ff2323

Módulo de texto # 4

Cambiar numeración

Pasemos al siguiente y último módulo de texto. Cambie el número aquí también.

Alineación del texto

Luego, cambie la alineación del texto.

• Alineación de texto: izquierda

Alineación del módulo

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

• Alineación del módulo: derecha

Cambiar espaciado

A continuación, modifique la configuración de espaciado.

• Margen superior: 24,7 vw
• Margen inferior: -6vw
• Acolchado izquierdo: 0.9vw

Sombra de la caja

Y complete el diseño del Módulo de texto agregando una sombra de cuadro con la siguiente configuración:

• Posición horizontal de la sombra del cuadro: -7vw
• Posición vertical de la sombra de la caja: -5.9vw
• Fuerza de propagación de la sombra de caja: 0px
• Color de sombra: # 000000

Clonar toda la fila

Una vez que haya completado la fila, puede clonarla tantas veces como desee, dependiendo de la cantidad de imágenes que desee que se muestren.

Cambiar numeración e imágenes

¡Asegúrate de cambiar todas las imágenes y números y listo!

Avance

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

Pensamientos finales

En esta publicación, le mostramos cómo crear una galería de aspecto agradable con esquinas de imagen etiquetadas. Esta es una forma única de mostrar sus imágenes de una manera atractiva desde el punto de vista estético. También pudo descargar el archivo JSON al comienzo del tutorial. Si tiene alguna pregunta o sugerencia, ¡asegúrese de 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.