FonPageBuilder Satır Yönetimi Son Güncelleme: 04-07-2026

Satır Nedir?

Satırlar, site önyüzünde yatay yönde bir blok yapısı oluşturur ve bu yapıya stil uygulayabilir, Sütunlar, Metin Blokları, Resimler gibi yeni bileşenler ekleyebilirsiniz. Satır Yapısı Bootstrap Framework'ünü baz alır. Her bir satır farazi olarak 12 sütuna bölünmüştür ve bir satırı çeşitli sütun genişliği kombinasyonları kullanarak toplamda 12 sütun olacak şekilde sütunlara bölebilirsiniz. Örneğin 3+9, 6+6, 5+7 ve benzeri. Satır ve sütun yapısı hakkında daha detaylı bilgi için Bootstrap Grid Dokümantasyonunu inceleyebilirsiniz.

Satır Düzenleme Ögeleri

Satır düzenleme ögeleri, satırlarınızı özelleştirmenize ve stil vermenize olanak tanır. Yukarıdaki resimde gösterildiği gibi, her satırın sol üst köşesinde satır adının yanında yer alırlar ve buradan satır düzenleme ögelerine erişebilirsiniz:

1. Satırı Taşı: Bu ögeye basılı tutarken sürükleyip bırakarak satırınızı taşıyabilirsiniz.
2. Satır İşlemleri: - Satırla ilgili işlemleri gerçekleştirebileceğiniz menüyü açar
3. Sütun Ekle: Sütun Ekleme Penceresini açar.
4. Satırı Düzenle: Satır Ayarları penceresini açar.
5. Satırı Gizle: Satırı silmeden site önyüzünde gizlenmesini sağlar. YENİ ÖZELLİK
6. Satırı Sil: Seçili satırı siler.
7. Satırı Çoğalt: Seçili satırın ayarları ve içeriğiyle birlikte bir kopyasını (klon) oluşturur.
8. Satırlarıma Ekle: Daha sonradan başka sayfalarda da kullanılmak üzere seçili satırı veritabanına kaydeder, böylece aynı içeriği her sayfada tekrar tekrar oluşturmak zorunda kalmazsınız.
9. Sütunlar: Bileşen veya modülleri ekleyeceğiniz alanlar.

Satır Oluşturma

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

Satır Ekleme Penceresi Satır Ayarları

1. 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.
2. 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: 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.

İç Satır Oluşturma

Mevcut satırda eğer tasarımınız gereği iç satır eklemek istiyorsanız sütun düzenleme ögelerinden Yeni Satır ögesine tıklayarak iç satır ekleyebilirsiniz.

Satır Düzenleme

Oluşturduğunuz bir satırı ve özelliklerini düzenlemek, stil uygulamak, başlık eklemek vb. işlemler için Satır Düzenleme Ögelerindeki Satır İşlemleri altından Satırı Düzenle ögesine tıklayın. Satır Stili penceresi açılacaktır. Burada satırla 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.

Satır Stili Düzenleme Penceresi

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

• Stil
• Bölüm
• Animasyon

• CSS Sınıf Soneki
  : Satır için özel CSS sınıfı tanımlayabilir ve CSS dosyanızda bu sınıfı istediğiniz şekilde biçimlendirebilirsiniz.
• Esnek Satır
  : Evet seçerseniz satır genişliği pencere genişliği ile aynı olacaktır. Satır taşıyıcısı container sınıfı yerine container-fluid sınıfına sahip olacaktır. Esnek Taşıyıcı için Bootstrap Containers dokümantasyonuna gözatabilirsiniz.
• Sütunlar Arası Oluğu Kaldır
  : Bir satırdaki sütunlar arasındaki boşluğu kaldırmak için etkinleştirin.
• Sütun Dikey Hizalama
  : Bir satırın içeriğini dikey olarak hizalamak için dikey hizalamayı kullanın. Hizalamayı üst, alt veya orta olarak ayarlayabilirsiniz.
• Margin (Dış Boşluk)
  : Tutarlı aralıklarla duyarlı içerik oluşturmak için kenar boşluğunu (margin) kullanın. Satır/Bölüm 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. Satır/Bölüm 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
  : Satır 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
  : Satır 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
  : Satır 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
  : Satır 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: Satır için herhangi bir arkaplan stili uygulamak istemiyorsanız seçin.
  • Renk: Satır için düz renk bir arkaplan uygulamak istiyorsanız seçin.
  • Gradient: Satır için çift renkli gradient bir arkaplan uygulamak istiyorsanız seçin.
  • Resim: Satır için arkaplan resmi uygulamak istiyorsanız seçin.
  • Video: Satır 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
  Satır 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
  Satır için arkaplan olarak resim veya video eklediğinizde satır/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: Satır için herhangi bir arkaplan kaplama stili uygulamak istemiyorsanız seçin.
  • Renk: Satır 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: Satır 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.

FonPagebuilder ile oluşturduğunuz satırın Bölüm olarak davranmasını isteyebilirsiniz. Böylece bölüm için başlık ve açıklama ekleyebilirsiniz.

---

