---
title: "Contenido multimedia del onboarding"
description: "Crea onboardings atractivos en Adapty con imágenes, vídeos, gráficos animados y fondos personalizados."
---

Los elementos multimedia te ayudan a crear onboardings atractivos que demuestran el valor de tu app y guían a los usuarios hacia la conversión. Usa imágenes y vídeos para mostrar funciones, gráficos animados para visualizar beneficios y fondos estratégicos para reforzar tu marca.

## Imágenes y vídeos \{#images-and-videos\}

Las imágenes y los vídeos son perfectos para previsualizar funciones y hacer recorridos por la app. Mostrar a los usuarios lo que van a desbloquear es más efectivo que describirlo.

Para subir contenido multimedia:

1. Haz clic en **Add** arriba a la izquierda.
2. Ve a **Media & Display** y elige **Image/Video**.
3. Haz clic en el área de carga de la derecha y selecciona la imagen o el vídeo que quieras subir.

  <img src="/assets/shared/img/onboarding-media.gif"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

### Formatos y tamaño admitidos \{#supported-formats-and-size\}

| Especificación        | Detalles                        |
|-----------------------|---------------------------------|
| Extensiones           | PNG, JPG, JPEG, WEBP, MP4, WEBM |
| Tamaño máximo         | 15 MB                           |
| Resolución máxima     | 1920x1920                       |

Si quieres añadir un elemento animado no compatible (como Lottie), puedes convertirlo a vídeo (por ejemplo, con [esta herramienta](https://www.lottielab.com/lottie/lottie-to-video)) e incrustarlo como vídeo.

## Gráficos animados \{#animated-charts\}

Los gráficos son animaciones que visualizan resultados y personalizan la experiencia del usuario en tus onboardings. Para añadir un gráfico:

1. Haz clic en **Add** arriba a la izquierda.
2. Ve a **Media & Display** y elige **Chart**.
3. Personaliza tu gráfico en la parte derecha:
   - **Type**: Elige un tipo de curva. Ten en cuenta que el tipo de curva no está directamente relacionado con los valores.
   - Insignias **Left** y **Right**: Nombra los puntos inicial y final del gráfico.
   - **X Labels** y **Date Range**: Por defecto, el eje X muestra fechas. Puedes personalizar el rango de fechas o especificar valores personalizados.
   - **Animation Duration**: Establece la duración de la animación para que se adapte a tu diseño.

:::tip
Usa [variables](onboarding-variables) para la visualización dinámica de datos en los gráficos.
:::

  <img src="/assets/shared/img/chart-onboarding.png"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

## Personalización de multimedia \{#media-customization\}

Además del [diseño de elementos](onboarding-layout#element-layout) básico, puedes personalizar aún más la apariencia de imágenes, vídeos y gráficos:

1. Selecciona el elemento en la parte izquierda.
2. Ve a **Styles** en el menú de la derecha.
3. Según el tipo de elemento, puedes ajustar las siguientes opciones:
   - **Image/video**: Anchura, altura, redondez, opacidad, alineación.
   - **Chart**: Color y grosor de línea, relleno de insignia, redondez, fuente y color, fuente y color del eje X.

## Eliminar multimedia \{#delete-media\}

Puedes eliminar todo el elemento multimedia o solo el archivo para subir uno nuevo:

- **Eliminar el elemento multimedia**: Haz clic derecho sobre el elemento multimedia en la parte izquierda y selecciona **Delete**.
- **Eliminar el archivo multimedia**: Haz clic en la vista previa del multimedia en la derecha. Aparecerá el área de carga para el nuevo archivo.

  <img src="/assets/shared/img/onboarding-delete.gif"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>