Si usas el tema Divi para diseñar webs para ti o tus clientes (y sino deberías, no sabes lo que te estás perdiendo) es seguro que en algún momento vas a querer cambiar la cantidad de entradas por fila que añade Divi por defecto al módulo blog.

En esta sencilla guía te enseñaré a cambiar la cantidad de columnas en el módulo blog de Divi, únicamente usando código CSS personalizado.

Índice de contenidos

Cómo cambiar el número de columnas en el módulo de blog de Divi si usas el diseño de rejilla

En el módulo de rejilla de Divi por defecto se muestran 3 entradas por fila, así que vamos a cambiar eso, porque sí, porque lo queremos distinto, con más, o menos columnas, tú decides 🙂

Abre la configuración del módulo blog de Divi haciendo clic en el icono del engranaje (⚙️).
Ve a pestaña de Diseño → Diseño y elige la opción de Rejilla, si es que aún no lo tenías así.
Ahora ve a la pestaña Avanzado → ID y clases de CSS → Clase CSS
En la caja de texto de Clase CSS pon esto: ayudawp-blog-divi-4-columnas (por ejemplo)

Guarda los cambios del módulo y del maquetador Divi (aún no pasará nada, tranqui, solo queda un paso)

Ahora abre el personalizador de temas de WordPress y ve al CSS adicional, o si lo prefieres, ve a la administración de WordPress y entonces ve a Divi → Opciones del tema → CSS personalizado y añade este código CSS:

/* Modulo blog rejilla 4 columnas */
@media (min-width: 981px) {
.ayudawp-blog-divi-4-columnas .et_pb_salvattore_content[data-columns]::before {
content: '4 .column.size-1of4' !important;
}
.ayudawp-blog-divi-4-columnas .column.size-1of4 {
width: 24% !important;
margin-right: 1%;
}
.ayudawp-blog-divi-4-columnas .et_pb_post {
margin-bottom: 11px;
}
}

La magia, ¡por fin!, se mostrará ante tus ojos 😮

Si prefieres 5 columnas, o 2 columnas, o veintisiete, tú verás, solo tienes que adaptar el código anterior. La clase CSS da igual el nombre, lo importante que tendrás que cambiar es el width.

Cómo cambiar el número de columnas en el módulo de blog de Divi si usas el diseño de ancho completo

No te vayas que no hemos terminado, porque aún nos queda el diseño a ancho completo del módulo blog de Divi, que este encima es que se empeña en mostrarse a 1 sola columna, pero ¿qué pasa si yo quiero 2, o 4, o veintisiete? Pues eso, apunta, que esta vez es un poco distinto el procedimiento:

Abre la configuración del módulo blog de Divi haciendo clic en el icono del engranaje (⚙️).
Ve a pestaña de Diseño → Diseño y elige la opción de Ancho completo, si es que aún no lo tenías así.
Ahora ve a la pestaña Avanzado → ID y clases de CSS → Clase CSS
En la caja de texto de Clase CSS pon esto: ayudawp-blog-completo-divi-2-columnas (por ejemplo)

De nuevo, relax, aún no pasa nada, seguimosssssss…

A partir de aquí cambia un poco la cosa frente al truco anterior, pues no hace falta que salgas aún del maquetador, antes, sin salir de los ajustes del módulo de blog, ve a la pestaña Avanzado → ID y clases de CSS → CSS personalizado → CSS de formato libre y añade el siguiente código:

@media (min-width: 981px) {
selector.et_pb_module {
--no-of-columns: 2;
--gutter: 20px;
--padding: 19px;
}
}

@media (min-width: 768px) and (max-width: 980px) {
selector.et_pb_module {
--no-of-columns: 2;
--gutter: 20px;
--padding: 19px;
}
}

@media (max-width: 767px) {
selector.et_pb_module {
--no-of-columns: 1;
--gutter: 20px;
--padding: 19px;
}
}

selector.et_pb_module .et_pb_ajax_pagination_container {
display: grid;
grid-template-columns: repeat(var(--no-of-columns), 1fr);
gap: var(--gutter);
}

selector.et_pb_module .et_pb_post {
margin-bottom: 0;
border: 1px solid #d8d8d8;
padding: var(--padding);
}

selector.et_pb_module .et_pb_post .entry-featured-image-url {
display: block;
margin: calc(-1 * var(--padding)) calc(-1 * var(--padding)) var(--padding) calc(-1 * var(--padding))
}

selector.et_pb_module .et_pb_ajax_pagination_container div:last-child {
grid-column: span var(--no-of-columns);
}

El analizador de código integrado en Divi te va a mostrar un montón de advertencias cuando pegues el código anterior, tú ni caso, funciona todo 😉

De momento no verás los cambios, porque Divi no los va a mostrar hasta que no guardes los cambios y salgas. ¡Hazlo!, ¿a qué esperas?

Ahora si: guarda los cambios en el módulo, en el maquetador, y sal del constructor Divi … y observa:

Un par de detalles sobre este último código, por si quieres modificar algo:

El código anterior cambia el diseño del módulo blog ancho completo de Divi a:
- 2 columnas en el escritorio
- 2 columnas en tablets
- 1 columna en móviles
Si quieres cambiar el número de columnas, cambie el valor de la propiedad --no-of-columns dentro de cada una de las media queries.

¿Te gustó?, ¿te ha funcionado? Si te he ayudado, no te cortes, compártelo en tus redes, cuéntaselo a tus amigos, y di algo ahí abajo, en la sección de comentarios 🙂