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

Modal Pencere Bileşeni Nedir?

Fonpagebuilder Modal Pencere Bileşeni, sayfalarına odaklı ve etkileyici açılır pencereler eklemeni sağlar. Modal tetikleyicisi olarak resim, simge veya düğme kullanabilir; ziyaretçiyi doğru anda doğru içerikle buluşturabilirsin.

Modal penceresinin içeriğini ise tamamen ihtiyacına göre şekillendirebilirsin: YouTube & Vimeo Video, MP4 Video, Görsel ya da Metin & HTML İçerik seçenekleriyle esnek ve güçlü bir deneyim oluşturursun.

Bu bileşen, hem tasarım özgürlüğü hem de kullanıcı etkileşimini artırmak isteyenler için hızlı ve etkili bir çözüm sunar.

Modal Pencere 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

Modal Pencere bileşenine ait seçenekleri aşağıdaki gibi 4 farklı başlık altında gruplayabiliriz:

• 1- Resim Modal Seçici Seçenekleri

  

  • Modal Seçici
    : Modal penceresini açmayı tetikleyecek, kullanıcının tıklamasını istediğiniz öge (seçici) türünü seçin. Resim, Düğme ve Simge seçici türlerinden birini seçebilirsiniz.
  • Modal Seçici Görseli
    : Sitenizdeki aktif her bir dil için Modal seçicisi olarak kullanmak istediğiniz görseli seçin/yükleyin.
  • Seçici Görsel Genişliği
    : Seçici olarak kullanmak istediğiniz görselin genişlik değerini piksel cinsinden (px ibaresi olmadan) responsive tüm ekran boyutları için belirtin. Örn: 250
  • Seçici Görsel Yüksekliği
    : Seçici olarak kullanmak istediğiniz görselin yükseklik değerini piksel cinsinden (px ibaresi olmadan) responsive tüm ekran boyutları için belirtin. Örn: 250
  • Görsel Kenarlığı Kullan
    : Seçici görsel için kenarlık kullanmak istiyorsanız bu seçeneği etkinleştirin.
  • Seçici Görsel Kenarlığı
    : Seçici görsel için kullanacağınız kenarlık özelliklerini ayarlayın:

    • 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
  • Seçici Görsel Kenar Yuvarlatma
    : Seçici görselin kenarlarını yuvarlatmak istiyorsanız piksel veya yüzde cinsinden kenar yuvarlatma değerini girin. Örn: 10px veya 100%.
  • Seçici Görselde Simge Göster
    : Modal seçici görselinin üzerinde bir FontAwesome simgesi göstermek istiyorsanız bu seçeneği etkinleştirin.
  • Seçici Görsel Simgesi
    : Seçici görselin üzerinde gösterilecek FontAwesome simgesini seçin.
  • Seçici Görsel Simgesi Boyutu
    : Seçici görselin üzerinde gösterilecek FontAwesome simgesinin boyutunu piksel cinsinden (px ibaresi olmadan) girin.
  • Seçici Görsel Simgesi Rengi
    : Seçici görselin üzerinde gösterilecek FontAwesome simgesinin rengini seçin.
  • Seçici Simge Gölgesi
    : Seçici üzerinde gösterilecek simgeye gölge eklemek istiyorsanız gölge değerlerini girin.

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

