---
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 kitaplığını açmak ve ekrana yeni bir element eklemek için sol paneldeki veya cihaz önizlemesinin üstündeki artı düğmesine Plus tıklayın.
Öğeler şu kategorilere ayrılır:
- [Temel öğeler](#basics) (düzen kapsayıcıları, metin, medya, listeler, rozetler, onay işaretleri)
- [Formlar & Sınav](#forms--quiz) (düğmeler, giriş alanları, sınavlar, sekmeler)
- [Paywall & Ticaret](#paywall--commerce) (ürünler, deneme geçişi, kullanıcı etkileşimi, geri sayım)
- [İlerleme göstergeleri](#progress) ve yükleyiciler

Her öğe 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çlerindeki öğeleri organize eden kaplardır.
- **Vertical Container**: alt öğeleri yukarıdan aşağıya sıralar
- **Horizontal Container**: alt öğeleri soldan sağa sıralar
- **Dividers (horizontal and vertical)**: içerik bölümlerini görsel olarak ayıran çizgiler
- **Carousel**: kaydırılabilir bir container
- **Footer**: ekranın alt kısmına sabitlenmiş, kaydırma alanının dışında kalan panel
- **Bottom Sheet**: ekranın altına bağlı, yukarı kayan panel
### Metin \{#text\}

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

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

Aşağıdaki metin ön ayarları standart olarak gelir. Bu listeyi değiştirmek için [kaydedilmiş metin stillerini](builder-styling#reusable-styles) ekleyin veya kaldırın:

- H1
- H2
- H3
- Button Label
- Body
- Caption
- Small Label
**Metin** menüsü aynı zamanda **Old Price** öğesini de içerir — çarpan kullanılarak otomatik hesaplanan, üzeri çizili ürün fiyatı. Bkz. [Eski fiyat ekleme](onboarding-text#add-an-old-price).
### Medya \{#media\}

:::link
Ana makale: [Görseller, videolar ve simgeler](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 simge kütüphanesinden boyutu ve rengi özelleştirilebilen vektör simge
- **Image**: görsel — kendinizinkini yükleyin veya bir URL girin
- **Video**: 50 MB'a kadar dosyalar için gömülü video oynatıcı. Döngüyü destekler.
### Liste \{#list\}

Liste öğeleri, düzenli biçimlendirilmiş verileri göstermek için içeriği satır ve sütunlar halinde düzenler. Arka planda bir liste, bir [container](manage-paywall-ui-elements#layout)'dır.

- **Icon List**: öne yerleştirilmiş ikon ve metin etiketiyle satırlar
- **Timeline**: bağlantılı adım göstergeleriyle dikey sıralama
- **Image List**: öne yerleştirilmiş görsel ve metinle satırlar
- **Icon Cards**: ortalanmış ikonlardan oluşan kart ızgarası
- **Image Cards**: görsellerden oluşan kart ızgarası
- **Comparison Table**: planlar arasındaki özellikleri karşılaştıran çok sütunlu tablo (ör. Ücretsiz vs Pro)

### Rozet \{#badge\}

Bir öğeyi öne çıkarmak için kullanılan küçük bir yer paylaşımı etiketi — genellikle indirimleri veya belirli planları tanıtmak için kullanılır (örn. "5% Tasarruf Et"). 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 öğeler](flow-selectable-elements) içinde kullanılan seçim göstergesi ikonları. Her işaret kutusu ön ayarı, kullanıcının seçimine göre otomatik olarak güncellenen bir açık ve bir kapalı durum içerir.

- Checkbox
- Circle
- Radiobutton
- Toggle
## Formlar & Test \{#forms--quiz\}
### Düğmeler \{#buttons\}

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

Düğmeler, dokunulduğunda eylemler tetikler — başka bir ekrana gitme, URL açma veya flow'u kapatma gibi.

Her hazır şablon bir başlangıç noktasıdır — istediğiniz gibi yeniden biçimlendirin ve herhangi bir eylem atayın. Düğme davranışını [Etkileşimler](builder-ui#interactions-properties) sekmesinden yapılandırın.
- **Base**: ortalanmış metinli 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 işlemler için çerçeveli düğme
- **Back**: önceki ekrana geri dönen düğme
- **Close flow**: flow'dan çıkan düğme
- **View more plans**: ek ürün seçeneklerini gösteren düğme
- **Links**: alt bilgi düğmeleri seti (Restore, Terms of Service, Privacy Policy)
### Girdiler \{#inputs\}

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

Girdi alanları kullanıcıların veri girmesine olanak tanır. Her biri uygun bir giriş yöntemi ve doğrulama kuralları uygular.

- Metin
- E-posta
- Parola
- Sayı
- Telefon numarası
- Tarih
- Saat
- Tarih ve Saat

Tarih, Saat ve Tarih & Saat girdileri, 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.
### Testler \{#quizzes\}

:::link
Ana makale: [Anketler ve testler](onboarding-quizzes)
:::

Test elementleri, 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örsel içeren 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 (ör. 1–5)
### Sekmeler \{#tabs\}

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

Sekmeler, bir ekran bölümünü geçiş yapılabilir içerik panellerine böler. Kullanıcı bir sekme seçer ve altındaki içerik buna göre güncellenir. Genellikle ürün planlarını gruplamak veya aylık ile 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öşelerle hap şeklinde geçiş yapıcı
- **Button Tabs**: ayrı buton tarzı 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örüntüler 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**: yığılmış ürün kartları
- **Horizontal List**: yan yana ürün kartları
- **Feature Carousel**: özellik kontrol listeleri içeren kaydırılabilir kartlar
- **Feature Cards**: özellik kontrol listeleri içeren statik kartlar
- **Banner List**: satır içi rozetler ile kompakt satırlar
{/* Coming soon - **Bottom Sheet**: product selector inside a slide-up panel */}
### Deneme süresi 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, önceden stillendirilmiş kullanıcı değerlendirme blokları. Şablonlar, yer tutucu içerikli temel kaplardır.

- **Review**: Yıldız puanı, değerlendirme metni ve yorumcu adı
- **Rating**: Yıldız gösterimi eşliğinde sayısal puan
- **App Rating**: Yıldız çubuğu ve yorum sayısıyla birlikte büyük puan gösterimi
- **Social Proof**: Kullanıcı sayısının gösterildiği avatar yığını
### Geri Sayım \{#countdown\}

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

Sıfıra ulaşana kadar saat, dakika ve saniye olarak 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örüntü
- **Inline with units**: birim etiketli sayısal görüntü
- **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'daki 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.

- **Linear**: Kullanıcı ilerledikçe dolan tek ve sürekli bir çubuk
- **Segmented**: Her adım için bir bölüme ayrılmış, parçalı bir çubuk
- **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 quiz gönderiminin ardından — 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 */}