Contenidos
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.
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.
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.
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.
Hola, tengo un problema al mostrar mi menú desplegable, en el celular si se adapta automáticamente pero en computadora sale muy largo el sitio web
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.
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?
Hola, Pablo.
Podrías probar con las Herramientas del desarrollador de Chrome o el Modo de diseño adaptable de Firefox (ambos tienen un selector de dispositivos). O bien buscar un emulador en línea.
Saludos.
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?
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.
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?
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.
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
Hola, Juan.
¿Este problema ocurre solo cuando ajustás las opciones desde el personalizador o al usar el constructor?
Saludos.
Utilizando el constructor Divi!
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
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.
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!!!
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.
Gracias por tu respuesta Aye!!
Saludos.
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
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.
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.
Hola, Julia.
¿Tenés la URL para poder verlo?
Saludos.
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.
Hola, Francisco.
La verdad no sabría decirte porque no tengo manera de probarlo en iOS. Te recomiendo contactar con el centro de soporte.
Saludos.
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
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; } }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.
Hola, Raúl.
La verdad tampoco puedo ayudarte porque no cuento con esos dispositivos. ¿En otras webs con Divi funcionan el menú y los enlaces? Por ejemplo, en la demo.
Saludos.
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…..
A mi me pasó eso, y resultó ser que uno de mis plug ins no era responsivo. Cuando vi eso, elegí un plug más sencillo y ya lo pude ver bien en ios
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
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.
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
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.
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.
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.
Hola Miriam … pudiste solucionar el problema?
La solución que te respondieron no sirve ya que no podemos estar indicando el procedimiento a cada persona que visite el sitio. Debería ser al igual que el resto de páginas que no se realizan con Divi.
Quedaré atenta.
Muchas gracias de antemano 🙂
Más abajo indicaron una mejor la respuesta 🙂
Funciona perfecto!!!!!! Ü ツ
function remove_divi_actions() {
remove_action( ‘wp_head’, ‘et_add_viewport_meta’ );
}
add_action(‘init’,’remove_divi_actions’);
function et_new_viewport_meta(){
echo »;
}
add_action( ‘wp_head’, ‘et_new_viewport_meta’, 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.
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.
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
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.
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.
Hola, Edgar.
Gracias por tu comentario.
Para la vista móvil usá una posición relativa, no absoluta, y manejá la ubicación con valores de
bottom(pueden ser negativos). El código sería algo así:@media (max-width: 767px) { .et_pb_blog a.more-link { position: relative; bottom: 0px; } }Saludos.
Hola.
Como puedo configurar el modulo tienda para que muestre 1 columna en el móvil.
Gracias
Hola, José María.
Gracias por tu comentario. Podés usar el siguiente código CSS personalizado:
@media (max-width:767px) { .et_pb_shop ul.products.columns-4 li.product { width: 100% !important; } }Saludos.
Hola,
Tengo un problema con el responsive en una tablet cuando se pone en modo horizontal;No se si me explico, cuando esta en modo vertical se ve la web bien pero al girarla y ponerla en modo horizontal los teléfonos y textos de la cabecera se montan. Gracias
Hola, Floren.
Disculpas por la demora en la respuesta.
Dale una clase CSS personalizada a la sección que contiene los números. Por ejemplo,
telefonos.Luego, en el CSS personalizado de las opciones del tema pegá el siguiente código:
@media (min-width: 981px) and (max-width: 1280px) { .et_pb_section.telefonos .et_pb_row { width: 98%; } }Saludos.
Buenas tardes. Ante todo, muchas gracias por vuestra web, que tanto nos ayuda.
He estado 13 años en blogger y acabo de migrar mi web de viajes naturalezayviajes.com a WP. Resulta que en la portada, en versión de escritorio está tal y como deseo, pero en móviles, en algunos de ellos (no en todos) las letras «Naturaleza y viajes» salen de diferente forma. Por ejemplo así:
Naturaleza y
Viajes
Naturalez
a y viajes
Además en algunos móviles el buscador de abajo no se ve dentro de la imagen en el desierto, sale más abajo (no sé si me explico, fuera de la imagen amarilla del desierto). Y además, las palabras de dentro de la caja de búsqueda «¿Adónde quieres viajar?» en esos móviles que no se ve bien solo se lee («¿Adónde quieres?», es decir, se come la palabra «viajar» y el signo de cierre de interrogación. Supongo que será porque habrá que poner en el configurador para móviles un % o algo así, y no px como tengo. La verdad es que no entiendo de esto. Yo para escritorio tengo «Naturaleza y Viajes» a 60px, igual que para movil. Las letras de dentro de la caja de búsqueda están a 14px tanto para escritorio como para moviles. ¿Sabes qué podría cambiar para que en todos los móviles el título del blog se vea bien al igual que la caja de búsqueda? En los iPhone que he probado de amigos se ve bien, solo falla en los android de amigos que he probado.
Muchas gracias anticipadas.
Hola, Antonio.
Disculpas por la demora.
Todos los elementos del constructor tienen controles para adaptar los estilos a la vista de escritorio, tablet y smartphone. Los encontrarás haciendo clic en el icono del móvil que aparece al pasar el cursor sobre el título de cada opción. Podés usar un tamaño de fuente más pequeño en móviles, para que se adapte mejor.
Saludos.
Hola gracias por este post una pregunta no puedo ampliar las fotos desde el modulo divi desde el móvil con los dedos como es común ¿como puedo solucionar esto es una configuración adicional o algo así?
Hola, Fernando.
Disculpas por la demora.
Este es el código para pegar en el archivo functions.php del tema hijo:
function remove_divi_actions() { remove_action( 'wp_head', 'et_add_viewport_meta' ); } add_action('init','remove_divi_actions'); function et_new_viewport_meta(){ echo '<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=1" />'; } add_action( 'wp_head', 'et_new_viewport_meta', 15 );Saludos.
Gracias!!!… Funcionaaa…. muy agradecidos sois muy grandes…
Hola Aye, permíteme una pregunta.
Ese código no es para añadirlo al CSS, ¿verdad? Lo pregunto porque eso sí sabría hacerlo, pero no eso que dices de pegarlo en el archivo functions.php del tema hijo, que para mí eso es casi como el chino. Lo único que pretendo es que desde un móvil se pueda ampliar la pantalla con dedos, para ver mejor las fotos insertadas en el blog.
Un saludo y gracias anticipadas.
Hola, Antonio.
Gracias por tu comentario.
Para no complicarte, podés instalar el plugin Child Theme Configurator.
Con él podrás crear el tema hijo directamente desde WP y agregar el código correspondiente en el archivo
functions.php.Saludos.
Buenos dias:
En una web que estoy construyendo tengo el siguiente problema: dependiendo del ordenador (pantalla de 27, 24, 15 pulgadas) las páginas se ven diferentes, con desajustes de formato. ¿Qué tengo que hacer para que en todos los tamaños de ordenador se vean bien las páginas de acuerdo al diseño original que he realizado? Porque a través del personalizador de Divi no veo cómo hacerlo. ¿Me podéis ayudar?
Muchas gracias y feliz año
Hola, Itziar.
Lamentablemente no hay una manera sencilla de adaptar un diseño a todos los tamaños de pantalla que existen. Una alternativa es usar unidades en porcentajes o en VH/VW, que son más fluidos que los píxeles.
Otra más trabajosa, pero más exacta, es usar CSS personalizado para cada media query (ejemplo:
@media (max-width: 1920px)para monitores de 24″,@media (max-width: 2560px)para 27″, etc.).Saludos.
Hola buenas tengo una duda, en el menu en tamaño ordenador me sale el icono de buscador pero en tamaño movil desapararece. ¿Hay alguna manera de que se pueda mostrar?
Hola, Álvaro.
En la vista predeterminada de la cabecera el icono de búsqueda se muestra, no así en las opciones de logo centrado. En esta web ofrecen el código CSS que sirve para mostrarlo en esa vista.
Saludos.
Hola, tengo una consulta, diseñé una one page con el constructor sin usar plantilla, y el menú está realizado con puros enlaces personalizados que sirven de ancla para llegar a cada sección, pero al verlo en versión móvil, las anclas no funcionan. ¿Tiene que ver porque dupliqué y adapté cada sección a la vista smartphone, en vez de crear todo desde cero? Igual seria el mismo nombre de enlaces para todo… o tendría que hacer la sección desde cero y ponerle otro nombre que no sea el mismo de los enlaces de la vista de escritorio?
Hola, Laura.
Siempre que las secciones tengan la ID a la cual apunta el enlace, debería funcionar. Comprueba que tanto WordPress como Divi estén actualizados, o que no sea un problema de caché (vaciando el navegador, el plugin si lo hubiere o el servidor).
Saludos.
Buenas tardes,
Tengo un problema con un bloque de imágenes, en el ordenador se ve bien el bloque. Cuando veo en el visor de divi como se vería en el movil, se supone que se ve bien, pero en realidad, en cuanto paso de 980 px para abajo, desaparecen las fotos.
Lo mas curioso es que dentro del cada bloque de fotos tengo un titulo enlazado, y solo me desaparecen las fotos y no los titulo.
Buenas tardes, estoy modificando la pagina de entrada, lo primero de todo son unas fotografías de ancho completo, en ordenador se ve bien el menu, pero en móvil y tablet si pongo fondo de desplegable en blanco sale una franja blanca que tapa parte de la fotografía, si pongo que sea transparente al desplegarlo no se ven bien los menús, hay opción de que cuando este sin desplegar (donde se ven las tres líneas del menú) sea transparente y al desplegarlo se vea el resto del menú en fondo blanco? un saludo y muchas gracias de antemano.