Flow & Paywall Builder, duyarlı düzenler oluşturur. Öğeleri tam koordinatlara sürüklemezsiniz; bunun yerine, çocuklarını otomatik olarak düzenleyen container’ların içine yerleştirirsiniz.

Container, öğelerin yönünü (dikey veya yatay), hizalamasını ve aralığını belirler. Tek tek öğeler daha sonra boyutlarını ve kenar boşluklarını ince ayarlayabilir ya da gerektiğinde mutlak veya sabit konumlandırmayla flow’dan çıkabilir.

Hiçbir şeyi sürüklemeden yeniden düzenleyin.

AI Editörden “En Popüler” rozeti, yapışkan bir alt bilgi veya tamamen yeni bir sosyal kanıt bölümü isteyin — konteynerleri sizin için oluşturur.

Explore the AI Editor›

Düzen

Düzen, ekrandaki öğeleri yerleştirmenin temel aracıdır. Her kapsayıcı, içindeki öğeleri belirli kurallara göre otomatik olarak dağıtır: yön, hizalama ve boşluk. Oluşturucu içinde kullanılabilen düzen öğeleri şunlardır:

• Dikey Konteyner: Çocuk öğeleri yukarıdan aşağıya sıralar
• Yatay Konteyner: Çocuk öğeleri soldan sağa sıralar
• Ayırıcı: Öğeler arasında görsel bir ayraç
• Carousel: Yatay kaydırılabilir slayt seti
• Bottom Sheet: Kullanıcı bir düğmeye dokunduğunda ek içeriği ortaya çıkaran kayan bir bindirme panel

Konteynerler, bir ekranın temel yapı taşlarıdır. Karmaşık düzenler oluşturmak için iç içe yerleştirebilirsiniz. Her konteynerin sağ panelinde, alt öğelerin nasıl dağıtılacağını kontrol eden bir Layout bölümü bulunur.

Öğeleri yeni bir konteynerde gruplamak için Wrap katman eylemini kullanın. Bir konteyneri kaldırıp alt öğelerini üst seviyeye taşımak için ise Unwrap’i kullanın.

Yön

• Free: Otomatik düzen yok. Alt öğeler yan yana sıralanmak yerine üst üste yığılır. Free seçildiğinde tüm alt öğeler Absolute konumuna dönüştürülür ve yığılma sırası neyin neyi örttüğünü belirler
• Vertical: Alt öğeler, bir sütundaki satırlar gibi yukarıdan aşağıya doğru sıralanır
• Horizontal: Alt öğeler, bir satırdaki öğeler gibi soldan sağa doğru düzenlenir

Öğe sırası

Alt öğeler, Layers panelinde göründükleri sıraya göre render edilir. Dikey bir container’da listedeki ilk öğe ekranın üstünde görünür. Yatay bir container’da ise ilk öğe solda yer alır. Öğeleri yeniden sıralamak için Layers panelinde sürükleyebilir ya da Move up ve Move down katman eylemlerini kullanabilirsiniz.

Hizalama

Hizalama ızgarası, alt öğelerin kapsayıcının çapraz ekseninde nereye yerleşeceğini belirler. Dikey bir kapsayıcıda hizalama, alt öğelerin yatay konumunu (sol, orta veya sağ) kontrol eder. Yatay bir kapsayıcıda ise dikey konumlarını (üst, orta veya alt) belirler.

Dağılım

Dağılım, ana eksen boyunca çocuklar arasındaki alanın nasıl bölüneceğini belirler:

• Gap (varsayılan): Bitişik çocuklar arasında sabit piksel değeri
• Space Between: Çocuklar kenarlara yayılır; aralarında eşit boşluklar oluşur
• Space Around: Her çocuğun etrafında eşit boşluk bulunur, kenarlarda yarı boyutunda boşluklar yer alır
• Space Evenly: Tüm çocukların önünde, arasında ve sonrasında eşit boşluk bulunur

İçeriği kırp

