Cómo cambiar el número de entradas en diferentes dispositivos con Divi

Hola mis queridos Kaóticos!

No sé si les habrá pasado alguna vez que quieren mostrar, por ejemplo en la página de inicio, las últimas entradas del blog  y elegimos diseño de rejilla para que se muestren las 3 últimas, una al lado de la otra.

Pero, ¿qué pasa cuando vemos esas 3 entradas en un tablet o teléfono móvil?

Debido a la anchura de la pantalla de estos dispositivos, se van a  ver de manera diferente. En un teléfono se van a mostrar una debajo de la otra, pero en un tablet, se van a mostrar en 2 columnas; es decir de a dos en dos. La primera fila va a tener 2 entradas una al lado de la otra, pero la segunda fila va a tener sólo 1! Y esto la verdad es que se ve bastante mal.

Así como Divi tiene la opción de cambiar ciertos ajustes para cada dispositivo, como tamaño de fuente, de imagen, para hacer la página responsive, lamentablemente no tiene la opción de elegir la cantidad de entradas a mostrar en cada dispositivo.

Entonces, ¿cómo lo podemos hacer para que no nos pase esto?

La primera solución que se viene a la cabeza es mostrar un número par de entradas, pero que no sean 4, porque entonces tendríamos el mismo problema pero ahora en la vista de computador (en la segunda fila sólo se vería una entrada). La siguiente solución sería entonces cambiar el número de entradas a 6. De esta forma se verían 2 líneas de 3 entradas en el computador, 3 líneas de 2 entradas en el tablet y 6 entradas una debajo de la otra en el teléfono. Pero esto se ve muy grosero, por lo menos para mí no es una opción.

Entonces no nos queda otra que buscarle la vuelta al sistema con una sencilla solución. Y digo sencilla, porque es bastante fácil, hasta que se te ocurre. Antes de eso estamos pateando piedras.

Bueno, dejemos la intro y empecemos!

Lo primero va a ser crear el módulo Blog. En la pestaña «Diseño» elegimos la opción rejilla y en la pestaña «Contenido» le decimos que nos muestre 3 entradas.

A continuación vamos a ir a los ajustes «avanzados» del módulo Blog y le vamos a decir que nos desactive la visibilidad del módulo en  dispositivos tablet y teléfono, para que de esta manera nos muestre, únicamente, este módulo Blog con 3 entradas  en nuestro computador.

Lo siguiente va a ser insertar justo debajo de este módulo Blog, otro módulo Blog. Ahora vamos a ir a la pestaña «Diseño» y elegimos la opción «rejilla» de nuevo. Ahora en la pestaña «Contenido» en mi caso voy a configurarlo para que me muestre solamente 2 entradas, para que al igual que en el computador, sólo se vea una fila, pero con 2 entradas. También podríamos decirle que nos muestre 4, pero ya serían 2 filas con 2 entradas cada una. Esto ya depende de los gustos personales o necesidades de cada uno.

Ahora, lo siguiente y último, es ir a la pestaña «Avanzado» de nuestro módulo Blog y desactivar la «visibilidad» del módulo para «Escritorio».

De esta manera, este último módulo sólo va a ser visible en tablets y teléfonos pero no en computadores.

En nuestro constructor visual de Divi vamos a seguir viendo los 2 módulos de Blog, pero en la práctica no. Y por eso el segundo módulo Blog (si estamos construyendo desde computador) se debería ver más así, tipo transparente, y con sólo 2 entradas.

Y cómo dice Bugs Bunny, «that’s all Folks».

Espero que les haya gustado y que este truco les sirva. 

Cualquier duda me la pueden dejar en los cometarios que les responderé a la velocidad de la luz.