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

Si bien puede echar un vistazo a su sitio en vivo en su 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, por lo que puede hacer cambios rápidamente y ver su efecto.

En este artículo, le mostraremos dos formas simples de previsualizar fácilmente el diseño móvil de su sitio de WordPress sin cambiar a diferentes dispositivos.

Por qué debería obtener una vista previa de su diseño móvil

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

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

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

Incluso si estás usando un tema de WordPress receptivo, aún debe verificar cómo se ve su sitio en dispositivos móviles. Es posible que incluso desee crear diferentes versiones de páginas de destino clave que estén optimizadas para las necesidades de los usuarios móviles (más sobre esto más adelante).

En este artículo, cubriremos dos métodos diferentes para probar cómo se ve su sitio en dispositivos móviles utilizando navegadores de escritorio.

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

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 inicie sesión en su panel de WordPress y vaya a Apariencia »Personalizar pantalla.

WordPress dashboard showing where to find Appearance - Customize

Esto abrirá el personalizador de temas de WordPress. Dependiendo del tema que esté utilizando, puede ver opciones ligeramente diferentes en el menú de la izquierda aquí:

WordPress theme customizer (desktop view)

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

Switching to mobile view in the theme customizer

Nota: Los símbolos de edición azules solo están presentes en la vista previa. No los verá en su sitio en vivo.

Este método de vista previa de la versión móvil es particularmente útil cuando aún no ha terminado creando tu blogo cuando está debajo modo de mantenimiento.

Puede hacer cambios y comprobar cómo se ven antes de ponerlos en funcionamiento.

2. Uso del modo de dispositivo DevTools de Google Chrome

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

Simplemente abra el navegador Google Chrome en su escritorio y visite la página que desea consultar.

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

A continuación, debe hacer clic con el botón derecho en la página y seleccionar 'Inspeccionar'.

Selecting the Inspect option in Chrome

Se abrirá un nuevo panel en el lado derecho, como este:

The default desktop view when inspecting your site in Chrome

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

Luego, haga clic en el botón 'Alternar barra de herramientas del dispositivo' para cambiar a la vista móvil.

Inspecting the mobile view of your site in Chrome

Notarás que la vista previa de tu 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 ícono Buscar se ha movido hacia la izquierda en lugar de hacia la derecha del menú.

Cuando pasa el cursor del mouse sobre la vista móvil de su sitio, se convertirá en un círculo, así:

The circular mouse cursor in Chrome's Inspect view

Este círculo se puede mover con el mouse para imitar la pantalla táctil de un dispositivo móvil.

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

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

Additional mobile options for inspecting your site in Chrome

Estos te permiten hacer varias cosas adicionales. Puede verificar cómo se vería su sitio en diferentes tipos de teléfonos inteligentes. También puede simular el rendimiento de su sitio en conexiones 3G rápidas o lentas. Incluso puedes rotar la pantalla del móvil usando el ícono rotar.

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

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

Pero simplemente tener un sitio receptivo puede no llegar lo suficientemente lejos. Los usuarios de dispositivos móviles a menudo buscan cosas diferentes que los usuarios de escritorio.

Muchos complementos y temas premium le permiten crear elementos que se muestran de manera diferente en el escritorio en comparación con los dispositivos móviles. También puedes usar un plugin de generador de páginas me gusta Beaver Builder para editar sus páginas de destino en la vista móvil.

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

Una excelente manera de crear ventanas emergentes específicas para dispositivos móviles y formularios de generación de leads es con OptinMonster. Es el mas poderoso Complemento emergente de WordPress y herramienta de generación de leads en el mercado.

Tienen reglas específicas de visualización de orientación por dispositivo que le permiten mostrar diferentes campañas a usuarios móviles frente a usuarios de escritorio. Incluso puede combinarlo con la función de orientación geográfica de OptinMonster y otras funciones avanzadas de personalización para recibir la mejor conversión.

Esperamos que este artículo le haya ayudado a aprender cómo obtener una vista previa del diseño móvil de su sitio. También puede consultar nuestro artículo sobre mejores complementos para convertir un sitio de WordPress en una aplicación móvil.

Prima: echa un vistazo a nuestra selección de mejores servicios telefónicos de negociospara que pueda agregar un haga clic para llamar para usuarios móviles.

Si te gustó este artículo, suscríbete a nuestro Canal de Youtube para tutoriales en video de WordPress. También puedes encontrarnos en Gorjeo y Facebook.





Enlace fuente