Konteynerin sınırlarını aşan içeriği görsel olarak kırpar. Bir rozet gibi kartın kenarını kasıtlı olarak taşan öğelere izin vermek istiyorsanız bu seçeneği devre dışı bırakın.

Konum

Varsayılan olarak, her öğenin konumu kapsayıcısının düzeni tarafından otomatik olarak belirlenir. Position geçişi, öğeyi normal akışın dışına çıkararak konumunu elle belirlemenizi sağlar.

Göreli (varsayılan)

Öğe, normal düzen akışında kalır. Konumu, üst kapsayıcının düzen kuralları tarafından otomatik olarak belirlenir — serbestçe sürükleyemezsiniz. Göreli bir öğenin çevresindeki boşluğu ayarlamak için Margin kullanın.

Metin blokları, görseller, kartlar, düğmeler ve liste öğeleri gibi içeriklerin büyük çoğunluğu için göreli konumlandırmayı kullanın.

Mutlak

Element, normal akışın dışına çıkar ve diğer içeriklerin üzerine yerleşir. Artık komşu elementlerin düzenini etkilemez.

Absolute seçtiğinizde ek kontroller görünür:

• Offset alanları (T, L, R, B): Elementin üst kapsayıcısının her kenarına olan mesafeyi piksel cinsinden ayarlar
• Anchor grid: Elementin hangi köşeye, kenara veya merkeze sabitlendiğini seçmek için 3×3 ızgara üzerinde bir noktaya tıklayın
• Yatay sabitleme (Sol / Merkez / Sağ) ve Dikey sabitleme (Üst / Merkez / Alt): Izgara ile aynı sabitleme noktasını kontrol eden açılır menüler
• Z-index: Elementin diğer konumlandırılmış elementler arasındaki yığınlanma sıralamasını belirleyen sayısal bir alan

Görsel üzerine yerleştirilen dekoratif katmanlar, rozetler, kapat düğmeleri ve ikonlar için mutlak konumlandırma kullanın.

Sabit

Öğe, üst kapsayıcısını tamamen yok sayar ve ekrana sabitlenir. Kullanıcı kaydırırken görünür kalır — sayfa içeriği onun altında hareket eder.

Sabit konumlandırma, Mutlak ile aynı kontrolleri kullanır (offsetler, çapa ızgarası, Z-index). Tüm offsetler, üst öğeye değil ekranın güvenli alanına göre hesaplanır. Örneğin, alttan 0 offset, öğeyi home indicator’ın üzerinde tutar. Offsetleri fiziksel ekran kenarlarından ölçmek için Güvenli alanı yoksay seçeneğini etkinleştirin.

Kaydırılan içeriğin üzerinde yer alması gereken öğeler için — kayan kapat veya geri yükle düğmeleri, kalıcı üst bannerlar, başa dön kontrolleri ve gezinme çubukları — sabit konumlandırma kullanın. Özel bir alt eylem alanı için bunun yerine Footer kullanın. İçeriğinizi bir hero görselinin üzerine yerleştirmek için Sliding sheet kullanın.

Free Konteyner’da Konum

Free konteyner, alt öğelerini sıralamaz. Bu nedenle alt öğelerin konumlarını manuel olarak ayarlamanız gerekir. Relative konum desteklenmez. Alt öğeler aşağıdaki kurallara uyar:

• Alt öğe de bir Free konteynerse, yalnızca absolute konuma sahip olabilir. Adapty bu alt öğenin Position geçişini gizler. Geçişi geri getirmek için o alt öğenin Direction ayarını Vertical veya Horizontal olarak değiştirin.
• Diğer tüm alt öğeler absolute veya fixed konuma sahip olabilir.

Güvenli alanı yoksay

Güvenli alan, ekranın çentik, durum çubuğu ve ana ekran göstergesinden uzak kalan bölümüdür. Varsayılan olarak, konumlandırılmış öğeler bu alanın içinde kalır.

