FonPageBuilder HTML & Metin Bloğu Bileşeni Son Güncelleme: 04-07-2026

HTML & Metin Bloğu Bileşeni Nedir?

FonPageBuilder HTML & Metin Bloğu bileşenini kullanarak web sayfanıza metin editörü ile biçimlendirebileceğiniz geniş metin içerikleri ekleyebilirsiniz. Web sayfası oluşturmada en temel ama gerekli araçlardan biridir.

HTML & Metin Bloğu 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. Bu bileşen özelinde buraya gireceğiniz başlığı site önyüzünde metin içeriğinizin başlığı olarak gösterebilirsiniz ve istediğiniz şekilde biçimlendirebilirsiniz.

  Bileşen Adını Göster eçeneğini etkinleştirdiğinizde, 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.
• Bileşen Adını Göster
  : Bileşen Adı alanında girdiğiniz metni HTML & Metin İçeriğiniz için başlık amacıyla kullanmak istiyorsanız Evet Seçeneğini seçin.
• Bileşen Adı Stil Ayarları
  : Bileşen Adını göstermeyi seçtiğinizde başlık stilini biçimlendirebileceğiniz alanları gösterir. Bu alanlar zorunlu değildir, boş bırakılabilir.

  • Başlık Tipi: Açılır listeden başlığın hangi html öğesi ile (H1,H2,H3,H4,H5,H6) gösterileceğini seçin.
  • Başlık Rengi: Başlığı daha dikkat çekici bir renkte göstermek istiyorsanız başlık rengini seçin. Bu alan Uyarı Kutusu Stili olarak Light (Açık/Aydınlık) Stil seçildiğinde gösterilir.
  • Başlık Font Özellikleri: Metin İçeriği başlığına ait font özelliklerini buradan ayarlayabilirsiniz. Boş bırakırsanız "Başlık Tipi" alanında seçtiğiniz html ögesinin stili uygulanır.
    • Yazı Boyutu: Başlık yazı boyutunu seçin - font-size
    • Satır Yüksekliği: Başlık satır yüksekliğini seçin - line-height
    • Harf Mesafesi: Başlık harfleri arasındaki mesafeyi seçin - letter-spacing
    • Yazı Stili:
      • : Altı Çizili - text-decoration: underline
      • : Eğik (Italic) - font-style: italic
      • : Büyük Harf - text-transform: uppercase
    • Yazı Hizalama (Başlık):
      • : 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
  • Başlık Margin (Dış Boşluk): Başlık ile içerik arasındaki mesafeyi ayarlayın.
    • Üst: Başlık üst margin (kenar boşluğu) değerini girin.
    • Alt: Başlık alt margin (kenar boşluğu) değerini girin.
• İçerik
  : Sitenizdeki her bir dil için sayfanıza eklemek istediğiniz html & metin içeriğini girin. Editör aracılığıyla içeriğinize görseller, tablolar vb. ekleyebilir ve içeriğinizi biçilendirebilirsiniz.

  Bileşen Adını Göster eçeneğini etkinleştirdiğinizde, 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.

Bileşen Seçenekleri

• Sütun Sayısı
  : Metin içeriğinin kaç sütunda gösterileceğiniz seçiniz. Responsive olarak her bir ekran çözünürlüğü için farklı bir sütun sayısı seçebilirsiniz. İçeriğini burada seçtiğiniz sütunlara bölünerek gösterilir.
• Sütun Boşluğu
  : Metin içeriğini sütunlu göstermek istediğinizde her bir sütun arasındaki mesafeyi girebilirsiniz.

İçerik Kısalma Ayarları

• İçerik Kısaltması
  : Kullanıcıların metnin tamamını görmek için genişletebileceği kısaltılmış bir metin içeriği göstermek istiyorsanız bu seçeneği Evet olarak işaretleyin.
• Gösterilecek Maksimum Kelime Sayısı
  : Kısaltılmış gösterimde metin içeriğinin kaç kelimesinin gösterilmesini istediğinizi belirtin. Not: Harf değil kelime sayısıdır
• Eylem Metni
  : Sitenizdeki aktif her bir dil için kısaltılmış metnin tamamını gösterilmesini sağlayacak tıklanabilir öge için açıklayıcı bir metin girin. Örneğin: Daha Fazla Göster
• Eylem Metni Metin Rengi
  : Eylem metni ögesi için renk seçin
• Eylem Metni Font Özellikleri
  : Eylem Metni ögesi için font özelliklerini buradan ayarlayabilirsiniz. Boş bırakırsanız standart html ögesi stilleri uygulanır.

  • Yazı Boyutu: Başlık yazı boyutunu seçin - font-size
  • Satır Yüksekliği: Başlık satır yüksekliğini seçin - line-height
  • Harf Mesafesi: Başlık harfleri arasındaki mesafeyi seçin - letter-spacing
  • Yazı Stili:
    • : Altı Çizili - text-decoration: underline
    • : Eğik (Italic) - font-style: italic
    • : Büyük Harf - text-transform: uppercase
  • Yazı Hizalama (Başlık):
    • : 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

İlk Harfi Öne Çıkar (Dropcap)

• İlk Harfi Öne Çıkart
  : Aktif edildiğinde, metin içeriğinin ilk harfi dergi/gazete stilinde öne çıkartılarak (daha büyük şekilde) gösterilir. Aktifleştirmek için bu seçeneği Evet olarak işaretleyin.
• İlk Harf Rengi
  : Metin içeriğinin ilk harfini farklı renkte göstermek istiyorsanız buradan renk seçebilirsiniz.
• İlk Harf Boyutu (max 200px)
  : Sitenizdeki aktif her bir dil için metin içeriğinin ilk harfinin yazı boyutunu piksel cinsinden fakat px ibaresi olmadan girin. Maksimum girilebilecek değer: 200

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. HTML & Metin Bloğu 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.