Başlık, metin alanı ve ikondan oluşan, zenginleştirilmiş paragraf görünümü sağlar. Web sitelerinde hizmetler veya özellikler sıralanırken sıklıkla bu yapıyı görebilirsiniz. Sadece içeriğinizi yansıtmakla kalmaz, web sitenize estetik bir duruş kazandırır. 

Başlık Sekmesi

Başlık

Ekleyeceğiniz tüm içeriği özetleyen, odak kelime ya da cümleyi bu alana girmelisiniz. Tema veya modüldeki öngörülen biçime uygun uzunlukta başlık yazmalısınız. Türkçe’de hemen her içeriği özetleyecek çok sayıda farklı kelime var. Eğer biçim olarak 3 kelime sığacak bir alan belirlenmişse siz de 3 kelime sığacak biçimde yapılandırmalısınız.

Bağlantı

Kullanıcılar başlığa tıkladığında nereye gideceğini bu alandan belirleyebilirsiniz. Alan adınızı yazmadan /link-uzantiniz şeklinde tanımlamanızı öneriyoruz.

Yazı Fontu

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. 

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. 

Yazı 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. 

Satır yüksekliği

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

Yazı 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ınlık açısından fontun imkan verdiği ölçüde değiştirebilirsiniz. 

 

Paragraf Sekmesi

Paragraf Metni

Başlıkla belirtilen içeriği tamamlayacak metni bu alana girmelisiniz. Temanızda demo içeriklerin uzunluğuna ve yapısına uygun metin girmenizi öneriyoruz.

Bağlantı

Kullanıcılar metin alanına tıkladığında nereye gideceğini bu alandan belirleyebilirsiniz. Alan adınızı yazmadan /link-uzantiniz şeklinde tanımlamanızı öneriyoruz.

Font Biçimlendirme alanları

Başlık alanında olduğu gibi; yazı fontu, rengi, boyutu, satır yüksekliği ve yazı kalınlıklarını paragraf alanı için de ayrı ayrı kullanabilirsiniz. Örneğin başlık kısmı vurgulu olmasın için kalın yazılırken (700), metin alanı görselliği ve doğru tipografiyi yakalamak adına normal kalınlıkla (400) seçilebilir. 

 

İkon Sekmesi

Simge

Simge alanı bir CSS sınıf alanıdır. Yeni nesil tema tasarımlarında icon alanlarında büyük çoğunlukla font iconları kullanılır. En yaygın olarak kullanılan Font Awesome kütüphanesi varsayılan olarak gelir. Tema tasarımına özgü başkaca font icon kütüphaneleri de ekleyebiliyoruz. Biz varsayılan Font Awesome kütüphanesi üzerinden örneklendirelim. https://fontawesome.com/icons üzerinde ücretsiz (free) filtresinde bulunan tüm iconları kullanabilirsiniz. Dikkat etmeniz gereken bir noktada var; font awesome kendi wen sayfalarında sürekli güncelleme yapar. Eğer seçtiğiniz font sitenizde görüntülenmiyorsa, o yeni bir fonttur ve biz temayı yaparken ilgili font ekli kütüphanemizde mevcut değildir. Bu durumda alternatif simgeleri kullanmalısınız. Kütüphaneleri isteğe göre değil, belirli zaman aralıklarında yapılan güncellemelerle yeniliyoruz. 

Seçtiğiniz icon, font awesome tarafından şu etiketle size verilir. Bu HTML betiğinin içindeki sınıfı, simge alanına yazmanız yeterlidir. Yani adres defteri göstermeniz için gireceğiniz metin bundan ibaret olacaktır. fas fa-address-book. Lütfen tırnak işaretlerini kullanmayınız.

Bağlantı

Kullanıcılar icon alanına tıkladığında nereye gideceğini bu alandan belirleyebilirsiniz. Alan adınızı yazmadan /link-uzantiniz şeklinde tanımlamanızı öneriyoruz.

Font Biçimlendirme alanları

Başlık ve paragraf alanında olduğu gibi; yazı fontu, rengi, boyutu, satır yüksekliği ve yazı kalınlıklarını paragraf alanı için de ayrı ayrı kullanabilirsiniz. Dikkat etmeniz gereken nokta font kalınlığıdır. Font iconları belirli değerlere göre görüntülenir. Örneğin Font Awesome’da yer alan iconlar ve bu iconların kalın versiyonları “900” değeri ile görüntülenir. 

 

Seçenekler Sekmesi

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 icon alanı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.

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 icon alanını dikey olarak ekleyebiliriz. 3. Biçimde ise font rengi, boyutu ve kalınlığı daha farklı olabilir.

Animasyon

Sayfanıza eklediğiniz modüller, kullanıcı tarafından görüntülenirken burada seçtiğiniz animasyonlarla gösterilir. Tarayıcının scroll, yani yukarı aşağı hareket etme durumuna göre tetiklenir. Eğer kullanıcı ilgili modülü henüz görüntülememiş ise animasyon çalışmaz. Kod alt yapısında belirttiğimiz eşiğe geldiğinde animasyon ile görünür.

En çok tercih edilen animasyonlar; fadeIn, fadeInDown,fadeInLeft, fadeInRight, fadeInUp, bounceIn, bounceInDown, bounceInLeft, bounceInRight, bounceInUp animasyonlarıdır. Bu animasyon isimlerini Ekstra Sınıf hanelerine yazarak da çalıştırabilirsiniz.

Boşluklar (Margin)

HTML dilinde margin; katmanları birbirinden ayırmak için kullanılır. Dikey ve yatay boşluklar kullanabilirsiniz. 

Dolgular (Padding)

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