Cómo optimizar un sitio web para verlo en dispositivos móviles
Configurar la vista de la página en varios dispositivos en el área visible
El área visible es una configuración que determina qué bloques pueden o no mostrarse en ciertos tipos de dispositivos. Puedes ajustar este parámetro en el panel de Configuración de cualquier bloque.
Por qué puede necesitarlo y cómo funciona
Si un bloque se ve bien en el escritorio pero no tan bien en el móvil, es posible que desee establecer la visibilidad del bloque en 980px o más. De esta manera, el bloque se orientará al escritorio y no aparecerá en dispositivos móviles.
Después de eso, copie el bloque y optimícelo para verlo en dispositivos móviles ajustando su configuración (lo que puede implicar cambiar la imagen, la fuente, etc.). Establezca la visibilidad del bloque en "0-980px". Como resultado, obtendrá una versión móvil del bloque.
Al final, aquellos que accedan a su sitio web desde una PC verán la versión de escritorio y los usuarios móviles la versión móvil.
La visibilidad del bloque es un parámetro que puede encontrar en el panel Configuración de cualquier bloque y ajustar para que el bloque aparezca o no aparezca en dispositivos con una resolución de pantalla determinada. Por ejemplo, algunos bloques no se ven bien en tabletas y otros en teléfonos móviles.
Si un bloque se ve bien en el escritorio pero no tan bien en el móvil, es posible que desee establecer la visibilidad del bloque en 980px o más. De esta manera, el bloque se orientará al escritorio y no aparecerá en dispositivos móviles.
Después de eso, copie el bloque y optimícelo para verlo en dispositivos móviles ajustando su configuración (lo que puede implicar cambiar la imagen, la fuente, etc.). Establezca la visibilidad del bloque en "0-980px". Como resultado, obtendrá una versión móvil del bloque.
Al final, aquellos que accedan a su sitio web desde una PC verán la versión de escritorio y los usuarios móviles la versión móvil.
La visibilidad del bloque es un parámetro que puede encontrar en el panel Configuración de cualquier bloque y ajustar para que el bloque aparezca o no aparezca en dispositivos con una resolución de pantalla determinada. Por ejemplo, algunos bloques no se ven bien en tabletas y otros en teléfonos móviles.
Ejemplo
Tenemos una portada que se ve muy bien en el escritorio, el texto alineado a la izquierda y el objeto principal a la derecha. Ahora, ajustémoslo para que también se vea bien en dispositivos móviles.
Como vemos, la portada se recorta en el móvil y no se ve muy bien.
Para evitar que aparezca en dispositivos móviles, vaya al panel Configuración del bloque de cubierta y establezca la visibilidad del bloque en "> 980px". Ahora, los usuarios móviles ya no lo verán.
Copia el bloque.
Ajuste el bloque para la versión móvil: cambie la alineación de la foto y el texto.
Ahora que hemos establecido la visibilidad del bloque en "≤ 980px", no aparecerá en dispositivos con pantallas más anchas que 980px.
¡Hecho! Ahora la portada se muestra de forma diferente según el ancho de la pantalla.
Ejemplos de ancho de pantalla para varios dispositivos:
iPhone5: 320px
iPhone6: 375px
iPhone6+: 414px
iPad: 1024px
Samsung Galaxy: 360px
Nokia Lumia: 320px
iPhone6: 375px
iPhone6+: 414px
iPad: 1024px
Samsung Galaxy: 360px
Nokia Lumia: 320px
