FonPageBuilder Animasyonlu Numara Bileşeni Son Güncelleme: 04-07-2026

Animasyonlu Numara Bileşeni Nedir?

Animasyonlu Numara, güzel bir animasyonla iyi tasarlanmış bir numara sayacı ekranı eklemenize yarayan bir eklentidir. Animasyonlu Numara çoğunlukla numara sayacını, başarıları ve diğer benzeri sayaç içeriğini görüntülemek için kullanılır. Kullanıcılar sayfada gezinirken bileşenin bulunduğu alana geldiklerinde sayılar 0'dan başlayarak bileşen içerisinde belirttiğiniz sayıya kadar animasyonlu olarak artar. FonPageBuilder Animasyonlu Numara bileşeni ile sayfalarınıza kolayca sayaçlar ekleyebilirsiniz.

Animasyonlu Numara Bileşenini sayfanıza ekledikten sonra Bileşen Düzenleme Araçlarındaki Bileşeni Düzenle ögesine tıkladığınızda açılan Bileşen Düzenleme Penceresindeki ögelerin detaylarına aşağıda erişebilirsiniz.

Genel Ayarlar

• Bileşen Adı
  : Sitenizdeki her bir dil için bileşeninize bir isim verin. Bu isim bileşene göre değişmekle birlikte genelde sadece Yönetici bilgilendirmesi içindir. Yönetim Paneli FonPageBuilder sayfa düzenleme ekranınızdaki satır ve sütunlarda bileşen bu isimle gösterilecektir. Böylece yerleşim düzeninizdeki bileşeni doğru ve kolayca teşhis edebilir ve seçebilirsiniz.
• Stil
  : Animasyonlu Numara bileşeninin sayfanızda hangi stilde gösterilmesini istediğinizi seçin.

  STİL ÖNİZLEMELERİ

  Animasyonlu Numara Bileşeni gösterim stili demolarını görüntülemek için Animasyonlu Numara Stilleri sayfasını ziyaret edebilirsiniz.

Bileşen Seçenekleri

• Numara
  : Animasyon eklemek istediğiniz maksimum sayıyı temsil eder. Örneğin: 1500.
• Numara Yazı Boyutu
  : Animasyon eklemek istediğiniz sayının yazı boyutunu girin. font-size
• Numara Yazı Kalınlığı
  : Animasyon eklemek istediğiniz sayının yazı genişliğini seçin. font-weight
• Numara Belirteci
  : Animasyon eklemek istediğiniz sayının öncesinde veya sonrasında +,K,TL,$,₺ gibi bir belirteç ekleyebilirsiniz.
• Numara Belirteci Konumu
  : Numara belirtecinin animasyon eklemek istediğiniz sayının öncesinde mi yoksa sonrasında mı gösterileceğini seçin.
• Sayaç Animasyon Tipi
  : Numaraya hangi tip sayaç animasyonu uygulamak istediğinizi seçin. 1- Standart Sayaç, 2- Dikey Sayaç
• Animasyon Hızı
  : Animasyon hızı, her basamak arasındaki gecikmedir. Giriş alanını kullanarak animasyon hızını ayarlayın. Animasyon hızının milisaniye cinsinden girilmesi gerektiğini unutmayın. Bu alan Sayaç Animasyon Tipi olarak "Standart Sayaç" seçildiğinde gösterilir.

İçerik Ayarları

• Simge Göster
  : Animasyonlu Numara kutusunda simge gösterilip gösterilmeyeceğini seçin.
• Simge
  : Animasyonlu Numara kutusunda göstermek istediğiniz FontAwesome simgesini seçin. Bu alan, "Simge Göster" seçemeği aktifleştirilmişte gösterilir.
• Başlık
  : Sitenizdeki aktif her bir dil için Animasyonlu Numara kutusunda göstermek istediğiniz başlık metnini girin.
• İçerik
  : Eğer isterseniz aniamyonlu numara kutusunda başlıktan sonra metin içeriği de gösterebilirsiniz. Metin içeriği göstermek istiyorsanız sitenizdeki her bir dil için içerik metnini girin. Bu alan zorunlu değildir, boş bırakabilirsiniz.

Bileşen Stil Ayarları

• Sınıf
  : Bileşen için özel CSS sınıfı/sınıfları tanımlamak isterseniz burayı kullanabilrsiniz. Daha sonra CSS stil dosyanızdan ilgili sınıf ile ilgili biçimlendirmeleri buraya başvurarak gerçekleştirebilirsiniz. Örneğin:light-grey-rounded-box
• Dahili Stil
  : Bileşen için css biçimlendirmesini harici tema css dosyalarınız yerine doğrudan bu alana yazacağınız css kodu ile gerçekleştirebilirsiniz. Eklediğiniz css biçimlendirmesini sadece bu bileşen için aktif olmasını ve aynı css sınıfına sahip olan sayfadaki diğer ögeleri etkilememesini istiyorsanız stil kodunuz içerisinde @widgetId ibaresinden sonra stil kodunuzu ekleyebilirsiniz. @widgetId önyüzde, sistem tarafından otomatik oluşturulurulan id ile değiştirilir. Animasyonlu Numara Bileşeni içerisinde biçimlendirebileceğiniz css sınıflarını, site önyüzünüzde bileşenin bulunduğu sayfadayken Tarayıcınızda F12 - Geliştirici araçlarından Code Inspection ile .fon-animated-number-widget css sınıfı altından inceleyebilirsiniz.

  												
  @widgetId .light-grey-rounded-box{
  	background-color: #f8f9fa;
  	border: 1px solid #e9ecef;
  	border-radius: 5px;
  }
  												
  											

Bileşen Penceresi Kayıt Düğmeleri

• Sayfayı Kaydet
  : Bileşende gerçekleştirdiğiniz değişiklikler ve sayfada gerçekleştirdiğiniz tüm değişiklikler veritabanına kaydedilir ve aktif Bileşen Düzenleme Penceresi kapatılır.
• Kaydet & Düzenle
  : Bileşende gerçekleştirdiğiniz değişiklikler bileşen kodu içerisine kaydedilir ve aktif Bileşen Düzenleme Penceresi kapatılır. Sayfanızda yaptığınız değişikler henüz kaydedilmemiştir. Sayfanızı kaydetmek için mutlaka sayfanın sağ kenarında bulunan MENU çubuğu altından Kaydet düğmesine tıklamanız gerekir.