---
title: "Onboarding düzeni"
description: "Adapty onboarding builder: düzen için kapsayıcılar, eleman aralığı ve stili ayarlama."
---

Kodsuz mobil uygulama onboarding builder iki düzen katmanı sunar:
- Ekran düzeni: kapsayıcılar aracılığıyla genel dolgu ve ızgara.
- Eleman düzeni: eleman bazında boşluk, konum, kenarlıklar ve gölgeler.

:::tip
Ekranları veya elemanları yeniden sıralamak için sol panelde sürükleyip bırakmanız yeterli.
:::

## Ekran düzeni \{#screen-layout\}
Bir ekranı iki şekilde düzenleyebilirsiniz:
- [Ekran stili ayarlarını kullanarak](#screen-style-settings)
- [Kapsayıcıları kullanarak](#containers)

### Ekran stili ayarları \{#screen-style-settings\}
Elemanlar ile ekran kenarı arasındaki mesafeyi azaltmak veya artırmak için:
1. Soldan ekranı seçin.
2. Sağdaki **Styles** sekmesine gidin.
3. **Padding** bölümünde üst, alt ve yatay dolguyu ayarlayın.

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

### Kapsayıcılar \{#containers\}
Yan yana metin ve görseller, kaydırılabilir galeriler veya modal pop-up'lar eklemek isteyebilirsiniz. Kapsayıcılar; sütunlar, satırlar, carousel'ler ve ortalanmış katmanlar oluşturmanıza olanak tanıyarak bunu kolaylaştırır.

Kapsayıcı eklemek için:
1. Sol üstteki **Add** düğmesine tıklayın.
2. **Containers** bölümüne gidin ve birini seçin:
- **Columns**: Ekranı yan yana içerik için dikey bölümlere ayırır (ör. iki sütunlu metin veya görsel+metin düzeni).
- **Rows**: Öğeleri tek bir yatay şeritte eşit aralıklarla sıralar.
- **Carousel**: Kullanıcıların bir dizi kart arasında kaydırmasını sağlar.
- **Popup**: İçeriği sayfanın üzerinde ortalanmış bir katmanda gösterir.
3. Eklemek istediğiniz elemanları oluşturun, ardından sol menüden kapsayıcıya sürükleyip bırakın.

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

## Eleman düzeni \{#element-layout\}
Her elemanı ayrı ayrı düzenlemek için:
1. Soldan elemanı seçin.
2. Sağdaki menüden **Styles** seçeneğine gidin.
3. **Container** bölümünde şunları ayarlayın:
- **Offset**: Elemanı yatay veya dikey olarak kaydırır.
- **Position**: Elemanın bağlantı noktasını belirler:
  - **In content**: Normal belge akışı
  - **Attached**: Sabit konum - görünüm alanında görünür kalır (ör. altta sabit düğme)
  - **Attached on scroll**: Görünüme kaydırıldıktan sonra sabitlenir (yapışkan davranış)
- **Padding**: Elemanın içeriği ile kenarlığı arasındaki iç boşluğu tanımlar.
- **Background**: Elemanın arkasına düz bir renk uygular. Eleman arka planınızın [ekran arka planıyla](#screen-background-customization) eşleştiğinden emin olun (ör. çoğunlukla koyu ekranlara sahip onboarding'ler için gri veya siyah kullanın).
- **Roundness**: Elemanın köşe yarıçapını belirler.
- **Border**: Elemanın etrafına bir çizgi ekler ve kalınlığını belirtir.
- **Border Color**: Elemanın kenarlık rengini belirtir.
- **Add shadows**: Ayarlanabilir ofset, bulanıklık/yayılma ve renkle tek bir düşen gölge ekler.

:::note
Bu temel eleman düzeni ayarlarına ek olarak, **Styles** sekmesini kullanarak [medya](onboarding-media#media-customization), [metin](onboarding-text#text--list-customization), [düğmeler](onboarding-buttons#button-customization), [quizler](onboarding-quizzes#quiz-customization) ve diğer belirli elemanların görünümünü daha ayrıntılı özelleştirebilirsiniz.
:::

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

## Ekran arka planını özelleştirme \{#screen-background-customization\}

Arka plan yalnızca onboarding tasarımınızı değil, onboarding tam yüklenene kadar gösterilen yükleme ekranını da etkiler.

Onboarding arka planınızı bir renkle doldurabilir ya da görsel/video yükleyebilirsiniz:

1. Soldan ekranı seçin.
2. Sağdaki **Styles** sekmesine gidin.
3. **Background** bölümünde bir arka plan rengi seçin ya da görsel/video yüklemek için yükleme alanına tıklayın.

Medya yüklemelerinde [desteklenen formatlar ve boyut](onboarding-media#supported-formats-and-size) gereksinimlerine uyun.

:::tip
Ekran geçişlerini yumuşatmak için genel onboarding tasarımınızla uyumlu bir arka plan rengi seçin (ör. çoğunlukla koyu ekranlara sahip onboarding'ler için gri veya siyah kullanın) ya da [splash ekranını](ios-present-onboardings#add-smooth-transitions-between-the-splash-screen-and-onboarding) özelleştirin.
:::