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

¿Desea obtener una vista previa de la versión móvil de su sitio de WordPress?

La vista previa de la estructura / disposición / diseño / plantilla para móviles te ayuda a ver cómo se ve tu sitio web en los dispositivos móviles. Cuando su sitio está en fase de desarrollo o incluso cuando ya está en funcionamiento, a menudo es más fácil ver la versión móvil en un ordenador de sobremesa. Así puedes hacer cambios rápidamente y ver su efecto.

En este artículo, le mostraremos cómo ver una versión móvil del sitio de WordPress desde un ordenador de sobremesa.

Por qué debería ver previa su estructura / disposición / diseño / plantilla para móviles

Más del 50% de los visitantes de su sitio web utilizarán el móvil para acceder a él. Alrededor del 3% lo hará desde una tableta.

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

De hecho, el móvil es tan importante que Google utiliza ahora un índice mobile-first para su algoritmo de clasificación de sitios web. Esto significa que Google utilizará la versión móvil de su sitio para la indexación. Puede obtener más información leyendo nuestra guía definitiva sobre WordPress SEO.

Aunque utilices un tema de WordPress adaptable, tienes que comprobar cómo se ve tu sitio en el móvil. Es posible que desee crear diferentes versiones de las páginas de destino clave que están optimizados para las necesidades de los usuarios móviles.

Es importante tener en cuenta que la mayoría de las vistas previas para móviles no serán completamente perfectas porque hay muchos tamaños de pantalla y exploradores diferentes. La prueba final debe ser siempre ver el sitio en un dispositivo móvil real.

Dicho esto, veamos cómo puede ver la versión móvil de su sitio web de WordPress en un ordenador de sobremesa.

Vamos a cubrir dos métodos diferentes para probar cómo se ve su sitio en móviles utilizando navegadores de escritorio. Puede enlazar los siguientes enlaces para saltar a cualquier sección:

Tutorial en vídeo

Subscribe to WPBeginner

Si prefiere instrucciones escritas, siga leyendo.

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

Puede utilizar el Personalizador de temas de WordPress para obtener una vista previa de la versión móvil de su sitio de WordPress.

Simplemente acceda a su escritorio de WordPress y vaya a la pantalla Apariencia ” Personalizar.

Esto abrirá el Personalizador de temas de WordPress. Para este tutorial, vamos a utilizar el tema Astra.

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

En la parte inferior de la pantalla, basta con hacer clic en el icono del móvil.

A continuación, verá una vista previa del aspecto de su sitio en los dispositivos móviles.

Este método de vista previa de la versión móvil es especialmente útil cuando no has terminado de crear tu blog o cuando está en modo de mantenimiento.

Ahora puedes hacer cambios en tu sitio web y comprobar cómo quedan antes de publicarlos.

Método 2: Uso del modo de dispositivo DevTools de Google Chrome

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

El navegador Google Chrome dispone de un conjunto de herramientas para desarrolladores que permiten marcar / comprobar cualquier sitio web, incluida una vista previa de su aspecto en dispositivos móviles.

Sólo tiene que abrir el navegador / explorador Google Chrome en su ordenador y visitar la página que desea marcar / comprobar. Puede tratarse de la vista previa de una página de tu sitio o incluso del sitio web de tu competencia.

A continuación, haga clic con el botón derecho del ratón en la página y seleccione la opción “Inspeccionar”.

Se abrirá un nuevo panel a la derecha o en la parte inferior de la pantalla.

Será algo parecido a esto:

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

A continuación, debes hacer clic en el botón “Conmutar la barra de herramientas del dispositivo” para cambiar a la vista móvil.

Verás la vista previa de tu sitio web reducida al tamaño de la pantalla del móvil.

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

Al pasar el cursor del ratón sobre la vista móvil de su sitio, se convertirá en un círculo. Este círculo puede moverse con el ratón para imitar la pantalla táctil de un dispositivo móvil.

También puede mantener pulsada la tecla “Mayúsculas” y, a continuación, hacer clic y mover el ratón para simular que pellizca la pantalla del móvil para ampliar / alejar la imagen.

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

Estos ajustes te permiten hacer varias cosas adicionales. Puedes comprobar cómo se vería tu sitio en distintos tipos de smartphones.

Por ejemplo, puede seleccionar un dispositivo móvil como un iPhone y ver cómo aparecerá su sitio en el dispositivo.

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

Bonificación: Cómo crear contenido específico para móviles en WordPress

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

Sin embargo, tener un sitio adaptable puede no ser suficiente. Los usuarios de dispositivos móviles suelen buscar cosas distintas a los usuarios de ordenadores de sobremesa.

Muchos temas y plugins premium permiten crear elementos que se muestran de forma diferente en el escritorio y en el móvil. También puedes utilizar un plugin maquetador de páginas como SeedProd para editar tus páginas de destino en vista móvil.

Debería considerar la posibilidad de crear contenido específico para móviles para sus formularios de generación de clientes potenciales. En los dispositivos móviles, estos formularios deben pedir la mínima información, idealmente sólo una dirección de correo electrónico. También deben ser atractivos y fáciles de cerrar.

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

Otra gran manera de crear ventanas emergentes específicas para móviles y formularios de generación de clientes potenciales es con OptinMonster. Es el plugin de ventanas emergentes para WordPress y la herramienta de generación de clientes potenciales más potente del mercado.

OptinMonster dispone de reglas de visualización específicas para dispositivos que le permiten mostrar campañas diferentes a los usuarios de móviles y a los usuarios de ordenadores de sobremesa. Incluso puede combinar esto con la característica de geo-targeting de OptinMonster y otras características avanzadas de personalización para obtener las mejores conversiones.

Puede consultar nuestra guía sobre cómo crear mensajes / ventanas emergentes para móviles que conviertan para obtener más información.

Esperamos que este artículo te haya ayudado a aprender cómo obtener una vista previa de la estructura / disposición / diseño / plantilla móvil de tu sitio. También puedes consultar nuestra selección de los mejores plugins para convertir un sitio WordPress en una aplicación móvil y aprender a crear un sitio web adaptado a dispositivos móviles.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.