Además del diseño de escritorio, puedes habilitar diseños para tablet y/o dispositivo móvil. Haz clic en 'Viewport (1/2/3)' en la barra de widgets para acceder al panel y activarlos.

En los dispositivos móviles y tablets, la animación 'On Hover' no se puede usar.

Crear una composición

Cuando se activa el diseño móvil, se inicia automáticamente la función 'Mobile Auto-Layout', que renderiza el contenido de la página como un todo de acuerdo con diferentes tamaños de pantalla y organiza los objetos en un solo "flujo", uno tras otro.

Haz clic en 'Create composition' (Crear composición) para ver otros dos métodos que te ayudarán a generar el diseño móvil fácilmente:

Fit to mobile. (Ajustar al móvil). Si activas esta opción, tus widgets mantendrán las mismas posiciones que en la versión de escritorio, pero serán redimensionados para ajustarse al ancho del diseño móvil.

Desktop layout. (Diseño de escritorio). Esta opción recreará el diseño de escritorio con sus proporciones iniciales. Después, puedes mover y ajustar el tamaño de todos los widgets manualmente para conseguir el aspecto deseado de la distribución móvil.

Todas estas opciones (incluida ‘Auto Layout’) pueden activarse también para los widgets seleccionados.

Esto no es aplicable a los widgets globales (widgets que están activados en todas las páginas).

Selecciona al menos dos widgets y haz clic en las opciones 'Auto Layout', 'Fit to mobile' o 'Desktop layout'. Como resultado, solo estos widgets se reorganizaran. El resto mantendrá su tamaño y posición anteriores.

Ten en cuenta que esto afecta solo al tamaño y la posición de los widgets. Sus atributos (color, tamaño de la fuente, etc.) no se modificarán al cambiar entre las diferentes opciones de diseño móvil.

Diseño para tablet

Adicionalmente, puedes habilitar el diseño para tablet, este se presenta en modo vertical en tablets, pero también es utilizado por teléfonos móviles cuando están en modo horizontal. Para hacerlo, haz clic en el ícono + dentro del panel de activación del diseño móvil y activa la palanca. Si deseas desactivar el diseño para tablet, desactiva la opción y presiona el ícono menos.

Sin el diseño para tablet, los dispositivos móviles mostrarán la versión de escritorio cuando estén en posición horizontal. Las tablets en posición horizontal también mostrarán la versión de escritorio

La función 'Mobile Auto-Layout' se aplicará únicamente a las páginas que nunca hayan tenido el diseño móvil activado. Para las páginas en las que 'Mobile Auto-Layout' se haya empleado anteriormente, no se aplicará el diseño automático para no interferir con los diseños preexistentes.

Atajos

Usa el teclado para alternar entre los diseños de escritorio (1), tablet (2) y móvil (3) en los modos Editar (Edit) y Previsualizar (Preview).

Altura de página

Puedes cambiar la altura de cada página arrastrando el icono de diamante azul ubicado en el centro del canvas.

Ancho personalizado

Para personalizar el ancho de tu diseño móvil, accede al panel de Cuadrícula y guías e ingresa el valor deseado (o modifica el valor con el puntero) en la esquina superior derecha.

En los dispositivos móviles, el contenido del proyecto se ampliará o reducirá (en escala) dependiendo del ancho de la pantalla.

Diseño móvil en diferentes dispositivos

Para previsualizar cómo se muestra su diseño móvil en diferentes dispositivos, ingresa al modo de vista previa y utilice el interruptor ubicado en la parte superior de la pantalla. A partir de ahora, estos tipos de dispositivos están disponibles para obtener una vista previa:

iPhone SE (vertical y horizontal)
iPhone 11 Pro/X
Google Pixel 2 XL
Samsung Galaxy S20

También puedes obtener una vista previa de tu proyecto para tablets (en caso de que no hayas activado la versión para tablet por separado).

Los tamaños de los diseños mostrados pueden diferir de los dispositivos reales, pero las proporciones son las mismas.

Diseños en diferentes pantallas

Si se crean los diseños de escritorio (1024px), tablet (768px) y móvil (320px) de la misma página, se mostrará el más cercano al ancho de pantalla real del dispositivo en particular. Los diseños también cambian cuando el dispositivo móvil se gira desde la vista vertical a la horizontal.