Ana Flow & Paywall Builder arayüzü; görsel öğeler eklemenizi, özelliklerini düzenlemenizi ve kullanıcı akışının mantığını değiştirmenizi sağlayan tüm araçları içerir. Bu makale, arayüzün her alanını kapsar: ne işe yaradığını ve nerede bulunduğunu.

Proje kontrolleri ve kullanışlı kısayollar (üst araç çubuğu)

• Kapat : Builder’dan çıkıp flows sayfasına dönün.
• Uygulama adı : Flow’un ait olduğu uygulamayı gösterir.
• Tüm flow’lar : Bu uygulamaya ait tüm flow’ların listesini açın.
• Flow durumu: Flow adının solundaki simge, mevcut flow durumunu gösterir:
  • Taslak
  • Yayımlanıyor (dönen yükleyici)
  • Başarısız
  • veya Canlı .
• Flow’u yeniden adlandırma: Flow adına tıklayarak yeniden adlandırın. Birden fazla flow aynı ada sahip olabilir — her yeni flow’a benzersiz bir ad verin.
• Görünüm modu geçişi: Tasarım görünümü ile remote config görünümü arasında geçiş yapın.
• Geri Al/Yeniden Yap: Flow değişikliklerini geri almak veya yeniden yapmak için ok simgelerine tıklayın. Geri almak için ⌘Z / Ctrl+Z de kullanabilirsiniz.
• Taslak kaydet / Yayımla: Taslak kaydet’e tıklayarak ilerlemenizi canlıya geçmeden kaydedin (⌘ / Ctrl+S). Yayımla düğmesine erişmek için açılır menüyü açın. Flow’unuzu bir placement’a yalnızca yayımladıktan sonra ekleyebilirsiniz.

Önizleme alanı (merkez)

Çalışma alanının merkezi, flow’unuzun mobil cihazda nasıl görüneceğini simüle eder.

• Bir öğeyi seçmek ve özelliklerini düzenlemek için üzerine tıklayın. Bir kapsayıcının içindeki alt öğeyi seçmek için önce kapsayıcıya, ardından alt öğeye tıklayın.
• Ekranın kendine ait özellikleri düzenlemek için herhangi bir öğenin dışına tıklayın ya da Screens and Layers panelinden ekranı seçin.
• Bir öğenin sırasını değiştirmek için Screens and Layers panelinde o öğenin girişini yukarı veya aşağı sürükleyin.

Cihaz önizlemesinin üzerindeki aktif ekran çubuğu

• Screen name — geçerli ekranın adını gösteren bir etiket.
• Toggle animations — element animasyon önizlemelerini açar veya kapatır; kapatılana kadar sürekli oynatılır. Yalnızca aktif ekranda en az bir animasyon olduğunda görünür. Canlı cihazdaki animasyonların görünürlüğünü etkilemez.
• Add element — geçerli ekranda element kitaplığını açar. Ekranlar ve Katmanlar panelinin üstündeki + düğmesiyle aynı işlevi görür; panel daraltıldığında kullanışlıdır.

Görünüm kontrolleri (alt araç çubuğu)

Alt araç çubuğundaki araçlar, önizlemeyi kontrol etmenizi sağlar.

• Device: Görüntü alanı boyutlarını ve cihaz görünümünü değiştirmek için mevcut iPhone ve Android telefon modellerinden birini seçin.
• Screen orientation: Flow’unuzu farklı yönlerde önizlemek için dikey ve yatay modlar arasında geçiş yapın.
• Light theme ve Dark theme: Flow’u her temada önizleyin. Düğmeler yalnızca flow’a karanlık tema eklenmiş ise görünür.
• Locale: Flow’unuzu yerelleştirilmiş içerikle önizlemek için bir dil bölgesi seçin.
• View options: Cihaz çerçevesini ve güvenli alan kılavuzlarını açıp kapatın.

Ekran ve öğe özellikleri (sağ panel)

