---
title: "Düzen öğeleri: kapsayıcılar, döngüler, alt sayfalar"
description: "Öğeleri Flow Builder'da kapsayıcılar, döngüler ve alt sayfalara göre gruplandırın."
---

Düzen öğeleri, diğer öğeleri bir araya getirir ve ekranda nasıl yerleşeceğini kontrol eder.

Flow Builder beş tür düzen öğesi içerir:
- **Container'lar**: alt öğeleri bir eksen boyunca — dikey veya yatay — düzenler
- **Carousel**: bir seferde tek slayt gösteren kaydırılabilir bir container
- **Bottom Sheet**: ekranın altından yukarı kayan ve mevcut içeriğin üzerinde görüntülenen bir panel
- **Footer**: kaydırma alanının dışında, ekranın altına sabitlenmiş bir panel
- **Divider'lar**: satırları veya sütunları ayıran ince çizgiler

:::link
**Sekmeler** de bu kategoriye girer, ancak ayrı bir makalede ele alınmaktadır. Ayrıntılar için [Sekmeler](builder-tabs) bölümüne bakın.
:::
## Konteynerler \{#containers\}

:::link
Ana makale: [Element konumlandırma](manage-paywall-ui-elements)
:::

Konteynerler, öğeleri dikey veya yatay olarak gruplar. **Vertical Container** öğeleri satırlar halinde; **Horizontal Container** ise sütunlar halinde düzenler.

:::tip
Daha karmaşık düzenler oluşturmak için konteynerleri iç içe yerleştirin.
:::
### Konteyner yönünü değiştirme \{#change-container-direction\}

Bir konteynerin yönü sabit değildir. Sağ panelin **Layout** bölümünden istediğiniz zaman **Vertical**, **Horizontal** veya **Free** arasında geçiş yapabilirsiniz — konteyneri silip yeniden oluşturmanıza gerek yok.

Aralık, hizalama ve dağılım ayarlarını da aynı **Layout** bölümünden yapabilirsiniz. Alt öğeler, **Layers** panelinde göründükleri sıraya göre render edilir — yeniden sıralamak için sürükleyip bırakın.
### Sarma ve sarımı kaldırma \{#wrap-and-unwrap\}

Mevcut bir öğeyi container'a dönüştürmek için öğeyi seçin ve **Wrap** [katman eylemini](paywall-layout-and-products#layer-actions) kullanın. **Layers** panelinden yeni container'a ek öğeler sürükleyin. Bir container'ı kaldırıp içindeki öğeleri bir üst seviyeye taşımak için **Unwrap** kullanın.
## Carousel

**Carousel**, bir seferde tek bir slayt gösteren, kaydırılabilir bir kapsayıcıdır. Kullanıcı sonraki slayta geçmek için yatay olarak kaydırabilir ya da carousel belirli bir zamanlayıcıyla otomatik olarak ilerleyebilir.

Carousel, bir dizi **Slide** katmanı içerir. Bir slayt etkin olduğunda, o katmandaki öğeler ekranda görünür.
Sekmelerden farklı olarak, carousel'in aktif slaytı bir [seçilebilir grup](flow-selectable-elements) olarak sunulmaz — slaytlar koşullarda veya dinamik metinlerde referans alınamaz. Carousel'i kullanıcı odaklı dallanma için değil, görsel döngü için kullanın.
### Aktif slaytı değiştirme \{#change-active-slide\}

Karuseli seçtiğinizde, builder'da bir **Slide** açılır menüsü ve **+ Add Slide** düğmesi içeren açılır kontrol çubuğu görünür.

- Yeni boş bir slayt eklemek için **+ Add Slide** düğmesine tıklayın.
- Tuvalde hangi slaytın aktif olacağını değiştirmek için **Slide** açılır menüsünü kullanın ya da **Layers** panelindeki ilgili Slide katmanına tıklayın.

Slaytları yeniden sıralamak için Layers panelindeki Carousel içinde sürükleyip bırakın.

{/* TODO: on-device GIF */}
### Özellikler

#### Otomatik kaydırma \{#auto-scroll\}

Otomatik kaydırma, slaytları otomatik olarak döngüye sokar — kullanıcının tüm içeriği görmek için kaydırması gerekmez.

İki zamanlama kontrolü davranışı belirler:

- **Delay** — her slaytın ekranda kalma süresi (ms).
- **Duration** — slaytlar arasındaki geçişin süresi (ms).

#### Carousel boyutlandırma \{#carousel-sizing\}
Özel kontroller, carousel'in boyutunu ve bitişik slaytlar arasındaki boşluğu belirler. Farklı içerik uzunluklarına sahip slaytlar arasında geçiş yaparken düzenin kaymaması için **Height** değerini **Fixed** olarak ayarlayın.

#### Slayt boyutlandırma \{#slide-sizing\}

Slayt başına **Width** ve **Height**. Varsayılan olarak Fill şeklindedir; bu sayede her slayt carousel'in boyutlarını takip eder. Bitişik slaytların kısmen görünür olduğu bir peek efekti oluşturmak için sabit bir genişlik ayarlayın.

#### Noktalar \{#dots\}

