Genel bakış
Oluşturucudaki neredeyse her bölümde üç yeniden kullanılabilir düzen bileşeni görünür: Grup, Metin ve Bölücü. Bunları anlamak, CSS yazmadan ihtiyaç duyduğunuz herhangi bir düzeni oluşturmanıza olanak tanır.
Grup
Grup, esnek bir düzen container'ıdır. İçine alt bloklar ekleyin (metin, düğmeler, resimler, bülten girişleri ve hatta iç içe gruplar) ve bunların tam olarak nasıl düzenleneceğini kontrol edin.
Yön
- Dikey: alt öğeler üstten alta istiflenir (çoğu bölüm için varsayılan).
- Yatay: alt öğeler bir satırda yan yana oturur.
Küçük ekranlarda yatay bir grubu otomatik olarak dikey bir istife geçirmek için Mobilde Dik İstifle seçeneğini etkinleştirin.
Hizalama ve konum
Bu iki ayar, alt öğelerin ana ve çapraz eksenler boyunca nasıl dağıtılacağını kontrol eder. Anlamları grubun yönüne bağlı olarak değişir:
- Dikey yön: Konum, dikey dağılımı kontrol eder (üst, orta, alt veya aralarında). Hizalama, yatay yerleşimi kontrol eder (sol, orta, sağ veya aralarında).
- Yatay yön: Hizalama, yatay dağılımı kontrol eder (sol, orta, sağ veya aralarında). Konum, dikey yerleşimi kontrol eder (üst, orta, alt veya aralarında).
Aralarında, alt öğeleri aralarında eşit boşlukla eşit olarak yayar; bu, öğeleri tam genişlikte bir satıra yaymak için kullanışlıdır.
Boşluk
Alt öğeler arasındaki piksel cinsinden aralık (0-100 piksel, varsayılan 20 piksel).
Genişlik
- Doldur: üst öğedeki mevcut tüm alanı kaplamak için genişler. Bunu yatay bir üst öğenin içinde alanı eşit paylaşması gereken gruplar için kullanın.
- Sığdır: içeriğinin doğal boyutuna küçülür. Bunu yalnızca içindekiler kadar geniş olması gereken gruplar için kullanın.
- Özel: belirli bir yüzde ayarlayın (%0-100). Grup, büyümeden veya küçülmeden bu boyutu korur.
Renk şeması ve miras
Varsayılan olarak bir grup, üst bölümünün renk şemasını miras alır. Açık bir renk şeması (1-9) atamak için Şemayı Miras Al seçeneğini kapatın. Bu, yeni bir bölüm eklemeden bölüm içinde farklı arka plan veya metin rengi bölgeleri oluşturmanıza olanak tanır.
Kenarlık
Grubun etrafına kenarlık ekleyin. Seçenekler: Yok veya Düz. Düz seçildiğinde kenarlık kalınlığını ayarlayın (1-20 piksel); renk etkin şemanın kenarlık renginden gelir.
Yarıçap
Piksel cinsinden köşe yuvarlatma (0-100). Kart benzeri grup container'ları oluşturmak için bunu kullanın.
Opaklık
Grubun genel opaklığı (%0-100, varsayılan %100).
Kaplama
Grubun içine renkli bir katman ekler. Etkinleştirildiğinde Kaplama Rengi'ni (renk seçicinin opaklık kaydırıcısını kullanarak şeffaflık dahil), Stili'ni (düz düz dolgu veya şeffafa karartan degrade) ve degrade için Yön'ü (yukarı veya aşağı) ayarlayın. Bu, kahraman bölümündeki medya arka planının üzerine yarı saydam renkli bir katman oluşturmak için yaygın olarak kullanılır.
Dolgu
Her tarafta piksel cinsinden boşluk (üst, sol, sağ ve alt), her biri 0-100 piksel arasında. Dolgu, grup kenarlığının içinde uygulanır ve kenarlık ile grubun alt öğeleri arasında nefes alma alanı oluşturur.
Metin
Metin bloğu, bir bölüm veya grup içindeki zengin metin içeriğini (başlıklar, paragraflar ve biçimlendirilmiş kopya) render eder. Düzenleyici kalın, italik, altı çizili, üstü çizili ve renkli metin destekler.
Ön ayar
Tipografi ön ayarı, yazı tipi boyutunu, yazı tipi ağırlığını ve metnin anlamsal rolünü kontrol eder. Mevcut ön ayarlar:
- Varsayılan: bölümün temel metin stilini miras alır.
- Paragraf: gövde metin stili.
- Başlık 1'den Başlık 6'ya: tipografi ayarlarınızda tanımlanan başlık yazı tipini kullanan en büyükten en küçüğe azalan boyutlar.
Boyut
Ön ayarın boyutunu geçersiz kılan piksel cinsinden özel yazı tipi boyutu (10-30 piksel). Boyutu ön ayarın belirlemesine izin vermek için varsayılana bırakın.
Genişlik
- Sığdır: metin bloğu yalnızca içeriği kadar geniştir.
- Doldur: metin bloğu mevcut container genişliğinin %100'üne genişler.
Hizalama
Yatay metin hizalaması: Sol, Orta veya Sağ.
Satır yüksekliği
Dikey ritmi kontrol eder: Sıkı (sıkışık satırlar), Normal (varsayılan) veya Geniş (aralıklı satırlar).
Harf aralığı
Karakter aralığını kontrol eder: Sıkı (karakterler birbirine yakın), Normal (varsayılan) veya Geniş (karakterler birbirinden uzak).
Renk şeması ve miras
Varsayılan olarak metin bloğu rengini üst bölümden miras alır. Belirli bir renk şeması kullanmak için Şemayı Miras Al seçeneğini kapatın. Başlık ön ayarları şemanın başlık rengini kullanır; paragraf ve varsayılan ön ayarlar şemanın gövde metin rengini kullanır.
Dolgu
Her tarafta piksel cinsinden iç boşluk (üst, sol, sağ ve alt), her biri 0-100 piksel arasında.
Bölücü
Görsel bir ayırıcı çizgi. Dikey bir düzende yatay bir çizgi olarak görünür. Yatay bir grubun içinde dikey bir çizgi olarak görünür. Bölücü, üst container'ının yönüne otomatik olarak uyarlanır.
Kalınlık
Piksel cinsinden çizgi kalınlığı (1-10 piksel, varsayılan 1 piksel).
Uzunluk
Container'ının yüzdesi olarak çizginin uzanımı (%5-100, varsayılan %100). Bunu %100'den az ayarlayın ve ortalanmış veya girintili dekoratif bir çizgi oluşturmak için hizalamayla birleştirin.
Uç başlık stili
- Keskin: dikdörtgen uçlar.
- Yuvarlatılmış: hap şeklinde uçlar.
Hizalama
Uzunluğu %100'den az olduğunda çizginin konumlandırılması: Başlangıç, Orta (varsayılan) veya Son.
Genişlik
- Sığdır: bölücü container'ı yalnızca çizginin kendisi kadar geniştir.
- Doldur: bölücü container'ı üst öğesindeki mevcut alanı doldurmak için genişler.
Renk şeması
İsteğe bağlı olarak bir renk şeması ayarlayın (1-9). Bölücü, seçilen şemanın kenarlık rengini kullanır. Şema ayarlanmamışsa, üst bölüm veya gruptan rengi miras alır.
Dolgu
Her tarafta piksel cinsinden boşluk. Bölücü üst düzey bölüm olarak kullanıldığında dolgu değerleri daha cömert dikey nefes alma alanı için 200 piksele kadar çıkar.
Sık karşılaşılan sorunlar
- Yatay bir üst öğenin içinde iki dolgu grubu: her biri mevcut alanın %50'sini alır; bu genellikle istediğiniz şeydir. Bir tarafın diğerinden daha geniş olmasını istiyorsanız, bunlardan birinde Özel genişlik kullanın.
- Dikey bölücü görünmüyor: bir bölücü yalnızca doğrudan Yatay yönde ayarlanmış bir grubun alt öğesi olduğunda dikey hale gelir. Üst grubun yönünün yatay olarak ayarlandığından emin olun.
- Metin beklenmeyen bir renk gösteriyor: bir metin bloğu yanlış renkte görünüyorsa, muhtemelen farklı bir renk şemasına sahip bir üst gruptan miras alıyordur. Metin bloğundaki Şemayı Miras Al seçeneğini kapatın ve doğru şemayı açıkça atayın.