Además del diseño por defecto para escritorio, puedes habilitar los diseños para tablets y/o dispositivos móviles para tus páginas. Para hacerlo, haz clic en el icono 'Devices' situado en la esquina inferior izquierda de la ventana del Editor.

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

Organizar widgets

Cuando activas el diseño para dispositivos móviles, éste renderiza automáticamente la página en función del tamaño de la pantalla (lo que se conoce como diseño automático). También organiza todos los widgets en una sola "columna", uno a continuación del otro.

Haz clic en 'Arrange widgets' para ver dos métodos adicionales que pueden ayudarte a generar fácilmente un nuevo diseño móvil:

Resize desktop to mobile. Los widgets mantendrán las mismas posiciones que en la versión de escritorio, pero serán adaptados a la anchura del diseño móvil.

1:1 desktop layout. Esta opción recreará las proporciones iniciales de tu diseño de escritorio, que puedes ajustar manualmente para conseguir el aspecto deseado para tu diseño móvil.

Estas opciones, incluido el diseño automático (Single column layout), también pueden activarse para determinados widgets.

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 el método de disposición que prefieras.

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

El diseño automático (Single column layout) solo se aplicará a las páginas que nunca hayan tenido activada la opción 'Mobile Viewport'. Esto se hace para evitar interferir con los diseños preexistentes.

Atajos

Para personalizar el ancho de tu diseño móvil, abre la configuración Grid & Layout e introduce el valor deseado.

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.