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

El módulo Div Gallery le permite crear hermosas galerías de imágenes en un aspecto de cuadrícula receptiva. La galería se considera receptiva, ya que 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. Por defecto, el módulo de la galería tiene tres puntos de interrupción (puntos en los que el estilo cambia a ciertos anchos del navegador) que ajustan el número de columnas en la cuadrícula. Mostrará la galería de imágenes en cuatro columnas en el escritorio y luego se dividirá en tres columnas en la tableta, dos columnas en tabletas pequeñas (y teléfonos grandes) y una columna en los teléfonos.
Esta configuración predeterminada generalmente funcionará en la mayoría de los casos, pero a veces es posible que necesite un mayor control sobre el número de columnas que se muestran en ciertos anchos del navegador. Es por eso que, en este tutorial, le mostraré cómo completar el número de columnas que se muestran en el módulo de la Galería Divk no solo para el escritorio, sino también para tres puntos de interrupción adicionales del navegador. Él dibuja una breve mirada a lo que construiremos en este tutorial. Observe el número diferente de columnas para la galería de imágenes en diferentes anchos del navegador.

Preparación de elementos de diseño suscribirse a nuestro canal de YouTube Para este tutorial, necesitará el tema instalado y activo. También necesitará 12 imágenes agregadas a su biblioteca de medios para ser utilizadas para construir la galería de imágenes. Para un módulo de galería DIP que usa una apariencia de cuadrícula, el tamaño de sus imágenes debe ser de aproximadamente 1500 PX con 800 PX si tiene la intención de abrir sus luces en la pantalla de la caja de luz, para que llene la hermosa pantalla en la mayoría de los escritorios. Implementación del espacio personalizado para el módulo Div Gallery Configuración de una nueva página para comenzar, crear una nueva página, darle a la página un título e implementar Div Builder. Seleccione la opción “Construir desde cero” y luego publique la página. Luego haga clic para construir en la parte delantera. Aumentando la galería de imágenes con la división implementada del constructor, continúe y cree una nueva sección habitual con una fila con una columna y agregue un módulo de galería en una fila.
Div completará el módulo de la galería con algunas imágenes en 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 icono Gray Plus para agregar 12 imágenes a la galería.

Luego actualice la configuración del módulo Div Gallery de la siguiente manera: Número Imagen: 12 Mostrar título y leyenda: No muestre paginación: No

Ajuste la configuración de la fila para crear una galería de ancho completa sin el ancho de la canaleta para que funcione nuestra nueva estructura de columna, lo principal que tenemos que hacer es deshacerse 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 opción, puede hacer un ancho completo para que la galería de imágenes se expanda en todo el ancho del navegador. Para esto, abra la configuración de la fila y actualice lo siguiente: Haga esta fila ancho completo: Sí, el ancho de la canaleta: 1

Si desea agregar espacio entre las imágenes en la galería, le sugiero que use este método, porque debemos mantener el ancho de la canaleta establecido en 1. Cómo la galería responde a diferentes anchos del navegador por defecto como se mencionó anteriormente, por defecto, por defecto, El módulo de la galería Div mostrará la galería de imágenes en cuatro columnas en el escritorio y luego se dividirá en tres columnas en la tableta, dos columnas en tabletas pequeñas (y teléfonos grandes) y una columna en teléfonos.
Sin embargo, cambiaremos esto para incluir un número personalizado de columnas en ciertas interrupciones utilizando algunos fragmentos CSS personalizados.

Configuración de un número específico de columnas para todos los tamaños del navegador Si desea cambiar el número de columnas que se muestran en la galería, de modo que el número de columnas siga siendo el mismo en todos los tamaños del navegador, hay una manera simple de hacerlo . Esto podría ser útil si desea mostrar su galería en una sola columna, dos columnas o tres columnas. De esta manera, puede tener imágenes muy grandes en el escritorio y imágenes más pequeñas en el móvil, mientras mantiene el número de columna. Si tiene cuatro o más columnas, probablemente no funcionará, porque las imágenes serán demasiado pequeñas para las pantallas del teléfono. Suponga que desea mostrar tres columnas en todos los tamaños del navegador. Para hacer esto, abra la configuración del módulo de la Galería Div y agregue los siguientes CSS personalizados al artículo en la Galería: Ancho: ¡33.33%!

