驴Quieres obtener una vista previa de la versi贸n m贸vil de tu sitio de WordPress?
La vista previa del dise帽o m贸vil lo ayuda a ver c贸mo se ve su sitio web en dispositivos m贸viles. Cuando su sitio est谩 en desarrollo o incluso cuando est谩 activo, a menudo es m谩s f谩cil ver la versi贸n m贸vil en una computadora de escritorio. Luego, puede realizar 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 una computadora de escritorio.
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 usar谩n sus tel茅fonos m贸viles para acceder a su sitio. Alrededor del 3% utilizar谩 una tableta.
Esto significa que es muy importante 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 m贸vil primero para su algoritmo de clasificaci贸n de sitios web. Esto significa que Google usar谩 la versi贸n m贸vil de su sitio para la indexaci贸n. Puede obtener m谩s informaci贸n leyendo nuestra gu铆a definitiva para WordPress SEO.
Incluso si est谩 utilizando un tema de WordPress receptivo, a煤n debe verificar c贸mo se ve su sitio en dispositivos m贸viles. Es posible que desee crear diferentes versiones de p谩ginas de destino clave que est茅n optimizadas para las necesidades de los usuarios de dispositivos m贸viles.
Es importante tener en cuenta que la mayor铆a de las vistas previas m贸viles no ser谩n completamente perfectas porque hay muchos navegadores y tama帽os de pantalla m贸viles diferentes. Su prueba final siempre debe ser mirar su 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 una computadora de escritorio.
Vamos a cubrir dos m茅todos diferentes para probar c贸mo se ve su sitio en dispositivos m贸viles usando navegadores de escritorio. Puede hacer clic en los enlaces a continuaci贸n para saltar a cualquier secci贸n:
Videotutorial
Suscr铆bete a WPBeginner
Si prefiere instrucciones escritas, contin煤e leyendo.
M茅todo 1: usar 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 la Apariencia 禄 Personalizar pantalla.
Esto abrir谩 el personalizador de temas de WordPress. Para este tutorial, usaremos el tema Astra.
Seg煤n el tema que est茅 utilizando, es posible que vea opciones ligeramente diferentes en el men煤 de la izquierda.
En la parte inferior de la pantalla, simplemente haga clic en el icono del m贸vil.
Luego ver谩 una vista previa de c贸mo se ve su sitio en dispositivos m贸viles.
Este m茅todo para obtener una 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.
Ahora puede realizar cambios en su sitio web y comprobar c贸mo se ven antes de publicarlos.
M茅todo 2: usar el modo de dispositivo DevTools de Google Chrome
El navegador Google Chrome tiene un conjunto de herramientas para desarrolladores que le permiten realizar varias comprobaciones en cualquier sitio web, incluida una vista previa de c贸mo se ve en los 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 competidor.
A continuaci贸n, debe hacer clic derecho en la p谩gina y seleccionar la opci贸n ‘Inspeccionar’.
Se abrir谩 un nuevo panel en el lado derecho o en la parte inferior de la pantalla.
Se ver谩 algo como esto:
En la vista de desarrollador, podr谩 ver el c贸digo fuente HTML, CSS y otros detalles de su sitio.
A continuaci贸n, debe hacer clic en el bot贸n ‘Alternar barra de herramientas del dispositivo’ para cambiar a la vista m贸vil.
Ver谩 que la vista previa de su sitio web se reduce al tama帽o de la pantalla del m贸vil.
La apariencia general de su sitio web tambi茅n cambiar谩 en la vista m贸vil. Por ejemplo, los men煤s se colapsar谩n y los 铆conos adicionales se mover谩n 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. Este c铆rculo se puede mover con el mouse para imitar la pantalla t谩ctil en 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.
Encima de la vista m贸vil de su sitio, ver谩 algunas opciones adicionales.
Estos ajustes le permiten hacer varias cosas adicionales. Puede verificar c贸mo se ver铆a su sitio en diferentes tipos de tel茅fonos inteligentes.
Por ejemplo, puede seleccionar un dispositivo m贸vil como un iPhone y ver c贸mo aparecer谩 su sitio en el dispositivo.
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 de rotar.
Bono: 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 los visitantes m贸viles puedan navegar f谩cilmente por su sitio web.
Sin embargo, el simple hecho de tener un sitio receptivo puede no ser suficiente. Los usuarios de dispositivos m贸viles a menudo buscan cosas diferentes a las de los usuarios de escritorio.
Muchos temas y complementos premium le permiten crear elementos que se muestran de manera diferente en el escritorio que en el m贸vil. Tambi茅n puede usar un complemento de creaci贸n de p谩ginas como Producto de semilla para editar sus p谩ginas de destino en la vista m贸vil.
Debe considerar crear contenido espec铆fico para dispositivos m贸viles para sus formularios de generaci贸n de prospectos. En dispositivos m贸viles, estos formularios 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.
Para m谩s detalles, puedes ver nuestra gu铆a sobre c贸mo crear una p谩gina de destino en WordPress.
Otra excelente manera de crear ventanas emergentes espec铆ficas para dispositivos m贸viles y formularios de generaci贸n de prospectos es con OptinMonster. Es el complemento emergente de WordPress y la herramienta de generaci贸n de leads m谩s poderosa del mercado.
OptinMonster tiene reglas de visualizaci贸n de orientaci贸n por dispositivo espec铆ficas que le permiten mostrar diferentes campa帽as a los usuarios de dispositivos m贸viles frente a los usuarios de escritorio. Incluso puede combinar esto con la funci贸n de orientaci贸n geogr谩fica de OptinMonster y otras funciones de personalizaci贸n avanzadas para obtener las mejores conversiones.
Puede ver nuestra gu铆a sobre c贸mo crear ventanas emergentes m贸viles que convierten para obtener m谩s informaci贸n.
Esperamos que este art铆culo le haya ayudado a obtener una vista previa del dise帽o m贸vil de su sitio. Tambi茅n es posible que desee ver nuestras selecciones de expertos para los mejores complementos para convertir un sitio de WordPress en una aplicaci贸n m贸vil y aprender c贸mo aumentar el tr谩fico del blog.
Si te ha gustado este art铆culo, suscr铆bete a nuestro Canal de Youtube para tutoriales en v铆deo de WordPress. Tambi茅n puedes encontrarnos en Gorjeo y Facebook">Facebook.
Fuente: C贸mo ver la versi贸n m贸vil de los sitios de WordPress desde el escritorio