FonPageBuilder Sütun Yönetimi Son Güncelleme: 04-07-2026

Sütun Nedir?

Satırlara benzer şekilde, Sütunlar da bir web sayfasının yerleşim düzenini (mizanpaj) oluşturmaya yardımcı olan yapılardır. Sütunların yardımıyla, tek bir Satır birden fazla Sütuna bölünebilir ve bu Sütunların her biri diğer modül ve bileşenleri barındırabilir. Satır ve sütun yapısı hakkında daha detaylı bilgi için Bootstrap Grid Dokümantasyonunu inceleyebilirsiniz.

Sütun Düzenleme Ögeleri

Sütun düzenleme ögeleri, sütunlarınızı özelleştirmenize ve stil vermenize olanak tanır. Yukarıdaki resimde gösterildiği gibi, farenizle her bir sütunun üzerine geldiğinizde sütun sağ üst köşesinde yer alır ve buradan sütun ile ilgili işlemleri gerçekleştirebilirsiniz:

Sütunu Taşı: Bu ögeye basılı tutarken sürükleyip bırakarak sütunun satır içindeki sıralamasını değiştirebilir veya sütunu başka bir satıra taşıyabilirsiniz.
Sütunu Sil: Seçili aktif sütunu siler.
Sütunu Düzenle: Sütun Ayarları penceresini açar.
Sütunu Çoğalt: Seçili sütunun içeriği ve ayarlarıyla birlikte bir kopyasını (klon) oluşturur.
Satır Ekle: Sütun içerisine İç Satır eklemek için Satır oluşturma panceresini açar.
Bileşen Ekle: - FonPageBuilder tarafından içeriğinizi oluşturmak için kullanacağınız 30'dan fazla sitem modülü ve bileşen penceresini açar. Eklemek istediğiniz modül/bileşeni seçerek sütun içerisine kolayca ekleyebilir ve içeriğinizi zenginleştirebilirsiniz.
Bileşen Alanı: Sütun içerisine eklenecek modül/bileşen burada görünür.
Sütunlar: Bileşen veya modülleri ekleyeceğiniz alanlar.

Sütun Oluşturma

FonPageBuilder sütun oluşturma işlemini iki durumda kullanmanız gerekecektir:

Sayfaya Yeni Satır Ekleme: Sayfa düzenleme ekranındayken sayfanın sağında yer alan Menü çubuğundaki Yeni Satır düğmesine tıklayarak yeni satır ekleme penceresini açabilirsiniz. Açılan ekranda oluşturmak istediğiniz satırın kaç adet sütuna sahip olacağını belirterek satırınızı oluşturabilirsiniz. Daha detaylı bilgi için lütfen Satır (Bölüm) Oluşturma ve Düzenleme dokümantasyonuna gözatın.
Mevcut Satıra Yeni Sütun Ekleme: Seçtiğiniz satırın sol üst köşesinde yer alan Satır Düzenleme Araçlarında yer alan Satır İşlemleri ögesine tıklayın ve açılan menüden Sütun Ekle ögesine tıklayın. Sütun ekleme penceresi gösterilecektir.

Sütun Ekleme Penceresi

Ayar Sekmesi:
Sütun Sayısını Belirle alanında oluşturacağınız satırın kaç adet sütun içermesini istediğinizi belirtin.
Gelişmiş Sekmesi:
Burada ekleyeceğiniz sütunlar için gerekli ayarlamaları yapabilirsiniz.
- Aktif Ekranı Seç: Ayar Sekmesindeki Sütun Sayısı burada seçeceğiniz aktif ekrana ait sütun genişliğini baz alacaktır. Örneğin Aktif Ekran olarak Extra Büyük Cihazlar seçiliyse ve Sütun İçin Genişlik Stili alanında Extra Büyük Cihazlar için 3/12 Sütun değerini seçiliyse Ayar sekmesinde 4 sütun seçildiğinde oluşturulacak olan satırda 4 adet 3/12 genişliğinde (col-xl-3) sütun oluşturulacaktır.
- Sütun İçin Genişlik Stili: Oluşturulacak sütunun responsive genişliklerini ayarlayabilirsiniz.
  - Extra Büyük Cihazlar: Oluşturacağınız sütunun ekran genişliği 1200px ve üstü cihazlardaki genişliğini seçin.
  - Büyük Cihazlar: Oluşturacağınız sütunun ekran genişliği 992px ile 1199px arası cihazlardaki genişliğini seçin.
  - Orta Cihazlar: Oluşturacağınız sütunun ekran genişliği 768px ile 991px arası cihazlardaki genişliğini seçin.
  - Küçük Cihazlar: Oluşturacağınız sütunun ekran genişliği 576px ile 767px arası cihazlardaki genişliğini seçin.
  - Ekstra Küçük Cihazlar: Oluşturacağınız sütunun ekran genişliği 575px ve altı cihazlardaki genişliğini seçin.

