Divi - Documentación en español

Actualizada v3.28

Ajustes para móviles del personalizador de Divi

Ajuste el diseño para los dispositivos móviles

Una de las mejores características del personalizador de tema es que le permite ajustar los tamaños de fuente y espaciado específicamente para los distintos dispositivos móviles. Puede asignar tamaños de texto y valores de espaciado únicos para smartphones y tablets, seleccionando estos ajustes independientemente de los ajustes generales que se aplican a las vistas en equipos de escritorio.

Para personalizar los estilos para móviles, primero debe ingresar al Personalizador de tema, con un clic en el enlace Divi > Personalizador de tema del menú de WordPress. Luego busque el panel Estilos para móviles y ábralo para revelar las opciones. Verá tres secciones dentro de este panel: Tablet, Teléfono y Menú para móviles.

Divi - Personalizador - Estilos para móviles

Tablet

Aquí puede ajustar los estilos que verá el visitante en pantallas del tamaño de una tablet. Puede seleccionar los tamaños de fuente de textos y títulos, así como también el espaciado entre filas y secciones dentro del sitio.

Divi - Personalizador - Estilos para móviles Tablet

Teléfono

Aquí puede ajustar los estilos que verá el visitante en pantallas del tamaño de un teléfono móvil. Puede seleccionar los tamaños de fuente de textos y títulos, así como también el espaciado entre filas y secciones dentro del sitio.

Divi - Personalizador - Estilos para móviles Teléfono

Menú para móviles

Cuando se alcanza el punto de partida del menú para móviles, la apariencia del menú de navegación cambia para adaptarse a esa resolución estándar. Este menú es el que verá el visitante en una tablet o teléfono móvil. Aquí puede ajustar la apariencia de este menú, pasando por alto los estilos generales que haya escogido para la Barra de menú primario dentro del panel Cabecera y navegación del personalizador de tema.

Divi - Personalizador - Menú para móviles

Compartir en facebook
Facebook
Compartir en whatsapp
WhatsApp
Compartir en twitter
Twitter
Compartir en linkedin
LinkedIn
Compartir en reddit
Reddit
Compartir en skype
Skype
Compartir en email
Enviar por correo
Compartir en print
Imprimir

