---
title: "Elementler"
description: "Flow Builder'da kullanılabilen tüm görsel elementler: düzen kapsayıcıları, metin, medya, listeler, düğmeler, girişler, ürünler ve daha fazlası."
---

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](#basics) (düzen kapsayıcıları, metin, medya, listeler, rozetler, onay işaretleri)
- [Formlar ve Sınav](#forms--quiz) (düğmeler, giriş alanları, sınavlar, sekmeler)
- [Paywall ve Ticaret](#paywall--commerce) (ürünler, deneme geçiş düğmesi, kullanıcı etkileşimi, geri sayım)
- [İlerleme göstergeleri](#progress) 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 \{#basics\}
### Düzen \{#layout\}

:::link
Ana makale: [Düzen Öğeleri](builder-containers)
:::

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

:::link
Ana makale: [Metin içeriği](onboarding-text)
:::

Metin statik olabileceği gibi [değişkenler](onboarding-variables) (örn. kullanıcı adı) ve [yerelleştirilmiş içerik](paywall-localization) de içerebilir.

Aşağıdaki metin ön ayarları varsayılan olarak gelir. Bu listeyi değiştirmek için [kayıtlı metin stilleri](builder-styling#reusable-styles) ekleyip çıkarabilirsiniz:

- H1
- H2
- H3
- Button Label
- Body
- Caption
- Small Label
### Medya \{#media\}

:::link
Ana makale: [Görseller, videolar ve ikonlar](custom-media)
:::

:::note
Bu bölüm ön plan medya öğelerini açıklar. Tüm ekranı bir görsel veya videoyla doldurmak için [ekran arka planını](paywall-layout-and-products#screen-background) değiştirin.
:::

- **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 \{#list\}

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](manage-paywall-ui-elements#layout)'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 \{#badge\}

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](manage-paywall-ui-elements#absolute) kullanın.
### İşaret Kutuları \{#checkmarks\}

[Seçilebilir öğelerin](flow-selectable-elements) 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 \{#forms--quiz\}
### Düğmeler \{#buttons\}

:::link
Ana makale: [Düğmeler](paywall-buttons)
:::

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](builder-ui#interactions-properties) 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 \{#inputs\}

:::link
Ana makale: [Girdiler ve formlar](builder-inputs-and-forms)
:::

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](onboarding-variables) kullanın.
### Sınavlar \{#quizzes\}

:::link
Ana makale: [Anketler ve sınavlar](onboarding-quizzes)
:::

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](onboarding-navigation-branching) 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 \{#tabs\}

:::link
Ana makale: [Sekmeler](builder-tabs)
:::

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 \{#paywall--commerce\}
### Ürünler \{#products\}

:::link
Ana makale: [Ürünler](paywall-product-block)
:::

Ü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
{/* Not sure if will ship in v1 - **Bottom Sheet**: product selector inside a slide-up panel */}
### Deneme sürümü geçiş düğmesi \{#trial-toggle\}

:::link
Ana makale: [Geçiş düğmeleri](builder-toggles)
:::

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 \{#user-engagement\}

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 \{#countdown\}

:::link
Ana makale: [Geri sayım zamanlayıcısı](paywall-timer)
:::

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 \{#progress\}

:::link
Ana makale: [Yükleyiciler ve ilerleme çubukları](builder-loaders-and-progress-bars)
:::
### İlerleme göstergeleri \{#progress-indicators\}

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 \{#loaders\}

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
{/* - **Loader with label**: progress bar paired with a text label and percentage */}