Margen: 0! IMPORTANTE;
Claro: ninguno! Importante;
Ahora su galería mantendrá la estructura de las tres columnas en todos los tamaños del navegador.
Si desea una búsqueda de 2 columnas para todos los tamaños del navegador, todo lo que tiene que hacer es cambiar el valor del ancho al 50%. Si desea un aspecto de 1 columna, simplemente actualice el ancho al 100%.
Eso es todo. Pero si desea obtener más control sobre la cantidad 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 lograr un control completo sobre el número de columnas que se muestran cuando el navegador alcanza ciertos puntos de interrupción, podemos usar algunos fragmentos CSS con consultas de medios dirigidas a ciertos anchos del navegador. Agregue la clase CSS al módulo Div Gallery antes de agregar CSS personalizado, primero debemos darle a nuestro módulo de la galería una clase CSS personalizada, para que podamos referirnos a esa clase específica en CSS. Esto asegurará que nuestro CSS solo se aplique a este módulo de galería específico. Para esto, abra la configuración del módulo de la galería y agregue la siguiente clase CSS a la pestaña avanzada: CSS CLASS: COL-WIDTH


Recuerde eliminar el CSS personalizado agregado al artículo en la galería en la sección anterior de este artículo si lo ha agregado. Después de eso, guarde la configuración. Agregue CSS personalizado a la configuración de la página con su clase CSS a su lugar, está listo para agregar CSS personalizado. Abra la configuración de la página haciendo clic en el icono de la rueda en la barra de configuración de la página en la parte inferior de la página (o puede usar el pedido rápido del teclado). Luego agregue el siguiente CSS personalizado a la pestaña avanzada. /** Escritorio **/

@Media (Min-Width: 981px) {
.Col-width .et_pb_gallery_item {
Ancho: 16.66%! Importante; /*Seis columnas*/

Claro: ninguno! Importante;
}
}
/** tableta **/
@Media (max-width: 980px) {
.Col-width .et_pb_gallery_item {
Ancho: 25%! Importante; /*Cuatro columnas*/
Claro: ninguno! Importante;
}
}
/** Tableta pequeña y teléfono grande **/@Media (Max-Width: 767px) {
.Col-width .et_pb_gallery_item {
Ancho: 33.33%! Importante; /*Tres columnas*/
Claro: ninguno! Importante;
}
}
/** Teléfono **/
@Media (max-width: 479px) {
.Col-width .et_pb_gallery_item {
Ancho: ¡50%! Importante; /*Dos columnas*/
Claro: ninguno! Importante;
}
}
Este CSS agregará un número personalizado de columnas a ciertos puntos de interrupción, de la siguiente manera: Desktop: 6 columnas de tableta: 4 tableta pequeña y teléfono grande: 3 columnas de teléfono: 2 columnas comprensión y ajuste de CSS, notará que está dividido en cuatro separados preguntas de los medios. La consulta de medios superiores agrega el estilo de los navegadores de escritorio (navegadores con un ancho mínimo de 981px). La segunda consulta de medios agrega estilo a los navegadores del tamaño de la tableta, etc.
Dentro de cada consulta de medios, el CSS más importante que no toma es propiedad del ancho. Esto designa el tamaño de cada elemento de la galería y que también establece el ancho de la columna para la galería.
Por ejemplo, la consulta de medios superior para el escritorio establece el ancho del elemento de la galería en 16.66%.
Esto es equivalente a una silla del ancho total del contenedor (o fila). Por lo tanto, la galería mostrará seis columnas en el escritorio.
Para ajustar el número de columnas para el escritorio, todo lo que tiene que hacer es cambiar la propiedad de ancho a un valor diferente. Aquí hay una lista del porcentaje 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í es el resultado final en diferentes anchos del navegador. Tableta de escritorio (6 columnas) (4 columnas)

Pequeña tableta y teléfono grande (3 columnas)

Teléfono (2 columnas)
Pensamientos finales Espero que este tutorial haya sido útil para aquellos entre ustedes que desean ganar más control sobre la cantidad de columnas que su galería muestra en ciertos dispositivos o puntos de interrupción. Con esta configuración, puede agregar cualquier cantidad de columnas que desee para cualquier ancho del navegador para crear pantalla de la galería, dado el usuario. Los puntos de interrupción que he usado en CSS personalizados son aquellos puntos de interrupción que DIV ya está usando. Siéntase libre de consultar nuestra publicación sobre cómo ajustar sus proyectos de medios para obtener más información sobre este concepto. Hasta la próxima, espero tener noticias de los comentarios. ¡Suerte!