Bu şablon, önce tek bir öne çıkan teklifi sunar; tam plan listesine giden göze çarpmayan bir bağlantıyla birlikte. Show all plans butonuna dokunulduğunda, diğer ürünleri, bir satın alma düğmesini ve alt bağlantıları 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

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

1. Ekran düzenini ayarlayın

Hero görseli ekranın arka planı olarak kullanın ve geri kalan içerikleri alta gruplayın; böylece görsel ekranın üst kısmını kaplar.

Ekran özelliklerinin tam listesi için bkz. Ekranlar ve katmanlar — Ekran ayarları.

Ekranı yapılandırmak için:

1. Tuvaldeki boş bir alana tıklayarak ekranı seçin.

2. System UI altında, hero görselin ekran kenarlarına kadar uzanması için Safe area seçeneğini devre dışı bırakın.

   Warning

   Flow’unuz iPhone Duo’yu hedefliyorsa, Safe area seçeneğini açık tutun. Aksi takdirde, Duo’nun yan tarafındaki durum çubuğu metin ve düğmelerin üzerini kapatabilir.

3. Fill altında Image seçeneğini belirleyin ve hero görselinizi yükleyin.

4. Layout altında yönü, boşluğu ve hizalamayı içeriği istediğiniz yere sabitleyecek şekilde yapılandırın. Bu şablonda, küçük bir boşluk ve bottom-middle hizalamasıyla Vertical yönü; başlık ve düğmeleri ekranın alt kısmında gruplandırır.

2. CTA başlığı ekle

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

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.

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

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

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

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

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

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

Abone ol butonunun altındaki bir metin bağlantısı, dokunulduğunda alt sayfayı açar. Bunu Button Label stiliyle bir metin öğesi olarak eklemek, görünümü sade tutar ve aynı zamanda bir eylem atamanıza olanak tanır.

Show element eylemi hakkında daha fazla bilgi için bkz. Bir öğeyi göster veya gizle.

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 element olarak ayarlayın ve Elements açılır menüsünden alt sayfayı seçin. Alt sayfa kendi yukarı kayma hareketiyle anında açılır: Animation ve Delay ayarları bu durum için geçerli değildir.

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.