• 2- Düğme Modal Seçici Seçenekleri

  

  • Modal Seçici
    : Modal penceresini açmayı tetikleyecek, kullanıcının tıklamasını istediğiniz öge (seçici) türünü seçin. Resim, Düğme ve Simge seçici türlerinden birini seçebilirsiniz.
  • Düğme Metni
    : Sitenizdeki aktif her bir dil için Modal seçicisi olarak kullanmak istediğiniz düğmede gösterilecek metni girin.
  • Düğme Tipi
    : Düğme tipini seçin

    1. Varsayılan: Tema CSS dosyanızdaki varsayılan düğme stilini kullanır. btn-default
    2. Birincil: Tema CSS dosyanızdaki birincil düğme stilini kullanır. btn-primary
    3. İkincil: Tema CSS dosyanızdaki ikincil düğme stilini kullanır. btn-secondary
    4. Başarılı: Tema CSS dosyanızdaki başarılı düğme stilini kullanır. btn-succcess
    5. Bilgi: Tema CSS dosyanızdaki bilgi düğme stilini kullanır. btn-info
    6. Uyarı: Tema CSS dosyanızdaki uyarı düğme stilini kullanır. btn-warning
    7. Tehlike: Tema CSS dosyanızdaki tehlike düğme stilini kullanır. btn-danger
    8. Koyu: Tema CSS dosyanızdaki koyu (karanlık) düğme stilini kullanır. btn-dark
    9. Açık: Tema CSS dosyanızdaki açık (aydınlık) düğme stilini kullanır. btn-light
    10. Link: Tema CSS dosyanızdaki link düğme stilini kullanır. btn-link
    11. Özel: Düğme normal ve hover durumları için renklerini özel olarak seçebilirsiniz. btn-custom
  • Düğme Stili
    : Seçici olarak kullanmak istediğiniz düğmenin stilini seçin.

    1. Varsayılan: Düz (Flat) Gösterim
    2. Gradient: Gradient (Renk Geçişli) Gösterim
  • Düğme Şekli
    : Seçici olarak kullanmak istediğiniz düğmenin şeklini seçin.

    1. Yuvarlak Köşeli
    2. Düz Köşeli
    3. Yuvarlatılmış
  • Düğme Boyutu
    : Seçici olarak kullanmak istediğiniz düğmenin boyutunu seçin.

    1. Varsayılan
    2. Çok Büyük
    3. Büyük
    4. Orta
    5. Küçük
    6. Özel Düğme padding değerlerini kendiniz girebilirsniz.
  • Özel Düğme Boyutu (Padding (İç Boşluk))
    : Özel düğme boyutu için düğme padding değerini her bir ekran genişliği için responsive olarak ayarlayabilirsiniz. "Düğme Boyutu" alanından Özel seçeneği seçildiğinde gösterilir.
  • Düğme Metin Rengi:
    : Düğme metni rengini normal ve hover (üzerine gelinme) durumları için seçebilirsiniz.

    

    "Düğme Tipi" olarak Özel ve "Düğme Stili" olarak Varsayılan veya Gradient seçenekleri seçildiğinde gösterilir.
  • Düğme Arkaplan:
    : Düğme arkaplan rengini normal ve hover (üzerine gelinme) durumları için seçebilirsiniz.

    

    "Düğme Tipi" olarak Özel ve "Düğme Stili" olarak Varsayılan seçenekleri seçildiğinde gösterilir.
  • Düğme Gradient:
    : Düğme arkaplan gradient geçiş renklerini normal ve hover (üzerine gelinme) durumları için seçebilirsiniz. "Düğme Tipi" olarak Özel ve "Düğme Stili" olarak Gradient seçenekleri 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
  • Seçici Düğmede Simge Göster
    : Seçici olarak kullanılacak olan düğmede simge göstermek istiyorsanız bu seçeneği etkinleştirin.
  • Seçici Düğme Simgesi
    : Seçici olarak kullanılacak olan düğmede gösterilmesini istediğiniz FontAwesome simgesini seçin. Bu alan "Seçici Düğmede Simge Göster" seçeneği etkinleştirilmişse gösterilir.
  • Seçici Düğme Simge Konumu
    : Seçici düğme simgesinin düğme metninden önce mi sonra mı gösterileceğini belirtin. Bu alan "Seçici Düğmede Simge Göster" seçeneği etkinleştirilmişse gösterilir.
  • Düğme Metni Font Özellikleri
    : üğme metninin yazıtipi ayarlarını burada ayarlayabilirsiniz. Boş bırakılabilir. Boş bırakıldığında varsayılan düğme yazı ayarları kullanılır.

    • Yazı Boyutu: Düğme metni yazı boyutunu girin. font-size
    • Satır Yüksekliği: Düğme metni satır yüksekliğini girin. line-height
    • Harf Mesafesi: Düğme metni harflerinin araasındaki mesafeyi girin. letter-spacing
    • Yazı Stili:
      • : Altı Çizili - text-decoration: underline
      • : Eğik (Italic) - font-style: italic
      • : Büyük Harf - text-transform: uppercase
    • Yazı Hizalama:
      • : 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
  • Seçici Görsel Simgesi Rengi
    : Seçici görselin üzerinde gösterilecek FontAwesome simgesinin rengini seçin.
  • Seçici Simge Gölgesi
    : Seçici üzerinde gösterilecek simgeye gölge eklemek istiyorsanız gölge değerlerini girin.

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

