¿Quiere obtener una vista previa de la versión móvil de su sitio de WordPress? La vista previa del diseño móvil le permite ver cómo se ve su sitio web en dispositivos móviles. Si bien ciertamente puede echar un vistazo a su sitio en vivo en su teléfono, 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 un escritorio, por lo que puede realizar cambios rápidamente y ver sus efectos. En este artículo, le mostraremos dos maneras 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 de su diseño móvil
Contents
Más del 50% de los visitantes de su sitio web utilizarán su teléfono móvil 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 está utilizando un índice de «dispositivos móviles primero» para su algoritmo de clasificación de sitios web. Incluso si está utilizando un tema de WordPress receptivo, aún debe verificar cómo se ve su sitio en el móvil. 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 el aspecto de su sitio en dispositivos móviles utilizando navegadores de escritorio. Es importante tener en cuenta que la mayoría de las vistas previas móviles no serán completamente perfectas, ya que existen tantos tamaños de pantalla y navegadores móviles diferentes. Su prueba final siempre debe ser ver su sitio en un dispositivo móvil real.
Video tutorial
Suscríbase a MundoCMS Si no le gusta el video o necesita más instrucciones, siga leyendo.
1. Uso del 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 navegue hasta 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, haga clic en el icono del móvil. A continuación, verá una vista previa de cómo se verá su sitio en dispositivos móviles.
Notar: 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 para 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 su apariencia antes de subirlos.
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 verá su sitio web en dispositivos móviles. Simplemente abra el navegador Google Chrome en su escritorio y visite la página que desea visitar. Esta podría ser la vista previa de una página en su sitio o incluso el sitio web de su competidor. Luego, debe hacer clic derecho en la página y seleccionar «Inspeccionar».
Se abrirá un nuevo obturador en el lado derecho, así:
En la vista de desarrollador, podrá ver el código fuente HTML de su sitio. Luego haga clic en el botón «Activar / Desactivar la barra de herramientas del dispositivo» para cambiar a la vista 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 en la vista móvil. En el ejemplo anterior, el menú se contrajo y el icono de búsqueda se movió a la izquierda en lugar de a la derecha del menú. Cuando pasa el cursor del mouse sobre la vista móvil de su sitio, se convertirá en un círculo, como este:
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 arrastrar el mouse para simular pellizcar la pantalla del móvil para acercar o alejar. Sobre la vista móvil de su sitio, verá opciones adicionales.
Estos le permiten hacer varias cosas adicionales. Puede comprobar cómo se vería 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 del 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, de modo 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. Hay muchos temas y complementos premium que le permiten crear cosas que se ven diferentes en computadoras de escritorio y dispositivos móviles. También puede utilizar un complemento de creación de páginas como Beaver Builder para cambiar sus páginas de destino a la vista móvil. Es absolutamente necesario crear contenido específico para dispositivos móviles para sus formularios de generación de clientes potenciales. En los dispositivos móviles, estos deberían requerir información mínima, idealmente solo una dirección de correo electrónico. También deben ser bonitos y 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 clientes potenciales. Es el complemento emergente de WordPress y la herramienta de generación de leads más poderosa del mercado. Tienen reglas de visualización específicas para la orientación por dispositivo que le permiten presentar diferentes campañas a los usuarios de dispositivos móviles y de escritorio. Incluso puede combinar esto 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 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 complementos para convertir un sitio de WordPress en una aplicación móvil.
Prima: Consulte nuestra selección de los mejores servicios telefónicos para empresas, para que pueda agregar un botón Click to Call para usuarios de dispositivos móviles. Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver tutoriales en video de WordPress. También puede encontrarnos en Twitter y Facebook.
Originally posted 2021-02-24 20:43:37.
