FonPageBuilder Özellik Kutusu Bileşeni Son Güncelleme: 04-07-2026

Özellik Kutusu Bileşeni Nedir?

Özellik Kutusu bileşeni, özelliklerinizi, hizmetlerinizi, etkili mesajlarınızı veya kullanıcıların odaklanmasını istediğiniz herhangi bir unsuru başlık, resim/simge ve açıklamayla dikkat çekiçi şekilde göstermenizi sağlayan html bloklarıdır.

FonPageBuilder Özellik Kutusu bileşeni ile hazır stilere sahip özellik kutuları ekleyebileceğiniz gibi özellik kutusu içeriğini tamamen kendiniz biçimlendirebilirsiniz.

Özellik Kutusu 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
  : Özellik Kutusu bileşeninin sayfanızda hangi stilde gösterilmesini istediğinizi seçin.

  STİL ÖNİZLEMELERİ

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

• Medya Ayarları

• Medya Tipi
  : Özellik kutusunda göstermek istediğiniz medya tipini seçin.

  • Simge: Medya olarak FontAwesome Simgesini kullanabilirsiniz.
  • Resim: Medya olarak Görsel kullanabilirsiniz.
  • Simge & Resim: Medya olarak hem Simge hem de Görsel kullanabilirsiniz.

  HAZIR STİL MEDYA TİPİ İPUÇLARI

  Stil 5, Stil 6 ve Stil 7 hazır stillerinde medya tipi Simge & Resim olarak seçilmelidir.

• Simge/Resim Konumu
  : Bileşende kullanmak istediğiniz medyanın metin içeriğine göre konumunu seçin.

  • Üst: Simge/Resim, metin içeriğinin üstünde (önce) yer alır.
  • Sol: Simge/Resim, metin içeriğinin solunda yer alır.
  • Sağ: Simge/Resim, metin içeriğinin sağında yer alır.
  • Alt: Simge/Resim, metin içeriğinin altında yer alır. Örn: Stil 5
• İçerik Hizalama
  : Simge/Resim Konumu Üst veya Alt seçeneği olarak seçildiğinde gösterilir ve özellik kutusu içeriğinin yatay düzlemde nasıl hizalanacağını seçmenize izin verir.

  • Sol: Simge/Resim ve metin içeriği yatay düzlemde sola hizalanır.
  • Sağ: Simge/Resim ve metin içeriği yatay düzlemde sağa hizalanır.
  • Orta: Simge/Resim ve metin içeriği yatay düzlemde ortaya hizalanır.
• Dikey İçerik Hizalama
  : Simge/Resim Konumu Sol veya Sağ seçeneği olarak seçildiğinde gösterilir ve özellik kutusu içeriğinin dikey düzlemde nasıl hizalanacağını seçmenize izin verir.

  • Üst: Simge/Resim ve metin içeriği dikey düzlemde üstte hizalanır.
  • Orta: Simge/Resim ve metin içeriği dikey düzlemde ortada hizalanır.
  • Alt: Simge/Resim ve metin içeriği dikey düzlemde altta hizalanır.
• Simge
  : Kullanmak istediğiniz FontAwesome simgesini seçin. Bu alan "Medya Tipi" olarak Simge ve Simge & Resim seçenekleri seçildiğinde gösterilir.
• Resim
  : Kullanmak istediğiniz görseli "Ortam Yöneticisi" aracılığıyla seçin/yükleyin. Bu alan "Medya Tipi" olarak Resim ve Simge & Resim seçenekleri seçildiğinde gösterilir.

İçerik Ayarları

• Başlık
  : Sitenizdeki aktif her bir dil için özellik kutusunda göstermek istediğiniz başlığı girin.
• Başlık Tipi
  : Açılır listeden başlığın hangi html öğesi ile (H1,H2,H3,H4,H5,H6) gösterileceğini seçin
• İçerik
  : Sitenizdeki aktif her bir dil için özellik kutusunda göstermek istediğiniz içerik metnini (açıklama) girin.
