Cambiar el número de columnas en el módulo de la galería Divi en diferentes puntos de interrupción


El módulo de la galería Divi le permite crear una hermosa galería de imágenes en un diseño de cuadrícula receptivo. La galería se considera receptiva porque escalará el tamaño de sus imágenes y ajustará el número de columnas en la cuadrícula de acuerdo con los diferentes anchos del navegador.

De forma predeterminada, el módulo de la galería tiene tres puntos de interrupción (puntos donde el estilo cambia en ciertos anchos del navegador) que ajustan el número de columnas en la cuadrícula. Mostrará su galería de imágenes en cuatro columnas en el escritorio y luego se dividirá en tres columnas en tabletas, dos columnas en tabletas pequeñas (y teléfonos grandes) y una columna en teléfonos.

Esta configuración predeterminada generalmente funcionará en la mayoría de los casos, pero a veces es posible que necesite más control sobre la cantidad de columnas que se muestran en ciertos anchos de navegador. Es por eso que en este tutorial, le mostraré cómo completar la cantidad de columnas que se muestran en el módulo de la galería Divi no solo para el escritorio, sino también para tres puntos de interrupción adicionales del navegador.

Vistazo

Aquí hay un adelanto de lo que crearemos en este tutorial. Observe el número diferente de columnas para la galería de imágenes en diferentes anchos de navegador.

Preparación de sus elementos de diseño

(incrustar) https://www.youtube.com/watch?v=9BEvWIsYivQ (/ 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 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 la pantalla de caja de luz para que llene la pantalla de manera agradable en la mayoría de los escritorios.

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

Configurar una página nueva

Para empezar, cree una nueva página, asigne un título a su página e implemente 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 de imágenes

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.

Divi llenará el módulo de la galería con algunas imágenes de su galería de medios en una pantalla de cuadrícula como la siguiente:

En la configuración del módulo de la galería, 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 pie de foto: NO
Mostrar paginación: NO

Ajuste la configuración de la fila para hacer una galería de ancho completo sin ancho de canal

Para que nuestra nueva estructura de columna funcione, lo principal que tenemos que hacer es deshacernos del espacio / margen predeterminado que existe entre nuestras imágenes en la galería. Para hacer esto, todo lo que tenemos que hacer es establecer el ancho de la canaleta en 1. Además, como una opción, puede hacer que la fila sea de ancho completo para que la galería de imágenes abarque todo el ancho del navegador. 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

Si desea agregar espacio entre las imágenes en la galería, sugiero usar este método ya que necesitamos mantener el ancho de la canaleta en 1.

Cómo responde la galería a diferentes anchos de navegador de forma predeterminada

Como se mencionó anteriormente, de forma predeterminada, el módulo de la galería Divi mostrará su galería de imágenes en cuatro columnas en el escritorio y luego se dividirá en tres columnas en la tableta, dos columnas en las tabletas pequeñas (y teléfonos grandes) y una columna en los teléfonos.

Sin embargo, vamos a cambiar esto para incluir un número personalizado de columnas en ciertos puntos de interrupción usando algunos fragmentos de CSS personalizado.

Establecer un número específico de columnas para todos los tamaños de navegador

Si desea cambiar el número de columnas que se muestran en la galería para que el número de columnas permanezca igual en todos los tamaños de navegador, existe una forma sencilla de hacerlo. Esto puede resultar útil si solo desea mostrar su galería en una columna, dos columnas o tres columnas. De esa manera, puede tener imágenes realmente grandes en el escritorio e imágenes más pequeñas en el dispositivo móvil mientras mantiene el mismo número de columna. Tener cuatro o más columnas probablemente no funcionará, ya que las imágenes serán demasiado pequeñas para las pantallas del teléfono.

Supongamos que desea mostrar tres columnas en todos los tamaños de navegador. Para hacer esto, abra la configuración del módulo de la galería Divi y agregue el siguiente CSS personalizado al elemento de la galería:

width: 33.33% !important;
margin: 0 !important;
clear: none !important;

Ahora su galería conservará la estructura de tres columnas en todos los tamaños de navegador.

Si desea un diseño de 2 columnas para todos los tamaños de navegador, todo lo que necesita hacer es cambiar el valor de la propiedad de ancho al 50%.

Si desea un diseño de 1 columna, simplemente actualice el ancho al 100%.

Eso es.

Pero, si desea obtener un mayor control del número de columnas en ciertos puntos de interrupción, siga leyendo.

