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

¿Quieres ver una vista previa de la versión móvil de tu sitio WordPress? La vista previa del diseño móvil te ayuda a ver cómo se ve tu sitio web en los dispositivos móviles.

Aunque ciertamente puedes echar un vistazo a tu sitio en vivo en tu teléfono, esto no ayuda durante la etapa de desarrollo.

Incluso cuando su sitio está en vivo, a menudo es más fácil ver la versión móvil en una computadora de escritorio, para que pueda hacer cambios rápidamente y ver su efecto.

En este artículo, te mostraremos dos formas sencillas de previsualizar fácilmente el diseño móvil de tu sitio de WordPress sin tener que cambiar de dispositivo.

Por qué deberías ver el diseño de tu móvil

Más del 50% de los visitantes de su sitio web usarán sus teléfonos móviles para acceder a su sitio. Alrededor del 3% usarán una tableta.

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

De hecho, el móvil es tan importante que Google está utilizando ahora un índice "móvil-primero" para su algoritmo de clasificación de sitios web.

Aunque estés usando un tema de WordPress que responda a tus necesidades, debes comprobar cómo se ve tu sitio en el móvil. Es posible que quieras crear diferentes versiones de páginas de destino clave que estén optimizadas para las necesidades de los usuarios de móviles (más sobre esto más adelante).

En este artículo, vamos a cubrir dos métodos diferentes para probar cómo se ve su sitio en el móvil usando los navegadores de escritorio.

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

Video Tutorial

Suscríbase a WPBeginner

Si no te gusta el video o necesitas más instrucciones, entonces sigue leyendo.

1. Usando el Personalizador de Temas de WordPress

Puedes usar el personalizador de temas de WordPress para obtener una vista previa de la versión móvil de tu sitio de WordPress.

Simplemente ingresa a tu panel de control de WordPress y ve a Apariencia " Personalizar pantalla.

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 aquí:

En la parte inferior de la pantalla, haz clic en el icono del móvil. Entonces verá una vista previa de cómo se ve su sitio en los dispositivos móviles.

Nota: Los símbolos azules de edición sólo están presentes en el previsualizador. No los verás en tu página web en directo.

Este método de previsualización de 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.

Puedes hacer cambios y comprobar su aspecto antes de ponerlos en marcha.

2. Uso del modo de dispositivo DevTools de Google Chrome

El navegador Google Chrome cuenta con un conjunto de herramientas para desarrolladores que te permiten realizar varias comprobaciones en cualquier sitio web, incluida una vista previa del aspecto de tu sitio web en los dispositivos móviles.

Simplemente abre el navegador Google Chrome en tu escritorio y visita la página que quieres consultar.

Esto podría ser la vista previa de una página de su sitio, o incluso podría ser el sitio web de su competencia.

A continuación, debes hacer clic con el botón derecho del ratón en la página y seleccionar "Inspeccionar".

Un nuevo cristal se abrirá en el lado derecho, así:

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

A continuación, haz clic en el botón "Cambiar la barra de herramientas del dispositivo" para cambiar a la vista del móvil.

Notará que la vista previa de su sitio web se reducirá al tamaño de la pantalla del móvil.

También notará que la apariencia de su sitio web cambia a la vista móvil. En el ejemplo anterior, el menú se ha colapsado y el icono de búsqueda se ha movido a la izquierda en lugar de a la derecha del menú.

Cuando pases el cursor del ratón sobre la vista móvil de tu sitio, se convertirá en un círculo, así:

Este círculo puede moverse con el ratón para imitar la pantalla táctil de un dispositivo móvil.

También puedes mantener pulsada la tecla "Shift", y luego hacer clic y mover el ratón para simular el pellizco de la pantalla del móvil para acercar o alejar la imagen.

En la parte superior de la vista móvil de su sitio, verá algunas opciones adicionales.

Esto te permite hacer varias cosas extra. Puedes comprobar cómo se vería tu sitio en diferentes tipos de teléfonos inteligentes. También puedes simular el rendimiento de tu sitio en conexiones 3G rápidas o lentas. Incluso puedes girar la pantalla del móvil con el icono de rotación.

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

Es importante que su sitio web tenga un diseño receptivo, para que los visitantes de su móvil puedan navegar fácilmente por su sitio web.

Pero simplemente tener un sitio de respuesta puede no ser suficiente. Los usuarios de dispositivos móviles suelen buscar cosas diferentes a las de los usuarios de escritorio.

Muchos temas y plugins de primera calidad te permiten crear elementos que se muestran de forma diferente en el escritorio que en el móvil. También puedes usar un plugin de construcción de páginas como Beaver Builder para editar tus páginas de destino en la vista de móvil.

Definitivamente deberías crear contenido específico para móviles para tus formularios de generación de prospectos. En los dispositivos móviles, éstos deberían pedir una información mínima, idealmente sólo una dirección de correo electrónico. También deberían verse bien y ser fáciles de cerrar.

Una gran manera de crear popups específicos para móviles y una forma de generación de pistas es con OptinMonster. Es el más poderoso plugin de popup de WordPress y herramienta de generación de contactos del mercado.

Tienen reglas de visualización específicas para cada dispositivo que permiten mostrar diferentes campañas a los usuarios de móviles frente a los usuarios de escritorio. Incluso puedes combinarlo con la función de geo-targeting de OptinMonster y otras funciones avanzadas de personalización para obtener la mejor conversión.

Esperamos que este artículo te haya ayudado a aprender a ver el diseño móvil de tu sitio. También puede que quieras echar un vistazo a nuestro artículo sobre los mejores plugins para convertir un sitio de WordPress en una aplicación móvil.

Bono: echa un vistazo a nuestra selección de los mejores servicios telefónicos para empresas, para que puedas añadir un botón de "click to call" para los usuarios de móviles.

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir