FonPageBuilder Slayt Gösterisi Bileşeni Son Güncelleme: 04-07-2026

Slayt Gösterisi Bileşeni Nedir?

Slayt Gösterisi herhangi bir web sitesinin en dikkat çekici, etkileyici ve olmazsa olmaz ögelerinden biridir.

FonPageBuilder Slayt Gösterisi bileşeni ile sayfalarınıza gelişmiş slayt gösterileri ekleyebilir, her bir slaydın içeriğini düzenleyebilir, slayt gösterinize arkaplan resimleri, arkaplan videoları, ek görseller ve metin içerikleri ekleyebilirsiniz. Birden fazla slayt geçiş efekti ve zengin özelleştirme seçenekleriyle her sayfada farklı tasarıma sahip slayt gösterileri oluşturabilirsiniz.

Slayt Gösterisi 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.
• Slayt Gösterisi - Ögeler
  : Ekle düğmesine tıklayarak birden fazla Slayt 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. Slayt ögesi düzenleme penceresinde yer alan alanların detaylı kullanım dokümantasyonu aşağıdadır.
• Öge Özel Sınıf
  : Her bir slayt için özel css sınıfı tanımlayabilir ve site önyüzünüzdeki css dosyanızda her bir slaydı özel olarak biçimlendirebilirsiniz.

  

• Öge Arkaplan Ayarları
  : Slayt ögesinin arkaplan ayarlarını buradan ayarlayabilirsiniz.

  

  • Arkaplan Tipi: Geçerli slayt ögesi için hangi arkaplan tipini kullanmak istediğinizi seçin.
    1. Resim: Slaydınız için bir arkaplan görseli seçin/yükleyin.
    2. Video: Slaydınız için bir arkaplan videosu seçin/yükleyin.
  • Arkaplan Resmi: Geçerli slayt ögesi için arkaplan resmini seçin/yükleyin.
  • Youtube / Vimeo Videosu Kullan: Slayt ögesi için youtube veya vimeo arkaplan videosu kullanmak istiyorsanız bu seçeneği etkinleştirin. Arkaplan Tipi olarak Video seçildiğinde gösterilir.
  • Video URL: "Ortam Yöneticisi" aracılığıyla MP4 videosy seçin/yükyetin. Youtube/Vimeo Videosu Kullan seçeneğini seçtiyseniz video adresini kopyalayıp yapıştırın..
  • Video Sesi Simgesi: Slayt arkaplan videolarının otomatik oynatılabilmesi için varsayılan olarak sessiz başlatılır. Eğer kullanıcıların videonun sesini açabilmelerini istiyorsanız bu seçeneği etkinleştirdiğinizde video üzerinde "Ses" düğmesi gösterilecektir.
  • Arkaplan Kaplama Tipi: Slayt arkaplan görseli/videosunun üzerinde slat içeriklerinin daha okunur olmasını sağlamak için bir kaplama (overlay) oluşturabilirsiniz.
    1. Yok: Kaplama Gösterilmez.
    2. Tek Renk: Tek renkten oluşan bir kaplama gösterilir.
    3. Gradient (Çift Renk): Gradient (Çift Renk Geçişli) bir kaplama gösterilir.
  • Kaplama Rengi: Arkaplan Kaplama Tipi olarak "Tek Renk" seçeneği seçildiğinde gösterilir.

    

    Eylem Çağrısı Arkaplan kaplaması için renk seçici aracı ile bir renk seçin. Kaplama renginin rgba formatında olmasına ve opaklık değerinin 1'den düşük olmasına dikkat edin. Aksi taktirde kaplama arkaplan resmi görünmeyecektir. Örn: rgba(0,0,0,0.9)
  • Kaplama Gradient: Arkaplan Kaplama Tipi olarak "Gradient (Çift Renk)" 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
