---
title: "Onboarding medyası"
description: "Görseller, videolar, animasyonlu grafikler ve özel arka planlarla ilgi çekici Adapty onboarding akışları oluşturun."
---

Zengin medya öğeleri, uygulamanızın değerini sergileyen ve kullanıcıları dönüşüme yönlendiren ilgi çekici onboarding deneyimleri oluşturmanıza yardımcı olur. Özellikleri sergilemek için görseller ve videolar, faydaları görselleştirmek için animasyonlu grafikler ve markanızı pekiştirmek için stratejik arka planlar kullanabilirsiniz.

## Görseller ve videolar \{#images-and-videos\}

Görseller ve videolar, özellik önizlemeleri ve uygulama turları için idealdir. Kullanıcılara neyin kilidini açacaklarını göstermek, bunu anlatmaktan çok daha etkilidir.

Medya yüklemek için:

1. Sol üstteki **Add** düğmesine tıklayın.
2. **Media & Display** bölümüne gidip **Image/Video** seçeneğini seçin.
3. Sağdaki yükleme alanına tıklayın ve görseli ya da videoyu seçerek yükleyin.

  <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 */
  }}
/>

### Desteklenen formatlar ve boyut \{#supported-formats-and-size\}

| Özellik              | Ayrıntılar                      |
|----------------------|---------------------------------|
| Uzantılar            | PNG, JPG, JPEG, WEBP, MP4, WEBM |
| Maksimum dosya boyutu | 15 MB                          |
| Maksimum çözünürlük  | 1920x1920                       |

Desteklenmeyen animasyonlu bir öğe eklemek istiyorsanız (örneğin Lottie), bunu bir videoya dönüştürüp ([bu araç](https://www.lottielab.com/lottie/lottie-to-video) gibi bir araçla) video olarak ekleyebilirsiniz.

## Animasyonlu grafikler \{#animated-charts\}

Grafikler, onboarding akışlarınızda sonuçları görselleştiren ve kullanıcı deneyimini kişiselleştiren animasyonlardır. Grafik eklemek için:

1. Sol üstteki **Add** düğmesine tıklayın.
2. **Media & Display** bölümüne gidip **Chart** seçeneğini seçin.
3. Sağdaki seçeneklerden grafiğinizi özelleştirin:
   - **Type**: Bir eğri türü seçin. Eğri türünün değerlerle doğrudan bir bağlantısı olmadığını unutmayın.
   - **Left** ve **Right badges**: Grafiğin başlangıç ve bitiş noktalarına isim verin.
   - **X Labels** ve **Date Range**: X ekseni varsayılan olarak tarihleri gösterir. Tarih aralığını özelleştirebilir veya özel değerler belirtebilirsiniz.
   - **Animation Duration**: Tasarımınıza uygun animasyon süresini ayarlayın.

:::tip
Grafiklerde dinamik veri görselleştirmesi için [değişkenler](onboarding-variables) kullanın.
:::

  <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 */
  }}
/>

## Medya özelleştirme \{#media-customization\}

Temel [öğe düzeni](onboarding-layout#element-layout) seçeneklerine ek olarak, görsel, video ve grafiklerin görünümünü daha da özelleştirebilirsiniz:

1. Sol taraftan öğeyi seçin.
2. Sağdaki menüden **Styles** sekmesine gidin.
3. Öğe türüne göre aşağıdaki seçenekleri düzenleyebilirsiniz:
   - **Görsel/video**: Genişlik, yükseklik, yuvarlama, opaklık, hizalama.
   - **Grafik**: Çizgi rengi ve kalınlığı, rozet dolgusu, yuvarlama, yazı tipi ve rengi, X ekseni yazı tipi ve rengi.

## Medyayı silme \{#delete-media\}

Medya öğesinin tamamını ya da yalnızca dosyayı silip yerine yeni bir dosya yükleyebilirsiniz:

- **Medya öğesini sil**: Sol tarafta medya öğesine sağ tıklayın ve **Delete** seçeneğini seçin.
- **Medya dosyasını sil**: Sağdaki medya önizlemesine tıklayın. Yeni dosyanız için yükleme alanı görünecektir.

  <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 */
  }}
/>