Cambiar el número de columnas para puntos de interrupción específicos

Si desea obtener un control completo sobre la cantidad de columnas que se muestran cuando el navegador alcanza ciertos puntos de interrupción, podemos usar algunos fragmentos de CSS con consultas de medios que se dirigen a ciertos anchos de navegador.

Agregue la clase CSS al módulo de la galería Divi

Antes de agregar el CSS personalizado, primero debemos darle a nuestro módulo de galería una Clase CSS personalizada para que podamos hacer referencia a esa clase específica en nuestro CSS. Esto asegurará que nuestro CSS solo se aplique a este módulo de galería específico. Para hacer esto, abra la configuración del módulo de la galería y agregue la siguiente clase CSS en la pestaña avanzada:

Clase CSS: col-width

No olvide sacar el CSS personalizado agregado al Elemento de la Galería en la sección anterior de este artículo si lo agregó.

Después de eso, guarde su configuración.

Agregue el CSS personalizado a la configuración de la página

Con su clase de CSS en su lugar, está listo para agregar el CSS personalizado. Abra la configuración de la página haciendo clic en el ícono de ajustes en la barra de configuración de la página en la parte inferior de la página (o puede usar el atajo de teclado "o").

Luego agregue el siguiente CSS personalizado en la pestaña avanzada.

/** Desktop **/
@media (min-width: 981px){
.col-width .et_pb_gallery_item {
width: 16.66% !important; /*six columns*/
clear: none !important;
}
}

/** Tablet **/
@media (max-width: 980px){
.col-width .et_pb_gallery_item {
width: 25% !important; /*four columns*/
clear: none !important;
}
}

/** Small Tablet and Large Phone **/
@media (max-width: 767px){
.col-width .et_pb_gallery_item {
width: 33.33% !important; /*three columns*/
clear: none !important;
}
}

/** Phone **/
@media (max-width: 479px){
.col-width .et_pb_gallery_item {
width: 50% !important; /*two columns*/
clear: none !important;
}
}

Este CSS agregará un número personalizado de columnas a ciertos puntos de interrupción de la siguiente manera:

Escritorio: 6 columnas
Tableta: 4 columnas
Tableta pequeña y teléfono grande: 3 columnas
Teléfono: 2 columnas

Comprender y ajustar el CSS

Al mirar el CSS, notará que está dividido en cuatro consultas de medios separadas. La consulta de medios superior agrega estilo a los navegadores de escritorio (navegadores con un ancho mínimo de 981 px). La segunda consulta de medios agrega estilo a los navegadores del tamaño de una tableta, y así sucesivamente.

Dentro de cada consulta de medios, el CSS más importante a tener en cuenta es la propiedad de ancho. Esto designa el tamaño de cada elemento de la galería y también establece el ancho de columna de la galería.

Por ejemplo, la consulta de medios superior para escritorio establece el ancho del elemento de la galería en 16.66%.

Esto equivale a una sexta parte del ancho total de su contenedor (o fila). Por lo tanto, la galería mostrará un diseño de seis columnas en el escritorio.

Para ajustar el número de columnas para el escritorio, todo lo que necesita hacer es cambiar la propiedad de ancho a un valor diferente. Aquí hay una lista de porcentajes de ancho que puede probar.

12 columnas: 8,33%
10 columnas: 10%
8 columnas: 12,5%
6 columnas: 16,66%
5 columnas: 20%
4 columnas: 25%
3 columnas: 33,33%
2 columnas: 50%
1 columna: 100%

Resultado final

Aquí está el resultado final en los diferentes anchos de navegador.

Escritorio (6 columnas)

Tableta (4 columnas)

Tableta pequeña y teléfono grande (3 columnas)

Teléfono (2 columnas)

Pensamientos finales

Espero que este tutorial sea útil para aquellos que buscan obtener más control sobre la cantidad de columnas que muestra su galería en ciertos dispositivos o puntos de interrupción. Con esta configuración, puede agregar cualquier cantidad de columnas que desee para cualquier ancho de navegador para crear exhibiciones de galería con el usuario en mente.

Los puntos de interrupción que utilicé en el CSS personalizado son los puntos de interrupción que Divi ya usa. No dude en consultar nuestra publicación sobre cómo perfecciona tus diseños con consultas de medios para obtener más información sobre este concepto.

Hasta la próxima, espero tener noticias tuyas en los comentarios.

¡Salud!