Si tu WordPress en el móvil se ve peor que tu cuñado en nochebuena puede ser por varios motivos. Te voy a explicar las diferentes posibilidades y las diferentes opciones para poder ajustarlo al móvil.
Índice de Contenido
Por qué WordPress no se ve bien en el móvil
- Si anteriormente se veía bien es muy probable que sea uno de los siguientes casos:
- Que se haya roto con alguna actualización de un plugin, tema o del mismo WordPress
- Que haya entrado algún tipo de malware como un virus
- Que alguien o algo haya modificado tu web sin querer/queriendo
Si es probable que tu caso sea uno de estos haz click aquí. Sino, sigue leyendo
- Si se ve mal desde la creación de la web puede ser por varios motivos:
- Que no hayan creado una página responsive (adaptable a móviles)
- Que el código responsive no sea compatible con tu móvil
- Que el código responsive no sea compatible con tu navegador
- Que el responsive no se haya trabajado en todas las resoluciones, como en tu móvil
Algo a tener en consideracion es si existe código personalizado en archivo functions.php de WordPress. Es posible que el error provenga de ahí (Aunque es una de muchas posibilidades)
- Si cuentas con un maquetador visual como Divi, Elementor, WP Bakery, etc. es probable que no esté funcionando correctamente en los dispositivos de ese tamaño
Cómo solucionar que WordPress no se vea bien en nuestro smart phone
Puedes seguir los consejos que se facilitan en este artículo. Pero hay situaciones singulares en las que, si no contamos con los conocimiento técnicos suficientes, necesitemos de ayuda externa, como contratar un diseñador web.
Cómo adaptar WordPress al móvil
Para saber cómo adaptar WordPress al móvil debemos entender primero qué es una web responsive.
¿Qué es una web responsive?
Una web responsive es, básicamente, una web que se puede adaptar de forma correcta a todo tipo de dispositivos, ya sean pantallas grandes, pequeñas, tablets, móviles, proyectores, etc.
Para lograr que una web sea responsive debemos tener en cuenta todas las proporciones y crear un código CSS para cada uno de estos tamaños. Pero no solo eso, hay código CSS que es compatible con algunos dispositivos o navegadores y con otros no.
Código CSS y media queries
Es muy importante que conozcamos las media queries para hacer una web responsive. os recomiendo que echéis un ojo este enlace.
¿Los temas de WordPress están adaptados para móvil?
Sí y no. Perdona por la confusión pero con esto, lo que quiero decir es que suelen estar configurados para cambiar la estructura según 3 medidas clave. Es decir, la estructura de la web cambiaría dependiendo del ancho de los dispositivos basándose en 3 medidas. Esto hace muy posible que existan dispositivos en los que no se vea bien la web.
Métodos para adaptar WordPress al móvil
Sabiendo qué es una web responsive debemos preguntarnos ahora cómo hacerla responsive
Existen varios métodos para poder adaptar WordPress al móvil. Voy a explicarte cada uno de ellos en un orden de calidad creciente. Es decir, las que aparecen primero son las peores formas de ajustar WordPress al móvil, y también te voy a explicar por qué.
1. Plugins para adaptar WordPress al móvil
Esta es la opción más sencilla y rápida, pero sin lugar a dudas la peor de todas. El hecho de usar un plugin para hacer tu web responsive abarca un gran número de problemas y desventajas que voy a enumerarte aquí:
- De forma automática es muy difícil que un plugin sea incapaz de reconocer todo el contenido de tu página, lo que llevaría a un mal resultado responsive
- Puede que aparezca bien en algunos dispositivos y mal en otros
- No vamos a tener control sobre el resultado final. Por lo que es probable que no nos guste cómo queda
- Los plugins crean incompatibilidades, agujeros de seguridad, ralentizan la web, etc
- Los plugins para adaptar WordPress al móvil están perdiendo fama y están dejando de actualizarlos
De todos modos y muy a mi pesar voy a dejarte un par de plugins por si te decides por esta opción:
WPtouch
Es el plugin más conocido para ajustar una página WordPress al móvil. Existe versión gratuita y de pago.
AMP para WP
Un plugin que proporciona la tecnología AMP para tu sitio en WordPress. Es totalmente gratuito, aunque si queremos mejoras tendremos que pagar por sus extensiones.
2. Rehacer tu web con un maquetador visual y ajustarla a móviles
Los maquetadores visuales son plugins con una curva de aprendizaje casi nula y que te permiten crear una web arrastrando y soltando bloques. Un juego de niños.
Esta es una opción a considerar, sí. Pero también hay que tener en cuenta el tiempo a invertir y la calidad del resultado. No quiero decir que se te dé mal el diseño o uso de maquetadores visuales, sino que más bien quiero dejar claro que el uso de maquetadores visuales tiene su lado negativo.
3. Encargar a unos profesionales que rehagan tu web y sea adaptable a móviles
Al contratar un profesional podrás tener seguridad de que se realice un trabajo bien hecho. Además, esta es la forma más sencilla, cómoda y segura. El único inconveniente es la inversión que supone. Pero antes de precipitarse asegúrate de que contratas a unos expertos en WordPress y, siendo el caso, no puedo evitar recomendarte nuestros servicios. Solo perderás 5 minutos en escribirnos y nos pondremos en contacto contigo.
Cómo adaptar WordPress al móvil si ha sido provocado por un malware o una actualización
Si tu WordPress ha dejado de estar adaptado a móviles desde hace unos días es muy probable que sea debido a algún malware o actualización de temas, WordPress o plugins. Aquí tienes algunos métodos para solucionar el problema en estos casos:
Restaura tu web a una versión anterior
Normalmente, los servidores de una calidad mediana suelen guardar una copia de nuestras webs por un periodo de tiempo. Si dispones de esta opción podría ser la solución más efectiva y rápida. Eso sí, a la hora de actualizar WordPress, plugins y temas hazlo 1 a 1 y revisa que esté todo bien después de cada actualización. Así quizá encuentres el causante del problema.
Hazle un escaneo de malware
Instala un plugin de escaneo de malware y revisa si tu web está infestada. Si crees que este puede ser tu caso te recomiendo leer este artículo
Si ninguna de las opciones anteriores te da una solución creo que lo mejor sería buscar a un profesional de WordPress como explico en este punto.
Hola, en primer lugar felicidades por el contenido que nos brindas de una manera gratuita y útil.
Tengo un problema con divi y woocommerce, cuando no estás logueado ,en la ficha de producto, no se ven las imágenes,están como con una capa blanca delante,la imagen está,pero no se visualiza,por una de esas casualidades te has encontrado con este problema?, y si es así ¿cómo lo has podido solucionar?, un saludo y perdona por la parrafada, hasta luego!!
Hola Sergio,
Si me dejas el enlace a la página donde tienes ese problema le puedo echar un vistazo
hace dias que mi pagina en word press no se ve bien en algunos móviles ; se ve bien en PC en Notebook y en celualres en I phone y en algunos samsung y motorolas pero en otros no se ven las notas completas no se cargan las fotos etc
Hola Marondin,
Si me dices en qué página y con qué dispositivo te sucede esto le puedo echar un ojo.
🙂
buenos dias hace poco termine mi pagina web en el computador pero mi pagina web pero no se proyecta en el movil como esa en el computador
Buenos días Camila,
Si quieres puedes enviarme la URL de tu web y le echo un ojo. Puedes enviármela rellenando el formulario de contacto o respondiéndome a este mensaje por aquí.
Saludos
Hola! mi pagina no se vee bien en los moviles, en algunos si pero en la mayoria no, me podrías ayudar?
Hola Cristian,
En la página de inicio el problema que tienes es la posición del background en algunos elementos. Esto se pdoría solucionar mediante Elementor (que es el constructor que estás utilizando) o añadiendo un poco de código CSS. Si tienes problemas de visualización en tu móvil tendrías que añadir media queries, te animo a que eches un vistazo al enlace proporcionado en el artículo.
Para solucionar, por ejemplo, el problema responsive de la cabecera de tu web WordPress podrías añadir el siguiente código:
@media (max-width: 767px){
.elementor-118 .elementor-element.elementor-element-0a4817a:not(.elementor-motion-effects-element-type-background) {
background-position: 0 0 !important;
}
}
Y para solucionar el slider que no se ve bien en móviles:
@media (max-width: 767px){
.elementor-118 .elementor-element.elementor-element-f213519 {
width: 100% !important;
max-width: unset;
--container-widget-width: 100%;
}
}
Espero haberte ayudado, y si tienes cualquier otra duda estaré por aquí
🙂
Buenas Tardes 🙂
Estoy creando mi website donde tengo 5 paginas una de ellas es la de contact que se ve en el ordenador pero no se ve desde el celular.
Agradezco muchisimo la ayuda.
Hanae
Hola Anae,
Creo que refieres al botón de tu página de contacto que tienes en el header. Ese botón desaparece porque estás usando el builder de astra que tiene 2 menús diferenciados, uno m¡para desktop y otro para mobile.
Espero haberte ayudado
🙂
Hola como estás? tengo un problema con la vista de las imagenes en la version movil pero solo en iphone. Te explico, es la segunda vez que me pasa y he hecho un monton de paginas con elementor pro. Las version de escritorio de la web se ve bien, adapto a la version movil y en los andorid se ve perfecto todo, pero en los iphone las imagenes se ven super mal, como si fueran gigantes y la verdad es que las dimensiones de las imagenes cargadas son las adecuadas. Ya actualice elementor a su version mas reciente, no se por que esta pasando, antes no me habia pasado. Sabras por que?
Hola Caren,
Lo que comentas ocurre porque estás usando varios efectos parallax. Para realizar estos efectos se usa la declaración CSS background-attachment: fixed. Esto, usa la medida de document en IOS, por eso se ven tan desproporcionadas. Una solución sería establecer todos los efectos parallax como scroll para dispositivos menores a 767px, la medida establecida por Elementor:
@media screen and (max-width: 767px){
.back {
background-attachment: scroll !important;
}
}
Para añadir ese código podrás hacerlo desde Apariencia/Personalizar/CSS adicional. Hay veces en las que debes limpiar caché para que estos cambios se reflejen.
Si te ha sido de ayuda te agradecería nos hagas feedback
🙂
Gracias, si al aplicarlo las imagenes se ven bien, solo que ya no tiene el efecto parallax sino que quedan fijas.
Hola de nuevo,
Exacto, así es como soluciona ese código que las imágenes se vean mal en la versión móvil de Iphones.
🙂
Si no me explique, no quedan con el efecto fondo fijo, sabes el mismo efecto para escritorio de fondo fijo lo aplicaba a movil usando este codigo: @media screen and (max-width: 767px) {
.back{
background-attachment: fixed;
}
}
y siempre me andaba bien, en android todo quedaba perfecto, hasta donde se no habia tenido problema con iphone haciendo eso. Pero esta 2 ultimas paginas que he hecho ocurre que a las fotos en iphone se distorcionan al extremo, cosa que no me ocurria antes. Ahora resulta que cuando veo la pagina en la version movil en iphone se ve mas las fotos y si aplico el codigo que me has dejado anteriormente, entonces pierdo todo efecto de fondo fijo tanto en iphone como en adroid (aunque las fotos se ven bien en iphone si lo hago)…..Asi que quede fuera de base con ese problema porque despues de tiempo haciendo eso siempre en este mes con esta nueva pagina me ocurrio eso….
Gracias por tu atencion!
hola!! hace unos dias hice unos cambios en mi pag y en la computadora se ven tal cual los hice, pero cuando quiero ver la version movil en mi celular, no respeta los cambios que le hice!!
Hola Vira!
Me encantaría ayudarte, pero necesitaría que me digas en qué página y qué cambios son con los que tienes el problema. Además de que me des acceso. Así podré analizar la página para buscar la solución.
Saludos
🙂
Algo que sí puedes hacer es borrar las cookies y el historial de tu móvil, es probable que así se solucione todo
😀
Hola! muy buen artículo, mi problema es que el formulario de suscripción a Newsletter se ve bien en PC y en tablets, pero no aparece directamente en ningún celular o móvil. Que puede ser ?
Hola Vanesa,
He revisado tu web y sí que se ve en smartphones. Supongo que ya lo habrás solucionado.
Si te surge cualquier cosa, estaré encantado de ayudarte.
Saludos
Hola!! Estoy teniendo inconvenientes al abrir mi pagina desde distintos celulares. En divi deje todo bien configurada mi pagina en la version movil. Pero al abrir dsd el cel se ve desconfigurado a veces si a veces no, dsd samsung se ve de una forma de iphone otra. Por ej: los bordes de algunos txt no salen, algunas imagenes tampoco, y llega hasta un punto y se corta la página y no puedo seguir bajandola. Tb tenia problema con unos margenes en un modulo q ponia tood bien pero no tomaba o no se, eso termine eliminando. Ya borre y purgue cache con wp rocket. Ya hice config con mi hosting. Ya probe el modo seguro de divi. Ya elimine cache de mi cel. Pues ya no se que mas hacer porque los problemas persisten. Agradecería muchisimo su ayuda!!!!!!
Hola Agustina,
La verdad es que no sé a qué elementos te refieres.
¿Podrías ser más concreta?
mi pagina llega hasta un punto y no permite seguir bajando, se corta. Algunos textos salen sin los bordes de recuadro, y hay un modulo que recien lo hice de nuevo de cero y sigue con el mismo problema, sale todo encimado los textos..al raato recien carga y se ve bien pero ni bien se abre se ve todo mal. Y dps hay imagenes en unas secciones que ni me salen siquieran… No se como explciarle no me deja adjuntarle la foto
Hola he instalado y he empezado a configurar el seo Yoast premium y ahora no se ve bien mi web en los móviles, sale la pantalla en blanco y muy pequeña , aunque si se ve en el ordenador. Antes se veía perfectamente en ambos sitios.
Hola Rosemari,
Escríbeme por mail y vemos como solucionarlo
🙂
Holaaaa ayuda, tengo una página hecha con elementor y se vizualiza bien en el ordenador, pero a la hora de cargarla en el celular se ve sin el diseño hecho con elementor, se ven todos los elementos disgregados… y no encuentro como solucionarlo… por favor ayuuuuda…. esta es la web https://www.kjcnutra.com/
Hola Daimon!
Escríbeme por privado y te echaré una mano cuando me expliques concretamente qué sucede a la versión móvil de tu WordPress