Fondos
Establece un fondo en cualquier pantalla con el panel Fill en Screen settings. Cada capa del panel puede ser un color sólido, degradado, imagen o vídeo, y una pantalla puede apilar varias de ellas — así es como se añade un tono a una imagen o vídeo.
Un fondo también puede convertirse en imagen hero. Para lograr este efecto, 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 vídeos de fondo ocupan todo el viewport, incluidas las áreas detrás del notch y las barras del sistema, incluso cuando Safe area está activado. 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.
Vídeo
Sube un archivo .MP4 o .WEBM de hasta 50 MB. La vista previa muestra un fotograma fijo, pero el vídeo se reproduce en el dispositivo en tiempo de ejecución.
Activa Loop para reproducir el vídeo en bucle de forma continua.
Para cambiar el vídeo de fondo en tiempo de ejecución, habilita un ID de contenido personalizado.
Color sólido
Introduce un valor hexadecimal de seis dígitos, como #FFFFFF, y ajusta la opacidad del 0 al 100%. Un valor abreviado bloquea la publicación. Elige un estilo de color guardado desde la paleta para aplicar el color de tu marca: el fondo sigue automáticamente tus temas claro y oscuro.
Gradiente
Crea un degradado lineal con múltiples paradas:
- Direction — rota el degradado de 0 a 360°.
- Stops — arrástralos por la barra para reposicionarlos. Haz clic en una parada para editar su valor hexadecimal de seis dígitos y su opacidad.
- Opacity — el control deslizante en la fila de la capa escala todas las paradas a la vez, manteniendo intacto el fundido entre ellas.
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.
- Añade una Sliding sheet: > Layout > Sliding sheet.
- Establece la Start position de la hoja: la parte de la pantalla que cubre, medida desde abajo. Con el 55% predeterminado, el fondo es visible en el 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, establece 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 lista y se pinta sobre el contenido multimedia.
- Haz clic en la muestra de color de la capa y selecciona Gradient . Para oscurecer solo el borde donde está el texto, traza 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.
Arrastra una capa para moverla en la pila y haz clic en para eliminarla.
