---
title: "Temel bir paywall ekranı oluşturma"
description: "Flow Builder'da standart bir paywall ekranı oluşturmak için adım adım kılavuz."
---

Bu, en yaygın kullanılan paywall şablonudur. Tek başına bir ekran olarak kullanabilir ya da çok ekranlı bir [flow](adapty-flow-builder)'un sonuna yerleştirebilirsiniz.
Standart bir paywall ekranı; bir başlık, değer açıklaması, özellik listesi, ürün listesi, satın alma düğmesi ve satın almaları geri yükleme, kullanım koşulları ile gizlilik politikasına yönelik alt bölüm bağlantıları içerir.
## Başlamadan önce \{#before-you-start\}

- Adapty Kontrol Paneli'nde [ürün oluşturun](create-product).
- [Adapty'yi App Store ve Google Play'e bağlayın](integrate-payments).
## 1. Yeniden kullanılabilir stiller oluşturun \{#1-set-up-reusable-styles\}

Yeniden kullanılabilir stiller, her ekranda tek tıklamayla aynı tipografi ve renkleri uygulamanıza olanak tanır. Her yeni flow, varsayılan bir metin stilleri setiyle (H1, Body, Button Label vb.) gelir — elementler eklemeye başlamadan önce bunları tasarımınıza göre ayarlayın. Ekran boyunca kullanacağınız marka renkleri için renk stilleri ekleyin.

