---
title: "Tüm planları bir alt sayfada göster"
description: "Tek bir CTA, 'Tüm planları göster' bağlantısı ve tam ürün listesini ortaya çıkaran bir alt sayfa içeren bir hero paywall oluşturun."
---

Bu şablon, önce tek bir öne çıkan teklif sunar ve tam plan listesine giden sade bir bağlantı içerir. **Show all plans** bağlantısına dokunulduğunda, diğer ürünleri, bir satın alma düğmesini ve altbilgi bağlantılarını içeren bir alt sayfa yukarı kayar.
Bir plan orantısız biçimde iyi dönüşüm sağladığında kullanın — alt sayfa, ana ekranı kalabalıklaştırmadan alternatifleri tek dokunuş uzağında tutar.
## 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 ayarlayın \{#set-up-the-screen-layout\}

Hero görseli ekranın arka planı olarak kullanın ve içeriğin geri kalanını alt kısımda gruplayın; böylece görsel ekranın üst bölümünü dolduracaktı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. Ekranı seçmek için canvas'ın boş bir alanına tıklayın.
2. **System UI** altında, kahraman görselinin ekran kenarlarına kadar uzanması için **Safe area** seçeneğini devre dışı bırakın.
3. **Fill** altında **Image** Image seçeneğini belirleyin ve kahraman görselinizi yükleyin.
4. **Layout** altında, içeriği istediğiniz yere sabitlemek için yön, boşluk ve hizalama ayarlarını yapılandırın. Bu şablonda, küçük bir boşlukla **Vertical** Vertical yönü ve **bottom-middle** hizalaması, başlık ile düğmeleri ekranın alt kısmında gruplar.

## 2. CTA başlığı ekle \{#add-the-cta-heading\}

Başlık, ekranın alt kısmında, abone ol butonunun hemen üzerinde yer alır. Hero görseli ise üstteki alanı kaplar.

1. **+** > **Text** > **H1** seçeneğine tıklayın.
2. H1 seçili durumdayken **Design** sekmesini açın ve metni **Content** alanında düzenleyin.

## 3. Alt sayfayı ve başlığını ekleyin \{#add-the-bottom-sheet-and-its-title\}

Alt sayfa, ekranın altından yukarı doğru kayan bir düzen kapsayıcısıdır. Şimdilik görünür olarak ekleyin; sonraki birkaç adımda içeriğini dolduracak ve her şey yerli yerinde olunca gizleyeceksiniz. Gizli öğeler düzenlenemez, bu yüzden içeriği tamamlayana kadar sayfanın görünür kalması gerekir.

