---
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. Bağımsız bir ekran olarak kullanabilir ya da çok ekranlı bir [flow](adapty-flow-builder)'un sonuna ekleyebilirsiniz.
Standart bir paywall ekranı; bir başlık, bir değer açıklaması, bir özellik listesi, bir ürün listesi, bir satın alma düğmesi ve satın almaları geri yükleme, kullanım koşulları ve gizlilik politikasına yönelik alt 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 stilleri ayarlayın \{#1-set-up-reusable-styles\}

Yeniden kullanılabilir stiller, tek bir tıklamayla her ekranda aynı tipografi ve renkleri uygulamanızı sağlar. Her yeni flow, bir dizi varsayılan metin stiliyle (H1, Body, Button Label vb.) gelir — öğe eklemeye başlamadan önce bunları tasarımınıza göre düzenleyin. Ekran genelinde kullanacağınız marka renkleri için renk stilleri ekleyin.

Ayrıntılı talimatlar için bkz. [Stiller ve görünüm — 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 font, kalınlık, boyut ve rengi 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ı işlevi görür. Daha sonra eklediğiniz öğelerin düzgün dağılması için önce ekranın düzenini, arka planını ve dolgu ayarlarını 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 canvas'ın 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, gradyan veya resim. 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ındaki kapat düğmesinin yanına yerleşir. İkisini yatay hizalamak için bir yatay kapsayıcıya sarın.

Başlığı eklemek için:

1. **+** > **Text** > **H1** yolunu izleyin.
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ının üç nokta menüsüne Context menu tıklayın ve **Wrap** > **Wrap in Horizontal Container** seçeneğini seçin.

2. H1 katmanını yeni yatay kapsayıcıya sürükleyin.

İki öğeyi hizalamak için:
1. Kapat düğmesinin ve H1 yazı tipi boyutunu, aynı satırda rahat bir şekilde yer alacak şekilde ayarlayın.
2. Yatay kapsayıcı seçiliyken, öğelerin doğru şekilde hizalanması için sağ paneldeki 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 vurgular. Her satırda bir ikon, bir özellik başlığı ve kısa bir açıklama bulunur.

Liste ön ayarlarının tam seti için [Elements — List](builder-elements#list) bölümüne bakın.

Özellik listesini eklemek için:

1. **+** > **List** seçeneğine tıklayın ve bir liste ön ayarı seçin. Icon List, paywall'lar için en yaygın kullanılanıdır.
2. Her satır seçiliyken 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ünleri 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. Tuval üzerindeki her ürün kartını seçin ve **Design** sekmesindeki açılır menüden bir ürün seçin. Açılır menüde Adapty Kontrol Paneli'nde yapılandırılmış tüm ürünler gösterilir.
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ıklayın.

## 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ğ panelden **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ı ekleyin \{#add-footer-links\}

Alt bilgi; kullanım koşulları ve gizlilik politikası bağlantılarını (uygulama mağazaları tarafından zorunlu tutulmaktadır) ve ö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. Click **+** > **Buttons** > **Links**. This adds a row with Restore Purchases, Terms of Use, and Privacy Policy.
2. In the **Layers** panel, select the **Terms of Use** button. Open the **Interactions** tab — the **Open URL** action is already attached. Click the action and enter the target URL.
3. Repeat for the **Privacy Policy** button with your privacy URL.
4. Leave the **Restore Purchases** button as is. Its action is preconfigured.

:::tip
If any element's positioning feels too high or low, or if you want to add more space anywhere, adjust the element's margins and padding.
:::

## 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).