Fondos
Dale a cualquier pantalla un fondo en la sección Fill de Screen settings:
- Fondo de una sola capa: Un color, degradado, imagen o vídeo.
- Fondo multicapa: Por ejemplo, una imagen con un tinte.
Si añades un tema oscuro y aplicas un estilo reutilizable, puedes establecer fondos diferentes para el tema claro y el tema oscuro.
Para convertir un fondo en una imagen hero, coloca tu contenido en una hoja deslizante.
Imagen
Sube un archivo .JPG, .PNG o .WEBP de hasta 20 MB. La imagen se escala para cubrir todo el fondo.
Las imágenes y los vídeos de fondo ocupan toda la ventana gráfica, incluidas las áreas detrás de la muesca y las barras del sistema, incluso cuando Safe area está activada. Mantén el contenido importante alejado de los bordes para evitar recortes.
Para cambiar la imagen de fondo en tiempo de ejecución desde el código de tu app, activa un ID de medio personalizado.
Video
Sube un archivo .MP4 o .WEBM de hasta 50 MB. La vista previa muestra un fotograma fijo, pero el video se reproduce en el dispositivo en tiempo de ejecución.
Activa Loop para reproducir el video en bucle de forma continua.
Para cambiar el video de fondo en tiempo de ejecución, habilita un ID de medio personalizado.
Color sólido
Introduce un valor hexadecimal de seis dígitos, como #FFFFFF, y ajusta la opacidad del 0 al 100%. Un valor más corto bloquea la publicación.
Degradado
Crea un degradado lineal con múltiples paradas:
- Direction — gira el degradado de 0 a 360°.
- Stops — para reposicionar un stop, arrástralo a lo largo de la barra. Para añadir un stop, haz clic en la barra o en junto a Stops. Para cambiar la posición, el valor hexadecimal de seis dígitos o la opacidad de un stop, edita su fila.
- Opacity — el control deslizante de la fila de la capa escala todos los stops a la vez, de modo que el fundido entre ellos se mantiene intacto.
Usar un fondo como imagen hero
Artículo principal: Sliding sheet
En los flows, la imagen hero se construye a partir del fondo de una pantalla y un Sliding sheet. El sheet cubre la parte inferior de la pantalla y sube sobre el fondo a medida que el usuario hace scroll.
-
Establece el Fill de la pantalla en Image o Video y sube la imagen hero.
-
Abre el panel Add element y selecciona Layout > Sliding sheet.
-
Configura la Start position de la hoja — la proporción de la pantalla que cubre la hoja, medida desde abajo. Con el valor predeterminado del 55%, el fondo se ve a través del 45% superior.
-
Añade tu contenido dentro del sheet.
-
Para superponer un titular o logotipo sobre la imagen hero, añade esos elementos fuera del sheet. Se renderizan sobre el fondo de pantalla.
-
Cambia el Start position para redimensionar el sheet si es necesario. No puedes establecer una altura absoluta para este elemento.
Colorear un fondo
El texto colocado sobre una imagen o vídeo solo se lee bien donde el contenido multimedia detrás es suficientemente oscuro. Para uniformar esa superficie, apila una capa semitransparente sobre el contenido multimedia:
- En Screen settings, ajusta la capa Fill con tu imagen o vídeo.
- Para añadir una segunda capa, haz clic en junto a Fill. La nueva capa aparece en la parte superior de la sección Fill y cubre el contenido multimedia.
- Haz clic en la muestra de color de la capa y selecciona Gradient . Para oscurecer solo el borde donde está tu texto, aplica el degradado desde un punto opaco en ese borde hasta un punto transparente en el otro extremo.
- Para ajustar la intensidad del tinte, arrastra el control deslizante en la fila de la capa.
Para cambiar el orden de las capas, arrastra sus filas. Para eliminar una capa, haz clic en en su fila.
Mostrar un fondo diferente en el modo oscuro
Artículo principal: Modo oscuro
Para mostrar un fondo diferente en el modo oscuro:
- Si el flow no tiene tema oscuro, añádelo.
- Guarda la capa de fondo como estilo de color.
- Si el fondo tiene un tinte, guarda también la capa de tinte como estilo de color.
- Cambia el valor oscuro de cada estilo.