Web sitesi, bir kitap, dergi ya da broşür gibi hiyerarşiye sahiptir. Ana başlıklar, alt başlıklar ve metinlerle zenginleştirilir. Bu koşul ziyaretçi tarafından hizmetinizin ya da içeriğinizin en doğru şekilde anlaşılmasına olanak tanır. Arama motorları da aynı sebeplerden ötürü web sitenizi incelerken hiyerarşilere uyup uymadığınızı kontrol eder. Tıpkı ziyaretçileriniz gibi içeriğinizi anlamak isterler. Özel başlıkları yani heading etiketlerini bir modül olarak sunuyoruz. Böylece hiyerarşide en üst seviye H1 olmak üzere; h2, h3, h4, h5, h6 etiketlerini sayfanızda istediğiniz alanlara, istediğiniz biçimde ekleyebilirsiniz. Aynı modülü sınırsız sayıda farklı görünümle kullanmanız mümkün ve son derece basittir. 

Eklediğiniz özel başlık modülünü düzenlediğinizde videoda bulunan alanları göreceksiniz.

Harici Sınıf (Class) 

Temel seviyede web tasarımcıları bu alana bir harici (extra) sınıf ekleyerek CSS üzerinden istedikleri biçimi sağlayabilirler. Yalnızca biçimlendirme değil, cihaz görünürlükleri (display) seçeneklerini de kullanabilirler. Bootstrap framework’ü içine yer alan her etiket harici sınıflarda kullanılabilir. Örneğin sınıf adı olarak “red” yazabilir, CSS üzerinde ise .red class’ı için istediğiniz bir renk atayabilirsiniz. Ayrıca boşluk, dolgu gibi ayarları REM ölçeğinde kullanabilirsiniz. Ekstra class’a red py-4 isimli iki sınıf atayarak boşlukları da ayarlamış olursunuz. Bir başka örnekle “red py-4 mx-2 d-lg-none” ekstra sınıflarıyla özel başlığınızı kırmızı, Y ekseninde 4 rem dolgu, X ekseninde 2 rem uzaklık, lg ekranlarda ise gizleme özelliği sunabilirsiniz. Pratik ve kolay bir kullanımı vardır. Konu hakkında daha geniş seçenekler için bootstrap dokümanlarını inceleyebilirsiniz.

Metni Düzenle

Özel başlık metnini bu alandan düzenleyebilirsiniz. Kullanıcıların hata yapmalarını engellemek amacıyla ilgili alanda HTML editör kullanmıyoruz. Bunun yerine olması gereken ayarlamaları modül içinde sunuyoruz. Böylelikle kullanıcılar kopyala / yapıştır ile içerik eklediklerinde fark etmeden kaynaktaki stilin taşınmasını da engelliyoruz. 

Başlık Etiketi

H1 en önemli ve en üst hiyerarşidir. H2 ve H3 gibi diğer etiketler H1’den sonra gelir. Yani ana başlık, alt başlıklar şeklinde ilerler. Bir sayfada yalnızca bir adet H1 etiketi kullanmanızı öneririz. Eğer H1 etiketini kullanıyorsanız, o sayfanızın asli konusunu yazmalısınız. 

Font Boyutu

Seçtiğiniz etiket her ne olursa olsun, font boyutlarını istediğiniz gibi ayarlayabilirsiniz. Eğer kullandığınız temada belirli bir ölçüyü zorunlu kılmamışsak bu alandan değiştirebilirsiniz. Bazı arayüz tasarımlarında font boyutunun tek uygun biçimi olabilir. Bu nedenle yapacağınız boyut düzenlemelerinde temanın genel algısına uymaya özen göstermelisiniz. H1 etiketinin boyutunun diğerlerinden daha az olmamasını tavsiye ederiz. Bir kural değil ancak estetik ve mantık olarak daha uygun olur. 

Yazı Tipi

Kullandığınız temada ekli olan fontlardan birini seçebilirsiniz. Daha farklı fontlar eklemek mümkün ancak, temaya uygun fontları seçmek daha doğru bir işlem olacaktır. Bazı etiketlerde veya hazır biçimlerde yalnızca bir fontun kullanılmasını zorunlu kılmış olabiliriz. Sebebi tasarımda önemli bir seçenek olmasından kaynaklanır. Hazır biçim tercihi veya CSS kodlarını değiştirerek bu değişiklikleri iptal edebilirsiniz. 

Font Kalınlığı

Her font farklı kalınlık biçimleri kullanır. 300, 400, 500, 600, 700, 900 gibi değerler alabilir. Ancak her font her değeri tanımaz. Eğer yaptığınız değişiklik görünmüyorsa, örneğin 700 seçmenize rağmen değişiklik olmamışsa, ilgili font 700 kalınlığı desteklemiyor demektir. Özel başlıkları incelik ve kalıklık açısından fontun imkan verdiği ölçüde değiştrebilirsiniz. 

Yazı Rengi

RGB formatında renk kodunu girebilirsiniz. Eğer bir tasarımcı değilseniz, renk uyumları konusunda bir hata yapmamak adına temanın orijinal rengini kullanmanızı ve bu alanı değiştirmemenizi öneririz. 

Satır yüksekliği

Metin satırları arasındaki boşluk değerlerini belirtir.

Hizalama

Metni sağ, sol ve orta olacak şekilde hizalamanıza olanak tanır. 

Hazır Biçimler

Temalarda varsayılan görünüm dışında, o temaya uyabilecek hazır biçimler belirleyebiliriz. Her temada birden çok hazır biçim kullanabileceğimiz gibi, yalnızca varsayılan bir adet biçim de bulunabilir. İsterseniz hazır biçimleri siz de oluşturabilirsiniz. Örneğin Biçim 2 seçimini kullanarak özel başlığı dikey olarak ekleyebiliriz. 3. Biçimde ise font rengi, boyutu ve kalınlığı daha farklı olabilir.

Animasyon

Hemen her modülde sunduğumuz bu özellik ile kullanıcı ilgili alanı görüntülediğinde çeşitli animasyonlar çalıştırabiliriz. Soldan, yukardan veya sağdan giriş, 360 derece dönüş ile giriş gibi pek çok efekt yer alıyor. 

Boşluklar (Margin)

HTML dilinde margin, katmanları birbirinden ayırmak için kullanılır. Dikey ve yatay boşluklar kullanabilirsiniz. Ekstra sınıf içinde belirli CSS sınıflarıyla yapabileceğiniz gibi px türünden değerlerle de bu alandan da yapabilirsiniz. 

Dolgular (Padding)

Margin, dış katmandan uzaklaştırırken Padding değeri ise iç dolgu anlamına gelir. Söz gelimi 300px genişliğinde bir alana soldan ve sağdan 30px padding değeri girerseniz, içeriğiniz genişlikte 60px daralır ve 240px içinde görüntülenir. Özellikle tipografi açısından boşlukları ayarlamak önemli bir özelliktir.