• Bölüm
  : Satırı bölüm <section> olarak kullanmak istiyorsanız Evet seçeneğini seçin. Bölüm olarak atanmış satırlara site önyüzünüzde satır başlangıcında gösterebileceğiniz Başlık ve Açıklama ekleyebilirsiniz.
• Bölüm ID
  : Sayfa içerisinde oluşturduğunuz bölümlere dahili link vermek istiyorsanız veya javascript kodlarınızla id üzerinden işlem yapmak istiyorsanız bu alanı # işaretini kullanmadan doldurabilirsiniz. Örneğin hosting-packages-section şeklinde bir id tanımladığınızda daha sonra bu sayfadaki her hangi bir Bileşen içerisinden bu satıra link vermek isterseniz, link kısmına #hosting-packages-section şeklinde girebilirsiniz. Link verdiğiniz ögeye tıklandığında sayfa yumuşak bir şekilde bu bölüme kaydırılacaktır.
• Bölüm CSS Sınıfı
  : Bölümü tema css dosyalarınızda özel olarak biçimlendirmek istiyorsanız özel bir css seçici sınıfı tanımlayabilirsiniz.
• Bölüm Üstbilgisini Göster

  Site önyüzünüzde satır 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 Bölüm Başlığı ve Bölüm Açıklamasını girebileceğiniz alanlar aktif olacaktır

  • Bölüm Başlığı: Sitenizdeki her aktif dil için gösterilmesini istediğiniz bölüm başlığını girin.
    Bu alanda istediğiniz herhangi bir ürün grubundaki belirli bir ürünün fiyatını göstermek için {{domain:com:register}} veya {{hosting:15}} vb. şeklinde kısakodlar kullanabilirsiniz. Kısakodlar hakkında detaylı bilgi için lütfen Kısa Kodlar Dokumantasyonuna gözatın.
  • Bölüm Açıklaması: Sitenizdeki her aktif dil için gösterilmesini istediğiniz bölüm açıklamasını girin.
    Bu alanda istediğiniz herhangi bir ürün grubundaki belirli bir ürünün fiyatını göstermek için {{domain:com:register}} veya {{hosting:15}} vb. şeklinde kısakodlar kullanabilirsiniz. Kısakodlar hakkında detaylı bilgi için lütfen Kısa Kodlar Dokumantasyonuna gözatın.

  

FonPageBuilder WiseCP AOS.js animasyonlarını destekler. Böylece oluşturduğunuz satırlara ve 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.

Satır Çoğaltma (Klonlama)

Mevcut satırın tüm içeriğiyle birlikte bir kopyasını oluşturmak ve sonradan içeriğini değiştirmek isteyebilirsiniz. Bu durumda satırı çoğaltmanız gerekmektedir. Satırı çoğaltmak (klonlamak) için Satır Düzenleme Ögelerindeki Satır İşlemleri altından Satırı Çoğalt ögesine tıklayın. Seçili (aktif) satırın bir kopyası sayfanın sonuna eklenecektir.

Satır Taşıma

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

Satır Silme

Mevcut satırı içeriğiyle birlikte silmek için Satır Düzenleme Ögelerindeki Satır İşlemleri altından Satırı Sil ögesine tıklayın. Seçili (aktif) satır silinecektir.

Satır Kaydetme / Geri Yükleme

Oluşturduğunuz bir satırı ve içeriğini (ayarlar, stiller, bileşenler/modüller vb.) aynı sayfada veya daha sonra oluşturacağınız sayfalarda tekrar kullanmak isterseniz istediğiniz satırı veritabanına kaydedebilir ve daha sonradan istediğiniz sayfaya ekleyebilirsiniz.

1. Mevcut Satırı Kaydetmek:

   Kaydetmek istediğiniz satırın Satır Düzenleme Ögelerindeki Satır İşlemleri altından Satırlarıma Ekle ögesine tıklayın. Çıkan uyarı penceresinde satırınıza istediğiniz bir isim verin ve Tamam düğmesine tıklayın. Seçili (aktif) satır veritabanına kaydedilecektir.

2. Kayıtlı Satırlar:

   • Satırı Tekrar Kullanmak İçin: Daha önceden kaydettiğiniz bir satırı yeni oluşturduğunuz sayfaya eklemek için düzenleme ekranının sağında yer alan MENU çubuğundaki Satırlarımdan Seç menü ögesine tıklayın. Açılan Kayıtlı Satırlarım penceresinde önceden kaydettiğiniz satırlar listelenecektir. Eklemek istediğiniz satırın yanındaki düğmesine tıklayın. Seçili kayıtlı satır sayfanın sonuna eklenecektir.
   • Satırı Silmek İçin: Daha önceden kaydettiğiniz bir satırı silmek için düzenleme ekranının sağında yer alan MENU çubuğundaki Satırlarımdan Seç menü ögesine tıklayın. Açılan Kayıtlı Satırlarım penceresinde önceden kaydettiğiniz satırlar listelenecektir. Silmek istediğiniz satırın yanındaki düğmesine tıklayın. Seçili kayıtlı satır veritabanından silinecektir.