\n
C\u00f3mo obtener una vista previa de la versi\u00f3n m\u00f3vil de su sitio web<\/h2>\n
Un tema responsivo de WordPress garantiza muchas ventajas, pero a\u00fan necesita verificar c\u00f3mo se ve su sitio en los tel\u00e9fonos inteligentes en tiempo real<\/strong>. Hay muchas variaciones posibles en los tama\u00f1os de pantalla y los navegadores, por lo que ninguna de las vistas previas m\u00f3viles puede brindarle una vista previa perfecta y 100% precisa<\/strong>. Siempre debe confiar en la experiencia real que obtiene al mirar su sitio en un tel\u00e9fono inteligente o dispositivo m\u00f3vil real. Esto podr\u00eda inspirarlo a optimizar sus p\u00e1ginas de destino clave y crear diferentes versiones optimizadas para la experiencia m\u00f3vil.<\/p>\n Entonces, veamos c\u00f3mo puede obtener una vista previa si tiene un sitio optimizado para dispositivos m\u00f3viles de WordPress de dos maneras diferentes.<\/p>\n La primera y m\u00e1s sencilla forma de ver la vista previa de la versi\u00f3n m\u00f3vil es usar el Personalizador de temas de WP. El procedimiento es sencillo. Inicie sesi\u00f3n en su panel de WordPress<\/a> y vaya a Apariencia > Personalizar<\/strong>.<\/p>\n Despu\u00e9s de hacer clic en el personalizador de temas de WordPress y abrirlo, ver\u00e1s todas las opciones en el men\u00fa de la izquierda<\/strong>. Puede haber algunas variaciones en las opciones que se ofrecen seg\u00fan el tema que est\u00e9 utilizando.<\/p>\n F\u00edjese en el icono del m\u00f3vil en la parte inferior de la pantalla<\/strong>. Haga clic en \u00e9l y ver\u00e1 una vista previa de c\u00f3mo se ve su sitio en dispositivos m\u00f3viles<\/strong>.<\/p>\n Si los s\u00edmbolos de edici\u00f3n azules lo confunden, no se preocupe. Solo son visibles en la vista previa y nunca en su sitio en vivo.<\/p>\n Sugerencia: si a\u00fan no ha lanzado su blog o si est\u00e1 en modo de mantenimiento, este m\u00e9todo de vista previa es muy \u00fatil, ya que le permite realizar cambios y verificar c\u00f3mo se ven antes de publicar su sitio<\/strong>.<\/p>\n Si no se siente c\u00f3modo usando el personalizador de temas de WP por alg\u00fan motivo, siempre puede verificar si tiene WordPress compatible con dispositivos m\u00f3viles con el navegador Google Chrome<\/strong>. Adem\u00e1s es un procedimiento muy sencillo y f\u00e1cil que consta de un par de pasos.<\/p>\n Simplemente abra su navegador Google Chrome como lo hace normalmente y vaya a la p\u00e1gina que desea verificar. Luego, haga clic con el bot\u00f3n derecho en la p\u00e1gina y seleccione Inspeccionar<\/strong>.<\/p>\n Tenga en cuenta que de esta manera puede ver una vista previa de cualquier p\u00e1gina en cualquier sitio<\/strong>, no solo el suyo. Incluso podr\u00eda ser el sitio web de su competidor.<\/p>\n En su lado derecho, se abrir\u00e1 un nuevo panel y se ver\u00e1 as\u00ed:<\/p>\n La vista de desarrollador le permite ver el c\u00f3digo fuente HTML de su sitio web. Notar\u00e1 algunos cambios en la vista previa m\u00f3vil: su sitio web se reduce para ajustarse al tama\u00f1o de la pantalla m\u00f3vil y es posible que se produzcan otros cambios. Mire y observe las diferencias cuidadosamente y anote lo que debe cambiar.<\/p>\n Compruebe lo que sucede cuando intenta pasar el cursor del mouse sobre la vista m\u00f3vil: se convierte en un c\u00edrculo.<\/p>\n El objetivo del c\u00edrculo es imitar la pantalla t\u00e1ctil de un dispositivo m\u00f3vil.<\/p>\n Sugerencia: si desea ver c\u00f3mo se acerca y se aleja la pantalla de su dispositivo m\u00f3vil, mantenga presionada la tecla May\u00fas y haga clic y mueva el mouse<\/strong>.<\/p>\n La ventaja de usar este m\u00e9todo para obtener una vista previa de su sitio web m\u00f3vil es que le permite ver c\u00f3mo se ve la p\u00e1gina en diferentes tipos de tel\u00e9fonos inteligentes. Estas opciones adicionales se encuentran arriba de la vista m\u00f3vil de su sitio. No importa qu\u00e9 tipo de vista previa haya abierto cuando hizo clic en Alternar barra de herramientas del dispositivo, aqu\u00ed puede cambiar el tama\u00f1o de la pantalla del dispositivo.<\/p>\n Sugerencia: use el \u00edcono de rotaci\u00f3n en la esquina superior derecha para rotar la pantalla del m\u00f3vil. Tambi\u00e9n puede inspeccionar elementos en la p\u00e1gina<\/a><\/strong> haciendo clic con el bot\u00f3n derecho y seleccionando la opci\u00f3n Inspeccionar.<\/p>\n RWD es algo en lo que debe pensar detenidamente desde el principio de la creaci\u00f3n 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\u00f1os de pantalla. Los creadores de p\u00e1ginas de WordPress<\/a> tienen un papel decisivo en este proceso, le brindan las piedras angulares del dise\u00f1o de su sitio, por lo tanto, debe informarse bien antes de tomar la decisi\u00f3n<\/strong>. Por lo tanto, al invertir algo de tiempo en la investigaci\u00f3n sobre los creadores de p\u00e1ginas, en realidad ahorrar\u00e1 mucho tiempo que puede dedicar a crear su sitio web.<\/p>\n Seg\u00fan nuestra experiencia, WPBakery<\/a> y Elementor<\/a> son excelentes opciones, ya que pueden satisfacer una amplia gama de necesidades diferentes.<\/p>\n Si tienes un presupuesto limitado, Elementor es tu mejor opci\u00f3n<\/strong>. Es un complemento f\u00e1cil de usar y f\u00e1cil de usar para principiantes que tiene una versi\u00f3n gratuita muy generosa con un conjunto s\u00f3lido de elementos. Tambi\u00e9n se integra bien con otros complementos<\/strong> y servicios l\u00edderes de WP como MailChimp<\/a>, WooCommerce<\/a>, HubSpot<\/a>, Yoast SEO<\/a>, etc. Si puede pagar un complemento premium, WPBakery Page Builder<\/strong> nunca lo decepcionar\u00e1. Viene con una colecci\u00f3n incre\u00edblemente grande de elementos, una gran cantidad de bloques y opciones. Tambi\u00e9n es f\u00e1cil de usar y permite mucha creatividad.<\/p>\n Si bien los creadores de p\u00e1ginas son esenciales para RWD, el tema que planea usar tambi\u00e9n es importante, ya que puede ofrecer algunas caracter\u00edsticas sorprendentes<\/strong>. Como sabr\u00e1, los autores de temas desarrollan widgets y elementos espec\u00edficos que se pueden ajustar por separado de los creadores de p\u00e1ginas. Muchos de estos elementos le permiten configurar la capacidad de respuesta seg\u00fan sus necesidades. Por esta raz\u00f3n, debe elegir el tema desarrollado por autores reconocidos y confiables<\/strong>. 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<\/a>.<\/p>\n Es seguro decir que Elementor es, con mucho, el mejor creador de p\u00e1ginas cuando se trata de editar la versi\u00f3n m\u00f3vil de su sitio web. Puede suceder que no haya notado este peque\u00f1o \u00edcono, llamado \u00edcono de ventana gr\u00e1fica, en la configuraci\u00f3n<\/strong> :<\/p>\n Este \u00edcono indica que cualquier valor que lo tenga al lado se puede editar por separado para la versi\u00f3n de escritorio y para el sitio m\u00f3vil<\/strong>. Tomemos como ejemplo la configuraci\u00f3n de ancho de columna: puede ajustar el valor para computadoras de escritorio, dispositivos m\u00f3viles y tabletas<\/strong>. El valor que ingrese para cada dispositivo ser\u00e1 v\u00e1lido 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.<\/p>\n En caso de que desee cambiar el valor para el dispositivo m\u00f3vil, todo lo que necesita es elegir la opci\u00f3n de dise\u00f1o m\u00f3vil e ingresar los valores deseados<\/strong> (estos valores se implementar\u00e1n solo en dispositivos m\u00f3viles). En el lado derecho de la pantalla, tiene la vista previa en vivo de todos los cambios que realiza, para que pueda ver c\u00f3mo se ver\u00e1n los nuevos valores en el dispositivo de inmediato.<\/p>\n Para volver a la vista de escritorio, debe cambiar a la opci\u00f3n de dise\u00f1o de escritorio<\/strong>. Puede hacerlo, como hemos mencionado anteriormente o usando este peque\u00f1o icono en el men\u00fa inferior de la p\u00e1gina<\/strong> :<\/p>\n Una cosa m\u00e1s importante que mencionar relacionada con la capacidad de respuesta es que las columnas y filas se pueden desactivar para dispositivos individuales<\/strong>, es decir, podemos decir que no estar\u00e1n visibles (o estar\u00e1n visibles) en algunos tama\u00f1os de pantalla.<\/p>\n Para acceder a esta opci\u00f3n siga la ruta:<\/p>\n Esta opci\u00f3n 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\u00f3n que se ver\u00e1 en todos los dem\u00e1s dispositivos, excepto en el escritorio.<\/p>\n En cuanto a las columnas, tambi\u00e9n podemos encontrar la opci\u00f3n de columna Inversa<\/strong> (Tablet\/M\u00f3vil). Lo mejor es explicar esto a trav\u00e9s de un ejemplo. Digamos que tenemos una secci\u00f3n como esta en el escritorio donde el contenido se divide en dos columnas con im\u00e1genes seguidas de un breve texto<\/strong> :<\/p>\n Naturalmente, en los dispositivos m\u00f3viles, el contenido se reorganizar\u00e1 como en la imagen a continuaci\u00f3n, siguiendo el orden original del escritorio:<\/p>\n La opci\u00f3n de columna inversa nos permite cambiar el orden de una determinada secci\u00f3n para dispositivos m\u00f3viles o dise\u00f1os de tabletas<\/strong>. Cuando lo hacemos para la primera secci\u00f3n en dispositivos m\u00e1s peque\u00f1os, el resultado es un contenido que se muestra de manera m\u00e1s efectiva:<\/p>\n Tarde o temprano, tendr\u00e1 la tentaci\u00f3n 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\u00eda no ser tan bueno en el m\u00f3vil<\/strong>. Entonces, antes de saltar para aprovechar estas pr\u00e1cticas herramientas, verifique si tambi\u00e9n responden. La verdad es que muchos de ellos lo son y pueden ayudarte a mejorar la UX. Pero para estar seguro, lea las rese\u00f1as o busque una demostraci\u00f3n antes de instalar cualquiera. Siempre que el complemento se comporte bien en dispositivos m\u00f3viles, puede estar seguro de que su sitio web est\u00e1 en el camino hacia el \u00e9xito. Tampoco olvidemos que tus opciones var\u00edan mucho seg\u00fan el tema que est\u00e9s usando<\/strong>. Un tema premium<\/a>sin duda garantiza muchas m\u00e1s posibilidades.<\/p>\n El men\u00fa 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\u00e9 tan r\u00e1pido el visitante encontrar\u00e1 lo que vino a buscar, cu\u00e1nto tiempo se quedar\u00e1 y muchos otros aspectos de UX<\/strong>. Es importante tener un men\u00fa hermoso y bien estructurado que facilite la navegaci\u00f3n, pero no es tan simple como parece. Es posible que tenga un excelente men\u00fa que funcione perfectamente en una computadora de escritorio pero que sea demasiado pesado para un dispositivo m\u00f3vil. Una soluci\u00f3n en este caso es ajustar su versi\u00f3n de escritorio al tama\u00f1o de la pantalla del m\u00f3vil tambi\u00e9n. Pero, \u00bfy si eso implica perder demasiada informaci\u00f3n \u00fatil? En ese caso, puede crear un men\u00fa diferente, personalizado solo para el tama\u00f1o de la pantalla del m\u00f3vil. Muchos temas de WP vienen con la opci\u00f3n de hacer esto. Si tu tema no es uno de esos, no te preocupes, hay muchosexcelentes complementos para men\u00fas receptivos<\/a><\/strong>. Nuestra recomendaci\u00f3n es el complemento Responsive Menu<\/a> que incluye m\u00e1s de 150 opciones de personalizaci\u00f3n y no requiere ning\u00fan conocimiento de codificaci\u00f3n. Le permite agregar animaciones, im\u00e1genes de fondo, establecer la posici\u00f3n de los botones del men\u00fa y mucho m\u00e1s. Es incre\u00edblemente f\u00e1cil de usar, por lo que es especialmente \u00fatil para los principiantes.<\/p>\n Una imagen habla miles de idiomas, as\u00ed que aseg\u00farese de que la suya se vea igual de impresionante en cualquier tama\u00f1o de pantalla<\/strong>. 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\u00e9 tan buenas im\u00e1genes 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<\/a> que lo ayudar\u00e1 a crear poderosas galer\u00edas como un profesional<\/strong>. Algunas de sus ventajas son que est\u00e1 altamente optimizado para el rendimiento web y del servidor, lo cual es una gran noticia para su SEO.<\/p>\n Cuando tienes un excelente men\u00fa receptivo y galer\u00edas impresionantes, lo siguiente que debes cuidar son los botones para compartir en redes sociales<\/a>. Su tama\u00f1o debe personalizarse para el dispositivo<\/strong>. Un bot\u00f3n grande en una pantalla peque\u00f1a hace que el visitante haga clic occidentalmente, y eso es bastante irritante. Por otro lado, los botones peque\u00f1os en una pantalla grande no son tan f\u00e1ciles de reconocer. Un complemento que puede ayudarte a tener botones personalizados es el complemento Sassy Social Share<\/a>. F\u00e1cil de usar, totalmente gratuito y apto para principiantes, hace que compartir sea muy f\u00e1cil tanto para usted como para los visitantes de su sitio.<\/p>\n En situaciones en las que necesita que su sitio responda r\u00e1pidamente a dispositivos m\u00f3viles, no hay mejor soluci\u00f3n que un complemento como WPtouch<\/a>. Este complemento est\u00e1 hecho de tal manera que agrega autom\u00e1ticamente un tema m\u00f3vil simple y elegante a su sitio WP<\/strong>. El hecho de que sea recomendado por Google dice mucho sobre su eficacia. Entonces, incluso si no tiene una versi\u00f3n m\u00f3vil de su sitio, un complemento como este puede habilitar instant\u00e1neamente una versi\u00f3n compatible con dispositivos m\u00f3viles de su sitio web, para que no pierda su clasificaci\u00f3n. Tambi\u00e9n le permite personalizar muchos aspectos de la apariencia del sitio.<\/p>\n La velocidad de carga de la p\u00e1gina tambi\u00e9n es un aspecto muy importante de la experiencia del usuario, especialmente en dispositivos m\u00f3viles. Si enfrenta algunos desaf\u00edos en esta \u00e1rea, considere usar el complemento Accelerated Mobile Pages<\/a>, ya que es una de las formas m\u00e1s r\u00e1pidas y sencillas de mejorar la velocidad de carga de su sitio.<\/p>\n Las ventanas emergentes rara vez son divertidas, pero son especialmente irritantes en los m\u00f3viles. Ocupan gran parte de la pantalla y requieren que el visitante las descarte antes de acceder al contenido de la p\u00e1gina. Por eso, lo mejor es evitarlos por completo en la versi\u00f3n m\u00f3vil de tu sitio<\/strong>. La forma en que los evitar\u00e1 depende principalmente de su proveedor de servicios, pero la mayor\u00eda de ellos tienen una opci\u00f3n para deshabilitar las ventanas emergentes intrusivas en los m\u00f3viles. Tambi\u00e9n tenga en cuenta que Google penaliza los sitios que tienen ventanas emergentes muy intrusivas<\/strong>.<\/p>\n Dado que la cantidad de personas que usan tel\u00e9fonos inteligentes para acceder a Internet aumenta constantemente, tiene sentido esperar muchas m\u00e1s soluciones y opciones para las versiones m\u00f3viles de los sitios. Los dise\u00f1adores est\u00e1n trabajando arduamente para abordar la gran cantidad de patrones de uso, a\u00fan as\u00ed, los conceptos b\u00e1sicos de RWD son los mismos: aseg\u00farese de elegir un tema de WP compatible con dispositivos m\u00f3viles<\/a> y un creador de p\u00e1ginas que tenga todas las opciones que necesita.<\/p>\n Entonces, \u00bfqu\u00e9 tan receptivo es su sitio? \u00bfTienes que hacer muchos cambios para hacerlo m\u00e1s compatible con dispositivos m\u00f3viles? Comparta sus respuestas con nosotros y no dude en solicitar m\u00e1s informaci\u00f3n en la secci\u00f3n de comentarios.<\/p>\nUsando el personalizador de temas de WordPress<\/h3>\n
![\"C\u00f3mo](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e7731a65d0.jpg\")
<\/a><\/p>\n![\"C\u00f3mo](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e773537821.jpg\")
<\/a><\/p>\n![\"C\u00f3mo](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e7739771d3.jpg\")
<\/a><\/p>\nUso del modo de dispositivo de herramientas para desarrolladores de Google Chrome<\/h3>\n
![\"C\u00f3mo](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e773c37a6b.jpg\")
<\/a><\/p>\n![\"C\u00f3mo](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e773fcd9ce.jpg\")
<\/a><\/p>\n
\nAhora, haga clic en el bot\u00f3n Alternar barra de herramientas del dispositivo<\/strong> para ver la vista m\u00f3vil.<\/p>\n![\"C\u00f3mo](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e7742207a5.jpg\")
<\/a><\/p>\n![\"C\u00f3mo](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e7744a51d5.jpg\")
<\/a><\/p>\n![\"C\u00f3mo](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e7746b6c41.jpg\")
<\/a><\/p>\n\u00bfPor qu\u00e9 es importante Page Builder para RWD?<\/h2>\n
C\u00f3mo editar la versi\u00f3n m\u00f3vil de su sitio en Elementor<\/h2>\n
![\"C\u00f3mo](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e77496f309.jpg\")
<\/a><\/p>\n![\"C\u00f3mo](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e774c823e7.jpg\")
<\/a><\/p>\n![\"C\u00f3mo](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e774f43937.jpg\")
<\/a><\/p>\n\n
![\"C\u00f3mo](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e7751c005c.jpg\")
<\/a><\/p>\n![\"C\u00f3mo](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e7754550c7.jpg\")
<\/a><\/p>\n![\"C\u00f3mo](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e7756d019f.jpg\")
<\/a><\/p>\n![\"C\u00f3mo](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e775976759.jpg\")
<\/a><\/p>\nC\u00f3mo editar la versi\u00f3n m\u00f3vil de su sitio con complementos<\/h2>\n
Men\u00fa receptivo: la primera impresi\u00f3n cuenta<\/h3>\n
Im\u00e1genes y galer\u00edas<\/h3>\n
Botones para compartir en redes sociales<\/h3>\n
Sitios web compatibles con dispositivos m\u00f3viles<\/h3>\n
Evite agregar ventanas emergentes en dispositivos m\u00f3viles<\/h3>\n
En conclusi\u00f3n<\/h3>\n