jueves, marzo 28, 2024
No menu items!
InicioBlogsCómo ver la versión móvil de los sitios de WordPress desde el...

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 los 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.

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, el móvil es tan importante que Google ahora está usando un índice de “móvil 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 mediante navegadores de escritorio.

🔥 Leer:  Fundamentos de los blogs: 4 consejos para cumplirlos

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.

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 control de WordPress que muestra dónde encontrar Apariencia - Personalizar

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í:

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 los 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 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.

🔥 Leer:  Las 9 principales empresas de impresión bajo demanda de Etsy (2024)

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 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í:

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

🔥 Leer:  ¿Hot Wheels Unleashed admite Cross Platform/Cross Play?

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

Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver videos tutoriales de WordPress. También nos puede encontrar en Twitter y Facebook.

Recomendamos

Populares