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

Düzen öğeleri, diğer öğeleri bir araya getirir ve ekranda nasıl konumlandırılacaklarını belirler.

Flow Builder dört tür düzen öğesi içerir:
- **Stack'ler**: alt öğeleri bir eksen boyunca düzenler — dikey veya yatay
- **Carousel**: bir seferde tek bir slayt gösteren kaydırılabilir bir kapsayıcı
- **Bottom Sheet**: ekranın altından yukarı kayan ve altta kalan içeriğin üzerinde görüntülenen 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.
:::
## Stack'ler \{#stacks\}

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

Stack'ler, elemanları dikey veya yatay olarak gruplar. **Vertical Stack** elemanları satırlar halinde; **Horizontal Stack** ise sütunlar halinde düzenler.

:::tip
Daha karmaşık düzenler oluşturmak için stack'leri iç içe yerleştirebilirsiniz.
:::
### Yığın yönünü değiştirme \{#change-stack-direction\}

Yığının yönü sabit değildir. Sağ panelin **Layout** bölümünden istediğiniz zaman **Vertical**, **Horizontal** ve **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 yapılandırabilirsiniz. Alt öğeler, **Layers** panelinde göründükleri sıraya göre işlenir — yeniden sıralamak için sürükleyip bırakın.
### Sarma ve Çözme \{#wrap-and-unwrap\}

Mevcut bir öğeyi stack'e dönüştürmek için öğeyi seçin ve **Wrap** [katman eylemini](paywall-layout-and-products#layer-actions) kullanın. **Layers** panelinden ek öğeleri yeni stack'e sürükleyin. Bir stack'i kaldırıp alt öğelerini bir seviye yukarı taşımak için **Unwrap** seçeneğini kullanın.
## Carousel

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

Carousel, bir dizi **Slide** katmanı içerir. Slayt etkin olduğunda, o katmandaki öğeler ekranda görünür.
Sekmelerin aksine, carousel'in aktif slaytı [seçilebilir grup](flow-selectable-elements) olarak sunulmaz — slaytlar koşullarda veya dinamik metinlerde referans alınamaz. Kullanıcı tarafından yönlendirilen dallanmalar için değil, görsel döngü için Carousel 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 \{#properties\}

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

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

İki zamanlama kontrolü davranışını belirler:

- **Delay** — her slaytın ekranda ne kadar süre kaldığı (ms).
- **Duration** — slaytlar arasındaki geçişin ne kadar sürdüğü (ms).

#### Carousel boyutlandırma \{#carousel-sizing\}
Özel kontroller, carousel'in boyutunu ve bitişik slaytlar arasındaki boşluğu belirler. Kullanıcı 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; böylece 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 belirleyin.

#### Noktalar \{#dots\}

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

Slayt göstergesini gizlemek için **Show dots** geçişini kapatın. Noktalar görünür durumdayken aşağıdaki özellikler görünümlerini denetler:
- **Color** — etkin olmayan bir noktanın dolgu rengi.
- **Active Color** — şu anda görünen slaytın noktasının dolgu rengi.
- **Size** — her noktanın çapı, piksel cinsinden.
- **Gap** — bitişik noktalar arasındaki boşluk.
- **Padding** — nokta satırı ile üzerindeki carousel 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 yığın; önceden doldurulmuş bir **Title** metin katmanı ve bir **Close button** Close içerir. Gerektiğinde düzenleyin veya kaldırın.
- **Content** — ana kapsayıcı. İç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.

## Ayırıcılar \{#dividers\}

**Horizontal Divider** ve **Vertical Divider**, içerikleri birbirinden ayıran ince çizgilerdir. Satırları bölmek için Horizontal Divider'ı, yatay bir yığının içindeki sütunları bölmek için ise Vertical Divider'ı kullanın. Kalınlık, renk ve uzunluğu sağ panelden ayarlayabilirsiniz.