Studio Editor: Esnek Kutu Temelli Araçlar ve Izgara Temelli Araçlar Arasından Seçim Yapma

Studio Editor, sayfa ögelerini organize etmek için kullanabileceğiniz ve her biri farklı tasarım ihtiyaçlarına göre yapılandırılmış güçlü araçlar sunar. Bu araçlar yaygın olarak kullanılan iki CSS teknolojisini (Izgara ve Esnek Kutu) temel alır. Müşterinizin sitesindeki içeriği en iyi şekilde sergileyecek duyarlı düzenler oluşturabilmek için bu teknolojiler arasındaki farkları anlamanız önemlidir. 

Bu yazıda düzen araçlarını türlerine göre inceleyip temel özelliklerini açıklayarak hangisinin ihtiyaçlarınıza en uygun olduğunu belirlemenize yardımcı olacağız.

Izgaralar, ögeleri önceden tanımlanmış hücreler içinde satırlar ve sütunlar kullanarak düzenleyen iki boyutlu bir CSS modelidir. Özellikle duyarlı ve parçalı düzenler oluştururken hassas kontrol sağlamaları açısından son derece kullanışlıdırlar.

Boş bölümler, tüm alanı kaplayan tek bir hücrenin bulunduğu yerleşik bir ızgaraya sahiptir. İçeriğe duyarlı bir yapı kazandırmak için bu ızgarayı ihtiyacınıza göre daha fazla hücreye bölebilirsiniz. Masaüstü görünümü için düzeninizi belirledikten sonra daha küçük ekran boyutları için farklı bir düzen seçebilirsiniz.

Gelişmiş CSS ızgarası, bölüm ızgaralarında, kapsayıcılarda, etkileşim kutularında, esnek kutularda ve tekrarlayıcı ögelerinde karmaşık düzenler oluşturma konusunda tam esnekliğe sahip olmanızı sağlar. Duyarlı ölçüleri (ör. fr, min/maks, %) kullanarak farklı kesme noktalarındaki hücre boyutlarını tam istediğiniz şekilde ayarlayabilirsiniz. 

Şunlar için idealdir: Piksel hassasiyetinde ayarlamalar gerektiren karmaşık düzenler.

Kapsayıcılar basit ama gerekli düzen araçlarıdır. Ögeler eklenen bir kapsayıcı otomatik olarak bu ögelerin üst ögesi haline gelerek belirli bir yapı oluşturmalarını sağlar. 

Şunlar için idealdir: Bölümlerin içindeki bağımsız ve ayrık düzenler. 

Esnek kutu, ögelerin bir üst kapsayıcı içinde dinamik olarak ayarlanmalarının gerektiği düzenler için optimize edilmiş tek boyutlu bir CSS modelidir. Esnek kutu temelli ögeler kendilerine ayrılan alana sığmak üzere sorunsuz bir şekilde genişleme, küçülme veya içe sarılma "esnekliğine" sahip olurlar.

Yığın, ögelerin dikey veya yatay dizilişlerinin bozulmamasını sağlayan görünmez bir esnek kapsayıcıdır. Yığın oluşturarak ögelerin birbirlerine karşı mesafelerini korumalarını sağlayabilir ve bu sayede daha küçük ekranlarda üst üste binmelerini engelleyebilirsiniz.

Ayrıca düzenin tüm ekran boyutlarında şık görünmesini sağlamak için yığındaki ögelerin dizilişini kesme noktası bazında ayarlayabilirsiniz. 

Şunlar için idealdir: Bölümdeki ögelerin yatay veya dikey eksen boyunca hassas şekilde hizalanmalarının gerektiği bağımsız ve ayrık düzenler. 

Esnek kutu, ögelerin çeşitli ekran boyutlarına uyacak şekilde otomatik olarak içe sarıldığı (dürüldüğü) hazır bir esnek düzendir. Farklı içerik türlerine yönelik olarak farklı gösterim türlerinin (ör. Mozaik, Kaydırıcı, Sütunlar) kullanıldığı duyarlı kapsayıcılardan oluşur. 

Her görüntü alanı için farklı bir gösterim türü seçebilir (ör. kaydırıcı düzenleri mobil cihazlar için idealdir) ve belirli bir öge sıralaması ayarlayabilirsiniz.

Şunlar için idealdir: Çok miktarda içeriği organize ve kullanışlı bir düzende sergileme. 

Tekrarlayıcı aynı tasarım ve düzene sahip ama her birinde farklı içerik barındıran bir öge listesidir. Düzen ve tasarım ayarlamaları otomatik yapıldığı için bütünlük konusunda endişelenmeniz gerekmez. 

Tekrarlayıcıları benzersiz kılan şey içerik koleksiyonlarınıza bağlanabilmesidir. Tasarımı etkilemeden içeriği arka uçtan yönetmenize ve güncellemenize olanak sağlamaları sayesinde, veriye dayalı düzenler oluşturmak isteyenler için ideal bir araç haline gelirler. 

Şunlar için idealdir: Listeler veya bütünlüğü bozmadan ögelere ayırmak istediğiniz her türlü içerik.

Öncelikle her ekran boyutu için nasıl bir düzen istediğinizi belirleyin. Ardından ihtiyacınız olan özellikleri içeren bir düzen aracı seçebilirsiniz. 

Her düzen aracı farklı miktarda ve türde içerik barındıracak şekilde tasarlanmıştır. Örneğin, kapsayıcı daha küçük ve odaklanmış içerikler için daha uygunken, büyük bölüm ızgarası karmaşık düzenleri organize etmek açısından daha kullanışlıdır. 

Benzer şekilde, esnek kutular ve tekrarlayıcılar büyük miktarda içeriği düzenli bir şekilde sunmak için mükemmel olsalar da farklı amaçlara hizmet ederler. Tekrarlayıcılar tüm ögelere aynı düzen ve tasarımı uygulayarak tutarlılığı artırırken, esnek kutular her bir ögeyi bağımsız olarak tasarlama esnekliği sunarlar.

Esnek kutu ve ızgara ögeleri, içeriğin farklı ekran boyutlarına uyum sağlama şekli açısından farklılıklar gösterir. Izgaralar, daha küçük ekranlara sığmayacak şekilde farklı sayıda satır ve sütun gösterir. Esnek kutu tabanlı araçlarda, içerik ziyaretçinin ekranına sığacak şekilde otomatik olarak kaydırılır ve/veya yeniden sıralanır.

Bu özellik yalnızca tekrarlayıcılar tarafından desteklendiğinden, koleksiyon içeriğini sitenizde göstermek istediğinizde tekrarlayıcıları kullanın. 

Alternatif olarak, metin ve görüntü gibi belirli ögeleri koleksiyona bağladıktan sonra bir kapsayıcıya veya yığına ekleyerek sürdürülebilir bir düzen oluşturabilirsiniz.