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 del diseño móvil le ayuda a ver cómo se ve su sitio web en dispositivos móviles.

Si bien definitivamente puede verificar su sitio en vivo en su teléfono, esto no ayuda durante la fase de desarrollo.

Incluso cuando su sitio está activo, a menudo es más fácil ver la versión móvil en una computadora de escritorio, por lo que puede realizar cambios rápidamente y ver su efecto.

En este artículo, le mostraremos dos formas fáciles de obtener una vista previa del diseño móvil de su sitio de WordPress sin cambiar a diferentes dispositivos.

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

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

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

De hecho, los dispositivos móviles son tan importantes que Google ahora utilizando un índice de “dispositivos móviles primero” para el algoritmo de clasificación de su sitio web.

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

En este artículo, cubriremos dos métodos diferentes para probar la apariencia de su sitio en dispositivos móviles usando navegadores de escritorio.

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

Si no le gusta el video o necesita más instrucciones, siga leyendo.

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

Panel de WordPress que muestra dónde encontrar 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 aquí:

Personalizador de temas de WordPress (vista de escritorio)

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

Cambiar a la vista móvil en la personalización del tema

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

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

Puede realizar cambios y comprobar cómo se ven antes de publicarlos.

2. Usando el modo de dispositivo de Google Chrome DevTools

El navegador Google Chrome tiene una serie de herramientas para desarrolladores que le permiten realizar 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.

Esto podría ser una vista previa de una página de su sitio o también podría ser el sitio web de su competidor.

A continuación, debe hacer clic derecho en la página y seleccionar “Inspeccionar”.

Seleccionar la opción Inspeccionar en Chrome

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

La vista de escritorio predeterminada al inspeccionar su sitio en 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.

Inspeccionar la vista móvil de su sitio en Chrome

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

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

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

El cursor circular del mouse en la vista Inspeccionar de Chrome

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 la imagen.

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

Opciones móviles adicionales para inspeccionar su sitio en Chrome

Estos le permiten hacer muchas cosas adicionales. Puede controlar el aspecto de su sitio en diferentes tipos de teléfonos inteligentes. También puede simular el rendimiento de su sitio a través de conexiones 3G lentas o rápidas. Incluso puedes rotar la pantalla de tu móvil usando el icono de rotar.

Cómo crear contenido específico para dispositivos 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 el simple hecho de tener un sitio receptivo puede no ser suficiente. Los usuarios de dispositivos móviles a menudo buscan cosas diferentes a los usuarios de escritorio.

Muchos temas y plugins premium le permiten crear elementos que se muestran de manera diferente en el escritorio que en los dispositivos móviles. También puede utilizar un plugin de creación de páginas como 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 clientes potenciales. En los dispositivos móviles, estos 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.

Una excelente manera de crear ventanas emergentes específicas para dispositivos móviles y formularios de generación de clientes potenciales es con OptinMonster. Es el plugin emergente de WordPress y la herramienta de generación de leads más poderosa del mercado.

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

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

Prima: Consulte nuestra selección de los mejores servicios de telefonía empresarial, para que pueda agregar un botón de llamada para usuarios móviles.

¿Te ha resultado útil??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicado. Required fields are marked *