FonPageBuilder Karşılaştırma Tablosu Bileşeni Son Güncelleme: 04-07-2026

Karşılaştırma Tablosu Bileşeni Nedir?

FonPageBuilder Karşılaştırma Tablosu bileşeni; ürün grubu sayfalarınızda ürün paketlerinize ait özellikleri karşılaştırma tablosu şeklinde kullanıcılara sunmanızı sağlayan özel bir bileşendir. Her bir özellik için, özellik adı, açıklama, simge, ipucu ve değer oluşturabilirsiniz. Karşılaştırma tablosu oluşturabilmek için öncelikle her bir ürün paketiniz için JSON formatında bir özellik içeriği oluşturmalı ve bu içeriği ürün paketinizin "Özellikler" alanına eklemelisiniz.

NOT: Karşılaştıma Tablosu bileşeni sadece Hosting, Server ve Özel Ürün Grubu sayfalarında çalışır.

Karşılaştırma Tablosu 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. Bu bileşen özelinde buraya gireceğiniz başlığı site önyüzünde bölüm başlığı olarak göstermeyi tercih edebilirsiniz. Örn: Paketlerimizi Karşılaştırın
• Bileşen Adını Göster
  : Bileşen Adını, site önyüzünde karşılaştırma tablosunun üstünde bölüm başlığı olarak göstermek istiyorsanız bu seçeneği etkinleştirin. Bkz: Görsel - 1 No'lu Öge

  

• Açıklama
  : Sitenizdeki aktif her bir dil için bölüm açıklamasını bu alana girebilirsiniz. Bu alan, site önyüzünde karşılaştırma tablosunun üstünde kısa bir açıklama gösterilecektir.
• Açıklamayı Göster
  : Açıklamayı, site önyüzünde karşılaştırma tablosunun üstünde göstermek istiyorsanız bu seçeneği etkinleştirin. Bkz: Görsel - 2 No'lu Öge

  

Bileşen Seçenekleri

• Kupon Göster YENİ
  : Karşılaştırma tablosunda ilgili ürüne ve/veya kategorisine ait kupon kodunun (varsa) gösterilip gösterilmeyeceğini seçin.

  

• Karusel Kullan
  : Karşılaştırma Tablosundaki paketler için karusel slaydı oluşturmak isterseniz bu seçeneği aktifleştirin. Eğer ilgili hosting ürün grubunda 3 adetten fazla paketiniz varsa ve/veya mobil cihazlar için bu seçeneği aktifleştirmeniz önerilir.
• Sütun Sayısı
  : Karşılaştırma Tablosunda paketlerin yatay düzlemde kaç sütunda gösterileceğini (bir satırda kaç paket) responsive olarak her bir ekran çözünürlüğü için belirtebilirsiniz. Bu alan, "Karusel Kullan" seçeneği etkinleştirilmişse gösterilir.
• Yönlendirme Kontrolleri
  : Karşılaştırma Tablosu karusel slaydında "Önceki" ve "Sonraki" ok işaretlerinin gösterilip gösterilmeyeceğini seçin. Bu alan, "Karusel Kullan" seçeneği etkinleştirilmişse gösterilir. Bkz. Görsel - 1 Nolu Ögeler:

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. Karşılaştırma Tablosu 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-comparison-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.