• 3- Simge Modal Seçici Seçenekleri

  

  • Modal Seçici
    : Modal penceresini açmayı tetikleyecek, kullanıcının tıklamasını istediğiniz öge (seçici) türünü seçin. Resim, Düğme ve Simge seçici türlerinden birini seçebilirsiniz.
  • Simge
    : Modal seçici olarak kullanmak istediğini FontAwesome simgesini seçin.
  • Simge Yazı Boyutu
    : Seçici olarak kullanmak istediğiniz FontAwesome simgesinin responsive uyumlu tüm ekranlar için yazı boyutunu piksel cinsinden belirtin (px ibaresi olmadan).
  • Simge Renk Stili
    : Seçici olarak kullanmak istediğiniz simgenin rengini seçin.
  • Seçici Simge Arkaplan Rengi
    : Seçtiğiniz simgeye ait taşıyıcı ögenin arkaplan rengini seçin.
  • Seçici Simge Taşıyıcı Genişliği
    : Seçici olarak kullanılacak olan simgeye ait taşıyıcı ögenin genişliğini piksel cinsinden (px ibaresi olmadan) responsive olarak tüm ekran boyutları için ayrı ayrı belirtiniz.
  • Seçici Simge Taşıyıcı Yüksekliği
    : Seçici olarak kullanılacak olan simgeye ait taşıyıcı ögenin yüksekliğini piksel cinsinden (px ibaresi olmadan) responsive olarak tüm ekran boyutları için ayrı ayrı belirtiniz.
  • Seçici Simge Taşıyıcısında Kenarlık Kullan
    : Seçici olarak kullanılacak olan simgeye ait taşıyıcıya kenarlık eklemek istiyorsanız bu seçeneği etkinleştirin.
  • Seçici Simge Taşıyıcı Kenarlığı
    : Seçici simge taşıyıcısı için kullanacağınız kenarlık özelliklerini ayarlayın:

    • 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
  • Seçici Simge Taşıyıcısı Kenar Yuvarlatma
    : Seçici olarak kullanılacak olan simgeye ait taşıyıcının kenarlarını yuvarltmak istiyorsanız yuvarlatma değerini piksel veya yüzde cinsinden belirtiniz. Örn: 15px veya 50%.
  • Seçici Simge Gölgesi
    : Seçici üzerinde gösterilecek simgeye gölge eklemek istiyorsanız gölge değerlerini girin.

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

• 4- Genel Bileşen Seçenekleri

  

• Modal Seçici Konumu
  : Modal Seçiciyi nasıl konumlandırmak istediğinizi seçin. Eğer Mutlak (absolute) seçerseniz taşıyıcı sütunun veya satırın konumunun Bağımlı (relative) olduğundan emin olun. Bunun için modal bileşenin bulunduğu satırın veya sütunun düzenleme simgesine tıklayın ve satır veya sütun css sınıfı alanına position-relative css sınıfını manuel olarak ekleyin.
• Modal Seçici Konum Seçenekleri
  : Modal seçicinin responsive tüm ekran boyutları için konumunu ayarlayın. konum değerlerini piksel veya % cinsinden girebilirsiniz. Değerlerde px veya % ibaresini kullanmanız gerekir. Bu seçenek Yok seçeneği hariç tüm Modal Seçici Konumu seçeneklerinde gösterilir.
• Modal Seçiciyi Ortala
  : Modal seçiciyi üst (parent) öge içerisinde (genelde sütun) bulunduğu ögeye göre ortalamak istiyorsanız bu seçeneği etkinleştirin. Üst (top) ve Sol (left) konumları 50% olarak girilmelidir. Bu seçenek sadece Modal Seçici Konumu Bağımlı (relative) ve/veya Mutlak (absolute) seçildiğinde gösterilir.
• Dalgalanma Efektini Göster
  : Modal seçici etrafında kullanıcının dikkatini o noktaya çekmek için dalagalanma efekti göstermek istiyorsanız bu seçeneği etkinleştirin.
• Dalgalanma Efekti Rengi
  : Dalgalanma efekti rengini seçin. Bu seçenek Dalgalanma Efektini Göster seçeneği etkinleştirilmişse gösterilir.

İçerik Ayarları

Modal Pencere bileşenine ait içerik ayarlarını aşağıdaki gibi 3 farklı başlık altında gruplayabiliriz:

