Element kütüphanesini açmak ve bir ekrana yeni element eklemek için sol paneldeki ya da cihaz önizlemesinin üzerindeki artı düğmesine Plus tıklayın. Elementler aşağıdaki kategorilere ayrılır:

• Temel Elementler (düzen kapsayıcıları, metin, medya, listeler, rozetler, onay işaretleri)
• Formlar ve Sınav (düğmeler, giriş alanları, sınavlar, sekmeler)
• Paywall ve Ticaret (ürünler, deneme geçiş düğmesi, kullanıcı etkileşimi, geri sayım)
• İlerleme göstergeleri ve yükleyiciler

Her element için Adapty, yer tutucu içerik veya önceden tanımlanmış etkileşimler içeren şablonlar olan birden fazla ön ayar sunar.

Temel Bilgiler

Düzen

Düzen öğeleri, içindeki elemanları organize eden kapsayıcılardır.

• Vertical Stack: alt öğeleri yukarıdan aşağıya sıralar
• Horizontal Stack: alt öğeleri soldan sağa sıralar
• Dividers (yatay ve dikey): içerik bölümlerini görsel olarak ayıran çizgiler
• Carousel: kaydırılabilir bir kapsayıcı
• Bottom Sheet: ekranın altına sabitlenmiş, yukarı kayan bir panel

Metin statik olabileceği gibi değişkenler (örn. kullanıcı adı) ve yerelleştirilmiş içerik de içerebilir.

Aşağıdaki metin ön ayarları varsayılan olarak gelir. Bu listeyi değiştirmek için kayıtlı metin stilleri ekleyip çıkarabilirsiniz:

• H1
• H2
• H3
• Button Label
• Body
• Caption
• Small Label

Medya

• Icon: yerleşik ikon kütüphanesinden bir vektör ikonu; boyutu ve rengi özelleştirilebilir
• Image: bir görsel — kendinizinkini yükleyin veya bir URL girin
• Video: 50 MB’a kadar dosyalar için gömülü bir video oynatıcı. Döngüyü destekler.

Liste

Liste öğeleri, içeriği tekdüze biçimlendirilmiş veriler halinde görüntülemek için satır ve sütunlar şeklinde düzenler. Arka planda bir liste aslında bir stack’tir.

• Icon List: Önde bir ikon ve metin etiketi içeren satırlar
• Timeline: Birbirine bağlı adım göstergeleri içeren dikey sıralama
• Image List: Önde bir görsel ve metin içeren satırlar
• Icon Cards: Ortada ikon bulunan kart ızgarası
• Image Cards: Görsel içeren kart ızgarası
• Comparison Table: Planları karşılaştıran çok sütunlu tablo (örn. Ücretsiz ve Pro)

Rozet

Bir öğeyi vurgulamak için kullanılan küçük bir üst katman etiketi — genellikle indirimleri veya belirli planları tanıtmak için kullanılır (ör. “5% tasarruf et”). Bir rozeti başka bir öğenin üzerine yerleştirmek için mutlak konumlandırma kullanın.

İşaret Kutuları

Seçilebilir öğelerin içinde kullanılan seçim göstergesi ikonları. Her işaret kutusu ön ayarı, kullanıcı seçimine göre otomatik olarak güncellenen açık ve kapalı durum içerir.

• Checkbox
• Circle
• Radiobutton
• Toggle

Formlar ve Sınav

Düğmeler

Düğmeler, dokunulduğunda başka bir ekrana yönlendirme, URL açma veya flow’u kapatma gibi eylemler tetikler.

Her önayar bir başlangıç noktasıdır — dilediğiniz gibi stilini değiştirip istediğiniz eylemi atayabilirsiniz. Düğme davranışını Interactions sekmesinden yapılandırın.

• Base: ortalanmış metin içeren standart düğme
• Right Icon: sağ tarafında simge bulunan düğme
• With Subtitle: iki satır metin içeren düğme
• Pulse Animation: animasyonlu nabız efekti içeren düğme
• Purchase: satın alma işlemi başlatan düğme
• Secondary Outline: ikincil eylemler için kenarlıklı düğme
• Back: önceki ekrana geri dön
• Close flow: flow’dan çık
• View more plans: ek ürün seçeneklerini göster
• Links: alt bilgi bağlantıları

Girdiler

Girdi alanları kullanıcıların veri girmesini sağlar. Her alan, uygun bir giriş yöntemi ve doğrulama kuralları uygular.

• Metin
• E-posta
• Şifre
• Sayı
• Telefon numarası
• Tarih
• Saat
• Tarih & Saat

