Tabla de contenido
Cómo obtener una vista previa de la versión móvil de su sitio web
Un tema de WordPress responsivo garantiza muchas ventajas, pero aún es necesario compruebe cómo se ve su sitio en teléfonos inteligentes en tiempo real. Hay muchas variaciones posibles en los tamaños de pantalla y los navegadores, por lo que Ninguna de las vistas previas móviles puede proporcionarle una vista previa perfecta y 100 % precisa.. Siempre debe confiar en la experiencia real que obtiene al mirar su sitio en un teléfono inteligente o dispositivo móvil real. Esto podría inspirarlo a optimizar sus páginas de destino clave y crear diferentes versiones optimizadas para la experiencia móvil.
Entonces, veamos cómo puedes obtener una vista previa si tienes un sitio compatible con WordPress para dispositivos móviles de dos maneras diferentes.
Usando el personalizador de temas de WordPress
La primera y más sencilla forma de ver la vista previa de la versión móvil es utilizar el Personalizador de temas de WP. El procedimiento es sencillo. Inicia sesión en tu WordPress tablero y vaya a Apariencia > Personalizar.
Después de hacer clic en el Personalizador de temas de WordPress y abrirlo, Verás todas las opciones en el menú de la izquierda.. Puede haber algunas variaciones en las opciones que se ofrecen según el tema que esté utilizando.
Observe el ícono del móvil en la parte inferior de la pantalla.. Haga clic en él y verá un vista previa de cómo se ve su sitio en dispositivos móviles.
Si los símbolos de edición azules te confunden, no te preocupes. Solo son visibles en la vista previa y nunca en su sitio en vivo.
Consejo: Si aún no has lanzado tu blog o si está en modo de mantenimiento, Este método de vista previa es muy útil ya que le permite realizar cambios y comprobar cómo se ven antes de publicar su sitio..
Uso del modo de dispositivo de herramientas para desarrolladores de Google Chrome
Si no se siente cómodo usando el Personalizador de temas de WP por algún motivo, Siempre puedes comprobar si tienes WordPress compatible con dispositivos móviles con el navegador Google Chrome.. Además es un procedimiento muy sencillo y fácil que consta de un par de pasos.
Simplemente abra su navegador Google Chrome como lo hace habitualmente y vaya a la página que desea consultar. Entonces, Haga clic derecho en la página y elija Inspeccionar..
Tenga en cuenta que de esta manera Puedes ver una vista previa de cualquier página en cualquier sitio., no sólo el tuyo. Incluso podría ser el sitio web de su competidor.
En el lado derecho, se abrirá un nuevo panel que se verá así:
La vista del desarrollador le permite ver el código fuente HTML de su sitio web.
Ahora, haga clic en el Alternar barra de herramientas del dispositivo para ver la vista móvil.
Notarás algunos cambios en la vista previa móvil: tu sitio web se reduce para adaptarse al tamaño de la pantalla del móvil y es posible que se realicen otros cambios. Mire y observe las diferencias con atención y observe lo que debe cambiar.
Compruebe lo que sucede cuando intenta pasar el cursor del mouse sobre la vista móvil: se convierte en un círculo.
El objetivo del círculo es imitar la pantalla táctil de un dispositivo móvil.
Consejo: Si quieres observa cómo la pantalla de tu móvil se acerca y se aleja, mantén presionada la tecla Shift y haz clic y mueve el mouse.
La ventaja de utilizar este método para obtener una vista previa de su sitio web móvil es que le permite ver cómo se ve la página en diferentes tipos de teléfonos inteligentes. Estas opciones adicionales se encuentran encima de la vista móvil de su sitio. No importa qué tipo de vista previa abrió cuando hizo clic en Alternar barra de herramientas del dispositivo, aquí puede cambiar el tamaño de la pantalla del dispositivo.
Consejo: Utilice el icono de rotación en la esquina superior derecha para rotar la pantalla del móvil. Tú también puedes inspeccionar elementos en la página haciendo clic en el botón derecho y seleccionando el Inspeccionar opción.
¿Por qué es importante Page Builder para RWD?
RWD es algo en lo que debes pensar detenidamente desde el principio de la creación de tu sitio web. Hay muchas cosas que analizar cuando tienes que hacer que tu sitio sea igualmente atractivo, navegable y efectivo en diferentes tamaños de pantalla. Creadores de páginas de WordPress tienen un papel decisivo en este proceso, Proporcionarle los pilares del diseño de su sitio, por lo que debe informarse bien antes de tomar la decisión.. Por lo tanto, al invertir algo de tiempo en la investigación sobre creadores de páginas, en realidad ahorrará mucho tiempo que podrá dedicar a la creación de su sitio web.
Según nuestra experiencia, WPPanadería y Elementor son excelentes opciones, ya que pueden satisfacer una amplia gama de necesidades diferentes.
Si tienes un presupuesto limitado, Elementor es tu mejor opción. Es un complemento fácil de usar y apto para principiantes que tiene una versión gratuita muy generosa con un sólido conjunto de elementos. También se integra bien con otros complementos WP líderes y servicios como CorreoChimp, WooCommerce, HubSpot, Yoast SEOetc. Si puedes permitirte un complemento premium, Creador de páginas de WPBakery nunca te decepcionará. Viene con una colección increíblemente grande de elementos, una gran cantidad de bloques y opciones. También es fácil de usar y permite mucha creatividad.
Aunque los creadores de páginas son esenciales para RWD, El tema que planeas usar también es importante ya que puede ofrecer algunas características sorprendentes.. Como sabrá, los autores de temas desarrollan widgets y elementos específicos que se pueden ajustar por separado de los creadores de páginas. Muchos de estos elementos le permiten configurar la capacidad de respuesta según sus necesidades. Por esta razón, debes elegir el tema desarrollado por autores reconocidos y confiables. Esto es especialmente importante si desea utilizar un tema gratuito de WordPress. Para ahorrarle tiempo y nervios, probamos toneladas de temas gratuitos. Por lo tanto, si desea utilizar un tema gratuito responsivo, rico en funciones y confiable, le recomendamos que pruebe el tema qi.
Cómo editar la versión móvil de su sitio en Elementor
Es seguro decir que Elementor es, con diferencia, el mejor creador de páginas cuando se trata de editar la versión móvil de su sitio web. Puede suceder que no hayas notado este pequeño ícono, llamado ícono de ventana gráfica, en la configuración.:
Este icono indica que cualquier valor que lo tenga al lado se puede editar por separado para la versión de escritorio y para la versión móvil del sitio. tomemos el Ancho de columna configuración, por ejemplo, puedes ajustar el valor para escritorio, móvil y tableta. El valor que ingrese para cada dispositivo será válido solo para ese dispositivo seleccionado. Observe que la etiqueta HTML no tiene el ícono al lado, lo que significa que tiene el mismo valor para todos los dispositivos.
En caso de que desee cambiar el valor del dispositivo móvil, todo lo que necesita es elija la opción de diseño móvil e ingrese los valores deseados (Estos valores se implementarán únicamente en dispositivos móviles). En el lado derecho de la pantalla tienes la vista previa en vivo de todos los cambios que realizas, para que puedas ver cómo se verán los nuevos valores en el dispositivo de inmediato.
Para volver a la vista del escritorio, debe cambiar a la opción de diseño de escritorio. Puedes hacerlo, como hemos mencionado anteriormente o por usando este pequeño ícono en el menú inferior de la página:
Una cosa más importante que mencionar relacionada con la capacidad de respuesta es que el Las columnas y filas se pueden desactivar para dispositivos individuales.es decir, podemos decir que no serán visibles (o sí lo serán) en algunos tamaños de pantalla.
Para acceder a esta opción siga la ruta:
- Haga clic derecho en el fila columna
- Seleccionar Editar sección
- Haga clic en el Lengüeta avanzada
- Selecciona el Menú desplegable responsivo
Esta opción es muy importante en caso de que tengamos una sección que sabemos que sólo tiene sentido mostrarla en el escritorio, por lo que la cancelaremos en otros dispositivos. Y para compensar su falta, podemos crear una sección que se verá en todos los demás dispositivos excepto en el escritorio.
Cuando se trata de columnas, también podemos encontrar la Opción de columna inversa (Tableta/Móvil). Lo mejor es explicar esto mediante un ejemplo. Digamos que tenemos una sección como esta en el escritorio donde se encuentra el contenido. dividido en dos columnas con imágenes seguidas de un breve texto:
Naturalmente, en dispositivos móviles el contenido se reordenará como en la imagen siguiente, siguiendo el orden original del escritorio:
El La opción de columna inversa nos permite cambiar el orden de una determinada sección para dispositivos móviles o diseños de tabletas.. Cuando lo hacemos para la primera sección en dispositivos más pequeños, el resultado es que el contenido se muestra de manera más efectiva:
Tarde o temprano, tendrás la tentación de utilizar una variedad de complementos que te faciliten agregar una barra lateral, una CTA, un widget o un elemento similar a tu sitio. Este es el momento en que muchos olvidan que un La barra lateral o cualquier otro elemento que funcione perfectamente en una pantalla de escritorio puede no ser tan bueno en un dispositivo móvil.. Entonces, antes de lanzarse a aprovechar estas útiles herramientas, verifique si también responden. La verdad es que muchos de ellos lo son y de hecho pueden ayudarte a mejorar la UX. Pero para saberlo con seguridad, lea las reseñas o busque una demostración antes de instalar cualquiera. Siempre que el complemento se comporte bien en dispositivos móviles, puede estar seguro de que su sitio web va camino del éxito. Tampoco olvidemos que tus opciones varían mucho dependiendo del tema que estés usando.. A tema premium Sin duda garantiza muchas más posibilidades.
Menú responsivo: la primera impresión cuenta
El menú es el pilar de la experiencia del usuario. Es la primera o una de las primeras cosas en las que alguien hace clic cuando visita su sitio. Afecta la rapidez con la que el visitante encontrará lo que vino a buscar, cuánto tiempo permanecerá y muchos otros aspectos de la UX.. Es importante tener un menú bonito y bien estructurado que facilite la navegación, pero no es tan sencillo como parece. Es posible que tenga un menú excelente que funcione perfectamente en una computadora de escritorio pero que sea demasiado pesado para un dispositivo móvil. Una solución en este caso es ajustar también la versión de escritorio al tamaño de la pantalla del móvil. Pero ¿y si eso implica perder demasiada información útil? En ese caso, puedes crear un menú diferente, personalizado únicamente para el tamaño de la pantalla del móvil. Muchos temas de WP vienen con la opción de hacer esto. Si tu tema no es uno de esos, no te preocupes, Hay muchos complementos excelentes para menús responsivos.. Nuestra recomendación es la Complemento de menú responsivo eso incluye más de 150 opciones de personalización y no requiere conocimientos de codificación. Le permite agregar animaciones, imágenes de fondo, establecer la posición de los botones del menú y mucho más. Es increíblemente fácil de usar, por lo que resulta especialmente útil para principiantes.
Imágenes y galerías
Una imagen habla miles de idiomas, por eso Asegúrate de que el tuyo luzca igual de impresionante en cualquier tamaño de pantalla.. Vivimos en una cultura muy orientada a lo visual y, sea cual sea el nicho en el que te encuentres, las buenas fotografías son imprescindibles. Pero, no importa qué tan buenas imágenes tengas, si se cargan lentamente o no se presentan de manera ordenada, corres el riesgo de perder un porcentaje significativo de tu audiencia. Entonces, para asegurarse de evitar ese escenario, recomendamos el Complemento Envira Gallery Lite eso te ayudará crea galerías poderosas como un profesional. Algunas de sus ventajas son que está altamente optimizado para el rendimiento web y del servidor, lo cual es una gran noticia para su SEO.
Botones para compartir en redes sociales
Cuando tienes un menú excelente y responsivo y galerías impresionantes, lo siguiente que debes cuidar es la botones para compartir en redes sociales. Su tamaño debe personalizarse según el dispositivo.. Un botón grande en una pantalla pequeña hace que el visitante haga clic occidentalmente, y eso es bastante irritante. Por otro lado, los botones pequeños en una pantalla grande no son tan fáciles de reconocer. Un complemento que puede ayudarle a tener botones personalizados es el Complemento Sassy Social Share. Fácil de usar, totalmente gratuito y apto para principiantes, hace que compartir sea muy sencillo tanto para usted como para los visitantes de su sitio.
Sitios web amigables para dispositivos móviles
En situaciones en las que necesita que su sitio móvil responda rápidamente, no hay mejor solución que un complemento como WPtoque. Este complemento está hecho de tal manera que agrega automáticamente un tema móvil simple y elegante a su sitio WP. El hecho de que esté recomendado por Google dice mucho de su eficacia. Entonces, incluso si no tiene una versión móvil de su sitio, un complemento como este puede habilitar instantáneamente una versión móvil de su sitio web, para que no pierda su clasificación. También le permite personalizar muchos aspectos de la apariencia del sitio.
La velocidad de carga de la página también es un aspecto muy importante de la experiencia del usuario, especialmente en dispositivos móviles. Si enfrenta algunos desafíos en esta área, considere usar el Complemento de páginas móviles aceleradas ya que es una de las formas más rápidas y sencillas de mejorar la velocidad de carga de tu sitio.
Evite agregar ventanas emergentes en dispositivos móviles
Las ventanas emergentes rara vez son divertidas, pero son especialmente irritantes en los móviles. Cubren una gran parte de la pantalla y requieren que el visitante los descarte antes de acceder al contenido de la página. Por lo tanto, es mejor evitarlos por completo en la versión móvil de su sitio. La forma de evitarlos depende principalmente de su proveedor de servicios, pero la mayoría de ellos tienen una opción para desactivar las ventanas emergentes intrusivas en los móviles. También Tenga en cuenta que Google penaliza los sitios que tienen ventanas emergentes muy intrusivas..
En conclusión
Dado que el número de personas que utilizan teléfonos inteligentes para acceder a Internet aumenta constantemente, tiene sentido esperar muchas más soluciones y opciones para las versiones móviles de los sitios. Los diseñadores están trabajando arduamente para abordar la gran cantidad de patrones de uso; aún así, los conceptos básicos de RWD son los mismos: asegúrese de elegir un tema WP compatible con dispositivos móviles y un creador de páginas que tiene todas las opciones que necesitas.
