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

Flipbox (Dönen Kutu) Bileşeni Nedir?

FonPageBuilder Flipbox Bileşeni, içeriklerinizi görsel olarak daha etkileyici ve etkileşimli hale getiren özel bir kutu bileşenidir. Üzerine gelindiğinde ya da tıklandığında ön yüz ve arka yüz arasında şık bir dönüş animasyonu gerçekleşir. Bu sayede tek bir alanda iki farklı içeriği (örneğin görsel + açıklama, ikon + detay metni, başlık + bağlantı butonu) yaratıcı bir şekilde sunabilirsiniz.

Yönetici panelinde flipbox’un ön ve arka yüz içeriklerini ayrı ayrı tanımlayabilir, animasyon türü (efekt) ve davranış (tıklama veya üzerine gelme) stilini ihtiyacınıza göre ayarlayabilirsiniz. Ön ve arka yüz içeriklerinde, istediğiniz HTML içeriği, Bootstrap ve Font Awesome ögelerini kullanabilirsiniz.

Önyüzde ise ziyaretçileriniz bu bileşenle karşılaştığında modern ve dikkat çekici bir etkileşim deneyimi yaşar. Özellikle hizmet tanıtımları, ekip üyeleri, ürün öne çıkarma ya da kampanya vurguları için ideal bir çözümdür.

Flipbox (Dönen Kutu) 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.

Ön Yüz Ayarları

• İçerik
  : Sitenizdeki aktif her bir dil için Flipbox (dönen kutu) ön yüzünde gösterilmesini istediğiniz HTML içeriğini girin. İstediğiniz herhangi bir HTML içeriğini girebilir, Resim ekleyebilir, Bootstrap 5 ve Font Awesome 6 simge css sınıflarını kullanabilirsiniz.
• İçerik Hizalama
  : Girdiğiniz içeriğin kutu içerisinde nasıl hizalanacağını seçin.
• Metin Rengi
  : Flipbox ön yüzündeki metin içeriğinizin hangi renkte gösterilmesini istediğinizi seçin. NOT: İçerik alanında kullanacağınız her bir html ögesini manuel olarak biçimlendirebileceğinizi unutmayın.
• Arkaplan Tipi
  : Flipbox ön yüzünde kullanmak istediğiniz arkaplan türünü seçin. Seçebileceğiniz deperler: Renk, Resim, Gradient
• Arkaplan Rengi
  : Flipbox ön yüzünün arkaplan rengini seçin. Bu seçenek Arkaplan Tipi olarak Renk veya Resim seçeneği seçildiğinde gösterilir.
• Arkaplan Resmi
  : Sitenizdeki her bir aktif dil için flipbox ön yüzünün arkaplan resmini seçin.
• Arkaplan Gradient
  : Flipbox ön yüzü için arkaplan 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
• Kenarlık
  : Flipbox ön yüzü için kenarlık stilini 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
• Kenar Yuvarlatma
  : Flipbox ön yüzünün köşelerini yuvarlatmak için kenar yuvarlatma değerini seçin. border-radius
• Gölge
  : Flipbox ön yüzüne gölge eklemek istiyorsanız gölge stilini ayarlayın. box-shadow

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

Arka Yüz Ayarları

• İçerik
  : Sitenizdeki aktif her bir dil için Flipbox (dönen kutu) arka yüzünde gösterilmesini istediğiniz HTML içeriğini girin. İstediğiniz herhangi bir HTML içeriğini girebilir, Resim ekleyebilir, Bootstrap 5 ve Font Awesome 6 simge css sınıflarını kullanabilirsiniz.
• İçerik Hizalama
  : Girdiğiniz içeriğin kutu içerisinde nasıl hizalanacağını seçin.
• Metin Rengi
  : Flipbox arka yüzündeki metin içeriğinizin hangi renkte gösterilmesini istediğinizi seçin. NOT: İçerik alanında kullanacağınız her bir html ögesini manuel olarak biçimlendirebileceğinizi unutmayın.
• Arkaplan Tipi
  : Flipbox arka yüzünde kullanmak istediğiniz arkaplan türünü seçin. Seçebileceğiniz deperler: Renk, Resim, Gradient
• Arkaplan Rengi
  : Flipbox arka yüzünün arkaplan rengini seçin. Bu seçenek Arkaplan Tipi olarak Renk veya Resim seçeneği seçildiğinde gösterilir.
• Arkaplan Resmi
  : Sitenizdeki her bir aktif dil için flipbox arka yüzünün arkaplan resmini seçin.
• Arkaplan Gradient
  : Flipbox arka yüzü için arkaplan 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
• Kenarlık
  : Flipbox arka yüzü için kenarlık stilini 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
• Kenar Yuvarlatma
  : Flipbox arka yüzünün köşelerini yuvarlatmak için kenar yuvarlatma değerini seçin. border-radius
• Gölge
  : Flipbox arka yüzüne gölge eklemek istiyorsanız gölge stilini ayarlayın. box-shadow

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

Bileşen Seçenekleri

• Dönme Davranışı
  : Flipbox ögesinin dönme eyleminin ne zaman gerçekleştirileceğini seçin.

  • Üzerine Gelince Döndür: Fare işaretçiniz ile Flipbox ögesinin üzerine gelindiğinde durum değiştirme efekti (dönme, kaydırma, solma, 3d) gerçekleştirilir.
  • Üzerine Tıklayınca Döndür: Fareniz ile Flipbox ögesinin üzerine tıklanıldığında durum değiştirme efekti (dönme, kaydırma, solma, 3d) gerçekleştirilir.
• Döndürme Stili
  : Flipbox ön ve arka yüzü arasındaki değişim efekti stilini seçin.

  • Döndürme: Flipbox ögesinin üzerine gelindiğinde / tıklanıldığında kutu döndürülür.
  • Kaydırma: Flipbox ögesinin üzerine gelindiğinde / tıklanıldığında öge arka yüzü kayarak ön yüzün üstüne gelir.
  • Soldurma: Flipbox ögesinin üzerine gelindiğinde / tıklanıldığında öge ön yüzü solarak arka yüz görünür hale gelir.
  • 3D: Flipbox ögesinin üzerine gelindiğinde / tıklanıldığında öge üç boyutlu olarak döndürülür.
• Döndürme Yönü
  : Flipbox ön ve arka yüzü arasındaki değişim efektinin hangi yönde olacağını seçin. Bu seçenek Soldurma Stili hariç tüm döndürme stillerinde kullanılabilir.

  • Yukarıdan Aşağıya: Ön ve arka yüz değişimi yukarıdan aşağıya yönünde gerçekleşir.
  • Aşağıdan Yukarıya: Ön ve arka yüz değişimi aşağıdan yukarıya yönünde gerçekleşir.
  • Soldan Sağa: Ön ve arka yüz değişimi soldan sağa yönünde gerçekleşir.
  • Sağdan Sola: Ön ve arka yüz değişimi sağdan sola yönünde gerçekleşir.

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.