• 1- Video İçerik

  Modal Pencere içerisinde Youtube ve/veya Vimeo videoları gibi çevrimiçi videolar kullanabileceğiniz gibi, kendi sunucunuza yüklediğiniz MP4 formatındaki videolarınızı da kullanabilirsiniz.

  A- Youtube & Vimeo Videoları

  

  • Modal İçerik Türü
    : Modal tetikleyici tıklandığında gösterilecek olan Modal Penceresinde hangi tür içerik göstermek istediğinizi seçin. Video, Resim veya HTML & Metin Bloğu içerik türlerinden birini seçebilirsiniz.
  • Video Tipi
    : Hangi video türünü içerik olarak göstermek istediğinizi seçin. Youtube, Vimeo ve MP4 video tipinden birini seçebilirsiniz.
  • Video URL
    : Youtube ve/veya Vimeo videoları için sitenizdeki aktif her bir dilde gösterilmesini istediğiniz videonun url adresini girebilirsiniz

  B- MP4 Videolar

  

  • Modal İçerik Türü
    : Modal tetikleyici tıklandığında gösterilecek olan Modal Penceresinde hangi tür içerik göstermek istediğinizi seçin. Video, Resim veya HTML & Metin Bloğu içerik türlerinden birini seçebilirsiniz.
  • Video Tipi
    : Hangi video türünü içerik olarak göstermek istediğinizi seçin. Youtube, Vimeo ve MP4 video tipinden birini seçebilirsiniz.
  • Video URL
    : MP4 videonuzu sunucunuza yükleyin veya daha önce yüklemiş olduklarınızdan seçin.
  • Kontrolleri Göster
    : MP4 videonuzda video denetim kontrollerinin (Başlat, Duraklat, İleri Sar, Ses Kıs, gibi düğmeler) göstermek istiyorsanız bu seçeneği etkinleştirin.
  • Döngü
    : MP4 videonuz bittikten sonra tekrar baştan başlamasını istiyorsanız bu seçeneği etkinleştirin.
  • Sessiz Video
    : MP4 videonuzu sessiz olarak başlatmak istiyorsanız bu seçeneği etkinleştirin.
  • Otomatik Başlat
    : MP4 videonuzu otomatik olarak başlatmak istiyorsanız bu seçeneği etkinleştirin.

• 2- Resim İçerik

  

  • Modal İçerik Türü
    : Modal tetikleyici tıklandığında gösterilecek olan Modal Penceresinde hangi tür içerik göstermek istediğinizi seçin. Video, Resim veya HTML & Metin Bloğu içerik türlerinden birini seçebilirsiniz.
  • Modal İçerik Görseli
    : Sitenizdeki aktif her bir dil için modal penceresinde göstermek istediğiniz görseli yükleyin veya seçin.
  • Modal İçerik Görseli Alt Metni
    : Modal penceresi içerisinde göstermek istediğiniz görsel için html alt etiketinde gösterilecek, görseli tanımlayan metni giriniz.
  • Modal Pencere Boyutları
    : Modal Penceresinin genişlik ve yüksekliğini belirtin. Buradaki değer masaüstü veya dizüstü vb. (geniş) ekranlar için alabileceği maksimum değeri belirtir. Mobil cihazlarda otomatik olarak genişlik ve yükseklik ayarlanır). Genişlik ve Yükseklik değerlerini piksel cinsinden (px ibaresi olmadan) belirtiniz.

• 3- HTML & Metin İçerik

  

  • Modal İçerik Türü
    : Modal tetikleyici tıklandığında gösterilecek olan Modal Penceresinde hangi tür içerik göstermek istediğinizi seçin. Video, Resim veya HTML & Metin Bloğu içerik türlerinden birini seçebilirsiniz.
  • İçerik
    : Sitenizdeki aktif her bir dil için modal penceresinde göstermek istediğiniz metin ve/veya html içeriğinizi metin editörü aracılığıyla girebilirsiniz.
  • Modal Pencere Boyutları
    : Modal Penceresinin genişlik ve yüksekliğini belirtin. Buradaki değer masaüstü veya dizüstü vb. (geniş) ekranlar için alabileceği maksimum değeri belirtir. Mobil cihazlarda otomatik olarak genişlik ve yükseklik ayarlanır). Genişlik ve Yükseklik değerlerini piksel cinsinden (px ibaresi olmadan) belirtiniz.
  • Overflow-y
    : Modal pencere yüksekliğinden daha uzun bir içerik varsa taşma (overflow) değerini ayarlayın. Böylece pencerede kaydırma çubuğu gösterilip gizlenebilir.

    • Otomatik (overflow-y: auto;): Modal Pencere yüksekliğinden daha uzun bir içerik varsa aşağı kaydırma çubuğu gösterilir ve pencere içerisinde aşağı doğru kayarak içeriği görebilirsiniz.
    • Gizli (overflow-y: hidden;): Modal Pencere yüksekliğinden daha uzun bir içerik varsa aşağı kaydırma çubuğu gösterilmez ve taşan kısım gizlenir.
    • Görünür (overflow-y: visible;): Modal Pencere yüksekliğinden daha uzun bir içerik varsa aşağı kaydırma çubuğu gösterilmez ve taşan kısım modal penceresinden taşacak şekilde gösterilir.
    • Kaydır (overflow-y: scroll;): Modal Pencere yüksekliğinden daha uzun bir içerik olsun veya olmasın her zaman kaydırma çubuğu gösterilir.

Bileşen Stil Ayarları

• Yükseklik
  : Flipbox ögesinin yüksekliğini her bir responsive ekran çözürlüğü için piksel cinsinden fakat px ibaresi olmadan belirtin. Örneğin: 250
• 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. Flipbox (Dönen Kutu) 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-text-html-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.