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

Akordiyon Bileşeni Nedir?

Akordiyon bileşeni, ilişkili içeriğini göstermek veya gizlemek için tıklanabilen dikey olarak yığılmış bir başlık listesidir. Akordiyon bileşeni ile sayfalarınızda daha kısıtlı bir alanda daha fazla içerik göstermek istediğinizde kullanabilirsiniz. Akordiyon Bileşeni Bootstrap Accordion Bileşenini baz alır. Akordiyon bileşeni hakkında daha detaylı bilgi için Bootstrap Accordion Dokümantasyonunu inceleyebilirsiniz.

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

  STİL ÖNİZLEMELERİ

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

• Simge Göster
  : Akordiyon ögesi başlıklarında simge gösterilip gösterilmeyeceğini seçin.
• İlk Ögeyi Aç
  : Varsayılan olarak ilk akordiyon ögesinin açılmış olarak gösterilip gösterilmeyeceğiniz seçin.
• Koyu Zemin İçerisinde mi?
  : Akordiyon bileşeninin bulunduğu satır için bir arkaplan rengi veya resmi eklediyseniz Akordiyon ögeleri net şekilde görüntülenemeyebilir (okunaklı olmayabilir). Bu durumda bu seçeneği aktifleştirirseniz akordiyon ogelerinin metinleri ve stili beyaz olarak değiştirilecektir. Bu seçenek her akordiyon stili için geçerli değildir.

İçerik Ayarları

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

Akordiyon Öge Düzenleme Penceresi:

• Başlık
  : Sitenizdeki aktif her bir dil için Akordiyon Başlığı olarak gösterilmesini istediğiniz metni girin.
• Simge
  : Akordiyon başlığından önce göstermek istediğiniz FontAwesome simgesini seçin. Bu alan, "Bileşen Seçenekleri" bölümünde "Simge Göster" seçeneği etkinleştirilmişse gösterilir.
• İçerik
  : Akordiyon penceresi içerisinde göstermek istediğiniz metni yazın. HTML editör aracılığıyla metninizde istediğiniz biçimlendirmeyi gerçekleştirebilir, metninize resim, tablo vs. ekleyebilirsiniz.

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. Akordiyon 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-accordion-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.