FonPageBuilder Zaman Çizelgesi Bileşeni Son Güncelleme: 04-07-2026

Zaman Çizelgesi Bileşeni Nedir?

Zaman Çizelgesi bileşeni ile sayfalarınıza birden fazla stile sahip zaman çizelgesi blokları oluşturabilirsiniz.

Zaman Çizelgesi bileşenini aynı zamanda adım (step) tabanlı içerikleriniz için de kullanabilirsiniz.

Zaman Çizelgesi 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.

Bileşen Seçenekleri

• Stil
  : Zaman Çizelgelerini göstermek istediğiniz varsayılan stili seçin.

  STİL ÖNİZLEMELERİ

  Zaman Çizelgesi bileşeni gösterim stili demolarını görüntülemek için Zaman Çizelgesi Stilleri sayfasını ziyaret edebilirsiniz.

• Medya Tipi
  : Zaman çizelgesi ögeleri içerisinde kullanmak istediğiniz medya tipini seçin.

  • Simge: FontAwesome kütüphanesinden istediğiniz simgeyi seçebilirsiniz.
  • Resim: Kullanmak istediğiniz görseli yükleyebilirsiniz.

İçerik Ayarları

• Zaman Çizelgesi - Ögeler
  : Ekle düğmesine tıklayarak birden fazla zaman çizelgesi ögesi ekleyebilirsiniz. İlk ögenin bir kopyası alınarak çoğaltılır. Eklediğiniz her bir ögenin başlığının karşısındaki simgeler aracılığıyla ögeyi; düzenleyebilir, sıralayabilir ve silebililirsiniz. Zaman Çizelgesi ögesi düzenleme penceresinde yer alan alanların detaylı kullanım dokümantasyonu aşağıdadır.
• Başlık
  : Öge başlığını girin.
• İçerik
  : Öge metin içeriğini girin. HTML kullanabilirsiniz.
• Tarih / Adım
  : Zaman Çizelgesi olarak kullanmak istiyorsanız tarih bilgisini (Örn: 2025), adım sayar ögesi olarak kullanmak istiyorsanız adım bilgisini (Örn: 1) girin.
• Simge
  : Kullanmak istediğiniz FontAwesome simgesini seçin. NOT: Bu seçenek Medya Tipi olarak "Simge" seçildiyse gösterilir.
• Resim
  : Kullanmak istediğiniz görseli yükleyin/seçin. NOT: Bu seçenek Medya Tipi olarak "Resim" seçildiyse gösterilir.
• Renk
  : Zaman çizelgesi ögesi için kullanmak isteidiğiniz rengi seçin. Tümü için aynı renk kullanabileceğiniz gibi her bir öge için farklı renk kullanabilirsiniz.
• Düğme Göster
  : Öge içerisinde düğme göstermek isteyip istemediğinizi seçin.
• Düğme Metni
  : Sitenizdeki her bir aktif dil için düğme metnini girin. NOT: Bu seçenek Düğme Göster seçeneği aktifleştirilmişse gösterilir.
• Düğme Linki
  : Sitenizdeki her bir aktif dil için düğme linkini girin. NOT: Bu seçenek Düğme Göster seçeneği aktifleştirilmişse gösterilir.
• Link Hedefi
  : Düğme linkinin site önyüzünde yeni pencerede mi yoksa mevcut pencerede mi açılacağını belirtin. NOT: Bu seçenek Düğme Göster seçeneği aktifleştirilmişse gösterilir.

  • _self : Aynı Tarayıcı Penceresi
  • _blank : Yeni Tarayıcı Penceresi
• Düğme Simgesi Göster
  : Düğme içerisinde simge göstermek istiyorsanız bu seçeneği etkinleştirin. Bu alan "Düğme Göster" seçeneği etkinleştirilmişse gösterilir.
• Simge
  : Düğme içerisinde göstermek istediğiniz düğme simgesini seçin. Bu alan "Düğme Göster" ve "Düğme Simgesi Göster" seçenekleri etkinleştirilmişse gösterilir.
• Simge Konumu
  : Düğme simgesinin düğme metninden önce mi sonra mı gösterileceğini belirtin. Bu alan "Düğme Göster" ve "Düğme Simgesi Göster" seçenekleri etkinleştirilmişse gösterilir.

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. Slayt Gösterisi 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-slideshow-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.