Özellikle iç sayfa yönlendirmeleri için kullanılan buton modülü ile şık ve kolay butonlar oluşturabilirsiniz. 

Buton Yazısı

Buton üzerinde yazacak metni bu alandan belirleyebilirsiniz. Buton yazıları mümkün olduğunca kısa tutulmalıdır. Yönlendireceğiniz sayfanın konusu kısa bir başlıkla özetleniyorsa buton yazısına ilgili sayfanın ismini ya da kısa açıklamasını yazabilirsiniz. Örneğin; Tema Galerisi adlı bir buton ile tüm temaların olduğu sayfaya yönlendirebilirsiniz. Böylece arama motorları “Anchor” yani referans noktası olarak görecektir. Kullanıcıyı anasayfadan iç sayfaya yönlendirirken değer atamasına olanak tanır. Kısaca şunu ifade etmiş olursunuz; “tema tasarımları hakkında esas ve kapsamlı bilgilere bu yönlendirdiğim sayfada yer verdim. Bu konuda ilgili sayfaya önem ver.” Ayrıca, eğer “devam et” gibi sadece bir konu altı buton olarak kullanacaksanız, “Başlık (Title)” alanına detaylı bir şekilde açıklamayı ve hedefteki sayfanın anahtar kelimesini girmenizi öneriyoruz.

Buton Linki

Eğer bir iç sayfaya yönlendirme yapacaksanız alan adınızı yazmadan butonu bir iç sayfaya bağlayabilirsiniz. http:// ön ekiyle başlayan linkler genel olarak “dış link (external link)” için kullanılır. Hedef sayfa http://alanadiniz.com/kurumsal-bilgiler ise linkinizi sadece alan adından sonraki kısmı yazarak tanımlayabilirsiniz. “/kurumsal-bilgiler” Tüm linki açık bir şekilde yazabilirsiniz fakat en doğru yaklaşım metodu bu şekildedir.

Buton Stilleri

Her buton aynı amacı taşımaz, dikkat çekmek, belirli bir konuyu renklerle ifade etmek gerekebilir. Varsayılan ve hazır biçimler dışında, konuya yönelik özel biçimler de atayabilirsiniz. Öneğin dikkat gerektirecek bir işlem için “Tehlike” şablonunu kullanabilirsiniz. Diğer modüllerdeki “hazır biçim” etiketleri gibi bu modüllerde de belirlediğimiz hazır biçimleri kullanabilirsiniz. Eğer farklı bir şablon belirlenmemişse, boş hazır biçim etiketini ihtiyacınıza göre tanımlayabilirsiniz. 

Başlık (Title)

Bir butonun üzerine geldiğinizde o buton ile ilgili açıklama metinleri görebilirsiniz. Eğer butonun amacını tanımlamak isterseniz buraya girebilirsiniz. Yukarıda verdiğimiz örnekte buton yazısı “Tema Galerisi” şeklindeydi. Açıklama metnini “Tüm tasarımlarımızı tema galerimizden görebilirsiniz” şeklinde özetleyebilirsiniz. İlgili bu açıklama metinlerinde anahtar kelime belirtmenizi öneririz. 

Buton Hizalama

Eklediğiniz butonu; sol, orta veya sağa yaslamak için bu özelliği kullanabilirsiniz. Örneğin ortalo olarak hizalanmış bir metnin altına buton ekleyecekseniz, çok özel bir durum olmadığı takdirde butonu da yazıya göre ortalı şekilde düzenlemeniz gerekir.

Hedefleme

Verdiğiniz linkin yeni bir sayfada mı, yoksa mevcut sayfada mı açılacağını bu alandan belirleyebilirsiniz. Eğer PDF veya başka bir sitedeki içeriğe yönlendiriyorsanız ayrı sayfada açmak daha doğru olur. Böylece kullanıcı sayfanızdan kopmuş olmaz. Diğer durumlar için, özellikle iç saysa yönlendirmelerinde “aynı sayfada (_Self)” seçeneğini kullanmalısınız. 

Ekstra Sınıf (Class) 

Her modülümüzde olduğu gibi bu modülde de sihirli alanımız “Ekstra” sınıflardır. Mevcut tüm buton şablonları dışında isteğiniz doğrultusunda farklı bir buton tasarlamak için ilgili alana yeni bir sınıf adı yazabilirsiniz. Belirlediğiniz sınıfı CSS üzerinden şekillendirerek istediğiniz gibi, sınırsız şekilde farklı butonlar oluşturabilirsiniz. Margin, padding, görünürlük özellikleri gibi diğer pek çok alanı da bu özellik ile kullanabilirsiniz.

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.