• Link
  : Sitenizdeki aktif her bir dil için özellik kutusuna tıklanıldığında kullanıcıların yönlendirilmesini istediğiniz url adresini girin. Boş bırakabilirsiniz.
• Link Konumu
  : Özellik kutusu içerisindeki hangi öğenin tıklanabilir bir linke sahip olacağını belirtin.

  • Medya (Simge veya Resim): özellik kutusu içerisindeki simge ve/veya görsel tıklanabilir bir url bağlantısına sahip olacaktır.
  • Başlık: özellik kutusu başlığı tıklanabilir bir url bağlantısına sahip olacaktır.
  • Medya ve Başlık: hem özellik kutusu başlığı hem de simge ve/veya resim tıklanabilir bir url bağlantısına sahip olacaktır.
• Link Hedefi
  : Girmiş olduğunuz linkin aynı tarayıcı penceresinde mi yeni tarayıcı penceresinde mi açılacağını seçin.

  • _self : Aynı Tarayıcı Penceresi
  • _blank : Yeni Tarayıcı Penceresi

• Düğme Ayarları

• Düğme Göster
  : Özellik kutusunda kullanıcıları yönlendirebileceğiniz link içeren bir düğme göstermek istiyorsanız bu seçeneği etkinleştirebilirsiniz.
• Düğme Metni
  : Sitenizdeki aktif her bir dil için düğme metni olarak göstermek istediğiniz metni girin. Bu alan, "Düğme Göster" seçeneği etkinleştirilmişse gösterilir.
• Simge Göster
  : Düğme içerisinde simge göstermek istiyorsanız bu seçeneği etkinleştirebilirsiniz.
• Simge
  : Düğme içerisinde göstermek istediğiniz FontAwesome simgesini seçin. Bu alan, "Simge Göster" seçeneği etkinleştirilmişse gösterilir.

Bileşen Stil Ayarları

• Gölge
  : Özellik Kutusuna gölge uygulamak istiyorsanız bu seçeneği etkinleştirin.
• 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. Özellik Kutusu 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-feature-box-widget css sınıfı altından inceleyebilirsiniz.

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

Özel Stil - Genel Ayarlar

Özellik Kutusu için "Stil" olarak Özel Stil seçeneğini seçtiğinizde Genel Ayarlar bölümünde yer alan varsayılan alanlara ek olarak aşağıdaki alanları da yapılandırabilirsiniz.

• Simge Boyutu
  : Kullanılacak simgenin yazı boyutunu seçin. Bu alan, "Medya Tipi" olarak Simge veya Simge & Resim seçeneği seçildiğinde gösterilir.
• Simge Renk Tipi
  : Simgeyi renklendirmek için kullanmak istediğiniz yöntemi seçin. Bu alan, "Medya Tipi" olarak Simge veya Simge & Resim seçeneği seçildiğinde gösterilir.

  • Düz Simgeyi tek ve düz bir renkle renklendirebilirsiniz.
  • Gradient Simgeyi çift renk geçişi ile (gradient) renklendirebilirsiniz.
• Simge Rengi
  : Özellik kutusunun normal ve hover (üzerine gelinme) durumları için simge rengini seçin. Bu alan, "Medya Tipi" olarak Simge veya Simge & Resim seçeneği ile "Simge Renk Tipi" olarak Düz seçeneği seçildiğinde gösterilir.

  

  • Normal: Bileşenin normal durumu için simge rengini seçin.
  • Üzerinde: Bileşenin hover (üzerine gelinme) durumu için simge rengini seçin.
• Simge Gradient
  : Özellik kutusunun normal ve hover (üzerine gelinme) durumları için simge gradient renk geçişini ayarlayın. Bu alan, "Medya Tipi" olarak Simge veya Simge & Resim seçeneği ile "Simge Renk Tipi" olarak Gradient seçeneği seçildiğinde gösterilir.

  

  • Başlangıç Rengi: Gradient başlangıç rengi
  • Başlangıç Rengi Konumu: Gradient başlangıç renginin konumunu 0-100 arasında girin.
  • Bitiş Rengi: Gradient bitiş rengi
  • Bitiş Rengi Konumu: Gradient bitiş renginin konumunu 0-100 arasında girin.
  • Gradient Tipi: Linear (Düz) veya Radial (Dairesel) gradient tipinden birini seçin
  • Gradient Açısı: Gradient renk geçişinin yönünü belirtmek için 0-360° arasında bir değer girin
