El módulo de blog de Divi puede mostrar publicaciones de blog en un diseño de ancho completo o de cuadrícula. Si elige el diseño de cuadrícula, la cantidad máxima de columnas que puede tener es tres. En este tutorial, exploraremos la combinación del poder de CSS Grid con el módulo Divi Blog para crear la cantidad de columnas que desee. Con solo unos pocos fragmentos de CSS, su blog se transformará en un hermoso diseño de cuadrícula de varias columnas. Además, las columnas responderán de manera fluida con todos los tamaños de navegador, por lo que no debe preocuparse por actualizar esas consultas de medios o configuraciones receptivas. Después de la magia de CSS Grid, aún tendrá la configuración del módulo de blog incorporado para diseñar el blog visualmente sin más CSS personalizado. Entonces, si está buscando más columnas para su blog Divi, esto será suficiente y más.
Aquí hay un vistazo rápido al diseño que construiremos en este tutorial.
Y aquí hay un codepen que demuestra el diseño de cuadrícula CSS que agregaremos al módulo del blog.
Descarga el diseño GRATIS
Para poner sus manos en el diseño del módulo de blog de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Suscríbete a nuestro canal de Youtube
Para importar el diseño de la sección a su Biblioteca Divi, navegue hasta la Biblioteca Divi.
Haga clic en el botón Importar.
En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora.
Luego haga clic en el botón importar.
Una vez hecho esto, el diseño de la sección estará disponible en el Divi Builder .
Vayamos al tutorial, ¿de acuerdo?
Cómo cambiar el número de columnas en el módulo Divi Blog usando CSS Grid
¿Por qué CSS Grid?
Hay muchas maneras de hacer diseños de columnas para el módulo de blog usando CSS. Pero para este caso, tiene más sentido usar CSS Grid. La propiedad CSS Grid es una forma popular de crear diseños de cuadrícula predecibles y receptivos para contenido con solo unas pocas líneas de CSS. Con él, podemos organizar todas las tarjetas del módulo de blog en una cuadrícula totalmente receptiva. En resumen, ofrece una solución simple y completa para agregar cualquier diseño de columna que desee para su blog Divi. De hecho, también lo hemos usado para crear un diseño de cuadrícula para los módulos Divi .
Ahora, dirijamos nuestra atención al módulo de blog.
Configuración de un módulo de blog con un diseño de ancho completo
El módulo Divi Blog se puede usar para agregar un blog en cualquier lugar de su sitio web. Eso hace que sea realmente fácil crear una página de blog en Divi . Todo lo que necesita hacer es agregar un módulo de blog a la página usando Divi Builder.
Para este tutorial, vamos a utilizar una plantilla de página de blog prefabricada de uno de nuestros paquetes de diseño gratuitos que ya tiene un módulo de blog con un estilo básico. Para cargar el diseño de página de blog prefabricado en su página, abra el menú de configuración en la parte inferior y abra la ventana emergente Agregar de la biblioteca. Desde allí, busque y encuentre el diseño de la página del blog de diseño de moda y cárguelo en la página.
Una vez que se carga el diseño, busque el módulo de blog utilizado para mostrar las publicaciones del blog y abra la configuración del módulo de blog.
Establecer recuento de publicaciones
En la configuración del blog, actualice el contenido para limitar el recuento de publicaciones a 10. (Esto se debe principalmente a razones estéticas porque nuestra cuadrícula eventualmente incluirá dos filas de cinco publicaciones de blog en el escritorio).
- Número de publicaciones: 10
Seleccionar diseño de ancho completo
Dado que vamos a crear el diseño de columnas para nuestro blog usando CSS Grid, debemos asegurarnos de que el diseño del módulo del blog sea de ancho completo (no de cuadrícula). Esto asegurará que las publicaciones del blog se apilen verticalmente en su orden normal del documento/página.
Para cambiar el diseño 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 Diseño y seleccione Ancho completo .
Ahora, cada publicación de blog debe abarcar todo el ancho de la columna (o contenedor principal).
Solo por diversión, agreguemos un borde a las publicaciones del blog para que podamos tener una mejor idea de cómo se verá nuestro diseño de cuadrícula cuando agreguemos nuestro CSS. Actualice las opciones de borde de la siguiente manera:
- Ancho del borde: 1px
- Color del borde: rgba (150,104,70,0.35)
Agregar la clase CSS personalizada al módulo de blog
Para orientar de manera eficiente este módulo de blog en particular (y ningún otro) con nuestro CSS, debemos darle a nuestro módulo una clase de CSS personalizada. En la pestaña avanzada, agregue la siguiente clase CSS:
- Clase CSS: et-blog-css-grid
Crear el diseño de varias columnas con CSS Grid
Ahora que nuestro módulo de blog está configurado con un diseño de ancho completo, estamos listos para agregar nuestro CSS personalizado. Por ahora, vamos a usar un módulo de código para agregar el CSS a la página. Pero, cuando hayamos terminado, siempre puede mover el CSS a su ubicación preferida (como el CSS personalizado en Opciones de tema o el archivo style.css de su tema secundario ).
Agregue un nuevo módulo de código debajo del módulo de blog.
En el cuadro de entrada de código, agregue las etiquetas de estilo necesarias para envolver cualquier código CSS agregado a una página.
Dentro de las etiquetas de estilo , pegue el siguiente fragmento de CSS:
|
01
02
03
04
05
|
.et-blog-css-grid > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px;} |
La primera línea de CSS presenta el contenido (o módulos) de acuerdo con el módulo de cuadrícula de CSS.
pantalla:cuadrícula;
La segunda línea de CSS define la plantilla de columna de la cuadrícula.
grid-template-columns: repetir (autocompletar, minmax (200px, 1fr));
La tercera línea determina el espacio entre los elementos de la cuadrícula (como el ancho de la canaleta).
espacio: 20px;
Cómo funcionan las columnas de 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 200px y un ancho máximo de 1fr (que es exactamente lo mismo que automático). Esto significa que cuando el contenedor principal (la Fila/Columna Divi) tiene un ancho máximo de 1080 px, la cuadrícula tendrá 5 columnas. Cada columna tendrá un ancho de 200 px (el ancho mínimo) que equivale a 1000 px. Agregue los 4 espacios de cuadrícula de 20 px y obtendrá un total de 1080 px. Una vez que la ventana gráfica aprieta la cuadrícula por debajo de los 1080 px, la magia de la cuadrícula CSS se hace cargo y llena cada espacio disponible con publicaciones de blog hasta que alcanzan un ancho de 200 px. Las nuevas filas se crearán automáticamente a medida que se necesiten de forma predeterminada.
Para obtener más columnas, puede cambiar el valor mínimo de 200 px a algo más pequeño o aumentar el ancho máximo de la fila Divi a algo más grande que 1080 px.
Aquí hay un codepen que demuestra la funcionalidad de diseño de cuadrícula CSS que agregamos aquí.
En este punto, la cuadrícula receptiva de cinco columnas está lista para funcionar. De hecho, no planea usar paginación o bordes para las publicaciones de su blog, puede detenerse aquí.
Aquí está el resultado hasta ahora.
Dale estilo a la tarjeta postal del blog (o al elemento de la cuadrícula)
A continuación, podemos agregar algunas líneas de CSS que apunten a los elementos de la cuadrícula (o tarjetas postales del blog) para que estén alineados en la parte superior de cada fila y tengan un pequeño relleno.
|
01
02
03
04
|
.et-blog-css-grid .et_pb_post { align-self: start; padding: 15px;} |
Eliminación de paginación 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 de la cuadrícula por completo, podemos darle una posición absoluta y colocarla directamente debajo del módulo del blog. Para hacer esto, agregue el siguiente CSS:
|
01
02
03
04
05
06
|
.et-blog-css-grid > div > div { width: 100%; position: absolute; bottom: 0; transform: translate(0%, 150%);} |
Ahora los enlaces de paginación están seguros fuera de la cuadrícula para que no se muevan en diferentes anchos de ventana gráfica.
¡Veamos el resultado hasta ahora!
Consejo adicional: ajuste el tamaño de todas las imágenes destacadas (o miniaturas)
En este punto, puede notar la inconsistencia de la altura de las imágenes destacadas en cada tarjeta postal del blog. Si desea que todos tengan la misma altura, también puede usar CSS adicional para hacerlo.
|
01
02
03
04
05
06
07
08
09
10
|
.et-blog-css-grid .entry-featured-image-url { padding-top: 56.25%;}.et-blog-css-grid .entry-featured-image-url img { position: absolute; height: 100%; width: 100%; top: 0; object-fit: cover;} |
El primer fragmento apunta al contenedor de la imagen destacada y agrega un porcentaje de relleno que básicamente ajusta la altura del contenedor de la imagen. Pero el primer fragmento no funciona hasta que colocamos la imagen destacada para que encaje perfectamente centrada dentro del contenedor de la imagen. Para hacer esto, le damos a la imagen una posición absoluta y usamos «object-fit:cover» para hacer que la imagen abarque todo el ancho y alto del contenedor.
Con un relleno superior del 56,25 %, deberíamos obtener una relación de aspecto de 16:9 para todas nuestras imágenes.
Siéntase libre de ajustar el relleno en el contenedor de la imagen para obtener la relación de aspecto que desea para su imagen.
Resultado final
Aquí hay otro vistazo a todo el CSS que agregamos al módulo de código con algunos comentarios.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
/* create css grid column template */.et-blog-css-grid > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px;}/* style css grid item or blog post */.et-blog-css-grid .et_pb_post { align-self: start; padding: 15px;}/* remove pagination from blog module grid with absolute position */.et-blog-css-grid > div > div { width: 100%; position: absolute; bottom: 0; transform: translate(0%, 150%);}/* Resize Featured Image Thumbnails */.et-blog-css-grid .entry-featured-image-url { padding-top: 56.25%;}.et-blog-css-grid .entry-featured-image-url img { position: absolute; height: 100%; width: 100%; top: 0; object-fit: cover;} |
Y aquí hay un vistazo final a nuestro módulo de blog con nuestras nuevas columnas y diseño de cuadrícula.
Pensamientos finales
Siempre me sorprende lo que se puede lograr con solo unas pocas líneas de CSS usando CSS Grid. En este caso, pudimos reestructurar todo el módulo de blog de Divi en un diseño fluido de cinco columnas. ¡La mejor parte es que no tiene que preocuparse por usar consultas de medios! Con suerte, esto le ahorrará tiempo y le brindará más opciones para crear hermosas páginas de blog.
Espero escuchar de usted en los comentarios.
¡Salud!