27 comentarios en “Ajustes para móviles del personalizador de Divi”

    1. Hola, Diego.

      Cuando tenés muchos elementos en un submenú es inevitable que se vayan fuera de la pantalla. La solución sería crear un mega menú (en el celular se verá igual). Para más información podés revisar el tutorial.

      Saludos.

  1. hola queria saber si habia alguna opcion de poder ver la previa segun los modelos de telefonos, me ha pasado q en un iphone x se ve de una manera pero en un samsung j7 otra , hay alguna manera de poder chequear esto?

  2. Tengo un problema con Divi, yo diseño en una pantalla 1980×1080 px de 16:9, en cuanto envío el diseño a los clientes, la mayoría los ve en pantallas a 900×1600 px y no los ve igual, se descuadra todo el diseño, ¿Existe alguna solución para eso?

    1. Hola, Ramón.

      Disculpas por la demora en la respuesta.

      Cada dispositivo tiene sus propias opciones, las encontrarás haciendo clic en el icono del teléfono celular que aparece a la derecha de cada título. La última versión de Divi (3.27) incluye opciones ampliadas, como por ejemplo seleccionar distintas imágenes de fondo para cada vista.

      Saludos.

  3. Hola! quería ver si por favor pueden ayudarme con algunas ideas: en teléfono o tablet al pinchar en la hamburguesa del menú y seleccionar alguna página, se pone por defecto en color celeste ¿Alguien sabe dónde puedo cambiarlo?

    1. Hola, Juana.

      Disculpas por la demora en la respuesta.

      No me queda muy claro si te referís al color del icono de la hamburguesa o de los enlaces del menú. Hay una opción Color de enlace activo en Personalizar > Cabecera y navegación > Barra de menú primario, que quizá sea lo que estás buscando.

      Si no, enviame por favor el enlace o una captura con la indicación exacta.

      Saludos.

  4. Al ajjustar el diseño a cada dispositivo cuando doy a guardar, me guarda los cambios tambien en la version original que tenía de escritorio y me lo descoloca todo, con lo cual me da miedo tocar nada, porque luego tengo que volver a dejarlo todo como estaba otra vez… Lo cambio en la versión móvil y se me aplica tanto a tablet como a a la versión de escritorio
    Deberia guardarse cada diseó en cada dispositivo 🙁 ayuda porfavor

  5. Hola tengo un problema con DIVI en la configuración para móviles. Consiste en lo siguiente:
    Al acceder a mi móvil el catálogo de productos de muestra correctamente, pero al hacer clic en el menú del wiget de la lista de categorías los productos se muestran como si estuvieran acomodados en 4 columnas y el nombre y precio se muestra en forma vertical, dando un muy mal aspecto a la presentación del sitio.
    La verdad no he encontrado la forma de configurarlo, espero puedan ayudarme.
    Saludos

    1. Hola, Joel.

      Disculpas por la demora.

      Es un problema del tema (no sé por qué no lo corrigen…)

      Probá con el siguiente código en Opciones del tema > CSS personalizado:

      @media (max-width: 767px) {
      .with_sidebar.woocommerce-page ul.products li.product, .with_sidebar.woocommerce ul.products li.product, .with_sidebar .woocommerce-page ul.products li.product, .with_sidebar .woocommerce ul.products li.product {
      width: 50% !important;
      max-width: 50% !important;
      min-width: 50% !important;
      -ms-flex-preferred-size: 50%;
      flex-basis: 50%;
      margin: 0 0 0 -1px !important;
      }
      }
      @media (max-width: 480px) {
      .with_sidebar.woocommerce-page ul.products li.product, .with_sidebar.woocommerce ul.products li.product, .with_sidebar .woocommerce-page ul.products li.product, .with_sidebar .woocommerce ul.products li.product {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 100% !important;
      -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
      margin: 0 0 0 -1px !important;
      }
      }

      Saludos.

  6. Hola buen día.

    Adapté el fondo de los banners de mi web para que se vea una imagen para cada resolución, es decir, una imagen para la web, otra para tablet y otra para móvil, pero cuando desde el móvil o tablet le doy click a la imagen, me sale la imagen que coloque para la versión web y se pierde la adaptabilidad de la imagen.

    ¿Me ayudas?
    Gracias!!!

    1. Hola, Lorena.

      Si no entiendo mal, estás usando un módulo imagen con la opción Abrir en Lightbox. Me temo que el que describís es el comportamiento normal. En el caso de que necesites abrir una imagen distinta por dispositivo, tendrás que crear un módulo para cada uno (desactivándolo para los otros dos desde Visibilidad).

      Saludos.

  7. Hola,
    Tengo el siguiente problema, en la configuración para dispositivos moviles
    Divi
    Opción en contructor visual se ve correcto la adaptación para tablet/movil (modelos nuevos)
    Wordpress
    Opción de configuración de dispositivos moviles, para tablet/movil muestra desconfigurado el tamaño de las letras en la pagina, trato de corregir guarda aparentemente los cambios pero no ocurre así y esto lo necesito resolver por que para los dispositivos moviles más antiguos toma la configuració de WordPress y no Divi (necesito resolver esto)

    Aguardo respueta
    Agradecido

  8. Hola buenos días,
    tengo un problema con el diseño del menú móvil y es que el tipo de fuente que tengo seleccionado en el Theme Customizer y que aparece en el menú del Desktop se cambia. En menú móvil me aparece una fuente distinta, no sé si es la que sale por defecto, pero me resulta imposible cambiarla y tampoco encuentro ningún tutorial dónde aparezca esa opción. Por otro lado, sé que existe la opción de cambiarla porque lo he visto en muchas páginas web.
    ¿Alguien puede ayudarme y decirme cómo solucionarlo?

    Muchas gracias.

  9. Hola mi sitio web no se puede visualizar correctamente en IOs, pero en android si se ve muy bien.

    Qué puedo hacer?

    ya probá con eliminar el caché y las cookies del dispositivo pero no funciona, se ve muy desordenado en IOs.

  10. Hola, usé un menú superior para Cuenta y Wishlist junto con carrito de compras y buscador, y de forma independiente el menú principal.

    Quisiera saber como puedo deshabilitar en móviles la hamburguesa de la cuenta sin afectar el menú principal.

    Gracias

    1. Hola, Gabriela.

      Disculpas por la demora. No llego a entender lo que estás buscando. Si es ocultar el elemento Mi cuenta del menú, tendrías que darle una clase específica (por ejemplo hideitem) y luego ocultarlo para la vista móvil con CSS personalizado:

      @media (max-width:980px) {
      .hideitem {
          display: none;
      }
      }
      
  11. He creado un sitio web con DIVI, ya probe de todo, tengo actualizado el sitio tanto plugins como version de DIVI y wordpress… me funciona bien en telefonos con android y desktops pero no funciona en ipads y iphone… no puedo darle clic al burger menu, no me funciona darle clic a los enlaces, no puedo dar clic a los botones del sitio….

    Ya borre la carpeta Et cache, en el wp-content ya probe hacer una copia del sitio y volverla a subir y nada…
    Incluso le di rollback a los plugins y tambien los fui desactivando uno a uno… y nada….
    llevo 2 días pidiendo soporte vía live chat y no me han podido ayudar.

Deja un comentario

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

 

Ir arriba