• Resim Genişliği
  : Kullanılacak resim için genişlik değerini piksel cinsinden (px) ibaresi olmadan belirtin. Bu alan, "Medya Tipi" olarak Resim veya Simge & Resim seçeneği seçildiğinde gösterilir.
• Resim Yüksekliği
  : Kullanılacak resim için yükseklik değerini piksel cinsinden (px) ibaresi olmadan belirtin. Bu alan, "Medya Tipi" olarak Resim veya Simge & Resim seçeneği seçildiğinde gösterilir.
• Simge/Resim Arkaplan Renk Tipi
  : Özellik kutusundaki medya ögesi için (simge/resim) arkaplan tipini seçin.

  • Düz Simge/Resim arkaplanını tek ve düz bir renkle renklendirebilirsiniz.
  • Gradient Simge/Resim arkaplanını çift renk geçişi ile (gradient) renklendirebilirsiniz.
• Simge/Resim Arkaplan Rengi
  : Özellik kutusunun normal ve hover (üzerine gelinme) durumları için simge/resim (medya) arkaplan rengini seçin. Bu alan, "Simge/Resim Arkaplan Renk Tipi" olarak Düz seçeneği seçildiğinde gösterilir.

  

  • Normal: Bileşenin normal durumu için simge/resim arkaplan rengini seçin.
  • Üzerinde: Bileşenin hover (üzerine gelinme) durumu için simge/resim arkaplan rengini seçin.
• Simge/Resim Arkaplan Gradient
  : Özellik kutusunun normal ve hover (üzerine gelinme) durumları için simge/resim (medya) arkaplan gradient renk geçişini ayarlayın. Bu alan, "Simge/Resim Arkaplan Renk Tipi" olarak Gradient seçeneği seçildiğinde gösterilir.

  

  • Başlangıç Rengi: Gradient başlangıç rengi
  • Başlangıç Rengi Konumu: Gradient başlangıç renginin konumunu 0-100 arasında girin.
  • Bitiş Rengi: Gradient bitiş rengi
  • Bitiş Rengi Konumu: Gradient bitiş renginin konumunu 0-100 arasında girin.
  • Gradient Tipi: Linear (Düz) veya Radial (Dairesel) gradient tipinden birini seçin
  • Gradient Açısı: Gradient renk geçişinin yönünü belirtmek için 0-360° arasında bir değer girin
• Simge/Resim padding
  : Simge/Resim (medya) öğe taşıyıcısı için padding (iç dolgu) değerini girin. Simge/Resim için arkaplan belirlediğinizde kenarlarda mesafe bırakmak için idealdir.
• Simge/Resim Kenarlık
  : Özellik kutusunun normal ve hover (üzerine gelinme) durumları için simge/resim (medya) ögesine kenarlık uygulamak istiyorsanız burada belirleyebilirsiniz.

  • Genişlik: Kenarlık kalınlığını piksel (px) ibaresi olmadan girin. Örn: 1 border-width
  • Stil: Kenarlık stilini seçin.
    • Yok - border-style:none
    • Düz - border-style: solid
    • Noktalı - border-style: dotted
    • Kesikli - border-style: dashed
    • Çift - border-style: double
    • Oluk - border-style: groove
    • Çıkıntı - border-style: ridge
  • Renk: Kenarlık rengini seçin. border-color
• Simge/Resim Kenar Yuvarlatma
  : Özellik kutusunun normal ve hover (üzerine gelinme) durumları için simge/resim (medya) taşıyıcı öğesinin köşelerini yuvarlatmak istiyorsanız, her bir durum için kenar yuvarlatma değerini seçin. border-radius