ÖNEMLİ HATIRLATMA!

Sütun genişliklerini istediğiniz zaman (daha sonradan) sütun ayarlarından her bir sütun için responsive olarak güncelleyebilirsiniz veya sürükleyerek genişletebilir veya daraltabilirsiniz.

Sütun Düzenleme

Oluşturduğunuz bir sütunu ve özelliklerini düzenlemek, stil uygulamak, başlık eklemek vb. işlemler için Sütun Düzenleme Araçlarındaki Sütunu Düzenle ögesine tıklayın. Sütun Stili penceresi açılacaktır. Burada sütunla ilgili tüm düzenlemeleri gerçekleştirebilirsiniz. Bu penceredeki ögeler hakkında detaylı bilgi için videonun altında yer alan yönergeleri görüntüleyin.

Sütun Stili Düzenleme Penceresi

Seçili sütunla ilgili tüm stil ve ayarlamaları burada gerçekleştireceksiniz.

CSS Sınıf Soneki
: Sütun için özel CSS sınıfı tanımlayabilir ve CSS dosyanızda bu sınıfı istediğiniz şekilde biçimlendirebilirsiniz.
Margin (Dış Boşluk)
: Tutarlı aralıklarla duyarlı içerik oluşturmak için kenar boşluğunu (margin) kullanın. Sütun sınırının dışına (margin) dış boşluk ekleyebilirsiniz. Bir tarafa (Örn. Sadece üst boşluk: 10px 0 0 0), tamamlayıcı kenarlara (Örn. sadece alt ve üst boşluk: 10px 0) veya dört kenara aynı anda (Örn:10px) boşluk ekleyin.
Padding (İç Boşluk)
: Tutarlı aralıklarla duyarlı içerik oluşturmak için dolguyu (padding) kullanın. Sütun sınırının içine (padding) iç boşluk ekleyebilirsiniz. Bir tarafa (Örn. Sadece üst dolgu: 10px 0 0 0), tamamlayıcı kenarlara (Örn. sadece alt ve üst dolgu: 10px 0) veya dört kenara aynı anda (Örn:10px) dolgu ekleyin.
Metin Rengi
: Sütun içerisindeki tüm metinler için özel renk seçebilirsiniz. Boş bırakılırsa tema css dosyasındaki varsayılan metin rengi kullanılır.
Link Rengi
: Sütun içerisindeki tüm linkler için özel renk seçebilirsiniz. Boş bırakılırsa tema css dosyasındaki varsayılan link rengi kullanılır.
Link Üzerinde Rengi
: Sütun içerisindeki tüm linklerin üzerine gelindiğindeki hali için (hover) özel renk seçebilirsiniz. Boş bırakılırsa tema css dosyasındaki varsayılan link üzerinde rengi kullanılır.
Başlık Rengi
: Sütun içerisindeki tüm H1,H2,H3,H4,H5 ve H6 etiketleri için özel renk seçebilirsiniz. Boş bırakılırsa tema css dosyasındaki varsayılan başlık rengi kullanılır.
Arkaplan Tipi
- Yok: Sütun için herhangi bir arkaplan stili uygulamak istemiyorsanız seçin.
- Renk: Sütun için düz renk bir arkaplan uygulamak istiyorsanız seçin.
- Gradient: Sütun için çift renkli gradient bir arkaplan uygulamak istiyorsanız seçin.
- Resim: Sütun için arkaplan resmi uygulamak istiyorsanız seçin.
- Video: Sütun için arkaplanda oynatılacak bir video eklemek istiyorsanız seçin
Arkaplan Tipi - Renk
- Arkaplan Rengi: Renk seçim kutusundan arkaplan rengi olarak kullanmak istediğiniz rengi seçin. background-color:#eeeaea
Arkaplan Tipi - Gradient
background-image: linear(90deg, #fa0068 0%, #0061ff 100%)
Arkaplan Resmi: GradientTipi(Gradient Açısı, Başlangıç Rengi + Konumu, Bitiş Rengi + Konumu)
- 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
Arkaplan Tipi - Resim
- Arkaplan Rengi > Renk: Renk seçim kutusundan arkaplan rengi olarak kullanmak istediğiniz rengi seçin. background-color:#eeeaea
- Arkaplan Resmi > Resim: Ortam yöneticisinden arkaplan resmi olarak kullanmak istediğiniz resmi seçin/yükleyin. background-image:url(....)
- Arkaplan Resmi > Tekrarla: Arkaplan resminin tekrarlanma şeklini seçin.
  Yok = background-repeat:none,
  Her Yöne Tekrarla = background-repeat:repeat,
  Yatay = background-repeat:repeat-x,
  Dikey = background-repeat:repeat-y
- Arkaplan Resmi > Konum: Arkaplan resminin konumunu seçin.
  Sol Üst = background-position: left top,
  Sol Orta = background-position: left center,
  Sol Alt = background-position: left bottom,
  Sağ Üst = background-position: right top,
  Sağ Orta = background-position: right center,
  Sağ Alt = background-position: right bottom,
  Orta Üst = background-position: center top,
  Orta = background-position: center,
  Orta Alt = background-position: center bottom
- Arkaplan Resmi > Ölçeklendirme: Arkaplan resim boyutlandırmasını ayarlayın.
  Yok = ,
  Otomatik = background-size: auto,
  Contain (İçerik) = background-size: contain,
  Cover (Kapak) = background-size: cover,
  Initial (Başlangıç) = background-size: initial,
  Doldur & Sığdır = background-size: 100% 100%,
Arkaplan Tipi - Video
Sütun için arkaplan olarak Youtube Videosu veya kendi sunucunuzda barındırdığınız yerel bir mp4 videosu ekleyebilirsiniz. Arkaplan videoları sessiz olarak otomatik olarak başlar ve sürekli döngü halinde tekrarlanır. Video tipi olarak Youtube veya MP4 seçebilirsiniz.
- Youtube: Arkaplan videosu olarak YouTube üzerindeki bir videoyu eklemek istiyorsanız seçin. Youtube'u ziyaret edin ve eklemek istediğiniz videonun sayfasını açın. Tarayıcınızın adres satırındaki watch?v= ibaresinden sonraki video kodunu kopyalayıp Video Linki alanına yapıştırın. Video kodu watch?v= parametresi ile sonraki & parametre arasında kalan kısımdır. Video kodundan sonraki parametreleri dikkate almayın. Örneğin Video Adresi https://www.youtube.com/watch?v=CCV2kSn_cFU&t=1m30s şeklinde ise sadece CCV2kSn_cFU kısmını kopyalayın.
- MP4: Sunucunuzda barındıracağınız bir MP4 formatındaki videoyu arkaplan videosu olarak eklemek istiyorsanız seçin. Video Linki alanında Değiştir düğmesine tıklayarak ortam yöneticisini açın ve mevcut videolarınızdan birini seçin veya yeni bir video dosyası yükleyin ve seçin.
  
  Video Poster alanında Değiştir düğmesine tıklayarak ortam yöneticisini açın ve videonuz yüklenene kadar arkaplanda gösterilecek olan video poster görselini seçin veya yükleyin. Zorunlu değildir. Boş bırakabilirsiniz.
Arkaplan Kaplama
Sütun için arkaplan olarak resim veya video eklediğinizde sütun içerisindeki metinler ve diğer içerikler arkaplan nesnesinin renkleriyle içerik renklerinin benzer olması durumunda okunamaz hale gelebilir, bu durumda satır/sütun içeriğinin daha görünür olması amacıyla arkaplan resminin/videosunun üzerine bir kaplama (overlay) ekleyebilirsiniz. Kaplama tipi olarak Renk veya Gradient seçebilirsiniz. Kaplama eklemek istemiyorsanız Yok seçeneğini seçin.
- Yok: Sütun için herhangi bir arkaplan kaplama stili uygulamak istemiyorsanız seçin.
- Renk: Sütun için düz renk bir arkaplan kaplama uygulamak istiyorsanız seçin. Arkaplan Kaplama Rengini mutlaka rgba formatında ve opaklık değerini 1'den düşük olacak şekilde ayarlayın. RGBA opaklığını 1 ve/veya üstü bir değer ayarlarsanız Örn: rgba(0,0,0,1) arkaplan resmi/videosu görünmeyecektir.
- Gradient: Sütun için çift renkli gradient bir arkaplan kaplama uygulamak istiyorsanız seçin. Arkaplan Kaplama Gradient Renklerini mutlaka rgba formatında ve opaklık değerleri 1'den düşük olacak şekilde ayarlayın. RGBA opaklığını 1 ve/veya üstü bir değer ayarlarsanız Örn: rgba(0,0,0,1) arkaplan resmi/videosu görünmeyecektir.
Sütun Üstbilgisini Göster
Site önyüzünüzde sütun içeriğinden önce gösterilecek bir Başlık ve Açıklama eklemek istiyorsanız Evet seçeneği seçin. Evet seçerseniz Sütun Başlığı ve Sütun Açıklamasını girebileceğiniz alanlar aktif olacaktır
- Sütun Başlığı: Sitenizdeki her aktif dil için gösterilmesini istediğiniz sütun başlığını girin.
- Sütun Açıklaması: Sitenizdeki her aktif dil için gösterilmesini istediğiniz sütun açıklamasını girin.

FonPagebuilder ile oluşturduğunuz her bit sütun için responsive özelliklerini (uyumlu tasarım) 3 başlık altında buradan ayarlayabilirsiniz.

Sütun Genişliği
Her bir cihaz ekran çözünürlüğü için sütun genişliklerini gösteren seçim kutusu bulunur. Sütun yapısını ve mevcut sütunun belirtilen ekran çözünürlüğünde ne kadar yer kaplayacağını belirtir.Aşağıdaki Video'da 2. Bölüm: Sütun Genişliklerini Sütun Düzenleme Araçlarından Ayarla
- Extra Büyük Cihazlar: ekran genişliği 1200px ve üstü cihazlardaki sütun genişliğini seçin.
- Büyük Cihazlar: ekran genişliği 992px ile 1199px arası cihazlardaki sütun genişliğini seçin.
- Orta Cihazlar: ekran genişliği 768px ile 991px arası cihazlardaki sütun genişliğini seçin.
- Küçük Cihazlar: ekran genişliği 576px ile 767px arası cihazlardaki sütun genişliğini seçin.
- Ekstra Küçük Cihazlar: ekran genişliği 575px ve altı cihazlardaki sütun genişliğini seçin.
SÜTUN YAPISI HAKKINDA ÖNEMLİ HATIRLATMA!.

FonPagebuilder Sütun Yapısının Bootstrap Grid sistemini baz aldığını bilmenizde fayda var. Bu, FonPageBuilder satır tuvalinin tıpkı Bootstrap'te olduğu gibi toplamda 12 dikey parçaya (sütun) bölündüğü anlamına gelir. Bu nedenle bir satır için kullanılabilir toplam yatay alan 12'dir ve tek bir satırdaki tüm sütunlar bu sayı oranında yer kaplar. Bootstrap varsayılan Sütun genişliklerinden farklı olarak bir de 1/5 sütun genişliği vardır. Bu şu anlama gelmektedir: bir satıra 1/5 Sütun genişliğine sahip 5 adet sütun eklerseniz satırda her biri %20 genişliğe sahip 5 adet sütun olacak demektir. Bootstrap'te 5 sütunlu satır oluşturmaya yarayan sütun css sınıfı varsayılan olarak mevcut değildir.

SÜTUN GENİŞLİKLERİNİ İSTERSENİZ SÜRÜKLEYİP BIRAKARAK DA AYARLAYABİLİRSİNİZ!.

Her bir ekran çözünürlüğü için sütun genişliklerini sürükleyip bırakarak ayarlamak istiyorsanız FonPageBuilder Sayfa düzenleme ekranının sağ üst köşesindeki Ekran seçim araç çubuğundan her bir ekran için, sütun genişliklerini sürükleyip bırakarak ayarlayabilirsiniz.Aşağıdaki Video'da 1. Bölüm: Sürükle Bırak ile Sütun Genişliklerini Ayarla
Sütun Görünürlüğü
Her bir cihaz ekran çözünürlüğü için sütun görünürlüklerini gösteren seçim kutusu bulunur. Sütunun belirtilen ekran çözünürlüğünde gösterilip gösterilmeyeceğini belirtir.
- Extra Büyük Cihazlar: ekran genişliği 1200px ve üstü cihazlarda sütunu göster/gizle.
- Büyük Cihazlar: ekran genişliği 992px ile 1199px arası cihazlarda sütunu göster/gizle.
- Orta Cihazlar: ekran genişliği 768px ile 991px arası cihazlarda sütunu göster/gizle.
- Küçük Cihazlar: ekran genişliği 576px ile 767px arası cihazlarda sütunu göster/gizle.
- Ekstra Küçük Cihazlar: ekran genişliği 575px ve altı cihazlarda sütunu göster/gizle.
Sütun Sıralaması
Her bir cihaz ekran çözünürlüğü için sütun sıralamasını gösteren seçim kutusu bulunur. Sütunun belirtilen ekran çözünürlüğünde hangi sırada gösterileceğini belirtir. Sıralama 0'dan başlar ve 11'e kadar gider. Sıralama değeri aynı olan sütunlar aynı öncelikte/sıralamada gösterilir.
- Extra Büyük Cihazlar: ekran genişliği 1200px ve üstü cihazlarda sütun sıralaması.
- Büyük Cihazlar: ekran genişliği 992px ile 1199px arası cihazlarda sütun sıralaması.
- Orta Cihazlar: ekran genişliği 768px ile 991px arası cihazlarda sütun sıralaması.
- Küçük Cihazlar: ekran genişliği 576px ile 767px arası cihazlarda sütun sıralaması.
- Ekstra Küçük Cihazlar: ekran genişliği 575px ve altı cihazlarda sütun sıralaması.

FonPageBuilder WiseCP AOS.js animasyonlarını destekler. Böylece oluşturduğunuz sütunlara istediğiniz AOS.js animasyonunu ekleyebilirsiniz.

AOS.js animasyonları hakkında detaylı bilgi için https://github.com/michalsnik/aos sayfasını, mevcut animasyon demoları için https://michalsnik.github.io/aos/ sitesini ziyaret edebilirsiniz.

Animasyon Efekti
: Kullanmak istediğiniz animasyon efektini seçin. Animasyon kullanmak istemiyorsanız Yok seçeneğini seçin.
Animasyon Konumu
: Animasyon tetiklendiğinde ögenin penceresinin hangi konumunda olacağını seçin.
Animasyon Geçiş Fonksiyonu
: Animasyonun geçiş hızı fonksiyonunu seçin.
Animasyon Süresi
: Animasyonun süresini girin. 50ms artışlı olacak şekilde 0 ile 3000 arasında bir değer girin.
Animasyon Gecikmesi
: Animasyon gecikme süresini girin. 50ms artışlı olacak şekilde 0 ile 3000 arasında bir değer girin.
Animasyon Offset
: Orijinal animasyon tetikleyici noktasından olan mesafeyi (piksel) cinsinden girin.

Sütun Taşıma

Bir sütunu satır içerisinde veya sayfanızdaki diğer satırlar arasında taşımak ve/veya sıralamak için Sütun Düzenleme Ögelerindeki Sütunu Taşı ögesine basılı tutun ve satır/sayfa içerisinde sürükleyip bırakarak istediğiniz alana taşıyın.

Sütun Çoğaltma (Klonlama)

Mevcut sütunun tüm ayarları ve içeriğiyle birlikte bir kopyasını oluşturmak ve sonradan içeriğini değiştirmek isteyebilirsiniz. Bu durumda sütunu çoğaltmanız gerekmektedir. Sütunu çoğaltmak (klonlamak) için Sütun Düzenleme Ögelerindeki Sütunu Çoğalt ögesine tıklayın. Seçili (aktif) sütunun bir kopyası aktif sütuna eklenecektir.

Sütun Silme

Mevcut sütunu içeriğiyle birlikte silmek için Sütun Düzenleme Ögelerindeki Sütunu Sil ögesine tıklayın. Seçili (aktif) sütun silinecektir.