• Öge İçerik Ayarları
  : Slayt ögesinin içerik ayarlarını buradan ayarlayabilirsiniz.

  

  • Slayt Başlığı: Sitenizdeki aktif her bir dil için slayt başlığını girin.
    Bu alanda istediğiniz herhangi bir ürün grubundaki belirli bir ürünün fiyatını göstermek için {{domain:com:register}} veya {{hosting:15}} vb. şeklinde kısakodlar kullanabilirsiniz. Kısakodlar hakkında detaylı bilgi için lütfen Kısa Kodlar Dokumantasyonuna gözatın.
  • Slayt Başlığı 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.
  • Slayt Başlığı Font Özellikleri: Slayt başlığı için font özelliklerini ayarlayın.
    • 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
  • Slayt Başlığı Renk: Slayt başlığı metin rengini seçin.
  • Slayt Başlığı Animasyon Stili: Slayt başlığı için bir animasyon seçin.
  • Slayt Alt Başlığı: Sitenizdeki aktif her bir dil için slayt alt başlığını girin.
    Bu alanda istediğiniz herhangi bir ürün grubundaki belirli bir ürünün fiyatını göstermek için {{domain:com:register}} veya {{hosting:15}} vb. şeklinde kısakodlar kullanabilirsiniz. Kısakodlar hakkında detaylı bilgi için lütfen Kısa Kodlar Dokumantasyonuna gözatın.
  • Slayt Alt Başlığı Başlık Tipi: Açılır listeden alt başlığın hangi html öğesi ile (H1,H2,H3,H4,H5,H6) gösterileceğini seçin.
  • Slayt Alt Başlığı Font Özellikleri: Slayt alt başlığı için font özelliklerini ayarlayın.
    • 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
  • Slayt Alt Başlığı Renk: Slayt alt başlığı metin rengini seçin.
  • Slayt Alt Başlığı Animasyon Stili: Slayt alt başlığı için bir animasyon seçin.
  • Slayt Açıklaması: Slayt öğesi için açıklama metnini girin. HTML kullanabililirsiniz.
  • Slayt Açıklaması Renk: Slayt açıklaması için metin rengini seçin.
  • Slayt Açıklaması Animasyon Stili: Slayt açıklaması için bir animasyon seçin.
  • İçerik Özelliklerini Göster: Slayt içerisinde simgeli bloklar halinde özellikler göstermek istiyorsanız bu seçeneği etkinleştirin.
  • İçerik Özellikeri: Slayt içerisinde göstermek istediğiniz simgeli özelik bloklarını eklemek ve/veya düzenlemek için Ekle & Düzenle düğmesine tıklayın. Açılan modal penceredeki tablonun sağ üst köşesinde bulunan düğmesi aracılığıyla slayt içeriğinize yani özellikler ekleyebilir, düzenleyebilir veya silebilirsiniz.

    

    • Simge: İçerik özelliği simgesini seçin
    • Başlık: Aktif her bir dil için içerik özelliği başlığını girin
    • Açıklama: Aktif her bir dil için içerik özelliği açıklamasını girin
  • Özellik Gösterim Tipi: İçerik özelliklerinin sütunlarda mı (max 2 sütun) yoksa alt alta liste şeklinde mi gösterileceğini seçin.
  • Özellik Simge Rengi: İçerik özelliği simge rengini seçin. Boş bırakılırsa varsayılan tema stili uygulanır.
  • Özellik Başlık Rengi: İçerik özelliği başlık rengini seçin. Boş bırakılırsa varsayılan tema stili uygulanır.
  • Özellik Açıklama Rengi: İçerik özelliği açıklama rengini seçin. Boş bırakılırsa varsayılan tema stili uygulanır.
  • Slayt İçeriği Metin Hizalama: Slayt metin içeriğinin (başlık, alt başlık, açıklama) slayt içerisinde nasıl hizalanacağını responsive olarak her bir ekran çözünürlüğü için seçebilirsiniz. (Sola Hizalanmış, Ortalanmış, Sağa Hizalanmış)
  • Slayt İçi Görsel Kullan: Slayt içeriğinde metinle birlikte görsel göstermek istiyorsanız bu seçeneği etkinleştirin.
  • Slayt İçi Görsel: Ortam Yöneticisi aracılığıyla slayt iç görselini seçin/yükleyin. Bu alan, "Slayt İçi Görsel Kullan" seçeneği etkinleştirildiğinde gösterilir.
  • Slayt İçi Görsel Animasyon Stili: Slayt içi görsel için bir animasyon seçin.
  • Slayt İçi Görsel Yüksekliği: Slayt içi görselin yükseklik değerini responsive olarak her bir ekran boyutu için ayarlayın. Genişlik otomatik olarak orantısal şekilde hesaplanacaktır.
  • Slayt İçi Görsel Sütun Boyutu: Slayt içerisinde göstereceğiniz görselin kaplayacağı sütun boyutunu seçin. Yatay düzlemde bir satır farazi olarak 12 sütuna bölünmüştür. Sütun genişliğini responsive olarak her bir ekran çözünürlüğü için seçebilirsiniz. Bu alan, "Slayt İçi Görsel Kullan" seçeneği etkinleştirildiğinde gösterilir.
  • Slayt İçi Görsel Konumu: Slayt içerisinde göstereceğiniz görselin metin içeriğinize (başlık, alt başlık, açıklama) göre konumunu seçin. Görsel konumu responsive olarak her bir ekran çözünürlüğü için seçebilirsiniz. Bu alan, "Slayt İçi Görsel Kullan" seçeneği etkinleştirildiğinde gösterilir.
    1. Sol: Görsel Solda, Metin İçerikleri Sağda Konumlandırılır
    2. Sağ: Görsel Sağda, Metin İçerikleri Solda Konumlandırılır
