Divi y su módulo de galería te permiten 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. Entonces, si desea tener un control completo sobre el espacio entre las imágenes, Divi todavía lo tiene cubierto. En realidad, hay un método fácil 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 Divi Gallery.
Empecemos.
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 escala según el ancho de la ventana gráfica.
Así es como se ve cuando cambia el ancho del navegador.
Preparando sus elementos de diseño
Suscríbete a nuestro canal de Youtube
Para este tutorial, necesitará el tema Divi instalado y activo. También necesitará 12 imágenes agregadas 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 usa un diseño de cuadrícula, el tamaño de sus imágenes debe ser de alrededor de 1500 px por 800 px si planea que sus imágenes se abran en una pantalla de caja de luz para que llene bien la pantalla en la mayoría de los escritorios.
Implementando el espaciado personalizado para el módulo Divi Gallery
Configurando tu nueva página
Para empezar, deberá crear una nueva página, darle un título a su página e implementar Divi Builder. Seleccione la opción «Crear desde cero» y luego publique su página. Luego haga clic para construir en la parte delantera.
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.
Luego haga clic en el ícono gris más para agregar 12 imágenes a la galería.
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 subtítulo: NO
Mostrar paginación: NO
Eso fue bastante fácil. Voy a dejar el estilo predeterminado en su lugar para que podamos centrarnos 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 que la galería ocupe todo el ancho. Esto demostrará mejor el espaciado personalizado que se aplicará alrededor de cada una de nuestras imágenes. Y dado que vamos a utilizar relleno personalizado en lugar de ancho de medianil (márgenes) para espaciar las imágenes, queremos deshacernos del ancho de medianil por completo. Para hacer esto, abra la configuración de la fila y actualice lo siguiente:
Hacer que esta fila sea de ancho completo: SÍ
Ancho de canaleta: 1
En caso de que te lo estés preguntando, los valores para el ancho del canalón 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 de 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 mediante el ajuste de la configuración del módulo de la galería
Hay dos formas de agregar espacio entre las imágenes de 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 establece el borde en transparente, podrá ver el color de fondo de la fila, que es un poco más limpio.
El uso de bordes puede ser útil para agregar un espacio personalizado, pero probablemente querrá tener la capacidad de diseñar un borde para sus imágenes que esté separado del espacio personalizado. Por eso es mejor usar 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 la unidad de longitud vw porque es relativa al ancho de la ventana gráfica (o navegador) de su navegador . Esto significa que aumentará en longitud a medida que aumente el ancho del navegador y disminuirá en longitud a medida que disminuya el navegador. Esto es excelente para el diseño receptivo porque no tiene que preocuparse por establecer valores de relleno separados para tabletas y teléfonos inteligentes.
Para configurar el relleno personalizado, abra la configuración del módulo Divi Gallery y agregue el siguiente CSS personalizado al elemento de la galería:
|
01
|
padding: 2vw |
Ahora debemos agregar el mismo valor de relleno personalizado al módulo de la galería Divi para que coincida con el espacio en los bordes de la galería. Vaya a la pestaña de diseño y agregue el siguiente relleno personalizado al módulo:
Acolchado personalizado: 2vw arriba, 2vw abajo, 2vw izquierda, 2vw derecha
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
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 escala según el ancho de la ventana gráfica.
Así es como se ve cuando cambia el ancho del navegador.
Pensamientos finales
Espero que este simple consejo de diseño lo 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 usar para el módulo de cartera! Siéntase libre de experimentar con diferentes unidades de longitud para satisfacer sus necesidades y también pruebe diferentes colores y degradados de fondo de fila.
Espero escuchar de usted en los comentarios.
¡Salud!