Bu, en yaygın kullanılan paywall şablonudur. Tek başına bir ekran olarak kullanabilir ya da çok ekranlı bir flow’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

• 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 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.

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

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ı.

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

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ı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

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

Ö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

Ü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.

Ü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

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

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.

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.