• Simge/Resim Gölge
  : Özellik kutusunun normal ve hover (üzerine gelinme) durumları için simge/resim (medya) taşıyıcı öğesine gölge eklemek istiyorsanız, her bir durum için gölge stilini ayarlayın. box-shadow

  • X Konum: Kutu gölgesi için X ekseni konumunu piksel (px) ibaresi olmadan girin. Örn: 5
  • Y Konum: Kutu gölgesi için Y ekseni konumunu piksel (px) ibaresi olmadan girin. Örn: 5
  • Bulanıklık: Kutu gölgesi için Bulanıklık (blur) değerini piksel (px) ibaresi olmadan girin. Örn: 10
  • Renk: Kutu gölgesi rengini seçin. RGBA formatında seçerek saydamlığı ayarlayabilirsiniz.

Özel Stil - İçerik Ayarları

Özellik Kutusu için "Stil" olarak Özel Stil seçeneğini seçtiğinizde İçerik Ayarları bölümünde yer alan varsayılan alanlara ek olarak aşağıdaki alanları da yapılandırabilirsiniz.

• Başlık Rengi
  : Özellik kutusunun normal ve hover (üzerine gelinme) durumları için başlık rengini seçin.
• Başlık Font Özellikleri:
  : Özellik Kutusu başlığına ait font özelliklerini buradan ayarlayabilirsiniz. Boş bırakırsanız "Başlık Tipi" alanında seçtiğiniz html ögesinin stili uygulanır.

  • Yazı Boyutu: Başlık yazı boyutunu seçin - font-size
  • Satır Yüksekliği: Başlık satır yüksekliğini seçin - line-height
  • Harf Mesafesi: Başlık harfleri arasındaki mesafeyi seçin - letter-spacing
  • Yazı Stili:
    • : Altı Çizili - text-decoration: underline
    • : Eğik (Italic) - font-style: italic
    • : Büyük Harf - text-transform: uppercase
  • Yazı Hizalama (Başlık):
    • : Sola Hizalanmış - text-align: left
    • : Ortalanmış - text-align: center
    • : Sağa Hizalanmış - text-alin: right
  • Yazı Genişliği: Başlık metninin kalınlığını seçin - font-weight
• İçerik Metin Rengi
  : Özellik kutusunun normal ve hover (üzerine gelinme) durumları için içerik (açıklama) rengini seçin.
• Düğme Metni Font Özellikleri:
  : Özellik Kutusunda gösterilecek düğme metnine ait font özelliklerini buradan ayarlayabilirsiniz. Boş bırakırsanız Seçtiğiniz standart düğme css sınıfı stili uygulanır.

  • Yazı Boyutu: Başlık yazı boyutunu seçin - font-size
  • Satır Yüksekliği: Başlık satır yüksekliğini seçin - line-height
  • Harf Mesafesi: Başlık harfleri arasındaki mesafeyi seçin - letter-spacing
  • Yazı Stili:
    • : Altı Çizili - text-decoration: underline
    • : Eğik (Italic) - font-style: italic
    • : Büyük Harf - text-transform: uppercase
  • Yazı Hizalama (Başlık):
    • : Sola Hizalanmış - text-align: left
    • : Ortalanmış - text-align: center
    • : Sağa Hizalanmış - text-alin: right
  • Yazı Genişliği: Başlık metninin kalınlığını seçin - font-weight
• Düğme Tipi
  : Özellik Kutusu içerisinde gösterilecek düğme tipini seçin.
• Düğme Stili
  : Özellik Kutusu içerisinde gösterilecek düğme stilini seçin.
• Düğme Şekli
  : Özellik Kutusu içerisinde gösterilecek düğme şeklini seçin.
  /li>
• Düğme Boyutu
  : Özellik Kutusu içerisinde gösterilecek düğme boyutunu seçin.
• Tam Geniş Düğme
  : Özellik Kutusu içerisinde gösterilecek düğmenin kutu genişliğince blok olarak gösterilmesini istiyorsanız etkinleştirin.

Özel Stil - Bileşen Stil Ayarları

