Bilgi Bankası

Görsel içerik oluşturucular (page builder) sayesinde kullanıcılar yazılım bilgisi gerekmeden web sayfaları tasarlayabilir. İki popüler örnek: GrapesJS ve SiteOrigin Page Builder.

1. GrapesJS Nedir?

• Açık kaynaklı, tarayıcı tabanlı bir HTML/CSS/JS editörüdür.

• Kullanıcılar sürükle-bırak yöntemiyle görsel olarak sayfa tasarlar.

• Özellikle admin panel, e-mail template veya özel builder projelerinde tercih edilir.

Özellikleri:

• Tamamen JavaScript tabanlıdır (kütüphane olarak entegre edilir).

• Responsive tasarım desteği vardır.

• Sürükle-bırak bileşen sistemi (text, image, button, grid vs.)

• Kod görünümü ve düzenleme imkânı (HTML/CSS canlı düzenleme)

• Extensible: Plugin geliştirilebilir.

Kullanım Örneği:

<script src="https://unpkg.com/grapesjs"></script>
<div id="gjs"></div>
<script>
  const editor = grapesjs.init({
    container: '#gjs',
    fromElement: true,
    width: 'auto',
    height: '100%'
  });
</script>

Demo: https://grapesjs.com/demo

2. SiteOrigin Page Builder Nedir?

• WordPress üzerinde çalışan bir görsel sayfa oluşturucu eklentisidir.

• CMS ortamlarında, özellikle blog ve kurumsal site yapılarında tercih edilir.

Özellikleri:

• WordPress admin paneline entegre çalışır.

• Widget bazlı bileşen sistemi ile sayfa inşası sağlar.

• Sürükle-bırak desteklidir.

• Satır ve kolon bazlı grid yapısı sunar.

• Ücretsizdir, ama bazı ekstra widget paketleri ücretlidir.

Web sitesi: https://siteorigin.com/page-builder

Karşılaştırma Tablosu:

Sonuç:

• GrapesJS, yazılımcıların özel web editörleri oluşturmak için kullandığı güçlü bir JavaScript tabanlı çözümdür.

• SiteOrigin Page Builder, WordPress kullanıcıları için sade ve hızlı bir çözüm sunar.

Hedefiniz WordPress dışı özel frontend projeleri ise GrapesJS daha uygundur. WordPress içerik üretimi için ise SiteOrigin Page Builder daha pratik bir seçenektir.