---
title: "Paywall düzeni"
description: "Daha iyi dönüşüm için Adapty'de paywall düzenlerini tasarlayın ve ürünleri yönetin."
---

Adapty'nin Paywall Builder'ında paywall'ınız için bir şablon seçtikten sonra, paywall'ın görsel görünümünü markanızın stiline uyacak şekilde özelleştirebilirsiniz. Düzen ayarları; paywall'ın yerleşimini, arka planını ve genel görünümünü ayarlamak için çeşitli kontroller sunar. Bu ayarları inceleyelim: Düzen ayarları, şablon, arka plan rengi, varsayılan yazı tipleri, satın alma akışı, içerik düzeni ve üst düğmeler dahil olmak üzere paywall'ın temel özelliklerini kontrol eder.

:::warning

Bu bölüm, iOS, Android ve React Native SDK'larının 3.0 veya üzeri sürümleriyle, Flutter ve Unity SDK'larının ise 3.3.0 veya üzeri sürümleriyle çalışan yeni Paywall Builder'ı anlatmaktadır. Adapty SDK v2.x veya önceki sürümlerle uyumlu eski Paywall Builder hakkında bilgi edinmek için [Eski Paywall Builder paywall düzeni](paywall-layout-and-products-legacy#layout) bölümüne bakın.

:::

## Satın alma akışı \{#purchase-flow\}

Kullanıcıların satın alma işlemini nasıl tamamlayacağına karar verin. İki seçenek mevcuttur:

- **Ürünler liste + satın alma düğmesi olarak**: Kullanıcılar önce ürünleri seçer, ardından satın almayı başlatmak için satın al düğmesine tıklar.

  

  <img src="/assets/shared/img/a816501-PB_products_list.webp"
  style={{
    border: 'none', /* border width and color */
    width: '200px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

- **Ürünler satın alma düğmesi olarak**: Her ürün bir düğmedir ve kullanıcı bir ürün düğmesine tıkladığında satın alma işlemi başlar.

  

  <img src="/assets/shared/img/4114858-PB_products_buttons.webp"
  style={{
    border: 'none', /* border width and color */
    width: '200px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

## Arka plan rengi \{#background-color\}

Paywall'ınız için varsayılan bir arka plan belirleyerek görsel tutarlılığı koruyun. **Düzen ayarları**'ndaki **Background color** alanını kullanın. Yapılandırma penceresini açmak için renkli kareye tıklayın; burada ayrı sekmelerde düz renk veya gradyan seçebilirsiniz.

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

## Paywall'ınızın yazı tipi ayarları \{#font-settings-of-your-paywall\}

Paywall'ınızı uygulamanızın geri kalanıyla görsel olarak tutarlı tutmak önemlidir; en büyük görsel etkenlerden biri de kullandığınız yazı tipidir. Paywall'ınız için sistem yazı tipini (iOS için SF Pro, Android için Roboto) kullanabilir, mevcut yaygın yazı tiplerinden birini seçebilir ya da kendi özel yazı tipinizi yükleyebilirsiniz:

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

**Düzen ayarları**'ndaki yazı tipi ayarları varsayılan olarak tüm paywall bileşenlerine uygulanır. Metin kutuları veya listeler gibi belirli öğeleri düzenlerken bu ayarları tek tek geçersiz kılabilirsiniz. **Düzen ayarları**'nda varsayılan yazı tipini değiştirirseniz, ayrı yazı tipi atanmış öğeler bundan etkilenmez. Özel yazı tipi yüklemeyi [buradan](using-custom-fonts-in-paywall-builder) öğrenin.

## İçerik düzeni \{#content-layout\}

Paywall'ın her içerik öğesi için kenar boşluklarını ve genişliği tek tek ayarlamak zorunda değilsiniz. **Content layout** bölümüne giderek tüm içerik öğelerine ait aşağıdaki ayarları bir seferde düzenleyebilirsiniz:

- **Default child margin**: Her alt öğenin çevresindeki boşluğu tanımlar.
- **Spacing**: Bir düzen içindeki öğeler arasındaki boşluğu tanımlar.
- **Max width**: iPad'lerde düzeni optimize etmek için öğelerin maksimum genişliğini belirler. Temiz ve dengeli bir düzen için 600pt öneririz.

:::warning
Max width parametresi yalnızca Adapty SDK v3.7.0 ve üzeri sürümlerde kullanılabilir.
:::

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

Belirli bir öğenin düzenini ayarlamak için (örneğin, alt bilgi için maksimum genişlik belirlemek), **App Icon, Header, Feature List, Products** veya **Footer** altındaki **Layout** bölümüne gidin.

## Üst düğmeler \{#top-buttons\}

Kullanıcılara paywall'ı kapatma gibi seçenekler sunmak için paywall'ınıza en fazla 2 üst düğme ekleyin. Görünümlerini ve davranışlarını şu şekilde özelleştirin:

1. **Top Button** veya **Top Button 2** geçişini etkinleştirin.
2. Düğmenin görünümünü ve konumunu seçin. Önizleme anında güncellenecektir.

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

| Düğme ayarı | Açıklama |
|--------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| Action | <p>Kullanıcı bu düğmeye tıkladığında paywall'ın gerçekleştireceği eylemi seçin. Standart eylemleri seçerseniz paywall, mobil uygulama kodunuzda standart yolla işleyebileceğiniz bir standart olay üretir.</p><p>Özel bir eylem seçerseniz, mobil uygulama kodunuzda eylemi `CustomActionID` değeriyle işlemeniz gerekir.</p> |
| Style | Düğmenin simge mi yoksa metin mi görüneceğini seçin. Simge seçerseniz, simge türünü ilgili alanda belirleyin. |

3. Düğmenin görünümünü geciktirmek için **Show after delay** kaydırıcısını ayarlayın.

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