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

Galeri Bileşeni Nedir?

Fonpagebuilder Galeri bileşeni; görsel içeriklerinizi klasik sınırların ötesine taşıyarak modern web tasarımının en popüler yerleşim modelleriyle sergilemenizi sağlar. Fotoğraflarınızı ister dinamik bir Bento düzeninde, ister estetik bir Justified akışında sunun; her stil, kullanıcılarınız için kusursuz bir görsel deneyim ve etkileyici bir hikaye anlatımı sunmak üzere optimize edilmiştir.

5 Farklı galeri yerleşim düzeni içerisinden beğendiğiniz bir düzeni seçebilirsiniz.

Teknik Özellikler ve Avantajlar

• Responsive Uyumluluk: Tüm stiller mobil, tablet ve masaüstü cihazlar için otomatik olarak optimize edilir.
• Hafif ve Hızlı: Lazy load (gecikmeli yükleme) desteği sayesinde çok sayıda yüksek çözünürlüklü görsel içeren galeriler bile sayfa hızını olumsuz etkilemez.
• Modal Pencere Gösterimi: Görsellere tıklandığında açılan tam ekran büyütme ve slayt modu ile detaylı inceleme imkanı sunar.

Kullanım Alanları

• Portfolyolar: Projelerinizi Masonry veya Bento stiliyle sergileyerek yaratıcılığınızı ön plana çıkarın.
• Ürün Katalogları: Ürün varyasyonlarını Bootstrap Grid ile düzenli bir şekilde sunun.
• Etkinlik Albümleri: Çok sayıda fotoğrafı Justified yerleşimiyle bir profesyonel gibi gruplayın.

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.

Galeri 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

• Galeri Düzeni
  : Galeri düzenini seçin. Resimlerinizi farklı görünüm tarzlarıyla sunabilirsiniz.

  • Bootstrap Grid: Standart ve güvenilir yerleşim. Tüm görsellerin eşit boyutlarda ve nizami bir ızgara düzeninde sıralandığı, kurumsal yapılar için ideal stildir.
  • Masonry: Pinterest tarzı modern dizilim. Farklı dikey yüksekliklere sahip görsellerin boşluk bırakmadan birbirini takip ettiği, sanatsal ve dinamik bir akış sunar.
  • Slayt: Mobil öncelikli ve modern dokunuş. Görsellerin sayfa derinliğini artırmadan, yatay bir eksende kaydırılarak incelenmesine olanak tanıyan kompakt bir çözümdür.
  • Justified: Fotoğrafçılık portfolyolarının vazgeçilmezi. Görsellerin orijinal oranlarını koruyarak her satırı tam genişlikte doldurduğu, Google Görseller tarzı akıcı bir yerleşimdir.
  • Metro/Bento: Modern arayüz tasarımının yükselen trendi. Farklı boyutlardaki kutuların (kare ve dikdörtgen) bir yapboz gibi birleştiği, hiyerarşik ve çarpıcı bir görsel sunum sağlar.
• Küçükresim Genişliği
  : Galeride gösterilecek fotoğrafların otomatik olarak küçükresimleri (thumbnail) oluşturulur. Oluşturulacak olan bu küçük resimlerin genişlik değerini piksel cinsinden (px ibaresi olmadan) sayısal değer olarak giriniz.
• Küçükresim Yüksekliği
  : Galeride gösterilecek fotoğrafların otomatik olarak küçükresimleri (thumbnail) oluşturulur. Oluşturulacak olan bu küçük resimlerin yüksellik değerini piksel cinsinden (px ibaresi olmadan) sayısal değer olarak giriniz.
• Küçükresim Kenar Yuvarlatma
  : Galeride gösterilecek fotoğrafların daha yumuşak köşelere sahip olmasını istiyorsanız buraya yuvarlatma değerini piksel cinsinden (px ibaresi olmadan) sayısal değer olarak giriniz.
• Sütun Sayısı
  : Galeride fotoğrafların bir satırda kaç sütuna gösterileceğini responsive olarak giriniz. NOT: Bu seçenek Justified ve Metro/Bento düzenlerinde kullanılamaz.

İçerik Ayarları

• Galeri Oluşturma Yöntemi
  : Galerinizin hangi fotoğraflardan nasıl oluşturulmasını istediğinizi seçin.

  • Klasörden Oluştur: Belirttiğiniz klasördeki tüm resimleri kullanarak otomatik olarak bir galeri oluşturur.
  • Resimleri Seçerek Oluştur: Resimlerinizi tek tek seçme ve düzenleme imkanı sunar.
• Galeri Klasör Yolu
  : Galeriyi oluşturmak için kullanılacak klasörün adını girin. FonPageBuilder Ortam Yöneticisi ile klasörünüzü oluşturabilir ve resimlerinizi toplu halde yükleyebilirsiniz. Resim başlıkları otomatik olarak dosya adından elde edilecektir. Sadece klasör adını yazmanız yeterlidir, Örn: benim-galerim. Eğer alt klasör kullanacaksanız klasör adını şu şekilde girin: ana-klasor/alt-klasor. NOT: Bu seçenek sadece "Klasörden Oluştur" galeri oluşturma yöntemi seçildiğinde gösterilir ve kullanılabilir.
• Galeri Ögeleri
  : Galeriye eklemek istediğiniz tüm gotoğrafları tek tek manuel olarak ekleyebilir görsellerin her biri için başlık ve alt etiketini manuel olarak ayarlayabilirsiniz. NOT: Bu seçenek sadece "Resimleri Seçerek Oluştur" galeri oluşturma yöntemi seçildiğinde gösterilir ve kullanılabilir.
  
  

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

  • Galeri Resmi: Galeriye eklemek istediğiniz görseli "Ortam Yöneticisi" aracılığıyla seçin veya yükleyin.
  • Galeri Resmi Başlığı: Galeri görseli için manuel olarak sitenizdeki her bir aktif dil için başlık girin. Eğer boş bırakırsanız varsayılan olarak dosya adından otomatik olarak oluşturulacaktır.

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