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 nuestro functions.php. 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 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!