Özellik Kutusu için "Stil" olarak Özel Stil seçeneğini seçtiğinizde Bileşen Stil Ayarları bölümünde yer alan varsayılan alanlara ek olarak aşağıdaki alanları da yapılandırabilirsiniz.

• Padding (İç Boşluk)
  : Özellik Kutusu içeriği ile kutu kenarları arasındaki mesafeyi (padding - iç boşluk) ayarlayın.
• Arkaplan Tipi
  : Bileşenin normal ve hover (üzerine gelinme) durumları için bileşen kutusunun arkaplan renk stilini seçin.

  • Düz: Bileşen arkaplanını düz (flat) renk olarak göstermek istiyorsanız seçin.
  • Gradient: Bileşen arkaplanını gradient (çift renk geçişli) olarak göstermek istiyorsanız seçin.
• Arkaplan
  : Bileşenin normal ve hover (üzerine gelinme) durumları için bileşen kutusunun arkaplan rengini seçin. Bu alan, "Arkaplan Tipi" olarak Düz seçeneği seçildiğinde gösterilir.

  

  • Normal: Bileşenin normal durumu için bileşen kutusu arkaplan rengini seçin.
  • Üzerinde: Bileşenin hover (üzerine gelinme) durumu için bileşen kutusu arkaplan rengini seçin.
• Arkaplan Gradient
  : Bileşenin normal ve hover (üzerine gelinme) durumları için bileşen kutusunun arkaplan gradient renk geçişini belirleyin. Bu alan, "Arkaplan Tipi" olarak Gradient seçeneği seçildiğinde gösterilir.

  

  • Başlangıç Rengi: Gradient başlangıç rengi
  • Başlangıç Rengi Konumu: Gradient başlangıç renginin konumunu 0-100 arasında girin.
  • Bitiş Rengi: Gradient bitiş rengi
  • Bitiş Rengi Konumu: Gradient bitiş renginin konumunu 0-100 arasında girin.
  • Gradient Tipi: Linear (Düz) veya Radial (Dairesel) gradient tipinden birini seçin
  • Gradient Açısı: Gradient renk geçişinin yönünü belirtmek için 0-360° arasında bir değer girin
• Kenarlık Kullan
  : Bileşenin normal ve hover (üzerine gelinme) durumları için bileşen kutusunda çerçeve kenarlığı göstermek istiyorsanız bu seçeneği etkinleştirin.
• Kenarlık
  : Bileşenin normal ve hover (üzerine gelinme) durumları için kenarlık stilini ayarlayın. Bu alan, "Kenarlık Kullan" seçeneği etkinleştirildiğinde gösterilir.

  • Genişlik: Kenarlık kalınlığını piksel (px) ibaresi olmadan girin. Örn: 1 border-width
  • Stil: Kenarlık stilini seçin.
    • Yok - border-style:none
    • Düz - border-style: solid
    • Noktalı - border-style: dotted
    • Kesikli - border-style: dashed
    • Çift - border-style: double
    • Oluk - border-style: groove
    • Çıkıntı - border-style: ridge
  • Renk: Kenarlık rengini seçin. border-color
• Kenar Yuvarlatma
  : Bileşenin normal ve hover (üzerine gelinme) durumları için bileşen kutusunun köşelerini yuvarlatmak istiyorsanız, her bir durum için kenar yuvarlatma değerini seçin. border-radius
• Gölge
  : Bileşenin normal ve hover (üzerine gelinme) durumları için bileşen kutusunua gölge eklemek istiyorsanız, her bir durum için gölge stilini ayarlayın. box-shadow

  • X Konum: Kutu gölgesi için X ekseni konumunu piksel (px) ibaresi olmadan girin. Örn: 5
  • Y Konum: Kutu gölgesi için Y ekseni konumunu piksel (px) ibaresi olmadan girin. Örn: 5
  • Bulanıklık: Kutu gölgesi için Bulanıklık (blur) değerini piksel (px) ibaresi olmadan girin. Örn: 10
  • Renk: Kutu gölgesi rengini seçin. RGBA formatında seçerek saydamlığı ayarlayabilirsiniz.

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.