Layout elementleri, diğer elementleri bir araya getirir ve ekrandaki düzenlerini kontrol eder.

Flow ve Paywall Builder altı farklı layout element türü içerir:

• Containers: alt öğeleri bir eksen boyunca — dikey veya yatay olarak — düzenler
• Carousel: bir seferde tek bir slayt gösteren kaydırılabilir bir container
• Bottom Sheet: ekranın altından yukarı doğru açılan ve altındaki içeriğin üzerinde görüntülenen bir panel
• Footer: kaydırma alanının dışında, ekranın alt kısmına sabitlenmiş bir panel
• Sliding sheet: ana içeriğinizi bir hero görselin üzerine yerleştiren bir panel
• Dividers: satırları veya sütunları birbirinden ayıran ince çizgiler

Konteynerler

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

Konteyner yönünü değiştirme

Bir konteynerin yönü sabit değildir. İstediğiniz zaman sağ paneldeki Layout bölümünden Vertical, Horizontal ve Free arasında geçiş yapabilirsiniz. Free seçeneğine geçildiğinde tüm alt öğeler otomatik olarak Absolute konuma dönüştürülür.

Alt öğeler, Layers panelinde göründükleri sıraya göre render edilir — sıralamayı değiştirmek için sürükleyin.

Sarma ve sarımı kaldırma

Mevcut bir öğeyi container’a dönüştürmek için öğeyi seçin ve Wrap katman eylemini 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 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

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.

Özellikler

Otomatik kaydırma

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

Ö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

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

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.

Alt Sayfa

Alt Sayfa (Bottom Sheet), ekranın altından yukarı doğru kayan ve mevcut içeriğin üzerine binen bir düzen panelidir.

Sayfayı ekran yüklendiğinde değil, bir dokunuşla tetikleyin — örneğin Show all plans bağlantısının arkasına yerleştirerek.

Yapı

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 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.

Başlangıç görünürlüğü

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 olarak ayarlayın.

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

Alt sayfayı tetikleme

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, 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 footer kullanılabilir. Mevcut bir footer’ı kopyalayamaz veya yenisini ekleyemezsiniz.

Alt bilgi mi, yoksa sabit bir öğe mi?

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 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.

Kayan panel

Kayan panel, ana içeriğinizi bir kahraman görselin üzerine yerleştirir. Panel, ekranın alt kısmını kaplar ve kullanıcı kaydırdıkça ekran arka planının üzerine yükselir. Arka plan iOS’ta hareket eder, diğer platformlarda ise sabit kalır. Bu davranışı değiştiremezsiniz.

Sayfa dışına eklediğiniz öğeler, ekran arka planının üzerinde görüntülenir. Bunları kahraman görselindeki başlık veya logo için kullanabilirsiniz.

• Start position, sayfanın ekranın ne kadarını kapladığını alttan yukarıya doğru ölçerek belirler. Varsayılan ayarda sayfa, ekranın alt %55’ini kaplar ve arka plan üstteki %45’ten görünür. Sayfanın yüksekliğini mutlak değerlerle tanımlayamazsınız. Sayfayı daha uzun yapmak için Start position değerini artırın.
• Fill, içeriğinizin arkasındaki arka planı ayarlar. Kahraman görselinin görünmesine izin vermek için opaklığı artırın.

Ekranda yalnızca bir adet kayan sayfa (sliding sheet) bulunabilir. Mevcut bir kayan sayfayı çoğaltamazsınız ya da yeni bir tane ekleyemezsiniz.

Sliding sheet ile Bottom Sheet karşılaştırması

Her iki panel de ekranın alt bölümünü kaplar. İhtiyacınıza göre birini seçin:

• Sliding sheet kullanın: Ekranın ana içeriğini bir hero görselin üzerine bindirmek için. Panel, ekran açıldığında görünür olur ve yalnızca kullanıcı kaydırdığında hareket eder.
• Bottom Sheet kullanın: Talep üzerine görünen içerikler için; örneğin Show all plans bağlantısının arkasındaki plan listesi gibi. Bunu bir Show eylemiyle açarsınız.

Bölücüler

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.