Cómo editar la versión móvil del sitio de WordPress
¿Por qué la versión móvil de su sitio web es crucial para su éxito?
Comencemos con el hecho de que más del 50% del tráfico web a nivel mundial proviene de teléfonos móviles. Esto literalmente significa que más de la mitad de sus clientes visitan su sitio desde sus móviles. A partir de 2018, cuando Google inició la indexación de sitios para dispositivos móviles, el diseño web receptivo solo se ha vuelto aún más importante, y el enfoque en la experiencia móvil de un sitio web se convirtió lógicamente en una prioridad para cualquiera que se tome en serio su negocio. Otra ventaja importante de los sitios web optimizados para dispositivos móviles es que son simples e intuitivos .. Ofrecen una experiencia de usuario fluida, lo que facilita que los clientes potenciales se comuniquen con usted. Además, se cargan rápidamente y hacen que compartir contenido sea fácil y natural. Una forma de pensar en un sitio receptivo es verlo como una forma gratuita de clasificarse mejor en los motores de búsqueda. ¿Por qué perdería esa oportunidad? Cuanto mejor se clasifique, obtendrá más resultados de búsqueda orgánicos, lo que significa más clientes potenciales y más conversiones.
Cómo obtener una vista previa de la versión móvil de su sitio web
Un tema responsivo de WordPress garantiza muchas ventajas, pero aún necesita verificar cómo se ve su sitio en los 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 brindarle 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 puede obtener una vista previa si tiene un sitio optimizado para dispositivos móviles de WordPress 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 usar el Personalizador de temas de WP. El procedimiento es sencillo. Inicie sesión en su panel de WordPress 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.
Fíjese en el icono del móvil en la parte inferior de la pantalla. Haga clic en él y verá una vista previa de cómo se ve su sitio en dispositivos móviles.
Si los símbolos de edición azules lo confunden, no se preocupe. Solo son visibles en la vista previa y nunca en su sitio en vivo.
Sugerencia: si aún no ha lanzado su blog o si está en modo de mantenimiento, este método de vista previa es muy útil, ya que le permite realizar cambios y verificar 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 puede verificar si tiene 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 normalmente y vaya a la página que desea verificar. Luego, haga clic con el botón derecho en la página y seleccione Inspeccionar.
Tenga en cuenta que de esta manera puede ver una vista previa de cualquier página en cualquier sitio, no solo el suyo. Incluso podría ser el sitio web de su competidor.
En su lado derecho, se abrirá un nuevo panel y se verá así:
La vista de desarrollador le permite ver el código fuente HTML de su sitio web.
Ahora, haga clic en el botón Alternar barra de herramientas del dispositivo para ver la vista móvil.
Notará algunos cambios en la vista previa móvil: su sitio web se reduce para ajustarse al tamaño de la pantalla móvil y es posible que se produzcan otros cambios. Mire y observe las diferencias cuidadosamente y anote 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.
Sugerencia: si desea ver cómo se acerca y se aleja la pantalla de su dispositivo móvil, mantenga presionada la tecla Mayús y haga clic y mueva el mouse.
La ventaja de usar 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 arriba de la vista móvil de su sitio. No importa qué tipo de vista previa haya abierto cuando hizo clic en Alternar barra de herramientas del dispositivo, aquí puede cambiar el tamaño de la pantalla del dispositivo.
Sugerencia: use el ícono de rotación en la esquina superior derecha para rotar la pantalla del móvil. También puede inspeccionar elementos en la página haciendo clic con el botón derecho y seleccionando la opción Inspeccionar.
¿Por qué es importante Page Builder para RWD?
RWD es algo en lo que debe pensar detenidamente desde el principio de la creación de su sitio web. Hay muchas cosas que analizar cuando tiene que hacer que su sitio sea igualmente atractivo, navegable y efectivo en diferentes tamaños de pantalla. Los creadores de páginas de WordPress tienen un papel decisivo en este proceso, le brindan las piedras angulares del diseño de su sitio, por lo tanto, debe informarse bien antes de tomar la decisión. Por lo tanto, al invertir algo de tiempo en la investigación sobre los creadores de páginas, en realidad ahorrará mucho tiempo que puede dedicar a crear su sitio web.
Según nuestra experiencia, WPBakery 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 fácil de usar para principiantes que tiene una versión gratuita muy generosa con un conjunto sólido de elementos. También se integra bien con otros complementos y servicios líderes de WP como MailChimp, WooCommerce, HubSpot, Yoast SEO, etc. Si puede pagar un complemento premium, WPBakery Page Builder nunca lo 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.
Si bien los creadores de páginas son esenciales para RWD, el tema que planea 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, debe 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 receptivo, 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 mucho, el mejor creador de páginas cuando se trata de editar la versión móvil de su sitio web. Puede suceder que no haya notado este pequeño ícono, llamado ícono de ventana gráfica, en la configuración :
Este ícono indica que cualquier valor que lo tenga al lado se puede editar por separado para la versión de escritorio y para el sitio móvil. Tomemos como ejemplo la configuración de ancho de columna: puede ajustar el valor para computadoras de escritorio, dispositivos móviles y tabletas. El valor que ingrese para cada dispositivo será válido solo para ese dispositivo seleccionado. Tenga en cuenta que la etiqueta HTML no tiene el icono junto a ella, lo que significa que tiene el mismo valor para todos los dispositivos.
En caso de que desee cambiar el valor para el dispositivo móvil, todo lo que necesita es elegir la opción de diseño móvil e ingresar los valores deseados (estos valores se implementarán solo en dispositivos móviles). En el lado derecho de la pantalla, tiene la vista previa en vivo de todos los cambios que realiza, para que pueda ver cómo se verán los nuevos valores en el dispositivo de inmediato.
Para volver a la vista de escritorio, debe cambiar a la opción de diseño de escritorio. Puede hacerlo, como hemos mencionado anteriormente o usando este pequeño icono en el menú inferior de la página :
Una cosa más importante que mencionar relacionada con la capacidad de respuesta es que las columnas y filas se pueden desactivar para dispositivos individuales, es decir, podemos decir que no estarán visibles (o estarán visibles) en algunos tamaños de pantalla.
Para acceder a esta opción siga la ruta:
- Haga clic derecho en la fila/columna
- Seleccione Editar Sección
- Haga clic en la pestaña Avanzado
- Seleccione el menú desplegable Responsivo
Esta opción es muy importante en el caso de que tengamos un apartado que sabemos que solo tiene sentido mostrar en el escritorio, por lo que lo cancelaremos en otros dispositivos. Y para compensar la falta de ella, podemos hacer una sección que se verá en todos los demás dispositivos, excepto en el escritorio.
En cuanto a las columnas, también podemos encontrar la opción de columna Inversa (Tablet/Móvil). Lo mejor es explicar esto a través de un ejemplo. Digamos que tenemos una sección como esta en el escritorio donde el contenido se divide en dos columnas con imágenes seguidas de un breve texto :
Naturalmente, en los dispositivos móviles, el contenido se reorganizará como en la imagen a continuación, siguiendo el orden original del escritorio:
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 un contenido que se muestra de manera más efectiva:
Cómo editar la versión móvil de su sitio con complementos
Tarde o temprano, tendrá la tentación de usar una variedad de complementos que le faciliten agregar una barra lateral, un CTA, un widget o un elemento similar a su sitio. Este es el momento en el que muchos olvidan que una barra lateral o cualquier otro elemento que funcione perfectamente en una pantalla de escritorio, podría no ser tan bueno en el móvil. Entonces, antes de saltar para aprovechar estas prácticas herramientas, verifique si también responden. La verdad es que muchos de ellos lo son y pueden ayudarte a mejorar la UX. Pero para estar seguro, 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 está en el camino hacia el éxito. Tampoco olvidemos que tus opciones varían mucho según el tema que estés usando. Un tema premiumsin duda garantiza muchas más posibilidades.
Menú receptivo: 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 visitan su sitio. Afecta qué tan rápido el visitante encontrará lo que vino a buscar, cuánto tiempo se quedará y muchos otros aspectos de UX. Es importante tener un menú hermoso y bien estructurado que facilite la navegación, pero no es tan simple como parece. Es posible que tenga un excelente menú 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 su versión de escritorio al tamaño de la pantalla del móvil también. Pero, ¿y si eso implica perder demasiada información útil? En ese caso, puede crear un menú diferente, personalizado solo 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 muchosexcelentes complementos para menús receptivos. Nuestra recomendación es el complemento Responsive Menu que incluye más de 150 opciones de personalización y no requiere ningún conocimiento 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 es especialmente útil para los principiantes.
Imágenes y galerías
Una imagen habla miles de idiomas, así que asegúrese de que la suya se vea 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 fotos son imprescindibles. Pero, sin importar qué tan buenas imágenes tenga, si se cargan lentamente o si no se presentan de forma ordenada, corre el riesgo de perder un porcentaje significativo de su audiencia. Entonces, para asegurarse de evitar ese escenario, recomendamos el complemento Envira Gallery Lite que lo ayudará a crear poderosas galerías 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.
Cuando tienes un excelente menú receptivo y galerías impresionantes, lo siguiente que debes cuidar son los botones para compartir en redes sociales. Su tamaño debe personalizarse para 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 ayudarte 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 fácil tanto para usted como para los visitantes de su sitio.
Sitios web compatibles con dispositivos móviles
En situaciones en las que necesita que su sitio responda rápidamente a dispositivos móviles, no hay mejor solución que un complemento como WPtouch. 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 sea recomendado por Google dice mucho sobre 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 compatible con dispositivos móviles 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 Accelerated Mobile Pages, ya que es una de las formas más rápidas y sencillas de mejorar la velocidad de carga de su sitio.
Evite agregar ventanas emergentes en dispositivos móviles
Las ventanas emergentes rara vez son divertidas, pero son especialmente irritantes en los móviles. Ocupan gran parte de la pantalla y requieren que el visitante las descarte antes de acceder al contenido de la página. Por eso, lo mejor es evitarlos por completo en la versión móvil de tu sitio. La forma en que los evitará depende principalmente de su proveedor de servicios, pero la mayoría de ellos tienen una opción para deshabilitar 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 la cantidad de personas que usan 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 de WP compatible con dispositivos móviles y un creador de páginas que tenga todas las opciones que necesita.
Entonces, ¿qué tan receptivo es su sitio? ¿Tienes que hacer muchos cambios para hacerlo más compatible con dispositivos móviles? Comparta sus respuestas con nosotros y no dude en solicitar más información en la sección de comentarios.