FonPageBuilder İçerik Kutusu Bileşeni Son Güncelleme: 04-07-2026

İçerik Kutusu Bileşeni Nedir?

FonPageBuilder İçerik Kutusu bileşeni ile basit bir şekilde simge, resim, düğme ve içerikten oluşan içerik kutuları oluşturabilirsiniz. "Özellik Kutusu" bileşeni ile hemen hemen aynı amaçla kullanılan bu bileşende "Özellik Kutusu"ndan farklı olarak tek seferde birden fazla içerik kutusu oluşturabilir ve bu içerik kutularını karusel slaydı olarak gösterebilirsiniz.

İçerik 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.

Bileşen Seçenekleri

• Stil
  : İçerik Kutusu bileşeninin sayfanızda hangi stilde gösterilmesini istediğinizi seçin.

  STİL ÖNİZLEMELERİ

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

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

  • Simge: İçerik kutusu öge düzenleme penceresinde FontAwesome simgesi seçebilirsiniz.
  • Resim: İçerik kutusu öge düzenleme penceresinde "Ortam Yöneticisi" aracılığıyla görsel seçebilir veya yükleyebilirsiniz.
• Simge/Resim Konumu
  : İçerik Kutusunda gösterilecek olan simge veya görselin içeriğe göre konumunu belirleyin.

  • Üst: Simge/Resim içeriğin üstünde görüntülenir.
  • Sol: Simge/Resim içeriğin solunda görüntülenir.
  • Sağ: Simge/Resim içeriğin sağında görüntülenir.
• İçerik Hizalama
  : İçerik Kutusu içeriğinin yatay düzlemde nasıl hizalanacağını seçin. Bu alan, "Simge/Resim Konumu" olarak Üst seçeneği seçildiğinde gösterilir.

  • Sol: Tüm içerikler yatay olarak sola hizalanır. justify-content:start
  • Sağ: Tüm içerikler yatay olarak sağa hizalanır. justify-content:end
  • Orta: Tüm içerikler yatay olarak ortalanarak hizalanır. justify-content:center
• Dikey İçerik Hizalama
  : İçerik Kutusu içeriğinin dikey düzlemde nasıl hizalanacağını seçin. Bu alan, "Simge/Resim Konumu" olarak Sol veya Sağ seçeneği seçildiğinde gösterilir.

  • Üst: Tüm içerikler dikey olarak üstte hizalanır. align-items:start
  • Orta: Tüm içerikler dikey olarak ortalanarak hizalanır. align-items:center
  • Alt: Tüm içerikler dikey olarak altta hizalanır. align-items:end
• Sütun Sayısı
  : Yatay düzlemde bir satırda kaç adet içerik kutusunun gösterileceğini responsive olarak her bir ekran çözünürlüğü için belirtebilirsiniz.
• Karusel Kullan
  : İçerik Kutuları için karusel slaydı oluşturmak isterseniz bu seçeneği aktifleştirin.
• Yönlendirme Kontrolleri
  : İçerik Kutusu 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:
• Sayfalandırma
  : İçerik Kutusu karusel slaydının altında kaç adet slayt olduğunu gösteren "Dairesel Sayfalandırma" ögesinin gösterilip gösterilmeyeceğini seçin. Bu alan, "Karusel Kullan" seçeneği etkinleştirilmişse gösterilir. Bkz. Görsel - 2 Nolu Öge:
• Otomatik Oynatma
  : İçerik Kutusu karusel slaydının otomatik olarak başlatılıp başlatılmayacağını seçin. Bu alan, "Karusel Kullan" seçeneği etkinleştirilmişse gösterilir.
• Üzerine Geldiğinde Duraklat
  : İçerik Kutusu karusel slaydının fare ile üzerine gelindiğinde slaydı duraklatmak istiyorsanız etkinleştirin. Bu alan, "Karusel Kullan" seçeneği etkinleştirilmişse gösterilir.
• Döngü
  : İçerik Kutusu karusel slaydının sürekli tekrar edecek şekilde kesintisiz kaymasını istiyorsanız etkinleştirin. Bu alan, "Karusel Kullan" seçeneği etkinleştirilmişse gösterilir.

İçerik Ayarları

İçerik Kutusu İçerik Ayarları bölümündeki İçerik Kutusu - Ögeler başlığının karşısındaki Ekle düğmesine tıklayarak birden fazla Kampanya Ö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.

İçerik Kutusu Öge Düzenleme Penceresi:

• Simge
  : İçerik kutusunda gösterilmesini istediğiniz FontAwesome simgesini seçin. Bu alan, "Bileşen Seçenekleri"nden "Medya Tipi" olarak Simge seçeneği seçildiğinde gösterilir.
• Resim
  : İçerik kutusunda gösterilmesini istediğiniz görseli "Ortam Yöneticisi" aracılığıyla seçin veya yükleyin. Bu alan, "Bileşen Seçenekleri"nden "Medya Tipi" olarak Resim seçeneği seçildiğinde gösterilir.
• Başlık
  : Sitenizdeki aktif her bir dil için İçerik Kutusunda göstermek istediğiniz başlık metnini buraya girin.
• İçerik
  : Sitenizdeki aktif her bir dil için İçerik Kutusunda göstermek istediğiniz içerik metnini (açıklama) buraya girin.
• Düğme Göster
  : İçerik 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österilmesini istediğiniz metni girin. Bu alan, "Düğme Göster" seçeneği etkinleştirilmişse gösterilir.
• Link
  : Düğmeye tıklanıldığında kullanıcıların yönlendirilmesini istediğiniz url adresini girin. Bu alan, "Düğme Göster" seçeneği etkinleştirilmişse gösterilir.
• Link Hedefi
  : Düğmeye tıklanıldığında "Link" alanında girilen adresin aynı tarayıcı penceresinde mi yeni tarayıcı penceresinde mi açılacağını seçin. Bu alan, "Düğme Göster" seçeneği etkinleştirilmişse gösterilir.

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

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. İçerik 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-content-box-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.