Ekran ayarları ve düzeni

Hiçbir öğe seçili değilken, sağ panel aktif flow ekranının özelliklerini ayarlamanıza olanak tanır. Ayarlayabileceğiniz özellikler şunlardır:

• Sistem arayüzüyle etkileşimler (örneğin, durum çubuğunun görünüp görünmeyeceği)
• Otomatik düzen kuralları
• Arka plan (renk, görsel veya video)
• Dolgu boyutu
• Dikey kaydırma davranışı

Ekran, interaktif quizler gibi belirli öğeler içeriyorsa, bu liste ilgili özelliklerle genişler.

Öğe özellikleri

Bir öğe seçtiğinizde, sağ panel onun stil ve etkileşim özelliklerini değiştirmenize olanak tanır.

Tasarım özellikleri

Design sekmesi, seçili öğenin görsel görünümünü ve yerleşimini yapılandırmanıza olanak tanır:

• Visibility: Öğeyi göster veya gizle. Öğenin ne zaman görünür olacağını belirleyen kurallar ayarlamak için Conditional görünürlüğü etkinleştir.
• Position: Relative, Absolute veya Fixed konumlandırma arasından seç.
• Content (yalnızca metin öğeleri): Öğenin metin içeriğini düzenle, değişkenler ekle ve yerelleştirmeleri yönet.
• Typography (yalnızca metin öğeleri): Yazı tipi, kalınlık, boyut, renk, hizalama, dekorasyon ve kırpma ayarlarını yapılandır.
• Spacing: Öğenin margin ve padding değerlerini ayarla.
• Effects: Düşen gölge, iç gölge veya katman bulanıklığı ekle.
• Animation: Animasyonlu efektler ekle (ör. Pulse) ve bunların zamanlamasını ve yoğunluğunu yapılandır.
• Appearance: Opaklık ve döndürme ayarlarını düzenle.
• Layout: Bir düzen yönü seç (dikey veya yatay) ve alt öğelerin nasıl dağıtılacağını belirle.

Etkileşim özellikleri

Interactions sekmesi, kullanıcı seçili öğeyle etkileşime girdiğinde ne olacağını tanımlamanıza olanak tanır. Her etkileşim bir tetikleyici ve bir veya daha fazla eylemden oluşur:

• Tetikleyiciler, ne zaman bir şeyin gerçekleşeceğini belirler — örneğin On Tap (kullanıcı elemana dokunur).
• Eylemler, ne olacağını belirler — örneğin başka bir ekrana geçmek veya bir değişkenin değerini değiştirmek. Birden fazla eylemi tek bir tetikleyiciye ekleyerek sırayla zincirleyebilirsiniz.

Birden fazla eylemi sırayla çalıştırmak için aynı elemana birden fazla tetikleyici ekleyebilirsiniz.

Sol panel

Sol panel, hangi düğmenin etkin olduğuna bağlı olarak işlevini değiştirir. Aşağıdakiler arasından seçim yapabilirsiniz:

• Ekranlar ve katmanlar
• Element ekle
• Ürünler
• Stiller
• Değişkenler
• Yerelleştirme
• AI Editor

Ekranlar ve Katmanlar

Katmanlar düğmesi Ekranlar ve Katmanlar panelini açar (Flow & Paywall Builder’ı açtığınızda varsayılan olarak görüntülenir).

Her ekranı bir katman ağacı olarak gösterir. Ekrandaki her öğe bir katmandır; kapsayıcıların içinde ise alt öğeleri iç içe yer alır. Katmanları sürükleyip bırakarak yeniden sıralayabilirsiniz.

Öğe seçimi

Artı düğmesine tıklarsanız sol panel, mevcut UI öğelerini ve varyasyonlarını listeler. Bir öğeye tıklayarak onu mevcut ekrana yeni bir katman olarak ekleyebilirsiniz.

Ürünler

