Cómo editar la versión móvil del sitio de WordPress y por qué es importante

¿Por qué la versión móvil de su sitio es esencial para su éxito? Comencemos con el hecho de que más del 50% del tráfico web global proviene de teléfonos móviles. Esto literalmente significa que más de la mitad de sus clientes revisan su sitio en su móvil. A partir de 2018, cuando Google ha iniciado la indexación de sitios web en dispositivos móviles, el diseño web receptivo se ha vuelto aún más importante, y centrarse en la experiencia móvil de un sitio web se ha convertido lógicamente en una prioridad para cualquier persona que tome su negocio en serio. Otra ventaja importante de los sitios móviles amigables es que son simples e intuitivos. Proporcionan una experiencia de usuario fluida, facilitando su contacto por parte de clientes potenciales. Además, se carga rápidamente y prepara el contenido de contenido fácil y natural. Una forma de pensar en un sitio receptivo es verlo como una forma gratuita de posicionarse en los motores de búsqueda. ¿Por qué te pierdes esta oportunidad? Cuanto mejor se clasifique, los resultados de búsqueda más 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
¿Por qué es importante Page Builder para RWD?
Cómo editar la versión móvil de su sitio en Elementor
Cómo editar la versión móvil de su sitio con complementos
Leer también:
Cómo comenzar una tienda en línea en 2021 (guía detallada)
20 Tarea gratuita de WordPress para diferentes negocios
10+ Los mejores proveedores de alojamiento de WordPress para cualquier tipo de sitio web
Cómo obtener una vista previa de la versión móvil de su sitio web
Un tema receptivo de WordPress garantiza muchas ventajas, pero aún tiene que verificar cómo se ve su sitio en los teléfonos inteligentes en tiempo real. Hay muchas variaciones posibles en el tamaño de la 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 cuando mira su sitio en un teléfono inteligente o dispositivo real. Esto puede inspirarlo a optimizar sus páginas de destino clave y crear diferentes versiones optimizadas para la experiencia móvil.
Uso de la personalización de WordPress
La primera y más simple forma de ver la vista previa de la versión móvil es usar el tema WP. El procedimiento es simple. Inicie sesión en el tablero de WordPress y vaya a buscar> Personalización.
Después de hacer clic en WordPress Temo Customizer y abrirlo, verá todas las opciones en el menú izquierdo. Puede haber algunas variaciones en las opciones que se ofrecen, dependiendo del tema que use.

Observe el icono 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 los dispositivos móviles.

Si los símbolos de edición azul te confunden, no te preocupes. Solo son visibles en la vista previa y nunca en su sitio en vivo. Consejo: 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 ingresar con su sitio.. Tilizando los desarrolladores del modo de dispositivo para desarrolladores Google Chrome

Si no se siente cómodo usando el personalizador del tema WP por cualquier razón, puede verificar en cualquier momento si tiene un WordPress amigable con Google Chrome Browser. También es un procedimiento muy simple y fácil, que consiste en unos pocos pasos.
Simplemente abra su navegador Google Chrome como suele hacer y acceda a la página que desea verificar. Luego haga clic derecho en la página y elija Inspect.
Tenga en cuenta que de esta manera puede ver una vista previa de cualquier página en cualquier sitio, no solo la suya. Incluso podría ser el sitio web de su competidor. En el lado derecho, se abrirá un nuevo panel y se verá así:
La vista del desarrollador le permite ver el código fuente HTML de su sitio web. Ahora, haga clic en el botón de herramienta para ver el dispositivo para ver la vista móvil.

Notará algunos cambios en la vista previa móvil: su sitio se reduce para que coincida con el tamaño de la pantalla móvil y pueden ocurrir otros cambios. Mire y observe las diferencias cuidadosamente y observe lo que debe cambiar. Verifique lo que sucede cuando intenta cruzar el cursor del mouse sobre la vista móvil: se convierte en un círculo.

El punto del círculo es imitar la pantalla táctil en un dispositivo móvil. Consejo: si desea ver cómo se amplía y reduce la pantalla móvil, mantenga presionada la tecla de cambio y haga clic y mueva el mouse. La ventaja de usar este método para obtener una vista previa de su sitio móvil es que le permite ver cómo se ve la página en diferentes tipos de teléfonos inteligentes. Estas opciones adicionales están por encima de la visualización móvil de su sitio. No importa qué tipo de vista previa haya abierto cuando haga clic en la barra de herramientas del dispositivo, aquí puede cambiar el tamaño del dispositivo. Gire la pantalla móvil. También puede inspeccionar los elementos en la página haciendo clic en la derecha y seleccionando la opción de inspección.

