OFERTAS

¿Cómo cambiar número de entradas en computador, tablet o teléfono?

Diseño Web
Nov 26, 2020
Tiempo de lectura: 3 minutos
Diseño Web
26 Nov, 2020
Tiempo de lectura: 3 minutos
Gracias 🙏 por compartir

Ocultar

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.


Gracias 🙏 por compartir
DEJAR o MOSTRAR / OCULTAR comentarios (68comments)
L

68 Comentarios

  4. gate.io
    gate.io el junio 8, 2023 a las 11:31 pm

    I may need your help. I tried many ways but couldn’t solve it, but after reading your article, I think you have a way to help me. I’m looking forward for your reply. Thanks.

    Responder
  11. JamesGyday
    JamesGyday el agosto 10, 2023 a las 8:32 pm

    [url=https://pharmacyreview.best/#]cheap canadian pharmacy online[/url] canadian pharmacy store

    Responder
  12. Larrynix
    Larrynix el agosto 10, 2023 a las 10:58 pm

    where buy mobic without a prescription [url=https://mobic.store/#]cost generic mobic online[/url] can i get mobic without prescription

    Responder
  17. Larrynix
    Larrynix el agosto 11, 2023 a las 9:50 pm

    [url=https://propecia1st.science/#]buy cheap propecia for sale[/url] cheap propecia pill

    Responder
  20. JamesGyday
    JamesGyday el agosto 12, 2023 a las 2:15 pm

    [url=https://pharmacyreview.best/#]escrow pharmacy canada[/url] canada pharmacy

    Responder
  21. Larrynix
    Larrynix el agosto 12, 2023 a las 8:49 pm

    buy amoxicillin online without prescription: [url=https://amoxicillins.com/#]amoxicillin 500mg capsule[/url] amoxicillin discount

    Responder
  27. Larrynix
    Larrynix el agosto 13, 2023 a las 7:57 pm

    [url=https://propecia1st.science/#]cost of propecia pills[/url] buying propecia without prescription

    Responder
  34. Georgebaf
    Georgebaf el agosto 15, 2023 a las 9:25 am

    top 10 pharmacies in india reputable indian pharmacies or pharmacy website india
    http://pattmail.com/__media__/js/netsoltrademark.php?d=indiamedicine.world cheapest online pharmacy india
    [url=http://www.mcguffygroup.com/__media__/js/netsoltrademark.php?d=indiamedicine.world]buy medicines online in india[/url] india pharmacy mail order and [url=http://www.donggoudi.com/home.php?mod=space&uid=28242]india pharmacy[/url] п»їlegitimate online pharmacies india

    Responder
  38. JoshuaMit
    JoshuaMit el agosto 16, 2023 a las 4:39 am

    canadian medications canadian pharmacy phone number or canadian king pharmacy
    http://www.massportexpress.com/__media__/js/netsoltrademark.php?d=certifiedcanadapharm.store pharmacy com canada
    [url=http://thenorthstaralliance.com/__media__/js/netsoltrademark.php?d=certifiedcanadapharm.store]global pharmacy canada[/url] canadian neighbor pharmacy and [url=http://www.1nanspa.com/space-uid-7044.html]online canadian pharmacy reviews[/url] best canadian pharmacy to buy from

    Responder
  46. JoshuaMit
    JoshuaMit el agosto 18, 2023 a las 5:37 am

    best canadian pharmacy to buy from online canadian pharmacy review or pharmacy rx world canada
    http://transactioncenter.net/__media__/js/netsoltrademark.php?d=certifiedcanadapharm.store cross border pharmacy canada
    [url=http://holiday-systems-international-review.com/__media__/js/netsoltrademark.php?d=certifiedcanadapharm.store]canada pharmacy world[/url] canadian online pharmacy and [url=http://www.empyrethegame.com/forum/memberlist.php?mode=viewprofile&u=260761]best rated canadian pharmacy[/url] reputable canadian online pharmacies

    Responder
  52. Georgebaf
    Georgebaf el agosto 19, 2023 a las 4:35 pm

    cheapest online pharmacy india best online pharmacy india or cheapest online pharmacy india
    http://powergenerationrecruiters.com/__media__/js/netsoltrademark.php?d=indiamedicine.world п»їlegitimate online pharmacies india
    [url=http://clickmesomemoney.com/__media__/js/netsoltrademark.php?d=indiamedicine.world]best india pharmacy[/url] india pharmacy and [url=http://www.jbt4.com/home.php?mod=space&uid=8475359]Online medicine home delivery[/url] mail order pharmacy india

    Responder
  55. Michaelemope
    Michaelemope el agosto 20, 2023 a las 7:01 am

    neurontin 400 mg capsule [url=https://gabapentin.pro/#]neurontin 100 mg tablets[/url] ordering neurontin online

    Responder
  62. Michaelemope
    Michaelemope el agosto 21, 2023 a las 9:49 pm

    ivermectin 50ml [url=http://stromectolonline.pro/#]ivermectin 2ml[/url] ivermectin 2%

    Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Tal vez también te interese leer…

Consigue ahora: 12 Pasos para un Texto de Ventas Infalible

Consigue ahora: 12 Pasos para un Texto de Ventas Infalible

Descárgate la única guía con los 12 pasos imprescindibles para un copy de ventas exitoso.

Nos tomamos tu privacidad muy en serio. Nunca venderemos ni compartiremos tu información.

You have Successfully Subscribed!

Confirmo que he leído y acepto la política de privacidad