• Öge Düğme Ayarları
  : Slayt ögesindeki düğme stili ayarlarını buradan ayarlayabilirsiniz.

  

  • Link: Sitenizdeki aktif her bir dil için düğmeye tıklandığında kullanıcıların yönlendirilmesini istediğiniz url adresini girin.
  • Link Hedefi: Slayt ögesindeki düğmeye tıklanıldığında düğme link hedefinin yeni pencerede mi yoksa aynı pencerede mi açılacağını seçin.
  • Düğme Metni: Sitenizdeki aktif her bir dil için Düğme Metni olarak gösterilmesini istediğiniz metni girin.
  • Düğme Tipi: Slayt ögesi içerisinde gösterilecek düğme tipini seçin.
  • Düğme Stili: Slayt ögesi içerisinde gösterilecek düğme stilini seçin.
  • Düğme Şekli: Slayt ögesi içerisinde gösterilecek düğme şeklini seçin.
  • Düğme Boyutu: Slayt ögesi içerisinde gösterilecek düğme boyutunu seçin.
  • Düğme Animasyon Stili: Slayt ögesi içerisinde gösterilecek düğme için bir animasyon seçin.
  • Simge Göster: Slayt ögesi içerisinde gösterilecek olan düğme içerisinde simge göstermek istiyorsanız bu seçeneği etkinleştirin.
  • Simge: Düğme simgesi olarak kullanmak istediğiniz FontAwesome simgesini seçin.
  • Simge Konumu: Düğme simgesinin düğme metninden önce mi sonra mı gösterileceğini belirtin.

  DÜĞME STİLİ YAPILANDIRMA İPUÇLARI:

  Eklediğiniz düğme için düğme düzenleme penceresindeki form alanlarının detaylı dokümantasyonu için lütfen Düğme (Button) Bileşeni dokümantasyonuna gözatın.

Bileşen Seçenekleri

• Taşıyıcı Tipi
  : Slayt Gösterisi içerik kapsayıcı/taşıyıcı (.container) div öğesinin genişliğini seçin.

  • Bootstrap: Taşıyıcı genişliği Bootstrap.css dosyasındaki biçimlendirmeyi kullanır.
  • Özel: Yüzde (%) olarak taşıyıcı genişliğini belirtebilirsiniz.
• Özel Taşıyıcı Genişliği (%)
  : Taşıyıcı genişliğini seçin. Bu alan, "Taşıyıcı Genişliği" olarak Özel seçeneği seçildiğinde gösterilir.
• Slayt Yüksekliği
  : Slayt Gösterisinin yüksekliğini belirtin.

  • Pencere Yüksekliği: Slayt gösterisinin yüksekliği otomatik olarak tarayıcı penceresi yüksekliğine eşitlenir.
  • Özel Yükseklik: Slayt gösterisi yüksekliğini piksel (px) cinsinden özel olarak belirtebilsiniz.
• Özel Yükseklik
  : Responsive olarak her bir ekran çözünürlüğü için slayt gösterisinin yüksekliğini ayarlayın. Bu alan, "Slayt Yüksekliği" olarak Özel Yükseklik seçeneği seçildiğinde gösterilir.
• Animasyon Stili
  : Slayt Gösterisi bileşeni, slayt geçişleri için önceden tanımlanmış 8 animasyon türüyle birlikte gelir. İstediğiniz slide animasyonunu seçebilirsiniz.

  1. Yatay Kaydır (Slide)
  2. Dikey Kaydır (Stack)
  3. Soldur (Fade)
• Otomatik Oynatma
  : Slayt Gösterisinin otomatik olarak başlatılıp başlatılmayacağını belirtin.
• Üzerine Geldiğinde Duraklat
  : Slayt Gösterisinin fare ile üzerine gelindiğinde slaydı duraklatmak istiyorsanız etkinleştirin. Bu alan, "Otomatik Oynatma" seçeneği Evet seçildiğinde gösterilir.
• Gecikme
  : Slayt Gösterisinin bir sonraki slayda ne kadar süre sonra geçeceğini belirtin.
• Hız
  : Slayt Gösterisinin bir sonraki slayda geçerken geçiş efektinin hızını milisaniye cinsinden belirtin.
• Sayfalandırma
  : Slayt Gösterisinde kaç adet slayt olduğunu gösteren "Dairesel Sayfalandırma" ögelerinin gösterilip gösterilmeyeceğini seçin. Bkz. Görsel - 2 Nolu Öge:
• Sayfalandırmada Konumu
  : Sayfalandırma öğelerinin slayt gösterisinde hangi konumda gösterileceğini seçin. Bu alan, Sayfalandırma seçeneği etkinleştirildiğinde gösterilir.
• Yönlendirme Kontrolleri
  : Slayt Gösterisinde "Önceki" ve "Sonraki" ok işaretlerinin gösterilip gösterilmeyeceğini seçin. Bkz. Görsel - 1 Nolu Ögeler:
• Yönlendiricileri Üzerine Gelince Göster
  : "Önceki" ve "Sonraki" yölendirme kontrollerinin sadece slayt gösterisinin üzerine gelindiğinde gösterilmesini istiyorsanız bu seçeneği etkinleştirin. Bu alan, "Yönlendirme Kontrolleri" seçeneği etkinleştirildiğinde gösterilir.
• Ok İşareti Pozisyonu
  : Yönlendirme kontrolleri (Önceki/Sonraki) düğmelerinin slayt gösterisindeki konumunu seçin.

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.