Uso del módulo de la galería Divi para crear una galería de imágenes con espaciado personalizado


El módulo de galería de Divi le permite crear una hermosa galería de imágenes en un diseño de cuadrícula con poco esfuerzo. Y quizás el elemento de diseño más importante de una cuadrícula es el espaciado. Con Divi, puede ajustar el ancho de la canaleta para controlar el espacio entre los elementos de la cuadrícula (o imágenes). Sin embargo, incluso con cuatro valores de ancho de canaleta para elegir, estos valores de ancho de canaleta establecidos pueden ser limitantes en algunos casos. Por lo tanto, si desea tener un control completo sobre el espaciado entre imágenes, Divi aún lo tiene cubierto. En realidad, existe un método sencillo para hacer esto.

En este tutorial, le mostraré cómo obtener un control completo del espacio de su galería agregando un relleno personalizado a una galería de imágenes usando el Módulo de Galería Divi.

Empecemos.

Vistazo

Aquí hay una galería de imágenes con cada imagen con un relleno personalizado de 2vw. Observe el ligero cambio en el espaciado a medida que el relleno de 2vw se escala de acuerdo con el ancho de la ventana gráfica.

módulo de galería divi

Así es como se ve cuando cambia el ancho del navegador.

módulo de galería divi

Preparación de sus elementos de diseño

(incrustar) https://www.youtube.com/watch?v=vBaGGx-yogc (/ incrustar)

Suscríbete a nuestro canal de Youtube

Para este tutorial, necesitará el tema Divi instalado y activo. También necesitará agregar 12 imágenes a su biblioteca de medios para usarlas en la construcción de la galería de imágenes. Para un módulo de galería Divi que utiliza un diseño de cuadrícula, el tamaño de tus imágenes debe ser de alrededor de 1500 px por 800 px si planeas que tus imágenes se abran en la pantalla de la caja de luz para que llene bien la pantalla en la mayoría de los escritorios.

Implementación del espacio personalizado para el módulo Galería Divi

Configuración de su nueva página

Para empezar, necesitará crear una nueva página, darle un título a su página e implementar Divi Builder. Seleccione la opción "Construir desde cero" y luego publique su página. Luego haga clic para construir en la parte frontal.

Creación de la galería en mosaico

Con Divi Builder implementado, continúe y cree una nueva sección regular con una fila de una columna y agregue un Módulo de Galería Divi a la fila.

módulo de galería divi

Luego haga clic en el ícono gris más para agregar 12 imágenes a la galería.

módulo de galería divi

Luego actualice la configuración del Módulo de la Galería Divi de la siguiente manera:

Número de imágenes: 12
Mostrar título y pie de foto: NO
Mostrar paginación: NO

módulo de galería divi

Eso fue bastante fácil. Dejaré el estilo predeterminado en su lugar para que podamos enfocarnos más en espaciar las imágenes en nuestro diseño de cuadrícula.

Creación de una galería de ancho completo ajustando la configuración de la fila

Para este diseño de galería de imágenes, quiero hacer que la galería sea de ancho completo. Esto demostrará mejor el espaciado personalizado que se aplicará alrededor de cada una de nuestras imágenes. Y dado que vamos a utilizar un relleno personalizado en lugar del ancho de la canaleta (márgenes) para espaciar las imágenes, queremos deshacernos del ancho de la canaleta por completo. Para hacer esto, abra la configuración de la fila y actualice lo siguiente:

Hacer esta fila de ancho completo: SÍ
Ancho del canal: 1

módulo de galería divi

En caso de que se lo pregunte, los valores para el ancho de la canaleta varían de 1 a 4 y representan lo siguiente:

1 representa margen cero entre columnas.
2 representa un margen derecho e inferior del 3% entre columnas.
3 representa un margen derecho e inferior del 5,5% entre columnas.
4 representa un margen derecho e inferior del 8% entre columnas.

Al establecer el ancho del medianil en 1, las imágenes tienen un margen de 0 entre ellas.

Esta configuración simple le permitirá obtener un control total sobre la cantidad de espacio que desea entre las imágenes utilizando un conjunto diferente de opciones en la configuración del módulo de la galería Divi.

Creación de espacios personalizados entre imágenes ajustando la configuración del módulo Galería

Hay dos formas de agregar espacio entre las imágenes en su galería: con bordes de imagen o con relleno personalizado. Usar bordes de imagen para crear espacios es bastante fácil. Simplemente ajuste el ancho del borde para crear la cantidad exacta de espacio que necesita entre las imágenes. Incluso puede elegir un color diferente para el borde, pero si configura el borde como transparente, podrá ver el color de fondo de la fila, que es un poco más limpio.

módulo de galería divi

El uso de bordes puede ser útil para agregar un espaciado personalizado, pero probablemente querrá tener la capacidad de diseñar un borde para sus imágenes que esté separado del espaciado personalizado. Por eso es mejor utilizar un relleno personalizado alrededor de sus imágenes.

Para este ejemplo, agregaremos un relleno de 2vw alrededor de cada imagen. Puede usar cualquier unidad de longitud que prefiera (px, em,%) pero realmente me gusta el vw unidad de longitud porque es en relación con la ventana gráfica de su navegador (o navegador) ancho. Esto significa que aumentará en longitud a medida que aumenta el ancho del navegador y disminuirá en longitud a medida que el navegador disminuya. Esto es excelente para el diseño receptivo porque no tiene que preocuparse por establecer valores de relleno separados para la tableta y el teléfono inteligente.

Para configurar el relleno personalizado, abra la configuración del módulo de la galería Divi y agregue el siguiente CSS personalizado al elemento de la galería:

padding: 2vw

módulo de galería divi

Ahora necesitamos agregar el mismo valor de relleno personalizado al módulo de la galería Divi para que coincida con el espaciado en los bordes de la galería. Vaya a la pestaña de diseño y agregue el siguiente relleno personalizado al módulo:

Relleno personalizado: 2vw superior, 2vw inferior, 2vw izquierda, 2vw derecha

módulo de galería divi

Ahora abra la configuración de la fila y elimine el relleno predeterminado superior e inferior para que haya cantidades iguales de relleno alrededor del módulo dentro de la fila. Abra la configuración de la fila y actualice lo siguiente:

Relleno personalizado: 0px arriba, 0px abajo

módulo de galería divi

Resultado final

Aquí está el resultado final en diferentes anchos de navegador. Observe el ligero cambio en el espaciado a medida que el relleno de 2vw se escala de acuerdo con el ancho de la ventana gráfica.

módulo de galería divi

Así es como se ve cuando cambia el ancho del navegador.

módulo de galería divi

Pensamientos finales

Espero que este sencillo consejo de diseño le ayude a ajustar el espaciado de sus galerías para que pueda crear hermosos diseños de cuadrícula para sus imágenes. ¡Y esta misma técnica también se puede utilizar para el módulo de cartera! Siéntase libre de experimentar con diferentes unidades de longitud para satisfacer sus necesidades y pruebe también diferentes colores y degradados de fondo de fila.

Espero tener noticias tuyas en los comentarios.

¡Salud!