Cómo ver la versión móvil de sitios de WordPress desde el escritorio

Revisar la versión móvil de tu sitio de WordPress en una vista previa de escritorio es una tarea sencilla pero esencial.

Te permite comprobar cómo se ve tu sitio en pantallas más pequeñas, ayudándote a detectar problemas de diseño o fallos que de otro modo podrías pasar por alto.

A lo largo de los años, hemos trabajado con muchos propietarios de sitios web para asegurarnos de que sus sitios se vean geniales y funcionen bien en dispositivos móviles. También priorizamos los diseños amigables para móviles siempre que creamos nuevas páginas y publicaciones en el sitio de WPBeginner.

Un desafío que hemos notado es que verificar la versión móvil en un escritorio puede ser complicado sin las herramientas adecuadas.

Afortunadamente, el Personalizador de Temas de WordPress y el Modo Dispositivo de las Herramientas para Desarrolladores de Google Chrome te permiten previsualizar y hacer ajustes rápidamente.

En esta guía, te mostraremos ambos métodos para ver la versión móvil de sitios de WordPress desde el escritorio.

Por qué deberías previsualizar tu diseño móvil

Más del 50% de los visitantes de tu sitio web accederán a él usando sus teléfonos móviles, y alrededor del 3% usarán una tableta.

Esto significa que tener un sitio que se vea bien en dispositivos móviles es muy importante.

De hecho, la versión móvil es tan importante que Google ahora utiliza un índice "mobile-first" para su algoritmo de clasificación de sitios web. Esto significa que Google usará la versión móvil de tu sitio para la indexación. Puedes aprender más leyendo nuestra guía definitiva de SEO para WordPress.

Incluso si usas un tema de WordPress responsivo, aún necesitas verificar cómo se ve tu sitio en dispositivos móviles. Es posible que desees crear diferentes versiones de páginas de destino clave que estén optimizadas para las necesidades de los usuarios móviles.

Es importante recordar que la mayoría de las previsualizaciones móviles no serán completamente perfectas porque hay muchos tamaños de pantalla y navegadores móviles diferentes. Tu prueba final siempre debe ser ver tu sitio en un dispositivo móvil.

En las siguientes secciones, veremos cómo puedes ver la versión móvil de tu sitio web de WordPress en un escritorio.

Cubriremos 2 métodos diferentes para probar cómo se ve tu sitio en dispositivos móviles usando navegadores de escritorio. Puedes hacer clic en los enlaces a continuación para saltar a cualquier sección:

• Método 1: Usando el Personalizador de Temas de WordPress
• Método 2: Usando el Modo Dispositivo de las Herramientas para Desarrolladores de Google Chrome
• Consejo Adicional: Creando Contenido Específico para Móviles en WordPress
• Tutorial en video
• Preguntas Frecuentes

¡Empecemos!

Método 1: Usando el Personalizador de Temas de WordPress

Puedes usar el personalizador de temas de WordPress para previsualizar la versión móvil de tu sitio de WordPress.

Simplemente inicia sesión en tu panel de WordPress y ve a la pantalla Apariencia » Personalizar.

Esto abrirá el personalizador de temas de WordPress.

Dependiendo del tema que estés usando, es posible que veas opciones ligeramente diferentes en el menú de la izquierda.

En la parte inferior de la pantalla, simplemente haz clic en el icono del móvil.

Luego verás una previsualización de cómo se ve tu sitio en dispositivos móviles.

Este método para previsualizar la versión móvil es particularmente útil cuando aún no has terminado de crear tu blog o cuando está en modo de mantenimiento.

Ahora puedes hacer cambios en tu sitio web y ver cómo se ven antes de publicarlos.

Método 2: Usando el Modo Dispositivo de las Herramientas para Desarrolladores de Google Chrome

El siguiente método para ver la versión móvil de un sitio web es usando el navegador Google Chrome.

El navegador Google Chrome tiene un conjunto de herramientas para desarrolladores que te permiten realizar varias comprobaciones en cualquier sitio web, incluida la vista previa de cómo se ve en dispositivos móviles.

Simplemente abre el navegador Google Chrome en tu computadora de escritorio y visita la página que deseas verificar. Podría ser una vista previa de una página en tu sitio o incluso el sitio web de tu competidor.

A continuación, debes hacer clic derecho en la página y seleccionar la opción 'Inspeccionar'.

Se abrirá un nuevo panel en el lado derecho o en la parte inferior de la pantalla.

Se verá algo así:

En la vista de desarrollador, podrás ver el código fuente HTML de tu sitio, CSS y otros detalles.

A continuación, debes hacer clic en el botón 'Activar/desactivar barra de herramientas del dispositivo' para cambiar a la vista móvil.

Verás que la vista previa de tu sitio web se reduce al tamaño de la pantalla móvil.

La apariencia general de tu sitio web también cambiará en la vista móvil. Por ejemplo, los menús se colapsarán y los iconos adicionales se moverán a la izquierda en lugar de a la derecha del menú.

