---
title: "Sekmeli paywall oluşturma"
description: "İki sekme arasında geçiş yaparak farklı özellik listelerini, ürün gruplarını ve satın alma eylemlerini gösteren bir paywall ekranı oluşturun."
---

Bu şablon, tek bir ekranda aynı teklifin iki varyantı arasında geçiş yapmak için sekmeleri kullanır. Her sekme kendi özellik listesini, ürün listesini ve satın alma düğmesini içerir. Bir sekmeye dokunulduğunda ekrandan çıkmadan görünen içerik değişir; bu da planları katmana, fatura dönemine veya kitle segmentine göre ayırmak için oldukça kullanışlıdır.
## 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. Ekran düzenini ayarla \{#set-up-the-screen-layout\}

Ekran; kapat düğmesi, başlık, sekmeler ve sekme içerikleri için bir kapsayıcı görevi görür. Bu örnekte arka plan bir görsel kullanılarak ayarlanmıştır, ancak düz renk veya gradyan da aynı şekilde çalışır.

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. Kanvasın boş bir alanına tıklayarak ekranı seçin.
2. **System UI** altında, arka planın ekranın kenarlarına kadar uzanması için **Safe area** seçeneğini devre dışı bırakın.
3. **Fill** altında bir arka plan türü seçin ve yapılandırın. Bu örnekte bir **Image** Image kullanılmıştır; ancak düz renk veya gradyan da aynı şekilde çalışır.
4. **Layout** altında yönü **Vertical** Vertical olarak ayarlayın; sekme içeriği kalan alanı dolduracak şekilde öğelerin üstten alta sıralanması için boşluk ve hizalamayı yapılandırın.

## 2. Kapat butonunu ekleyin \{#add-the-close-button\}

Kapat butonu, paywall'ı kapatır. **Close** ön ayarı önceden yapılandırılmıştır — herhangi bir eylem ayarı gerekmez.

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

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

Başlık, 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 **Design** sekmesini açın ve **Content** alanındaki metni düzenleyin.

Başlığı kapat düğmesiyle gruplandırmak 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üğmesi boyutunu ve H1 font boyutunu, ikisi aynı satırda rahatça yer alacak şekilde ayarlayın.
2. Yatay yığın seçiliyken, öğelerin doğru hizalanması için sağ paneldeki hizalama ve dağılım ayarlarını yapın.

## 4. Sekmeleri ekleyin ve etiketlerini yapılandırın \{#add-the-tabs-and-configure-their-labels\}

Sekmeler elementi, bir ekran bölümünü birbirine geçiş yapılabilir içerik panellerine böler. Her sekme, kullanıcı o sekmeyi seçtiğinde görünen kendi içerik kapsayıcısına sahiptir.