Öğenin uzaklıklarını fiziksel ekran kenarlarından ölçmek için konum türü seçicisinin altındaki Ignore safe area onay kutusunu işaretleyin. Bu sayede öğe çentiğin ve ana ekran göstergesinin arkasına kadar uzanabilir.

Tam ekran kaplayan medya için şu yolu izleyin: görseli veya videoyu Fixed olarak konumlandırın, dört taraftaki offset değerlerini 0 yapın ve Ignore safe area seçeneğini işaretleyin. Medya, ekranın tamamını kenardan kenara kaplar.

Bu onay kutusu yalnızca absolute ve fixed konumlandırma için çalışır. Göreli (relative) öğelerde devre dışı kalır; bir öğeyi Relative konumuna geri aldığınızda bu ayar otomatik olarak temizlenir.

Boyutlandırma

Her elemanın Width ve Height kontrolleri vardır. Boyutlandırma modunu seçmek için herhangi birindeki açılır menüye tıklayın.

Mod	Öğenin boyutu	Kullanılabilir
Fill	Üst öğesindeki mevcut alanı dolduracak şekilde genişler. Gösterilen değer otomatik hesaplanır	Yalnızca göreli öğeler
Hug	İçeriğine sığacak şekilde küçülür. Gösterilen değer otomatik hesaplanır	Free konteyner içindeki Free child dışında her yerde
Fixed	Üst öğe veya içerik boyutundan bağımsız olarak yazdığınız piksel değeriyle eşleşir	Her yerde
Auto	İçeriği iki offset arasında genişletir	Yalnızca mutlak veya sabit öğelerde; hem Left hem Right ya da hem Top hem Bottom ayarlandıktan sonra. Adapty bunu kendisi uygular — siz seçemezsiniz

Bir elementin üst öğesine Free yönü uygulandığında, o elementin Fill boyutu Fixed olarak değişir. Element de Free yönünü kullanıyorsa, Hug boyutu da Fixed olarak değişir.

Görseller kendi oranlarını taşır, dolayısıyla verdiğiniz yükseklik görselin kırpılıp kırpılmayacağını belirler. Bkz. Görsel boyutlandırma.

Aralık

Her kenar için aralık değerlerini bağımsız olarak ayarlayın.

Kontrol	Ne yapar	Mevcut
Margin	Eleman ile komşuları arasına boşluk ekler. Büyük bir değer, elemanı hiçbir zaman üst öğesinin dışına çıkarmaz	Göreli konumlandırmaya sahip herhangi bir eleman. Ekranların margin’i yoktur
Padding	Elemanın sınırı ile içeriği arasına boşluk ekler. Hug genişliği veya yüksekliği bunu kapsayacak şekilde büyür	Konteynerler, ekranlar ve alt içeriğe sahip diğer elemanlar. İstisnalar: Free konteynerlerin doğrudan alt öğeleri ve Free ekranların kendisi.

Ücretsiz yönü seçildiğinde, konteynerin sahip olduğu tüm dolgu temizlenir.

Yığılma sırası

Göreli öğeler birbirinin üzerine hiçbir zaman binmez — her kapsayıcı, alt öğelerini sırayla yerleştirir. Örtüşme, ancak bir öğe Absolute veya Fixed konumlandırmayla normal akışın dışına çıktığında gerçekleşir.

Absolute veya Fixed bir öğe, katman sırasından bağımsız olarak göreli kardeş öğelerinin üzerinde görüntülenir. Göreli öğelerin Z-index alanı yoktur çünkü bunlar hiçbir zaman üst üste gelmez.

Birden fazla Absolute veya Fixed öğe aynı alanı kapladığında, bunların üst üste gelme sırası iki faktör tarafından belirlenir:

• Z-index. Varsayılan değer: 0. Daha yüksek değere sahip öğe, katman sırasından bağımsız olarak üstte görünür.
• Katman sırası. İki öğenin z-index değeri aynıysa, katman listesinde daha aşağıda yer alan öğe üstte görünür.