¿Por qué es importante el constructor de páginas para RWD?

RWD es algo de lo que debe pensar cuidadosamente desde el comienzo de la creación de su sitio web. Hay muchas cosas que analizar cuando tiene que hacer que su sitio sea atractivo, navegable y eficiente en diferentes tamaños de pantalla. Los creadores de la página de WordPress juegan un papel decisivo en este proceso, le ofrecen las piedras básicas del diseño de su sitio, por lo que debe informarse bien antes de tomar la decisión. Por lo tanto, invertir algo de tiempo en la investigación de los constructores de páginas, en realidad ahorrará mucho tiempo para pasar para crear su sitio.

Según nuestra experiencia, Wpbakery y Elementor son excelentes opciones porque pueden satisfacer una amplia gama de necesidades diferentes. Si tiene un presupuesto limitado, Elementor es la mejor apuesta. Es un complemento simple para usar, amigable 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 superiores y servicios 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 multitud 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 pretende usar también es importante porque puede proporcionar algunas características sorprendentes. Como probablemente sepa, los autores desarrollan widgets y elementos específicos que pueden ajustarse por separado por páginas. Muchos de estos elementos le permiten establecer la capacidad de respuesta de acuerdo con sus necesidades. Esto es especialmente importante si desea usar un tema gratuito de WordPress. Para ahorrar tiempo y nervios, probamos muchas tareas gratuitas. Entonces, si desea utilizar un tema receptivo, rico y confiable gratuito, 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 generador de páginas cuando se trata de editar la versión móvil de su sitio web. Es posible que no haya notado este pequeño icono, llamado icono de la vista de la vista, en Configuración: este icono indica que cualquier valor al lado se puede editar por separado para el escritorio y para la versión del sitio móvil. Tomemos, por ejemplo, la configuración de ancho de la columna: puede ajustar el valor para escritorio, móvil y tableta. El valor que ingrese para cada dispositivo solo será válido para ese dispositivo seleccionado. Observe que la etiqueta HTML no tiene el icono al lado, lo que significa que tiene el mismo valor para cada dispositivo.
Si desea cambiar el valor para el dispositivo móvil, todo lo que es necesario es elegir la opción Mobile de diseño e ingresar los valores deseados (estos valores solo se implementarán 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 tan pronto como los nuevos valores se vean en el dispositivo.
Para volver a la visualización de escritorio, debe cambiar a la opción de apariencia de escritorio. Puede hacer esto, como mencioné anteriormente o usando este pequeño icono en el menú inferior:
Una cosa más importante a mencionar sobre la receptividad es que las columnas y las filas se pueden deshabilitar para dispositivos individuales, es decir, podemos decir que no serán visibles (o serán visibles) en algunas dimensiones de la pantalla. Para acceder a esta opción, siga el camino:
Haga clic en la derecha en una fila/columna

Seleccione Editar la sección

Haga clic en la pestaña AdvancesatoseSesesese.

Esta opción es muy importante si tenemos una sección que sabemos que se muestra en el escritorio, por lo que la cancelaremos en otros dispositivos. Y para compensar su falta, podemos hacer 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). Es mejor explicar esto por un ejemplo. Supongamos que tenemos una sección como esta en el escritorio en la que el contenido se divide en dos columnas con imágenes seguidas de un texto corto:
Por supuesto, en los dispositivos móviles, el contenido se reorganizará como en la imagen a continuación, siguiendo el orden inicial en el escritorio:
La opción de columna inversa nos permite cambiar el orden de una determinada sección para dispositivos móviles o modelos de tabletas. Cuando lo hacemos para la primera sección en dispositivos más pequeños, el resultado es el contenido mostrado de manera más eficiente:
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 facilitan la adición de una barra lateral, un CTA, un widget o un elemento similar en su sitio. Este es el momento en que muchos olvidan que una barra lateral o cualquier otro elemento que Funciona perfectamente en una pantalla de escritorio puede no ser tan bueno en el móvil. Entonces, antes de saltar para aprovechar estas herramientas en cuestión, verifique si son receptivas. La verdad es que muchos de ellos son y pueden ayudarlo a mejorar UX. Pero para saber eso con seguridad, lea las reseñas o busque una demostración antes de instalar cualquiera. Mientras el complemento se comporte bien en los dispositivos móviles, puede estar seguro de que su sitio está en el camino hacia el éxito. Además, no olvidemos que sus opciones varían mucho dependiendo del tema que use. Un tema premium ciertamente garantiza muchas más posibilidades. Receptivo: la primera impresión importa
El menú es el pilar de la experiencia del usuario. Es la primera o una de las primeras cosas que hacen clic en alguien al visitar su sitio. Afecta la rapidez con que el visitante encontrará lo que ha surgido, cuánto quedará y muchos otros aspectos de UX. Es importante tener un menú hermoso y bien estructurado que haga una navegación suave, pero no es tan simple como parece. Es posible que tenga un gran menú que funcione perfectamente en un escritorio, pero es demasiado difícil para un móvil. Una solución en este caso es ajustar la versión de escritorio y el tamaño de la pantalla móvil. Pero, ¿qué sucede si esto implica la pérdida de demasiada información útil? En este caso, puede crear un menú diferente, personalizado solo para el tamaño de la pantalla móvil. Muchos temas de WP vienen con la opción de hacer esto. Si su tema no es uno de estos, no se preocupe, hay muchos complementos excelentes para los menús receptivos. Nuestra recomendación es el complemento de respuesta de menú, que incluye más de 150 opciones de personalización y requiere conocimiento de codificación cero. Le permite agregar animaciones, imágenes de fondo, establecer la posición de los botones de menú y más. Es increíblemente fácil de usar, por lo que es particularmente útil para principiantes. Imagini y galerías

