Bu, en yaygın kullanılan paywall şablonudur. Tek başına bir ekran olarak kullanabilir ya da çok ekranlı bir flow’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ı ile gizlilik politikasına yönelik alt bağlantılar içerir.

Başlamadan önce

• Adapty Kontrol Paneli’nde ürün oluşturun.
• Adapty’yi App Store ve Google Play’e bağlayın.

1. Yeniden kullanılabilir stiller oluşturun

Yeniden kullanılabilir stiller, her ekranda aynı tipografi ve renkleri tek tıklamayla uygulamanızı sağlar. Her yeni flow, varsayılan bir metin stilleri setiyle (H1, Body, Button Label vb.) gelir — elemanlara geçmeden önce bunları tasarımınıza uyacak şekilde düzenleyin. Ekran boyunca kullanacağınız marka renkleri için renk stilleri ekleyin.

Ayrıntılı talimatlar için bkz. Element styling — Reusable styles.

Stilleri ayarlamak için:

1. Sol panelde Styles panelini açın.
2. Text sekmesinde, mevcut bir stile tıklayarak yazı tipini, kalınlığını, boyutunu ve rengini düzenleyin. Yalnızca varsayılanlar ihtiyaçlarınızı karşılamıyorsa yeni stiller ekleyin.

3. Colors sekmesinde Create style düğmesine tıklayın ve ekranda yeniden kullanmayı planladığınız renkleri ekleyin.

2. Ekran düzenini ayarlayın

Ekranın kendisi, eklediğiniz her şey için bir kap görevi görür. Daha sonra eklediğiniz öğelerin doğru dağılabilmesi 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ı.

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 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 görsel. Bu örnekte iki renk durağı olan bir Gradient kullanılmaktadır.

3. Kapat düğmesini ekle

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

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

Başlığı eklemek için:

1. + > Text > H1 seçeneğine tıklayın.
2. H1 seçiliyken sağ paneldeki 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 tıklayın ve Wrap > Wrap in Horizontal Container seçeneğini seçin.

2. H1 katmanını yeni yatay container’ın içine sürükleyin.

İki öğeyi hizalamak için:

1. Kapat düğmesi boyutunu ve H1 yazı tipi boyutunu, ikisi aynı satırda rahatça yer alacak şekilde ayarlayın.
2. Yatay kapsayıcı seçiliyken, sağ panelden hizalama ve dağılım ayarlarını yaparak öğelerin doğru şekilde sıralanmasını sağlayın.

5. Değer açıklamasını ekleyin

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

Özellik listesi, aboneliğin kilidini açmanın neler sunduğunu öne çı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. Öğeler — Liste.

Özellik listesini eklemek için:

1. + > List seçeneğine tıklayın ve bir liste ön ayarı seçin. Icon List, paywalllar için en yaygın kullanılandır.
2. Her satırı seçerek Content alanındaki başlık ve açıklamayı 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

Ü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ünleri yönetme hakkında daha fazla bilgi için bkz. Satın alma işlemlerini ayarlayı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 en yaygın kullanılanıdır.
2. Tuvaldeki her ürün kartını seçin ve Design sekmesindeki açılır listeden bir ürün seçin. Açılır liste, Adapty Kontrol Paneli’nde yapılandırılmış tüm ürünleri gösterir.
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 metnini Content alanında düzenleyin. Diğer kartlardaki rozeti gizlemek için her rozet katmanının yanındaki göz simgesine tıklayarak görünürlüğünü kapatın.

8. Satın alma düğmesini ekleyin

Satın alma düğmesi, kullanıcının seçtiği ürün için uygulama içi satın almayı başlatır. products.selectedProduct değişkeni her zaman ekrandaki seçili ürüne çözümlenir.

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

1. + > Buttons seçeneğine tıklayın ve bir düğme ön ayarı 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 değerini Purchase, Product değerini ise products.selectedProduct olarak ayarlayın.

9. Alt bilgi bağlantıları ekleyin

Alt bilgi, kullanım koşulları ve gizlilik politikası bağlantılarını (uygulama mağazalarının zorunlu kıldığı) ve önceki satın almaları geri yükleme düğmesini içerir.

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

1. + > Buttons > Links seçeneğine tıklayın. Bu işlem Restore Purchases, Terms of Use ve Privacy Policy içeren bir satır ekler.
2. Layers panelinde Terms of Use butonunu seçin. Interactions sekmesini açın — Open URL eylemi zaten eklenmiş durumda. Eyleme tıklayıp hedef URL’yi girin.
3. Gizlilik URL’niz ile Privacy Policy butonu için de aynı adımları tekrarlayın.
4. Restore Purchases butonunu olduğu gibi bırakın. Bu butonun eylemi önceden yapılandırılmıştır.

Sonraki adımlar

• Flow’unuzu kaydedin ve yayınlayın.
• Kullanıcılara göstermeye başlamak için flow’u bir placement’a ekleyin.