Karuselın alt kısmındaki sayfa göstergesi. Kullanıcıya kaç slayt olduğunu ve hangisinin aktif olduğunu gösterir.

Slayt göstergesini gizlemek için **Show dots** geçiş düğmesini kapatın. Noktalar görünürken aşağıdaki özellikler görünümlerini belirler:
- **Color** — aktif olmayan noktanın dolgu rengi.
- **Active Color** — o an görüntülenen slaydın nokta dolgu rengi.
- **Size** — her noktanın piksel cinsinden çapı.
- **Gap** — bitişik noktalar arasındaki boşluk.
- **Padding** — nokta satırı ile üzerindeki döngü içeriği arasındaki boşluk.
## Bottom Sheet

:::link
Kılavuz: [Tüm planları bir bottom sheet içinde göster](show-plans-bottom-sheet)
:::

**Bottom Sheet**, ekranın alt kısmından yukarı doğru kayan ve mevcut içeriğin üzerinde görünen bir düzen panelidir.

Sheet, arkasındaki her şeyi her zaman bulanıklaştırır; bu bulanıklık kapatılamaz. Ekran yüklendiğinde değil, bir dokunuşla tetiklenecek şekilde kullanın — örneğin bir **Show all plans** bağlantısının arkasına yerleştirin.
### Yapı \{#structure\}

Bir Bottom Sheet iki üst düzey katmanla gelir:

- **Heading** — sayfanın üstündeki bir kapsayıcıdır; önceden doldurulmuş bir **Title** metin katmanı ve bir **Close button** Close içerir. Gerektiğinde düzenleyebilir veya kaldırabilirsiniz.
- **Content** — ana kapsayıcıdır. İçine ürünler, düğmeler, bağlantılar veya başka öğeler ekleyebilirsiniz.

{/* TODO: on-device GIF */}
### Başlangıç görünürlüğü \{#initial-visibility\}

Varsayılan olarak, bir alt sayfa ekran render edildiği anda görünür. Bunun yerine isteğe bağlı açmak için:

1. **Önce sayfanın içeriğini oluşturun** — gizli katmanlar düzenlenemez, bu nedenle doldurma işlemi bitene kadar sayfa görünür kalmalıdır.
2. **Layers** panelinde alt sayfayı seçin.
3. **Visibility** ayarını **Hide** Hide olarak ayarlayın.

Sayfa, katman ağacında kalır ancak ekranda render edilmez.

### Alt sayfayı tetikleme \{#triggering-the-bottom-sheet\}

Gizli bir alt sayfayı açmak için başka bir öğeye **Show** eylemi ekleyin:

1. Tetikleyici öğeyi seçin (örneğin, bir düğme veya metin bağlantısı).
2. Sağ panelde **Interactions** sekmesini açın.
3. **Add trigger** > **On tap** seçeneğine tıklayın, ardından **Add action** deyin.
4. **Action** alanını **Show** olarak ayarlayın ve açılır menüden alt sayfayı seçin.

## Alt Bilgi \{#footer\}

**Footer**, ekranın alt kısmını kaplayan sabit bir kapsayıcıdır. İstediğiniz yükseklikte olabilir; tek bir düğmeden birden fazla metin satırına kadar her türlü içeriği barındırabilir. Ekranın geri kalanı kaydırılırken yerinde kalması gereken içerikler için footer'ı kullanın; CTA düğmeleri, yasal metinler ve bağlantılar bunlara örnek verilebilir.

Sıradan öğelerden farklı olarak footer, cihazın alt güvenli alanına kadar uzanır: arka planı ekranın en alt kenarına dek devam eder.
Ekran başına yalnızca bir alt bilgi (footer) kullanılabilir. Mevcut bir alt bilgiyi kopyalayamaz veya yeni bir tane ekleyemezsiniz.
### Alt bilgi mi, yoksa sabit bir öğe mi? \{#footer-vs-a-regular-fixed-element\}

Her ikisi de içerik kaydırılırken ekranda kalır. İhtiyacınıza uyan seçeneği tercih edin:
- **Ekranın ana alt çubuğu için Footer kullanın** (CTA butonu, yasal metin, bağlantılar). Footer kendi yüksekliğini ayırır, bu sayede içerik her zaman onun altına kadar kaydırılabilir ve arkasına gizlenmez; ayrıca alt güvenli alanı otomatik olarak kaplar.
- **Kaydırılan içeriğin üzerinde yüzen ya da alt kenar dışında bir kenara sabitlenmesi gereken öğeler için [sabit element](manage-paywall-ui-elements) kullanın** — yüzen kapat/geri yükle butonu, kalıcı üst banner veya en üste kaydır kontrolü gibi. Güvenli alan boşluklarını kendiniz yönetirsiniz.
## Bölücüler \{#dividers\}

**Horizontal Divider** ve **Vertical Divider**, içerikleri birbirinden ayıran ince çizgilerdir. Satırları ayırmak için Horizontal Divider'ı, yatay bir kapsayıcı içindeki sütunları ayırmak için ise Vertical Divider'ı kullanın. Kalınlığı, rengi ve uzunluğu sağ panelden ayarlayabilirsiniz.