Ürünler düğmesi, ürün listesini açar. Flow’unuzdaki her ekrana hangi ürünlerin atandığını gösterir. Bu görünümü kullanarak flow’un ürünlerini ve tekliflerini yönetebilirsiniz.

Stiller

Styles düğmesi Styles panelini açar.

Metin ayarlarını veya bir dolguyu (renk, gradyan ya da arka plan görseli gibi) depolamak için bir stil oluşturun ve birden fazla ekrandaki öğelerde yeniden kullanın. Panelde metin stilleri için Text sekmesi, renk stilleri için Colors sekmesi bulunur.

Değişkenler

Köşeli parantez düğmesi Değişkenler panelini açar.

Burada flow’unuz için değişken oluşturabilir ve yönetebilirsiniz. Çalışma zamanında SDK, değişken yer tutucularını gerçek verilerle değiştirir: uygulamanızın özel etiketler için aktardığı değerler, ürün fiyatları, yerelleştirilmiş dizeler ve daha fazlası.

Değişkenler iki sekme halinde gruplandırılmıştır:

• Özel: Siz oluşturursunuz, iki türde gelir:
  • Düzenli değişkenler: Değerleri, flow içindeki Set variable aksiyonlarıyla değişir.
  • Özel etiketler: Değerleri uygulamanızdan, Adapty SDK aracılığıyla gelir.
• Öğeler: Kullanıcı etkileşimiyle belirlenen değerler — örneğin sınav yanıtları, açma/kapama durumları veya sekme seçimi.

Ürün değişkenleri — fiyat, ad ve diğer ürün verileri — bu panelde listelenmez. Bir metin öğesini düzenlerken bunlara doğrudan başvurun.

Değişkenleri şunlar için kullanın:

• Metin bağlama: Statik dizeler yerine dinamik içerik gösterin.
• Uygulama verilerinizi gösterin: Özel etiket kullanarak oyuncunun jeton bakiyesi gibi uygulamanızdaki bir değeri görüntüleyin.
• Görünürlüğü kontrol edin: Koşullara göre öğeleri gösterin veya gizleyin (örneğin, ücretsiz deneme için uygun kullanıcılara yalnızca ücretsiz deneme zaman çizelgesini gösterin).
• Kullanıcıyla etkileşime geçin: Formlar veya testler gibi kullanıcı giriş alanlarındaki verilere erişin.

Yerelleştirme

Localizations paneli, flow’unuzun yerelleştirilebilir içeriklerini tek bir tabloda listeler; ekrana göre düzenlenir ve her yerel ayar için bir sütun gösterilir:

• Metin, her koşullu metin dalı ve giriş alanlarının yer tutucuları dahil.
• Her Show alert eyleminin başlığı ve mesajı.
• Her Open URL eyleminin hedefi.
• Her locale için ayrı dosya kullanılan görseller ve videolar.

Bu panelden şunları yapabilirsiniz:

• Yeni diller ekleyin ve yerelleştirilmiş metinleri doğrudan düzenleyin.
• Yapay zeka ile çeviri yapın.
• Flow’unuz için varsayılan dili seçin.
• Çeviri durumunu takip edin — her satır Done, Missing veya eylem URL’leri için Default olarak işaretlenir.
• Ekrana veya duruma göre filtreleyin ya da anahtar kelimeyle arama yapın.
• İçeriği Adapty dışında toplu olarak çevirmek için tüm flow veya tek bir dil için Import ya da Export yapın.

AI Editör

Işıltı düğmesi, AI Editör sohbetini açar.

Bir değişikliği sade bir dille açıklayın; Adapty baktığınız ekranı yeniden yazar, yeniden biçimlendirir ya da düzenler. Adapty ardından nelerin değiştiğini size anlatır ve tek tıklamayla geri alabilirsiniz.

Mevcut bir tasarımla eşleştirmek istiyorsanız, tarif etmek yerine ekran görüntüsünü ekleyin.