Cómo cambiar el número de columnas en el blog div Div

El módulo de blog de Divic puede mostrar publicaciones de blog en un ancho completo o apariencia de cuadrícula. Si elige la apariencia de la cuadrícula, el número máximo de columnas que puede tener es tres. En este tutorial, exploraremos la combinación de potencia de la cuadrícula CSS con el módulo de blog Div Div para crear cualquier cantidad de columnas que desee. Con solo unos pocos fragmentos de CSS, su blog se convertirá en una hermosa apariencia de la cuadrícula con varias columnas. Además, las columnas responderán fluido con todos los tamaños del navegador, por lo que no tiene que preocuparse por actualizar estas consultas de medios o configuraciones de respuesta. Según la magia de la cuadrícula de CSS, aún tendrá la configuración construida para que el módulo del blog diseñe el blog visual, sin tener un CSS personalizado. Entonces, si está buscando varias columnas para su blog de la Divica, esto funcionará y no solo.
Mirar los Sneaks es un vistazo rápido al diseño que construiremos en este tutorial.

Y aquí hay un CodePen que demuestra la apariencia de la cuadrícula CSS que agregaremos al módulo de blog. Descargue el aspecto gratuito para poner su mano en el diseño del módulo de blog en este tutorial, primero tendrá que descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico diaria utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá aún más división de amabilidad y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar. No será “Reabed” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue gratis únase al boletín de Divin y le enviaremos una copia del paquete de diseño de la página de buceo, además de muchos otros recursos, consejos y consejos de forma gratuita. Sigue a ti mismo y te convertirás en una división maestra en el menor tiempo. Si ya está suscrito, ingrese su correo electrónico a continuación y haga clic en Descargar para acceder al paquete de diseño. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a Div Free Weekly Layout Div!
Suscríbase a nuestro canal de YouTube para importar la apariencia de la sección en la Biblioteca de la Divic, navegue a la Biblioteca Divic. Haga clic en el botón Importar. En la ventana de portabilidad emergente, seleccione la pestaña Importar y elija el archivo de descarga en su computadora. Luego haga clic en el botón Importar.
Una vez terminado, el aspecto de la sección estará disponible en Divi Builder. Pasemos al tutorial, ¿sí? ¿Cómo cambiar el número de columnas en el módulo de blog Div usando la cuadrícula CSS por qué CSS Grid? Hay muchas formas de hacer diseños de columnas para el módulo de blog con CSS. Pero en este caso, es el más lógico usar la cuadrícula CSS. La propiedad de CSS Grid es una forma popular de crear modelos de cuadrícula predecibles y receptivos para el contenido con solo unas pocas filas de CSS. Con él, podemos organizar todas las tarjetas de módulos de blog en una cuadrícula completamente receptiva. En resumen, ofrece una solución simple y completa para agregar cualquier aspecto de color que desee para su div. De hecho, también lo usé para construir una apariencia de la cuadrícula para los módulos Divi.

Ahora, volvamos nuestra atención al módulo del blog. Configuración de un módulo de blog con una mirada completa El módulo de blog Div Div se puede usar para agregar un blog en cualquier lugar de su sitio. Esto hace que sea muy fácil construir una página de blog en el DIV. Todo lo que tiene que hacer es agregar un módulo de blog en la página usando Divi Builder. Para este tutorial, utilizaremos una página de blog prefabricada de uno de nuestros paquetes de apariencia gratuitos que ya tiene un módulo de blog con un estilo básico. Para cargar la apariencia de la página de blog prefabricada en su página, abra el menú Configuración en la parte inferior y abra la ventana emergente Agregar desde la biblioteca. A partir de ahí, busque y encuentre el aspecto del blog de diseño de moda y cárguelo en la página.
Una vez que se carga el aspecto, busque el módulo de blog utilizado para mostrar las publicaciones de blog y abrir la configuración del módulo de blog.

