Genel bakış
Oluşturucu'daki hemen hemen her bölümde üç yeniden kullanılabilir düzen bileşeni görünür: Grup, Metin ve Ayırıcı. Birlikte, CSS yazmadan herhangi bir düzeni oluşturmanıza olanak tanırlar. Ayarlarını açmak için bir blok seçin.
Grup
Grup, esnek bir düzen kapsayıcısıdır. İçine alt bloklar ekleyin (metin, düğmeler, görseller, bülten girişleri, hatta iç içe gruplar) ve nasıl düzenlendiklerini kontrol edin.
Yön
- Dikey: alt öğeler yukarıdan aşağıya istiflenir.
- Yatay: alt öğeler bir satırda yan yana durur.
Mobilde dikey istifle geçişi yalnızca Yön Yatay olduğunda görünür. Yatay bir satırı küçük ekranlarda dikey bir istife geçirmek için onu açın.
Konum ve Hizalama
Bunlar, alt öğeleri ana ve çapraz eksenler boyunca dağıtır. Anlamları yönle birlikte değişir ve Arada seçeneği (alt öğeler arasında eşit boşluk) yalnızca ana eksende bulunur:
- Dikey yön: Konum ana (dikey) eksendir: üst, orta, alt veya arada. Hizalama çapraz (yatay) eksendir: sol, orta veya sağ.
- Yatay yön: Hizalama ana (yatay) eksendir: sol, orta, sağ veya arada. Konum çapraz (dikey) eksendir: üst, orta veya alt.
Genişlik
- Doldur: üst öğedeki mevcut tüm alanı kaplamak için genişler. Bunu, yatay bir üst öğenin içinde alanı eşit olarak paylaşması gereken gruplar için kullanın.
- Sığdır: içeriğinin doğal boyutuna küçülür.
- Özel: yüzde olarak ayarlanan bir Özel genişlik kaydırıcısını ortaya çıkarır (0 ile %100). Grup, büyümeden veya küçülmeden o boyutu korur.
Boşluk
Alt öğeler arasındaki piksel cinsinden boşluk (0 ile 100 piksel, varsayılan 20 piksel).
Renk şeması
Üst öğenin renk şemasını kullan varsayılan olarak açıktır, böylece grup üst öğesinin şemasını devralır. Renk şeması seçicisini ortaya çıkarmak ve genel renk şemalarınızdan birini seçmek için onu kapatın. Bu, bir bölümün içinde belirgin renk bölgeleri oluşturmanıza olanak tanır.
Kenarlık
Kenarlık, Yok veya Düz şeklindedir. Düz, iki kaydırıcıyı ortaya çıkarır: Kenarlık kalınlığı (1 ile 20 piksel, varsayılan 1) ve Kenarlık opaklığı (0 ile %100, varsayılan 100). Renk, etkin şemanın kenarlık renginden gelir.
Köşe yuvarlaklığı
Kenarlıktan bağımsız olarak piksel cinsinden köşe yuvarlama (0 ile 100). Kart benzeri kapsayıcılar için kullanın.
Arka plan kaplaması
Arka plan kaplaması geçişi, grubun arka planının üzerine renkli bir katman ekler. Açık olduğunda, Kaplama rengini (seçicinin opaklık kaydırıcısı aracılığıyla saydamlık dahil), Kaplama stilini (Düz düz dolgu veya saydama doğru solan Gradyan) ve gradyan için Gradyan yönünü (Yukarı veya Aşağı) ayarlayın. Genellikle bir medya arka planını renklendirmek için kullanılır.
Dolgu
Her bir kenarda piksel cinsinden iç boşluk, her biri 0 ile 100 piksel. Dolgu, kenarlığın içinde, kenarlık ile alt öğeler arasında yer alır.
Metin
Bir metin bloğu başlıkları, paragrafları ve biçimlendirilmiş metni işler. Zengin metin düzenleyici kalın, italik, altı çizili, üstü çizili ve renkli metni destekler.
Ön ayar
Tipografi ön ayarı yazı tipi ailesini, varsayılan ağırlığı ve anlamsal HTML etiketini (sayfadaki rolünü) belirler:
- Varsayılan: bölümün temel metin stilini devralır.
- Paragraf: gövde metni stili.
- Başlık 1 ile Başlık 6: başlık ve alt başlık yazı tiplerinizi kullanan başlık stilleri.
Boyut
Piksel cinsinden özel bir yazı tipi boyutu (10 ile 30 piksel, varsayılan 16). Bu, bloğun gerçekte işlendiği boyuttur.
Genişlik ve Hizalama
- Sığdır: blok yalnızca içeriği kadar geniştir.
- Doldur: blok, kapsayıcı genişliğinin %100'üne genişler.
Hizalama (Sol, Orta, Sağ) yalnızca Genişlik Doldur olarak ayarlandığında görünür, çünkü hizalama yalnızca blok kapsayıcısını doldurduğunda anlamlıdır.
Satır yüksekliği ve Harf aralığı
Satır yüksekliği dikey ritmi ayarlar: Normal (varsayılan), Dar veya Geniş. Harf aralığı aynı üç seçenekle karakter aralığını ayarlar.
Renk şeması
Bir grubun içinde, Üst öğenin renk şemasını kullan varsayılan olarak açıktır. Renk şeması seçicisini ortaya çıkarmak için onu kapatın. Başlık ön ayarları şemanın başlık rengini kullanır; paragraf ve varsayılan, gövde metni rengini kullanır. Bağımsız bir bölüm olarak, seçici devralma geçişi olmadan tek başına durur.
Dolgu
Her bir kenarda piksel cinsinden iç boşluk, her biri 0 ile 100 piksel.
Ayırıcı
Üst öğesine uyum sağlayan bir ayırıcı çizgi. Dikey (sütun) bir düzende yatay bir çizgidir; yatay bir grubun içinde dikey bir çizgi olur.
Genişlik
- Sığdır: kapsayıcı yalnızca çizgi kadar geniştir.
- Doldur: kapsayıcı mevcut alanı doldurmak için genişler.
Kalınlık
Piksel cinsinden çizgi kalınlığı (1 ile 10 piksel, varsayılan 1). Yatay bir ayırıcı için bu yüksekliktir; dikey bir ayırıcı için genişliktir.
Uzunluk
Çizginin kapsayıcısının bir yüzdesi olarak uzanımı (%5 ile %100, varsayılan 100). Kısmi, içe gömülü bir çizgi oluşturmak için %100'ün altına ayarlayın.
Hizalama
Uzunluğu %100'ün altında olduğunda çizgiyi konumlandırır: Başlangıç, Orta (varsayılan) veya Son. Bu kontrol, Uzunluk %100 iken gizlidir.
Köşe yuvarlaklığı
- Keskin: dikdörtgen uçlar.
- Yuvarlatılmış: hap şeklinde uçlar.
Renk şeması
İsteğe bağlı olarak bir Renk şeması seçin. Ayırıcı, o şemadan kenarlık rengini kullanır. Hiçbiri ayarlanmamışsa, üst bölümden veya gruptan rengi devralır.
Dolgu
Her bir kenarda piksel cinsinden boşluk. Bir blok olarak aralık 0 ile 100 pikseldir. Ayırıcı üst seviye bir bölüm olarak eklendiğinde, daha cömert dikey nefes alma alanı için dolgu 200 piksele kadar çıkar (varsayılan 20).
Sık karşılaşılan tuzaklar
- Yatay bir üst öğenin içinde iki doldurma grubu: her biri alanın %50'sini alır, bu genellikle istediğiniz şeydir. Bir tarafı daha geniş yapmak için, o grubun Genişliğini Özel olarak ayarlayın.
- Dikey ayırıcı görünmüyor: bir ayırıcı yalnızca Yatay yöne ayarlanmış bir grubun doğrudan alt öğesi olduğunda dikey hale gelir. Üst grubun yönünü kontrol edin.
- Eksik Arada seçeneği: Arada yalnızca alt öğelerin aktığı eksende görünür, bu nedenle dikey gruplar için Konum üzerindedir ve yatay gruplar için Hizalama üzerindedir.
- Yanlış renkteki metin: muhtemelen farklı bir şemaya sahip bir üst gruptan devralıyordur. Metin bloğunda Üst öğenin renk şemasını kullan'ı kapatın ve şemayı açıkça seçin.
Bu bileşenlerin nereye yerleştirilebileceği için Bölümler ve bloklar başlığına bakın.