FonPageBuilder İnteraktif Afiş Bileşeni Son Güncelleme: 04-07-2026

İnteraktif Afiş Bileşeni Nedir?

FonPageBuilder İnteraktif Afiş bileşeni ile sayfanıza dikkat çekici hover(üzerine gelinme) animasyonlarına sahip, metin ve simge içerikleriyle zenginleştirebileceğiniz şık görsel afişleri ekleyebilirsiniz.

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

  STİL ÖNİZLEMELERİ

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

• Resim
  : İnteraktif Afiş bileşeni içerisinde göstermek istediğiniz görseli "Ortam Yöneticisi" ile seçin veya yükleyin.
• Kaplama Tipi
  : Kullanıcı fare işaretçisi ile İnteraktif Afiş bileşenin üzerine geldiğinde resmin üzerinde içeriğinizin gösterileceği bir kaplama gösterilir. Gösterilecek olan kaplama arkaplanını buradan seçebilirsiniz.

  • Yok: Kaplama Gösterilmez.
  • Tek Renk: Normal durum ve Hover durumu (fare ile üzerine gelinme) için tek renkten oluşan bir kaplama arkaplanı seçebilirsiniz.
  • Gradient (Çift Renk): Normal durum ve Hover durumu (fare ile üzerine gelinme) için Gradient (Çift Renk Geçişli) bir kaplama arkaplanı seçebilirsiniz.
• İnteraktif Afiş Kaplama Rengi
  : Kaplama Tipi olarak "Tek Renk" seçeneği seçildiğinde gösterilir.

  

  • Normal: İnteraktif Afişin normal durumu 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 altında kalan öğeler görünmeyecektir. Örn: rgba(0,0,0,0.9)
  • Üzerinde: İnteraktif Afişin hover (fare ile üzerine gelinme) durumu 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 altında kalan öğeler görünmeyecektir. Örn: rgba(0,0,0,0.9)
• İnteraktif Afiş Kaplama Grandient
  : 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

  • Normal Sekmesi: İnteraktif Afişin normal durumu için gradient renk geçişi ayarlarını belirtin. Kaplama renklerinin rgba formatında olmasına ve opaklık değerinin 1'den düşük olmasına dikkat edin. Aksi taktirde kaplama altında kalan öğeler görünmeyecektir. Örn: rgba(0,0,0,0.9)
  • Üzerinde Sekmesi: İnteraktif Afişin hover (fare ile üzerine gelinme) durumu için gradient renk geçiş ayarlarını belirtin. Kaplama renginin rgba formatında olmasına ve opaklık değerinin 1'den düşük olmasına dikkat edin. Aksi taktirde kaplama altında kalan öğeler görünmeyecektir. Örn: rgba(0,0,0,0.9)

İçerik Ayarları

• Başlık
  : Sitenizdeki aktif her bir dil için afiş Başlığı olarak kullanmak istediğiniz metni girin.
• Başlık Tipi
  : Afiş Başlığının hangi başlık html ögesi (H1, H2, H3, H4, H5, H6) ile gösterileceğini seçin.
• İçerik
  : Sitenizdeki aktif her bir dil için afiş içerisinde göstermek istediğiniz açıklama metnini girin.
• Etiket
  : Afiş içerisinde göstermek istediğiniz dikkat çekici ve kısa slogan etiketini girin. Bu tamamen içeriğinize bağlı olarak bir sayı, kategori adı, para birimi ya da dikkat çekici kısa bir slogan olabilir. Örn: %20 İNDİRİM
• Simge
  : Afiş içerisinde kullanılacak olan ana simgeyi seçin.
• Link
  : İnteraktif Afiş bileşenine tıklandığında kullanıcıları belirli bir adrese yönlendirmek istiyorsanız URL adresini buraya girin. "Düğme Göster" seçeneği
• Düğme Göster
  : Afiş içerisinde kullanıcıları yönlendireceğiniz bir düğme gösterin/gizleyin. Etkinleştirildiğinde "Link" alanında girilen URL bağlantısı düğmede, etkinleştirilmemişse afiş genelinde uygulanır.
• Düğme Metni
  : Sitenizdeki aktif her bir dil için Düğmede gösterilmesini istediğiniz metni girin (Örn: Detaylı Bilgi). Bu alan "Düğme Göster" seçeneği etkinleştirilmişse gösterilir.
• Düğme Simgesi Göster
  : Düğme içerisinde simge göstermek istiyorsanız bu seçeneği etkinleştirin. Bu alan "Düğme Göster" seçeneği etkinleştirilmişse gösterilir.
• Simge
  : Düğme içerisinde göstermek istediğiniz düğme simgesini seçin. Bu alan "Düğme Göster" ve "Düğme Simgesi Göster" seçenekleri etkinleştirilmişse gösterilir.
• Simge Konumu
  : Düğme simgesinin düğme metninden önce mi sonra mı gösterileceğini belirtin. Bu alan "Düğme Göster" ve "Düğme Simgesi Göster" seçenekleri etkinleştirilmişse gösterilir.

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. İnteraktif Banner 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-banner-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.