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

39 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

    1. Hola, Juan.

      Lamentablemente no tengo manera de reproducir el error, así que no sabría darte una respuesta.

      En estos casos, conviene contactar con el centro de soporte.

      Saludos.

  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.

      1. Hola, ya lo resolví….. estuve molestando un rato a la gente de soporte de Elegant Themes y me ayudaron…. escalaron el problema…. uno de ellos que me dío soporte vía chat live y correo…me guío por donde podría estar el problema… resulta que al footer le había colocado varios enlaces con el efecto Hover con la idea de que se volviera negrita al posicionar el cursor…. y enlazar las páginas …. el footer tenía varios enlaces con ese efecto… por alguna razón eso era lo que afectaba en los dispositivos de apple ( iphones, ipads) me tocó modificar el footer le quite el efecto hover a cada enlace… lo modifique en un footer Master para que surgiera efecto en todas las internas y eso solucionó el problema…..

  12. Hola, necesito ayuda, cuando hago cambios para que cada dispositivo tenga su tamaño de letra y disposicion se pierden todos los cambios de la web, sinceramente he paso horas de interminables dolores de cabeza y muchas veces he tenido que cambiar la idea original por otra que no amerite mucho cambio para que se adapte, se supone que uno pago por la plantilla deberia funcionar correctamente, y veo que muchos aqui tienen el mismo problema y no lo solucionan… REPITO los cambios se pierden en la web si adaptas los pixeles a moviles y tablet no mantiene los cambios

    1. Hola, Rosario.

      Los valores asignados a tamaños de letra y espaciado de los textos creados con el constructor siempre prevalecen por sobre los ajustes del personalizador (estos solo tienen efecto sobre las entradas o páginas creadas con el editor clásico o de bloques). Si no toma los cambios de los módulos del constructor, revisá que no sea un plugin el que está ocasionando un conflicto. También probalo con el Modo seguro activado.

      Si todo está correcto y Divi está actualizado a su última versión, deberás contactar con soporte.

      Saludos.

  13. Itziar Elizondo Iriarte

    Hola. buenos dias:

    En este link
    https://evapaliciopsicologa.com/psicoterapia-individual-valencia/
    la foto que está a la izquierda de «NORMALIDAD NO ES SINONIMO DE SALUD»
    no me aparece en tablet ni en telefono móvil.

    Me ocurre lo mismo en la página
    https://evapaliciopsicologa.com/psicoterapia-parejas-valencia/
    la foto que está a la izquierda de MAYA ANGELOU
    tampoco me aparece ni en tablet ni en teléfono móvil.

    ¿Me podéis ayudar? Llevo horas con esto y no consigo arreglarlo.
    Muchas gracias de antemano y buen día.
    Itziar

    1. Hola, Itziar.

      Disculpas por la demora en la respuesta.

      Eso sucede cuando la columna está vacía; es decir, aunque tenga una imagen aplicada como fondo, no contiene módulo alguno. Para resolverlo, insertá un módulo Separador, sin grosor de línea, y dale un valor de altura en la vista móvil para que muestre la porción de imagen que sea necesaria.

      Saludos.

  14. Hola. Estoy optimizando mi web para móviles me he encontrado con una duda. Cuando entro en la web con el móvil, si hay letra pequeña que no veo, intento ampliar deslizando los dedos, como es normal, pero no se puede. ¿Hay alguna manera de añadir esa función? Es necesaria!!
    Un saludo.

    1. Hola, Miriam.

      Gracias por tu comentario.

      El zoom se puede activar desde los ajustes del navegador. En Chrome: Configuración > Accesibilidad > Forzar habilitación de zoom. En Firefox: Ajustes > Accesibilidad > Zoom en todos los sitios.

      Saludos.

  15. Buenas,

    Es posible mantener el mismo diseño de web en los otros dispositivos (móviles, tablet)…me gustaría que se viera exactamente igual en todos los dispositivos.

    Muchas gracias.
    Un saludo.

    1. Hola, Carlos.

      Gracias por tu comentario.

      Con Divi no es posible, ya que la configuración de columnas para esos dispositivos es automática. Podés ver la versión de escritorio en móviles activando la opción del navegador Sitio de escritorio.

      Saludos.

  16. Buenos dias:

    Me pasa una cosa rara en la versión móvil de la web

    En las páginas
    https://evapaliciopsicologa.com/
    https://evapaliciopsicologa.com/psicoterapia-individual-valencia/
    https://evapaliciopsicologa.com/psicoterapeuta-valencia/
    https://evapaliciopsicologa.com/contacto-psicoterapeuta-valencia/

    Si le doy con el dedo hacia la derecha o hacia la izquierda veo el fondo verde de la página.

    En el resto de páginas , sin embargo, está ok, se quedan fijas y no se puede desplazar con el dedo ni a la derecha ni a la izquierda.

    ¿Qué tengo que hacer para que se queden todas bien y se queden fijas?

    Muchas gracias por vuestro tiempo.
    Un saludo
    Itziar

    1. Hola, Itziar.

      En la página de Contacto, por ejemplo, tenés una fila (la que contiene el teléfono) con el margen izquierdo en 618 px. Deberías ponerlo en 0 para la versión móvil. En las demás páginas es probable que también tengas márgenes o rellenos aplicados a filas que están generando espacio de más y por ende activando la barra de desplazamiento horizontal.

      Saludos.

  17. Hola, buen dia.
    estoy reconstruyendo desde cero mi sitio web, y estoy tratando de hacerlo todo compatible en versión de escritorio y versión móvil.
    aqui encontre un problema, todo radica en el botón [ Leer más ] todos dirán está bien está excelente pero no todos hacemos entradas de texto ampliadas o descriptivas, tratando de colocar el botón de leer mas siempre en la misma posición sin que esta cambie al tener o no tener la longitud de extracto, mi ejemplo de como logro hacer que este en el mismo lugar

    configuración (Trato de ser bien explicado):

    **Divi/General/CSS Personalizado**
    @media only screen and (min-width: 768px) {
    .blog_igualado .et_pb_post {
    min-height: 500px;
    max-height:500px;
    }
    }

    **Sección/Fila/Blog/Ajustes del módulo/Blog Configuración**
    **CONTENIDO
    -CONTENIDO
    –Tipo de Mensaje:::Entradas
    –Recuento de Entradas:::9
    –Categorías Incluidas:::Todas
    –Formato de Fecha:::Mj,Y
    –Largancia de Contenido:::Extracto
    –Utilizar post extractos:::SI
    –Longitud del extracto:::Por Defecto
    –Número de desplazamientos:::0
    -ELEMENTOS
    –Mostrar imagen destacada:::SI
    –Mostrar el botón leer más:::SI
    –Mostrar autor:::SI
    –Mostrar fecha:::SI
    –Mostrar categorías:::SI
    –Mostrar Comentarios:::NO
    –Mostrar extracto:::SI
    –Mostrar paginación:::SI
    ENLACE
    –Enlace módulo URL:::Por defecto
    –Módulo enlace objetivo:::Misma ventana

    **DISEÑO
    -DISEÑO
    –Diseño:::Rejilla

    **AVANZADO
    -ID Y CLASES de CSS
    –Clase CSS::: blog_igualado
    –Botón de leer más::: position:absolute;top: 450px;

    Pero al verlo en la opción móvil esta configuración me desfasa el botón en posición totalmente desfasada, ya tengo un par de semanas tratando de arreglar este detalle pero de verdad estoy sin idea de como hacerlo.

    gracias por su ayuda de antemano.

Deja un comentario

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

 

Ir arriba