Bu, en yaygın kullanılan paywall şablonudur. Bağımsız 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ı ve 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 stilleri ayarlayın

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.

Stilleri ayarlamak için:

1. Sol panelde 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 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ı 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ı.

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

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

Ü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ü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 tıklayı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 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

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.

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.