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 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á activo, 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.

Obtenga una vista previa del diseño móvil de su sitio web

Por qué debería obtener una vista previa de su 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. Alrededor del 3% usará una tableta.

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

De hecho, los dispositivos móviles son tan importantes que Google ahora está 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 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 de dispositivos 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 debido a que 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.

Video Tutorial

Suscríbase a WPBeginner

Si no le gusta el video o necesita más instrucciones, continúe leyendo.

1. Usando el Personalizador de temas de WordPress

Puede usar 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 la apariencia: personalizar

Esto abrirá el personalizador de temas de WordPress. Según el tema que esté utilizando, puede ver 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, haz clic en el ícono móvil. Luego verá una vista previa de cómo se ve su sitio en dispositivos móviles.

Cambiar a la vista móvil en el personalizador de temas

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 de crear su blog, o cuando está en modo de mantenimiento.

Puede hacer cambios y verificar 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 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.

A continuación, haga clic en el botón “Cambiar 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 del dispositivo 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 contrajo y el ícono de búsqueda se movió 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í:

El cursor circular del mouse en la vista de inspección 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.

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

Opciones móviles adicionales para inspeccionar su sitio en Chrome

Estos te permiten hacer varias cosas adicionales. Puede verificar cómo se vería su sitio en los 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 puede usar un complemento de generador 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 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.

OptinMonster es una excelente manera de crear ventanas emergentes específicas para dispositivos móviles y formularios de generación de leads. Es el complemento emergente de WordPress más potente y la herramienta de generación de leads del mercado..

Tienen reglas específicas de visualización de orientación por dispositivo que le permiten mostrar diferentes campañas a usuarios de dispositivos 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 obtener la mejor conversión.

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

Prima: echa un vistazo a nuestra selección de los mejores servicios de telefonía comercial, para que puedas agregar un botón de clic para llamar para usuarios móviles.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me