Cuando coloques el cursor del mouse sobre la vista móvil de tu sitio, se convertirá en un círculo. Puedes mover este círculo con el mouse para simular la pantalla táctil de un dispositivo móvil.

También puedes mantener presionada la tecla 'Shift' y luego hacer clic y mover el mouse para simular pellizcar la pantalla móvil para acercar o alejar.

Encima de la vista móvil de tu sitio, verás algunas opciones adicionales.

Estas configuraciones te permiten hacer varias cosas extra. Puedes verificar cómo se vería tu sitio en diferentes tipos de teléfonos inteligentes.

Por ejemplo, puedes seleccionar un dispositivo móvil como un iPhone y ver cómo aparece tu sitio en él.

También puedes simular el rendimiento de tu sitio en conexiones 3G rápidas o lentas. Usando el icono de rotar, puedes girar la pantalla del móvil.

Consejo Adicional: Creando Contenido Específico para Móviles en WordPress

Es importante que tu sitio web tenga un diseño adaptable para que los visitantes móviles puedan navegar fácilmente por tu sitio web.

Sin embargo, simplemente tener un sitio responsive puede no ser suficiente. Los usuarios en dispositivos móviles a menudo buscan cosas diferentes a los usuarios de escritorio.

Muchos temas y plugins premium te permiten crear elementos que se muestran de manera diferente en escritorio frente a móvil. También puedes usar un constructor de páginas como SeedProd para editar tus páginas de destino en vista móvil.

Deberías considerar crear contenido específico para móviles para tus formularios de generación de leads. En dispositivos móviles, estos formularios deben solicitar información mínima, idealmente solo una dirección de correo electrónico. También deben verse bien y ser fáciles de cerrar.

Para más detalles, puedes ver nuestra guía sobre cómo crear una página de destino en WordPress.

Otra excelente manera de crear popups y formularios de generación de leads específicos para móviles es con OptinMonster. Es el plugin de popups y herramienta de generación de leads más potente de WordPress en el mercado.

OptinMonster tiene reglas de visualización específicas de segmentación por dispositivo que te permiten mostrar diferentes campañas a usuarios móviles frente a usuarios de escritorio. Puedes combinar esto con la función de geolocalización de OptinMonster y otras funciones avanzadas de personalización para obtener las mejores conversiones.

Puedes ver nuestra guía sobre cómo crear popups móviles que conviertan para más información.

Tutorial en video

Antes de irte, quizás quieras ver nuestro videotutorial sobre cómo ver la versión móvil de los sitios de WordPress desde el escritorio.

Suscríbete a WPBeginner

Preguntas Frecuentes

Aquí hay algunas preguntas frecuentes de nuestros lectores sobre cómo previsualizar el diseño móvil de tu sitio.

¿Estas previsualizaciones de escritorio coincidirán exactamente con los dispositivos móviles reales?

No siempre. Aunque son útiles para detectar problemas obvios de diseño, estas herramientas basadas en escritorio solo pueden emular las dimensiones de la pantalla, el comportamiento del navegador y las condiciones de red.

Es posible que no capturen peculiaridades de rendimiento o interacciones específicas del hardware, como los gestos táctiles.

Por eso sugerimos probar siempre en dispositivos reales, incluyendo teléfonos y tabletas, para confirmar la usabilidad en el mundo real antes de lanzar.

¿Puedo editar mi sitio en vista móvil desde mi escritorio?

Sí, WordPress te permite editar contenido mientras previsualizas el modo móvil en el Personalizador o usando constructores de páginas como Elementor, SeedProd y Beaver Builder.

Al cambiar a la vista previa móvil, puedes:

• Ajustar el relleno, los márgenes y los tamaños de fuente para pantallas más pequeñas.
• Ocultar o mostrar ciertos elementos solo en móvil (como imágenes grandes o banners solo para escritorio).
• Probar menús y widgets diseñados para interacciones táctiles.

La mayoría de los constructores ofrecen configuraciones específicas para dispositivos, por lo que puedes personalizar diseños sin afectar las versiones de escritorio o tableta.

¿Cómo puedo verificar la vista móvil de mi WordPress sin iniciar sesión?

Si quieres ver cómo se ve el sitio en vivo para los visitantes, prueba estos métodos:

• Abre tu sitio en una ventana de navegador de incógnito y usa el modo de dispositivo de las herramientas de desarrollador.
• Usa verificadores de diseño responsivo en línea como el Responsive Design Checker.

Estas herramientas te permiten ver tu sitio en diferentes resoluciones sin necesidad de credenciales de inicio de sesión.

Esperamos que este artículo te haya ayudado a aprender cómo previsualizar el diseño móvil de tu sitio. También te puede interesar ver nuestras selecciones expertas de los mejores plugins para convertir un sitio de WordPress en una aplicación móvil y aprender formas de crear un sitio web compatible con dispositivos móviles.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.