Una imagen habla miles de idiomas, así que asegúrese de que el suyo se vea tan sorprendente en cualquier tamaño de pantalla. Vivimos en una cultura muy visualmente orientada y, independientemente del nicho en el que seas, las excelentes fotos son una necesidad. Pero no importa cuán bueno tenga imágenes, si se están cargando lentamente o no bien presentados, corre el riesgo de perder un porcentaje significativo de la audiencia. Por lo tanto, para asegurarse de evitar este escenario, recomendamos el complemento Envira Gallery Lite que lo ayudará a crear galerías fuertes como un profesional. Algunas de sus ventajas son que está altamente optimizado para el rendimiento web y del servidor, lo cual es una excelente noticia para SEO. Invitados para compartir social

Cuando tienes un gran menú, galerías receptivas y sorprendentes, lo siguiente que debe cuidar son los botones de intercambio social. Su tamaño debe personalizarse de acuerdo con el dispositivo. Un botón grande en una pantalla pequeña hace que el visitante haga clic en Western, lo cual es bastante molesto. Por otro lado, los botones pequeños en una pantalla grande no son tan fáciles de reconocer. Un complemento que puede ayudarlo a tener botones personalizados es el complemento descarado Social Share. Fácil de usar, completamente gratis y amigable para principiantes, compartiendo una brisa tanto para usted como para los visitantes de su sitio.

Sitios web móviles

En situaciones en las que necesita hacer que su sitio móvil responda rápidamente, no hay mejor solución que un complemento como WPTOuch. Este complemento se realiza de tal manera que agregue automáticamente un tema móvil simple y elegante a su sitio WP. El hecho de que Google lo recomiende mucho sobre su efectividad. Por lo tanto, incluso si no tiene una versión móvil de su sitio, un complemento como este puede activar instantáneamente una versión adaptada para dispositivos móviles de su sitio para que no pierda su clasificación. También le permite personalizar muchos aspectos del aspecto 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 está experimentando algunos desafíos en esta área, considere usar el complemento de páginas móviles Acceleted, ya que es una de las formas más rápidas y simples de mejorar la velocidad de carga de su sitio.
Las ventanas emergentes rara vez son divertidas, pero son especialmente irritantes en los teléfonos móviles. Cubren una gran parte de la pantalla y le piden al visitante que los rechace antes de acceder al contenido de la página. Por lo tanto, es mejor evitarlos completamente en la versión móvil de su sitio. Cómo los evitará, depende en gran medida de su proveedor de servicios, pero la mayoría de ellos tienen la opción de deshabilitar las ventanas emergentes intrusivas en los teléfonos móviles. Además, tenga en cuenta que Google penaliza los sitios que tienen ventanas emergentes muy intrusivas.
En conclusión
Debido a que el número de personas que usan teléfonos inteligentes para acceder a Internet aumenta constantemente, es lógico esperar muchas más soluciones y opciones para las versiones móviles de los sitios.Los diseñadores trabajan duro para abordar la multitud de modelos de modelado, sin embargo, los elementos básicos de RWD son los mismos: asegúrese de elegir un tema WP para dispositivos móviles y un generador de páginas que tenga todas las opciones que necesita.Entonces, ¿qué tan receptivo es su sitio?¿Tienes que hacer muchos cambios para hacerla más amigable con los dispositivos móviles?Comparta nuestras respuestas y no dude en solicitar más información en la sección de comentarios. Captivando la correa para la galería de fotos de WordPress
Temas de WordPress para agentes creativos para profesionales creativos
Cómo actualizar WordPress de la forma más simple