El sitio WordPress se ve mal en el móvil
Contenidos
En WordPress 4.5, se introdujo una nueva vista responsive en el Personalizador de Temas. Este artículo cubrirá qué es la vista responsive en el Personalizador de Temas, por qué es útil y, finalmente, cómo usarla como desarrollador.
La vista responsiva le permite visualizar su sitio web en un formato distinto al que está utilizando actualmente. Por ejemplo, podrás ver cómo se visualiza tu sitio web en un smartphone, directamente en tu navegador de escritorio, sin necesidad de utilizar un dispositivo móvil real.
Es realmente útil, ya que puedes probar en un dispositivo más pequeño los cambios que hagas en tu tema con el Personalizador de temas, sin tener que guardarlos antes. Eso significa que no romperás nada sólo porque necesitabas probar en un dispositivo móvil.
Básicamente, lo único que hará la vista responsive es reducir el marco en el que ves tu sitio web. Es más o menos lo que ocurre cuando cambias el tamaño de la ventana de tu navegador, o cuando utilizas la propia vista responsive de tu navegador.
Cambiar el tamaño de la ventana (o el tamaño de la ventana gráfica en el caso de la vista adaptable del navegador) es suficiente para ver cómo se ve tu sitio web en dispositivos más pequeños. Sin embargo, hay un problema cuando se utiliza el personalizador de temas: la barra lateral (el propio personalizador) también cambiará de tamaño. Si quieres hacer pruebas en dispositivos muy pequeños, como un smartphone, no es muy práctico.
¿Cómo puedo cambiar el aspecto de WordPress?
Vaya a Apariencia → Personalizar y haga clic en la sección Identidad del sitio. Haz clic en Seleccionar logotipo para abrir los Medios de tu sitio. Sube una nueva imagen o selecciona una que ya esté en tus Medios. Haz clic en Establecer como logotipo y verás que tu logotipo aparece en la ventana de vista previa.
¿Cómo cambio la vista de móvil a vista de escritorio en WordPress?
Simplemente acceda a su panel de WordPress y vaya a la pantalla Apariencia ” Personalizar. En la parte inferior de la pantalla, haga clic en el icono móvil. Verás una vista previa de cómo se ve tu sitio en dispositivos móviles. Nota: Los símbolos azules de edición sólo están presentes en la vista previa.
WordPress compatible con móviles
GitHub – junto con el propio Git – te ayuda a implementar el control de versiones para tu código base, lo que puede ser muy útil para el desarrollo de WordPress y la colaboración en proyectos. Además, GitHub Pages proporciona un cómodo espacio de alojamiento gratuito para un sitio de WordPress, siempre que estés de acuerdo con utilizar un enfoque estático de WordPress.
Para empezar, crea un sitio de desarrollo local de WordPress. Este es el sitio donde trabajarás en tus proyectos y harás cambios. A continuación, controlarás las versiones y confirmarás los cambios mediante Git y GitHub.
Si te sientes cómodo trabajando desde la línea de comandos, puedes instalar la última versión de Git y empezar desde ahí. Pero si no te gusta utilizar la línea de comandos, te recomendamos que instales el cliente de escritorio de GitHub, ya que te proporcionará una interfaz visual para trabajar con Git.
Dale un nombre que coincida con la carpeta del tema o plugin en el que estás trabajando. A continuación, en Ruta local, introduce la ruta a la carpeta padre del tema o plugin en tu sitio local de WordPress. Esencialmente, estarás creando un repositorio para este tema o plugin específico para que puedas gestionar fácilmente tu trabajo.
WordPress responsive
Incluso si utiliza un tema de WordPress adaptable, debe comprobar cómo se ve su sitio en dispositivos móviles. Incluso es posible que desee crear diferentes versiones de las páginas de destino clave que están optimizados para las necesidades de los usuarios móviles (más sobre esto más adelante).
Es importante tener en cuenta que la mayoría de las vistas previas móviles no serán completamente perfectas porque hay muchos tamaños de pantalla y navegadores móviles diferentes. La prueba final debería ser siempre ver el sitio en un dispositivo móvil real.
Esto te permite hacer varias cosas más. Puedes comprobar cómo se vería tu sitio en distintos tipos de smartphones. También puede simular el rendimiento de su sitio en conexiones 3G rápidas o lentas. Incluso puedes rotar la pantalla del móvil con el icono de rotación.
Muchos temas y plugins premium te permiten crear elementos que se muestren de forma diferente en el escritorio y en el móvil. También puedes utilizar un plugin constructor de páginas como SeedProd para editar tus páginas de destino en vista móvil.
Definitivamente debe crear contenido específico para móviles para sus formularios de generación de prospectos. En los dispositivos móviles, estos deben pedir información mínima, idealmente sólo una dirección de correo electrónico. También deben ser atractivos y fáciles de cerrar.
CSS es el lenguaje que permite que los sitios web tengan un aspecto diferente; CSS Hero es un práctico editor de temas WYSIWYG para WordPress que le ayudará a realizar cambios visuales en su sitio web con una interfaz de apuntar y hacer clic, en lugar de codificar. CSS Hero generará automáticamente el código CSS necesario y lo desplegará en tu sitio web al guardarlo.
¡No hay ningún problema! La renovación sólo es necesaria para actualizaciones y soporte. Tus cambios CSS seguirán funcionando perfectamente y el producto seguirá lanzándose. La renovación no es automática, CSS Hero nunca te cobrará ninguna cantidad si no lo dispones directamente. Simplemente recibirás una oferta para renovar tu cuenta un mes antes de la fecha de caducidad. Tenemos distintas ofertas para actualizar y renovar tu plan, así que echa un vistazo a nuestro boletín. ¡Trabajamos para hacer felices a nuestros héroes!
Cada plan caduca a los 365 días de la fecha de compra. Al final de ese periodo CSS Hero seguirá funcionando, pero no podrás instalar CSS Hero en NUEVOS (otros) sitios. Al final de tu plan anual de CSS Hero, tu plan NO se renovará automáticamente.