Establezca el número de publicaciones en la configuración del blog, actualice el contenido para limitar el número de publicaciones a 10. (Esto es principalmente por razones estéticas, ya que nuestra cuadrícula eventualmente incluirá dos filas de cinco publicaciones de blog en el escritorio)

Número de publicaciones: 10

Seleccione el aspecto de ancho completo porque crearemos la apariencia de la columna para nuestro blog usando la cuadrícula CSS, debemos asegurarnos de que el módulo de blog sea con ancho completo (no cuadrícula). Esto asegurará que las publicaciones de blog se apilen verticalmente, en su orden normal del documento/página.
Para cambiar el aspecto del módulo de blog, abra la configuración del módulo de blog y, en la pestaña de diseño, abra el menú desplegable y seleccione el ancho completo.

Ahora, cada publicación de blog debe extenderse por la columna vertebral (o el contenedor de los padres). Solo para la puerta, agregemos un borde a las publicaciones del blog, para que podamos tener una mejor idea de cómo se ve nuestra cuadrícula cuando agregamos nuestro CSS. Actualice las opciones de borde de la siguiente manera: Ancho de bilis: 1px
Color del borde: RGBA (150,104,70.0.35)

Agregando la clase CSS personalizada al módulo de blog para apuntar efectivamente a este módulo de blog en particular (no otro) con nuestro CSS, necesitamos ofrecer a nuestro módulo una clase CSS personalizada. En la pestaña avanzada, agregue la siguiente clase CSS:
Clase CSS: Et-Blog-CSS-Grid
Creando una apariencia con varias columnas con CSS Grid ahora que nuestro módulo de blog está configurado con un aspecto completo, estamos listos para agregar nuestro CSS personalizado. Por ahora, usaremos un módulo de código para agregar el CSS a la página. Pero, cuando terminemos, siempre puede mover el CSS a la ubicación favorita (como el CSS personalizado de las opciones de tema o el estilo del tema del niño). Agregue un nuevo módulo de código en el módulo de blog.

En el código ingresa al código, agregue las etiquetas de estilo necesarias para incluir cualquier código CSS agregado a una página.
Dentro de las etiquetas de estilo, inserte el siguiente fragmento CSS: .et-blog-css-grid> div {


Pantalla: cuadrícula;

Columnas de plantilla de cuadrícula: repetir (relleno automático, minmax (200px, 1fr));

Brecha: 20px;
}
La primera línea de CSS presenta el contenido (o módulos) de acuerdo con el módulo de cuadrícula CSS. Pantalla: cuadrícula; La segunda línea del CSS define la plantilla de columna de la cuadrícula. Colonias de plantilla de cuadrícula: repetición (finalización automática, minmax (200px, 1fr)); La tercera línea determina la distancia entre los elementos de la cuadrícula (como el ancho de la canaleta). Grand: 20px; Cómo funcionan las columnas de la cuadrícula CSS En este caso, la cuadrícula agregará columnas repetidamente, según sea necesario, para llenar el espacio restante del contenedor de la cuadrícula. Cada columna tendrá un ancho mínimo de 200 px y un ancho máximo de 1 FR (que es exactamente el mismo que el automóvil). Esto significa que cuando el contenedor principal (la columna Turn/Division) tiene un ancho máximo de 1080 PX, la cuadrícula tendrá 5 columnas. Cada columna tendrá un ancho de 200px (ancho mínimo) que es igual a 1000px. Agregue los 4 espacios de la rejilla de 20 PX y obtenga un total de 1080 PX. Una vez que la ventana de visualización aprieta la cuadrícula por debajo de 1080px, la magia de la cuadrícula CSS toma el control y llena cada espacio disponible con publicaciones de blog hasta que alcanzan el ancho de 200px. Las nuevas líneas se crearán automáticamente a medida que se necesiten implícitamente. Para obtener más columnas, puede cambiar el valor mínimo de 200 PX con algo más pequeño, o aumentar el ancho máximo de la fila de división a algo más de 1080 PX. Aquí hay un CodePen que demuestra la funcionalidad del diseño CSS GID que agregué aquí. En este momento, la cuadrícula de respuesta de cinco columnas está lista para la operación. De hecho, no tenga la intención de usar la paginación o los bordes para publicaciones de blog, puede detenerse aquí. Aquí está el resultado hasta ahora.
Stile la postal del blog (o elemento de la cuadrícula), entonces, podemos agregar algunas líneas CSS que se dirigen a los elementos de la cuadrícula (o postales de blog) para que estén alineadas en la parte superior de cada fila y tengan poco relleno. CSS-Grid .et_pb_post {
Alinear-Self: Inicio;

Relleno: 15px;
}