Alt sayfalar ve diğer düzen kapsayıcıları hakkında daha fazla bilgi için bkz. [Öğeler — Düzen](builder-elements#layout).

Alt sayfayı ve başlığını eklemek için:
1. **+** > **Layout** > **Bottom Sheet** seçeneğine tıklayın.
2. **Layers** panelinde bottom sheet'i genişletin, **Title** katmanını seçin ve **Design** sekmesindeki **Content** alanını düzenleyin — örneğin `Choose your plan`.

## 4. Alt sayfanın içine ürün listesini ekleyin \{#4-add-the-product-list-inside-the-bottom-sheet\}

Tüm ürünleri alt sayfanın içine yerleştirin. Bu ürünlerden biri, ana CTA düğmesinde gösterilen fiyatı da belirleyecek.

Ürün yönetimi hakkında daha fazla bilgi için [Satın alma işlemlerini ayarlama](paywall-product-block) konusuna bakın.

Ü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 çoğu durumda iyi çalışır. Öğe, alt sayfanın dışında ekranda görünür.
2. **Layers** panelinde, Products katmanını alt sayfanın içindeki **Content** konteynerine sürükleyin.
3. Tuvaldeki her ürün kartını seçin ve **Design** sekmesindeki açılır listeden bir ürün seçin.

## 5. Alt sayfaya satın alma düğmesi ekleyin \{#add-the-purchase-button-inside-the-bottom-sheet\}

Alt sayfanın, kullanıcının listeden seçtiği planı satın almak için kendi satın alma düğmesine ihtiyacı vardır.

1. **+** > **Buttons** seçeneğine tıklayın ve bir düğme ön ayarı seçin.
2. **Layers** panelinde, yeni düğmeyi alt sayfanın içindeki **Content** kapsayıcısına sürükleyin.

3. Butonu seçili haldeyken sağ panelde **Interactions** sekmesini açın.
4. **Add trigger** > **On tap** seçeneğine tıklayın, ardından **Add action** butonuna tıklayın.
5. **Action** alanını **Purchase**, **Product** alanını `products.selectedProduct` olarak ayarlayın.

## 6. Alt sayfanın içine footer bağlantıları ekleyin \{#add-the-footer-links-inside-the-bottom-sheet\}

:::important
Buton içine yerleştirilmiş metinlerde [satır içi bağlantılar](onboarding-text#inline-link) kullanmayın. Bunun yerine butonun üzerinde **Open URL** eylemini ayarlayın.
:::

Kullanım koşulları, gizlilik politikası ve satın almaları geri yükleme seçeneği sayfanın alt kısmında yer alır; bu sayede ana ekran sade kalır.
1. **+** > **Buttons** > **Links** seçeneğine tıklayın. Bu, Restore Purchases, Terms of Use ve Privacy Policy içeren bir satır ekler.
2. **Layers** panelinde, Links satırını alt sayfanın içindeki **Content** kapsayıcısına sürükleyin.
3. **Layers** panelinde, **Terms of Use** butonunu seçin. **Interactions** sekmesini açın ve kullanım koşulları URL'nizi **Open URL** alanına yapıştırın.
4. Gizlilik URL'niz için **Privacy Policy** butonuyla aynı adımı tekrarlayın.
5. **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.

## 7. Alt sayfayı gizleyin \{#hide-the-bottom-sheet\}

Sayfanın içeriği hazır olduğuna göre, varsayılan olarak ekranda görünmemesi için gizleyin. Kullanıcılar son adımda **Show all plans** seçeneğine dokunarak sayfayı açacak.

**Layers** panelinde alt sayfayı seçin ve durumunu **Hide** Hide olarak ayarlayın. Sayfa katman ağacında kalmaya devam eder ancak tuval üzerinde artık görüntülenmez.

## 8. Ana abone olma düğmesini ekle \{#add-the-main-subscribe-button\}

Ekrandaki ana düğme, kullanıcıyı tek dokunuşla aylık plana abone eder. Etiketinde aylık ürünün fiyat değişkeni kullanılır; böylece düğme her zaman ürünle senkronize kalır.
1. **Layers** panelinde ekrana tıklayın; böylece yeni öğeler alt sayfanın içine değil, köke eklenir.
2. **+** > **Buttons** seçeneğine tıklayın ve bir düğme ön ayarı seçin.
3. Düğme seçiliyken **Design** sekmesini açın ve imleci **Content** alanına getirin. Variable icon simgesine tıklayıp ana ürün için fiyat değişkenini seçin. Geri kalan etiketi çevresine ekleyin — örneğin, `Subscribe for {price}/month`.

4. **Interactions** sekmesine geçin ve **Add trigger** > **On tap** > **Add action** seçeneğine tıklayın.
5. **Action** alanını **Purchase**, **Product** alanını ise ihtiyacınız olan ürüne ayarlayın. Alt sayfa butonunun aksine bu buton, `products.selectedProduct` yerine belirli bir ürünü hedefler.

## 9. 'Tüm planları göster' bağlantısını ekleyin \{#add-the-show-all-plans-link\}

Abone ol düğmesinin altındaki bir metin bağlantısı, dokunulduğunda alt sayfayı açar. Bunu **Button Label** stiliyle bir metin öğesi olarak eklemek, bir aksiyon bağlamanıza olanak tanırken görünümü sade tutar.

Göster/Gizle aksiyonu hakkında daha fazla bilgi için bkz. [Aksiyonlar — Öğeleri göster/gizle](onboarding-actions#showhide-elements).

Bağlantıyı eklemek için:
1. **Layers** panelinde ekran seçiliyken **+** > **Text** > **Button Label** seçeneğine tıklayın.
2. Metin öğesi seçiliyken **Content** alanını `Show all plans` olarak düzenleyin.
3. **Interactions** sekmesini açın ve **Add trigger** > **On tap** > **Add action** seçeneğine tıklayın.
4. **Action** değerini **Show** olarak ayarlayın ve açılır listeden bottom sheet öğesini seçin.

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