Sekmeler elementi hakkında daha fazla bilgi için bkz. [Elementler — Sekmeler](builder-elements#tabs). Seçilebilir gruplar hakkında daha fazla bilgi için bkz. [Seçilebilir elementler ve gruplar](flow-selectable-elements).

Sekmeleri eklemek için:
1. **+** > **Tabs** seçeneğine tıklayın ve bir ön ayar seçin — Segment control, Button Tabs veya Underline.
2. Her sekmenin adı canvas üzerinde veya **Layers** panelinde seçiliyken, etiketi değiştirmek için **Design** sekmesindeki **Content** alanını düzenleyin — örneğin `Premium` ve `Pro`.

## 5. İlk sekmeye özellik listesi ekle \{#add-a-feature-list-to-the-first-tab\}

İlk sekmenin içinde kısa ve sade bir özellik listesi, kullanıcılara o planın neler sunduğunu gösterir.

Listenin tüm hazır şablonları için [Öğeler — List](builder-elements#list) sayfasına bakın.

Özellik listesini eklemek için:

1. **+** > **List** seçeneğine tıklayın ve bir liste şablonu seçin. Paywall'lar için en sade seçenek Icon List'tir. Öğe, katman ağacının sonuna eklenir.
2. Her satırı seçerek başlığı **Content** alanından düzenleyin.

3. **Katmanlar** panelinde, listeyi ilk sekmenin **Content** kapsayıcısına sürükleyin.

## 6. İlk sekmeye ürün listesini ekleyin \{#add-the-product-list-to-the-first-tab\}

Ürün listesi, ilk sekmedeki abonelik seçeneklerini gösterir. Products öğesi, ekrana atanan her ürün için bir kart oluşturur ve kendi seçilebilir grubunu yaratır.

Ü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 ön ayarı seçin. Dikey Liste, üst üste sıralanmış planlar için iyi çalışır. Öğe, katman ağacının sonunda görünür.
2. Tuvaldeki her ürün kartını seçin ve **Design** sekmesindeki açılır menüden bir ürün seçin.

3. **Layers** panelinde, Products katmanını ilk sekmenin **Content** kapsayıcısına sürükleyin.

## 7. Satın alma butonunu ilk sekmeye ekle \{#add-the-purchase-button-to-the-first-tab\}

Satın alma butonu, kullanıcının ilk sekmede seçtiği ürün için uygulama içi satın almayı başlatır. Butonun etiketi, seçili ürünün fiyatını gösterdiğinden kullanıcının seçimiyle her zaman senkronize kalır.

Satın alma eylemi hakkında daha fazla bilgi için bkz. [Eylemler — Satın Alma](onboarding-actions#purchase).

Satın alma butonunu eklemek ve yapılandırmak için:
1. **+** > **Buttons** seçeneğine tıklayın ve bir buton ön ayarı seçin. Öğe, katman ağacının sonunda görünür.
2. Butonu seçili durumdayken **Design** sekmesini açın ve imleci **Content** alanına getirin. Değişken simgesine Variable icon tıklayın, `products.selectedProduct` seçeneğini, ardından `prod_price` özelliğini seçin — tam değişken `products.selectedProduct.prod_price` olarak çözümlenir. Etiketin geri kalanıyla çevreyin — örneğin, `Subscribe for {prod_price}`.

3. **Interactions** sekmesine geçin ve **Add trigger** > **On tap** > **Add action** seçeneğine tıklayın.
4. **Action** kısmını **Purchase**, **Product** kısmını ise `products.selectedProduct` olarak ayarlayın.

5. **Layers** panelinde, butonu birinci sekmenin **Content** container'ına sürükleyin.

## 8. İlk sekmenin içeriğini ikinci sekmeye kopyalayın \{#copy-the-first-tabs-content-into-the-second-tab\}

Aynı yapıyı sıfırdan yeniden oluşturmak yerine, birinci sekmedeki özellik listesini, ürün listesini ve satın alma düğmesini ikinci sekmeye kopyalayın. Bundan sonra yalnızca değerleri güncellemeniz yeterli olacak.

İçeriği kopyalamak için:
1. **Layers** panelinde, birinci sekmenin **Content** kapsayıcısını genişletin.
2. İçindeki her öğeyi (özellik listesi, ürünler, satın alma butonu) seçin, ⌘C / Ctrl+C ile kopyalayın ve ⌘V / Ctrl+V ile yapıştırın. Kopyalar katman ağacının sonunda görünür.
3. Kopyalanan her öğeyi ikinci sekmenin **Content** kapsayıcısına sürükleyin.

## 9. İkinci sekmenin içeriğini güncelleme \{#update-the-second-tabs-content\}

İkinci sekme şu an birincinin aynısını gösteriyor. Her öğeyi ikinci planı yansıtacak şekilde güncelleyin.

İkinci sekmeyi güncellemek için:
1. İkinci sekmedeki özellik listesini düzenleyerek satırların ikinci planın özelliklerini yansıtmasını sağlayın.
2. İkinci sekmedeki Products öğesinde her bir ürün kartını seçin ve açılır menüden ikinci planın ürünlerini atayın. Bu Products öğesi otomatik olarak ayrı bir seçilebilir grup (`products2`) haline gelir.
3. İkinci sekmedeki satın alma düğmesini seçin. **Design** sekmesindeki **Content** alanında fiyat değişkenini `products.selectedProduct.prod_price` yerine `products2.selectedProduct.prod_price` olarak değiştirin.
4. **Interactions** sekmesine geçin ve **Purchase** eylemindeki **Product** değerini `products.selectedProduct` yerine `products2.selectedProduct` olarak güncelleyin.

## 10. Alt bilgi bağlantılarını ekle \{#add-the-shared-footer-links\}

Kullanım koşulları, gizlilik politikası ve satın almaları geri yükle bağlantıları, hangi sekme aktif olursa olsun her zaman görünür kalır. Bu bağlantıları her iki sekme içerik kapsayıcısının da dışına — ekran düzeyine — ekle ki her iki sekme arasında ortak kullanılsın.

Alt bilgi bağlantılarını eklemek için:
1. **+** > **Buttons** > **Links** seçeneğine tıklayın. Bu, katman ağacının sonuna Restore Purchases, Terms of Use ve Privacy Policy içeren bir satır ekler; tam olarak istediğiniz yer burasıdır — bir sekmenin içinde değil, ekranın kökünde.
2. **Terms of Use** bağlantısını seçin, **Interactions** sekmesini açın ve koşullar URL'nizi **Open URL** alanına yapıştırın.
3. **Privacy Policy** bağlantısı için de aynı adımı gizlilik URL'niz ile tekrarlayın.
4. **Restore Purchases** bağlantısını olduğu gibi bırakın. Bu bağlantının eylemi önceden yapılandırılmıştır.

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

- [Flow'unuzu kaydedin ve yayınlayın](builder-save-publish).
- [Flow'u bir placement'a ekleyin](create-placement) ve kullanıcılara göstermeye başlayın.