Eliminando la página de la cuadrícula actualmente, si tiene la paginación activa en el módulo de blog, se tratará como el último elemento de la cuadrícula en la cuadrícula CSS. Para eliminar la paginación completa de la cuadrícula, podemos ofrecer una posición absoluta y colocarla directamente bajo el módulo de blog. Para hacer esto, agregue los siguientes CSS: .et-Blog-Css-Grid> div> div {
Ancho: 100%;
Posición: Absoluto;
Abajo: 0;
Transformar: traducir (0%, 150%);


}
Ahora, los enlaces de paginación son seguros fuera de la cuadrícula para que no se muevan a diferentes anchos de las ventanas de visualización.
¡Veamos el resultado hasta ahora!
Consejo de bonificación: ajuste el tamaño de todas las imágenes presentadas (o miniaturas) en este momento, puede notar la inconsistencia de la altura de las imágenes presentadas en cada postal de blog. Si desea hacerlos todos a la misma altura, puede usar CSS adicional para hacerlo también. .Et-Blog-CSS-Gry.
Top-top: 56.25%;
}

.Et-Blog-CSS-Gry.

Posición: Absoluto;

Altura: 100%;
Ancho: 100%;
Arriba: 0;
Fit de objeto: cubierta;
}
El primer fragmento se dirige al contenedor de imagen presentado y agrega un porcentaje de llenado que prácticamente ajusta la altura del contenedor de imagen. Pero el primer fragmento no funciona hasta que posicionamos la imagen presentada para que se ajuste perfectamente en el contenedor de imagen. Para hacer esto, le damos a la imagen una posición absoluta y usamos “Fit: Cubre” para hacer que la imagen se extienda sobre todo el ancho y la altura del contenedor. Con un relleno superior de 56.25%, deberíamos obtener una relación de apariencia de 16: 9 para todas nuestras imágenes. Simpilado gratis para ajustar el relleno en el contenedor de imagen para obtener la relación de aspecto que desea para la imagen Su resultado final es otra mirada a CSS entero Agregué al módulo de código con algunos comentarios. /* Crear plantilla de columna de cuadrícula CSS */
.et-blog-css-grid> div {
Pantalla: cuadrícula;
Columnas de plantilla de cuadrícula: repetir (relleno automático, minmax (200px, 1fr));
Brecha: 20px;

}

/ * Elemento de cuadrícula CSS de estilo o publicación de blog */
.et-blog-css-grid .et_pb_post {
Alinear-Self: Inicio;
Relleno: 15px;
}
/ * Eliminar la paginación de la cuadrícula de módulos de blog con Post */
.et-blog-css-grid> div> div {
Ancho: 100%;
Posición: Absoluto;
Abajo: 0;
Transformar: traducir (0%, 150%);
}
/ * Cambiar el tamaño de las miniaturas de la imagen */
.Et-Blog-CSS-Gry.
Top-top: 56.25%;
}
.Et-Blog-CSS-Gry.
Posición: Absoluto;
Altura: 100%;
Ancho: 100%;
Arriba: 0;
Fit de objeto: cubierta;
}
Y aquí hay un vistazo final a nuestro módulo de blog con nuestras nuevas columnas y la aparición de la cuadrícula.