Ayrıntılı talimatlar için bkz. [Element stillendirme — Yeniden kullanılabilir stiller](builder-styling#reusable-styles).

Stilleri ayarlamak için:
1. Sol panelde **Styles** Styles panelini açın.
2. **Text** sekmesinde, mevcut bir stile tıklayarak yazı tipi, kalınlık, boyut ve renk ayarlarını düzenleyin. Yalnızca varsayılanlar ihtiyacınızı karşılamıyorsa yeni stiller ekleyin.

3. **Colors** sekmesinde **Plus Create style** seçeneğine tıklayın ve ekranda tekrar kullanmayı planladığınız renkleri ekleyin.

## 2. Ekran düzenini ayarlayın \{#set-up-the-screen-layout\}

Ekranın kendisi, eklediğiniz her şey için bir kapsayıcı görevi görür. Daha sonra ekleyeceğiniz öğelerin doğru şekilde dağılması için önce düzeni, arka planı ve dolguyu yapılandırın.

Ekran özelliklerinin tam listesi için bkz. [Ekranlar ve katmanlar — Ekran ayarları](paywall-layout-and-products#screen-settings).

Ekranı yapılandırmak için:
1. Ekranı seçmek için tuvalin boş bir alanına tıklayın. Sağ panel, ekran ayarlarına geçer.
2. **System UI** altında, içerik ekran kenarlarına kadar uzansın diye **Safe area** seçeneğini devre dışı bırakın.
3. **Layout** altında, yönü **Vertical** Vertical ve dağılımı **Space evenly** olarak ayarlayın.

4. **Fill** altında bir arka plan türü seçin — düz renk, degrade veya görsel. Bu örnekte iki renk durağına sahip bir **Gradient** Gradient kullanılmaktadır.

## 3. Kapat düğmesini ekle \{#add-the-close-button\}

Kapat düğmesi, paywallı kapatır. **Close** hazır ayarı önceden yapılandırılmış olarak gelir — herhangi bir eylem kurulumu gerekmez.

1. Canvas üzerinde **+** simgesine tıklayın.
2. **Buttons** > **Close** seçeneğini seçin.

## 4. Başlığı ekleyin ve kapat düğmesiyle eşleştirin \{#add-the-title-and-pair-it-with-the-close-button\}

H1, ekranın üst kısmında kapat düğmesinin yanında yer alır. İkisini yatay olarak hizalamak için her ikisini de bir yatay yığına sarın.

Başlığı eklemek için:

1. **+** > **Text** > **H1** seçeneğine tıklayın.
2. H1 seçiliyken sağ panelde **Design** sekmesini açın ve **Content** alanındaki metni düzenleyin.

Başlığı kapat düğmesiyle gruplamak için:
1. **Layers** panelinde, kapat düğmesi katmanındaki üç nokta menüsüne Context menu tıklayın ve **Wrap** > **Wrap in Horizontal Stack** seçeneğini seçin.

2. H1 katmanını yeni yatay stack'e sürükleyin.

İki öğeyi hizalamak için:
1. Kapatma düğmesinin boyutunu ve H1 yazı tipi boyutunu, aynı satırda rahatça yer alacak şekilde ayarlayın.
2. Yatay yığın seçiliyken, öğelerin doğru hizalanması için sağ panelden hizalama ve dağılım ayarlarını yapın.

## 5. Değer açıklamasını ekleyin \{#add-the-value-description\}

Başlığın altındaki kısa bir gövde satırı, kullanıcının abonelikten ne kazanacağını açıklar.

1. **+** > **Text** > **Body** seçeneğine tıklayın.
2. Gövde öğesi seçiliyken **Design** sekmesindeki **Content** alanında metni düzenleyin.

## 6. Özellik listesini ekleyin \{#add-the-feature-list\}

Özellik listesi, aboneliğin kilidini açmanın neler içerdiğini ön plana çıkarır. Her satırda bir ikon, bir özellik başlığı ve kısa bir açıklama bulunur.

Liste ön ayarlarının tam listesi için bkz. [Elements — List](builder-elements#list).

Özellik listesini eklemek için:

1. **+** > **List** seçeneğine tıklayıp bir liste ön ayarı seçin. Paywall'lar için en yaygın kullanılan Icon List'tir.
2. Her satırı seçerek başlık ve açıklamayı **Content** alanından düzenleyin.
3. Satır eklemek veya kaldırmak için listeyi seçin ve **Layers** panelindeki satır kontrollerini kullanın.

## 7. Ürün listesini ekleyin \{#add-the-product-list\}

Ürün listesi, kullanıcının seçebileceği abonelik seçeneklerini gösterir. Products öğesi, ekrana atanan her ürün için bir kart oluşturur ve kartlardan biri otomatik olarak varsayılan olarak işaretlenir.

Ürün yönetimi hakkında daha fazla bilgi için bkz. [Satın almaları ayarlama](paywall-product-block).

Ürün eklemek ve yapılandırmak için:
1. **+** > **Products** seçeneğine tıklayın ve bir düzen şablonu seçin. Dikey Liste en yaygın kullanılanıdır.
2. Tuvaldeki her ürün kartını seçin ve **Design** sekmesindeki açılır menüden bir ürün belirleyin. Açılır menüde Adapty Kontrol Paneli'nde yapılandırılmış tüm ürünler görünür.
3. Varsayılan seçimi değiştirmek için istediğiniz kartı seçin ve **Design** sekmesinde **Set as default product** seçeneğini etkinleştirin.
4. İndirim rozetini özelleştirmek için **Layers** panelinde bir ürün kartını genişletin, rozet katmanını seçin ve **Content** alanında metnini düzenleyin. Diğer kartlardaki rozeti gizlemek için her rozet katmanının yanındaki göz simgesine Show tıklayarak gizleyin.

## 8. Satın alma düğmesini ekleyin \{#add-the-purchase-button\}

Satın alma düğmesi, kullanıcının seçtiği ürün için uygulama içi satın alma işlemini başlatır. `products.selectedProduct` değişkeni her zaman ekranda o an seçili olan ürünü döndürür.

Satın alma düğmesini eklemek için:

1. **+** > **Buttons** seçeneğine tıklayın ve bir düğme şablonu seçin.
2. Düğme seçiliyken sağ panelde **Interactions** sekmesini açın.
3. **Add trigger** > **On tap** seçeneğine tıklayın, ardından **Add action** seçeneğine tıklayın.
4. **Action** alanını **Purchase**, **Product** alanını ise `products.selectedProduct` olarak ayarlayın.

## 9. Alt bilgi bağlantıları ekle \{#add-footer-links\}

Alt bilgi; kullanım koşulları ve gizlilik politikasına yönelik bağlantılar (uygulama mağazalarının zorunlu kıldığı) ile önceki satın alımları geri yüklemek için bir düğme içerir.

Alt bilgi bağlantılarını eklemek için:

1. **+** > **Buttons** > **Links** seçeneğine tıklayın. Bu adım, Restore Purchases, Terms of Use ve Privacy Policy içeren bir satır ekler.
2. **Terms of Use** bağlantısını seçin. **Interactions** sekmesinde **Open URL** eylemi zaten eklenmiş durumdadır — URL alanına kullanım koşulları URL'nizi yapıştırın.
3. **Privacy Policy** bağlantısı için aynı adımı gizlilik URL'nizle tekrarlayın.
4. **Restore Purchases** bağlantısını olduğu gibi bırakın. Eylem önceden yapılandırılmıştır.
:::tip
Herhangi bir öğenin konumu çok yüksek veya düşük görünüyorsa ya da herhangi bir yere daha fazla boşluk eklemek istiyorsanız, öğenin kenar boşluklarını ve dolgu değerlerini ayarlayın.
:::

## Sonraki adımlar \{#next-steps\}

- [Flow'unuzu kaydedin ve yayınlayın](builder-save-publish).
- Kullanıcılara göstermeye başlamak için [flow'u bir placement'a ekleyin](create-placement).