Tarih, Saat ve Tarih & Saat girdileri, üzerlerine dokunulduğunda cihazın yerel seçiciyi (çark veya takvim) açar.

Kullanıcı girdisini işlemek ve koşullu mantığı etkilemek için değişkenler kullanın.

Sınavlar

Sınav öğeleri, anketler, tercih toplama ve kullanıcı segmentasyonu için çok seçenekli ekranlar sunar. Kullanıcının yanıtına göre flow’u dallandırmak için etkileşimler ayarlayın.

• Icon Options: simgeli tek sütunlu liste
• Emoji Options: emojili tek sütunlu liste
• Image Options: görselli tek sütunlu liste
• Icon Grid: simgeli çok sütunlu ızgara
• Emoji Grid: emojili çok sütunlu ızgara
• Image Grid: fotoğraflı çok sütunlu ızgara
• Rating: numaralı ölçek (örn. 1–5)

Sekmeler

Sekmeler, bir ekran bölümünü birbirine geçişli içerik panellerine ayırır. Kullanıcı bir sekme seçer ve aşağıdaki içerik buna göre güncellenir. Genellikle ürün planlarını gruplamak veya aylık ve yıllık fiyatlandırma arasında geçiş yapmak için kullanılır.

• Segment control: seçili sekmenin etrafında yuvarlatılmış köşeleri olan hap şeklinde geçiş elemanı
• Button Tabs: ayrı düğme stilli sekmeler
• Underline: seçili sekmeyi işaretleyen altı çizgili metin etiketleri

Paywall & Commerce

Ürünler

Ürün öğeleri, uygulama içi satın alma ayrıntılarını gösterir ve ürün seçimini yönetir. Her ön ayar, ürün verilerini farklı bir düzende sunar. Öğeleri gerçek Adapty verileriyle doldurmak için ürünlerinizi bağlayın.

• Vertical List: üst üste ürün kartları
• Horizontal List: yan yana ürün kartları
• Feature Carousel: özellik listeleri olan kaydırılabilir kartlar
• Feature Cards: özellik listeleri olan statik kartlar
• Banner List: satır içi rozetlere sahip kompakt satırlar

Deneme sürümü geçiş düğmesi

Görüntülenen ürünü standart fiyatı ile ücretsiz deneme teklifi arasında geçiş yapan bir düğme. Etkinleştirildiğinde, ürün seçimi ve öğe durumu otomatik olarak güncellenir.

Kullanıcı etkileşimi

Güven oluşturan ve dönüşümü teşvik eden, kullanıcı değerlendirmelerini içeren önceden biçimlendirilmiş bloklar. Şablonlar, yer tutucu içerikli temel kaplardır.

• Review: yıldız puanı, değerlendirme ve değerlendiren adını içerir
• Rating: yıldız göstergesiyle birlikte sayısal puan
• App Rating: yıldız çubuğu ve değerlendirme sayısıyla büyük puan gösterimi
• Social Proof: kullanıcı sayısıyla birlikte avatar yığını

Geri Sayım

Sıfıra ulaşana kadar saat, dakika ve saniye sayarak geri sayar. Sınırlı süreli teklifler için aciliyet hissi yaratmak amacıyla kullanabilirsiniz. Zamanlayıcı sıfıra ulaştığında başka bir ekrana yönlendirme veya indirim rozetini gizleme gibi eylemler tetiklenebilir.

• Inline: kompakt sayısal gösterim
• Inline with units: birim etiketli sayısal gösterim
• Badge: küçük vurgulu zamanlayıcı katmanı
• Blocks: günler, saatler, dakikalar ve saniyeler için ayrı kartlar

İlerleme

İlerleme göstergeleri

Kullanıcının çok ekranlı bir flow içindeki konumunu gösteren adım tabanlı ilerleme çubukları. Kullanıcının kaç adım kaldığını görmesi gereken onboarding dizileri için kullanışlıdır.

• Doğrusal (Linear): Kullanıcı ilerledikçe dolan tek ve sürekli bir çubuk
• Bölümlü (Segmented): Her adıma karşılık gelen ayrı parçalara bölünmüş bir çubuk
• Bağlayıcılar (Connectors): Kısa bağlayıcı çizgilerle birbirine bağlanan numaralı adım işaretçileri

Yükleyiciler

Geçişler için animasyonlu yükleme göstergeleri. Uygulamanız kullanıcı verilerini işlerken — örneğin bir anket gönderildikten sonra — yükleyici kullanın.

• Spinner: dönen dairesel gösterge
• Spinner with label: bir metin etiketiyle eşleştirilmiş spinner (örn. “Yükleniyor…”)
• Loader: yatay ilerleme çubuğu