WPBakery Page Builder ile Sayfa Olusturma

WordPress ile hazir bir tema satin aldiginizda, kutudan cikan ilk sayfa olusturuculardan biriyle karsilasma ihtimaliniz oldukca yuksek: WPBakery Page Builder. ThemeForest gibi pazar yerlerinde on plana cikan binlerce ticari temanin icine gomulu geldigi icin, bir zamanlar "Visual Composer" adiyla bilinen bu eklenti, WordPress ekosisteminde en cok karsilasilan surukle-birak arayuzlerinden biri haline geldi. Bir demo kurdunuz, ana sayfayi actiniz ve karsiniza mavi-turuncu kalemli ikonlarla dolu bir editor cikti ise, buyuk olasilikla WPBakery kullaniyorsunuzdur.

Bu rehberde WPBakery'nin neden bu kadar yaygin oldugunu, backend ve frontend editorleri arasindaki farki, satir-sutun-element hiyerarsisini ve en onemlisi bu eklentinin temelinde yatan shortcode mantigini pratik orneklerle ele alacagiz. Ayni zamanda cogu kullanicinin gec fark ettigi iki onemli konuya dokunacagiz: shortcode kilitlenmesi (lock-in) ve performans maliyeti. Amac size WPBakery'yi verimli kullanmayi ogretmek kadar, ne zaman baska bir yola sapmaniz gerektigini de gostermek. Kidemli bir sunucu yoneticisinin musterisine anlattigi gibi, hem "nasil" hem de "dikkat et" tarafiyla ilerleyecegiz.

WPBakery Nedir ve Neden Bu Kadar Yaygin#

WPBakery Page Builder, 2011 yilinda "Visual Composer" adiyla piyasaya cikan ve WordPress icerigini kod yazmadan, gorsel bir arayuzden duzenlemeye olanak taniyan bir eklentidir. 2018'de marka, tekil eklentiyi WPBakery olarak yeniden adlandirip "Visual Composer" ismini ayri, bagimsiz bir urune tasidi. Bugun ikisi farkli urunlerdir; ancak yillar icinde satin alinan cogu tema hala eski nesil WPBakery'yi (VC shortcode altyapisini) barindirir. Bu yuzden "temamla gelen Visual Composer" dediginizde neredeyse her zaman kastedilen WPBakery'dir.

Yayginligin asil sebebi teknik ustunluk degil, dagitim modelidir. Tema yazarlari WPBakery'yi urunlerinin icine "paket lisans" (bundled license) ile gomer. Musteri temayi bir kez satin alir, WPBakery de ucretsizmis gibi kutudan cikar. Bu, ozellikle kendi web sitesini yapmak isteyen kucuk isletmeler icin cok cazip bir tekliftir: tek odemeyle hem sik bir tasarim hem de surukle-birak bir editor. Sonuc olarak milyonlarca site, ozellikle kurumsal tanitim ve portfolyo siteleri, bu altyapi uzerine kuruldu. Tema seciminin bu kadar belirleyici oldugunu daha ayrintili gormek isterseniz WordPress tema secimi rehberimize goz atabilirsiniz; cunku secilen tema, hangi sayfa olusturucuya mahkum olacaginizi da belirler.

Backend ve Frontend Editor Arasindaki Fark#

WPBakery iki farkli calisma moduyla gelir ve yeni kullanicilarin en cok kafasinin karistigi nokta burasidir. Yazi veya sayfa duzenleme ekraninin ustundeki iki buyuk butonu goreceksiniz: "Backend Editor" ve "Frontend Editor".

Backend Editor, WordPress yonetim panelinin icinde calisir. Icerigi gercek gorunumuyle degil, ust uste dizilmis gri kutucuklar (bloklar) halinde gorursunuz. Her kutu bir satiri veya elementi temsil eder; hangi bilesenin nerede oldugunu semantik olarak takip etmek icin idealdir. Ozellikle karmasik, cok satirli sayfalarda backend editor daha stabildir cunku sitenin on yuz CSS ve JavaScript yukunu ayni anda render etmez. Buyuk sayfalari duzenlerken tarayicinizi daha az zorlar.

Frontend Editor ise sayfayi ziyaretcinin gordugu haliyle acar ve degisiklikleri anlik olarak ekranda gosterir. "Gordugunuz sey aldiginiz seydir" (WYSIWYG) yaklasimidir. Gorsel olarak tatmin edicidir, ancak temanin tum stil dosyalarini, yazi tipilerini ve script'lerini ayni anda yuklemek zorunda oldugu icin agir sayfalarda gozle gorulur sekilde yavaslar. Pratik tavsiyem: yapisal kararlari (kac satir, hangi sutun duzeni) backend editorde alin, ince gorsel ayarlari (bosluk, renk, hizalama) frontend editorde yapin. Bu ikili yaklasim hem hizli hem de kontrollu bir is akisi saglar.

Satir, Sutun ve Element Yapisi#

WPBakery'nin tum mantigi uc katmanli bir hiyerarsiye dayanir: satir (row), sutun (column) ve element. Bu yapiyi anlamak, editoru gercekten kontrol altina almanin anahtaridir.

En ustte satir bulunur. Satir, sayfayi yataydan bolen tam genislikte bir konteynerdir. Her yeni bolum (hero alani, hizmetler bandi, referanslar bolumu) genellikle ayri bir satirdir. Satirlarin kendi arka plan rengi, arka plan gorseli, ic bosluk (padding) ve tam genislik/kutu genislik ayarlari vardir.

Satirin icine sutun yerlestirirsiniz. WPBakery, Bootstrap benzeri 12 kolonluk bir izgara sistemi kullanir. Yani bir satiri istediginiz oranlarda bolebilirsiniz: iki esit sutun icin 1/2 + 1/2, uc esit sutun icin 1/3 + 1/3 + 1/3, asimetrik bir yerlesim icin 2/3 + 1/3 gibi. Sutun sinirlarini surukleyerek genislikleri gorsel olarak da ayarlayabilirsiniz.

En icte ise elementler yer alir: metin blogu, baslik, buton, gorsel, ikon kutusu, sekmeler, akordeon, video, iletisim formu ve daha yuzlercesi. Bir elementi bir sutunun icine surukler, ayarlar penceresinden iceriginizi girer ve stilini belirlersiniz. Basit bir "sol tarafta metin, sag tarafta gorsel" bolumunun kaba yapisi soyledir:

Satir (row)
├── Sutun 1/2
│   ├── Baslik elementi
│   └── Metin Blogu elementi
└── Sutun 1/2
    └── Tek Gorsel elementi

Bu hiyerarsiyi zihninizde net tutarsaniz, "buton neden yanlis yerde" veya "bu bosluk nereden geliyor" gibi sorularin cevabini hizla bulursunuz. Cogu hizalama sorunu, elementin yanlis sutuna ya da sutunun yanlis satira yerlestirilmesinden kaynaklanir. Mobil uyum icin de her sutunun "Responsive Options" sekmesinden ekran boyutuna gore gizleme/gosterme ve bosluk ayarlarini yapabilecegini unutmayin.

Shortcode Tabanli Calisma Mantigi#

WPBakery'yi digerlerinden ayiran ve ilerideki bolumlerde ele alacagimiz sorunlarin da kaynagi olan temel ozellik sudur: WPBakery, olusturdugunuz her sayi, sutun ve elementi shortcode olarak veritabanina kaydeder. Editorde gordugunuz sik arayuz aslinda bir cephe; arkada yaziya donusen sey koseli parantezlerle dolu bir metindir.

Editorde olusturdugunuz sol-metin sag-gorsel bolumu, veritabanindaki post_content alaninda kabaca soyle saklanir:

[vc_row][vc_column width="1/2"]
[vc_custom_heading text="Hizmetlerimiz"]
[vc_column_text]Isletmenize ozel cozumler sunuyoruz.[/vc_column_text]
[/vc_column][vc_column width="1/2"]
[vc_single_image image="482" img_size="large"]
[/vc_column][/vc_row]

WordPress bu sayfayi ziyaretciye sunarken, tema icindeki WPBakery kodu bu shortcode'lari ayristirir (parse eder) ve gercek HTML'e cevirir. Yani [vc_row] bir <div class="vc_row"> bloguna, [vc_single_image] bir <figure><img></figure> yapisina donusur. Bu ceviri her sayfa yuklemesinde calisir. Sistemin en kritik ozelligi budur: HTML ciktisi veritabaninda hazir durmaz; her istekte shortcode'lardan yeniden uretilir.

Bu yaklasimin bir avantaji vardir: icerik "temiz" bir soyutlama katmaninda tutulur ve gorsel editorden kolayca yeniden duzenlenir. Ancak asil onemli sonuc, bu shortcode'larin isleme mantiginin eklentinin kendisine ait olmasidir. Yani [vc_row] etiketinin ne anlama geldigini yalnizca WPBakery bilir. Bu detayi aklinizda tutun, cunku bir sonraki bolumun tamami bu tek cumlenin uzerine kurulu.

Shortcode Kilitlenmesi (Lock-in) Sorunu#

Shortcode tabanli mimarinin en can alici zayifligi, "vendor lock-in" yani saticiya baglilik olarak adlandirilan durumdur. WPBakery'yi devre disi biraktiginiz an, [vc_row], [vc_column], [vc_column_text] gibi tum shortcode'lari cevirecek kod ortadan kalkar. WordPress bu etiketleri tanimaz ve ziyaretci sayfada duz metin olarak koseli parantezli kod gorur.

Bunu somut olarak gormek icin, WP-CLI ile bir yazinin ham iceriginin nasil gorundugune bakabilirsiniz:

# ID'si 128 olan sayfanin ham icerigini goruntule
wp post get 128 --field=post_content

# Cikti bu tarz shortcode yiginlariyla dolu olacaktir:
# [vc_row][vc_column][vc_column_text]...[/vc_column_text][/vc_column][/vc_row]

Eklentiyi kaldirdiginizda kullanicinin gordugu manzara ise su hale gelir:

[vc_row][vc_column][vc_column_text]Isletmenize ozel cozumler sunuyoruz.[/vc_column_text][/vc_column][/vc_row]

Yani icerik kaybolmaz, ama bicimi ve duzeni tamamen dagilir; sayfa okunamaz bir shortcode dokumune doner. Bu, tema degistirmek isteyen kullanicilarin en cok sikayet ettigi durumdur. Bir WPBakery temasindan blok editore (Gutenberg) veya baska bir olusturucuya gecmek istediginizde, tum sayfalari elle yeniden kurmaniz gerekebilir. Baska bir olusturucudan farkli olarak, tasarimlar temiz HTML olarak degil, eklentiye ozgu bir dilde saklandigi icin otomatik gecis neredeyse imkansizdir.

Migrasyon planliyorsaniz birkac pratik onlem var. Once bir staging (deneme) ortaminda calisin; canli siteye hic dokunmadan gecisi test edin. Buyuk hacimli sayfalarda, artik shortcode kalintilarini toplu temizlemek icin veritabani sorgulari yardimci olabilir:

-- Kaldirilan bir olusturucudan arta kalan bos shortcode'lari tespit etmek icin
SELECT ID, post_title
FROM wp_posts
WHERE post_content LIKE '%[vc_row%'
  AND post_status = 'publish';

Bu tur bir gecis, veri kaybi riski tasidigi icin mutlaka once tam yedek alarak yapilmalidir. Guvenli bir yedekleme stratejisi kurmak icin yedekleme cozumlerimizi inceleyebilir, sitenizi baska bir yapiya tasirken risk almamak icin de site tasima hizmetimizden yararlanabilirsiniz. Kilitlenme, WPBakery'yi kullanmamaniz gerektigi anlamina gelmez; sadece bir gun tema veya olusturucu degistirebileceginizi bilerek, sayfa sayisini gereksiz yere sisirmeden ilerlemeniz gerektigini soyler.

Performans Dezavantajlari ve Optimizasyon#

Her sayfa yuklemesinde onlarca, bazen yuzlerce shortcode'un HTML'e cevrilmesi, sunucu tarafinda islemci maliyeti yaratir. Ustelik WPBakery, kendi calismasi icin gereken CSS ve JavaScript dosyalarini cogu zaman her sayfada, ihtiyac olsun olmasin yukler. Bir izgara elementi kullanmasaniz bile ilgili script yuklenebilir. Bunun sonucu, sisen HTML ciktisi, fazladan HTTP istekleri ve dusen Core Web Vitals skorlaridir. Ozellikle mobil cihazlarda "Largest Contentful Paint" ve "Total Blocking Time" degerleri gozle gorulur sekilde bozulabilir.

Iyi haber, bu maliyetin buyuk olcude onbellekleme (caching) ile telafi edilebilir olmasidir. Shortcode ayristirma islemi asil yuku sunucuya bindirdigi icin, sayfanin uretilmis HTML'ini bir kez olusturup tekrar tekrar sunmak dramatik fark yaratir. Sunucu tarafinda bir sayfa onbellegi katmani kullanmak neredeyse zorunludur. Nginx ile basit bir microcache yaklasimi soyle gorunur:

# Dinamik WordPress sayfalarini kisa sureli onbelleklemek icin
fastcgi_cache_path /var/cache/nginx levels=1:2
    keys_zone=WPCACHE:100m inactive=60m;

server {
    location ~ \.php$ {
        fastcgi_cache WPCACHE;
        fastcgi_cache_valid 200 10m;   # basarili yanitlari 10 dakika tut
        fastcgi_cache_bypass $skip_cache;
        fastcgi_no_cache $skip_cache;
        add_header X-Cache $upstream_cache_status;
    }
}

PHP tarafinda ise OPcache'i acik ve yeterli bellekle yapilandirmak, shortcode ayristirmasinin tekrar tekrar derlenmesini engeller:

; php.ini icinde onerilen minimum degerler
opcache.enable=1
opcache.memory_consumption=192
opcache.max_accelerated_files=20000
opcache.revalidate_freq=60

Bunlarin yaninda birkac pratik onlem daha: kullanmadiginiz WPBakery elementlerini devre disi birakin, gorselleri WebP formatinda ve dogru boyutta yukleyin, satir sayisini makul tutun ve tek bir sayfaya asiri element yigmayin. Onbellek ve varlik optimizasyonu isini kolaylastiran eklentileri secerken WordPress eklenti onerileri rehberimizdeki kriterleri gozetmenizi tavsiye ederim; yanlis secilen bir onbellek eklentisi WPBakery ile catisip sayfayi tumden bozabilir. Altyapi tarafinda ise, shortcode agir sitelerin en cok fayda gordugu sey guclu bir PHP islemcisi ve hizli disktir; bu nedenle SSD tabanli, PHP 8 destekli bir WordPress hosting paketi, ayni siteyi zayif bir paylasimli sunucuya gore kat kat hizli calistirir.

WPBakery Alternatifleri#

WPBakery kotu bir arac degildir, ama 2025 sonrasinin WordPress dunyasinda tek secenek olmaktan cikmistir. Yeni bir proje kuruyorsaniz veya mevcut yapinizi yenilemeyi dusunuyorsaniz, secenekleri bilmek yerinde olur.

En dogal alternatif, WordPress'in yerlesik blok editoru Gutenberg'dir. Gutenberg, iceriginizi shortcode olarak degil, HTML yorumlari (<!-- wp:paragraph -->) icine gomulu temiz HTML olarak saklar. Bu, olusturucu bagimliligini buyuk olcude ortadan kaldirir: bir blok eklentisini kaldirsaniz bile temel HTML cogunlukla okunabilir kalir. Ucretsizdir, cekirdekle birlikte gelistirilir ve performans acisindan genellikle daha hafiftir.

Ucuncu taraf olusturucular arasinda Elementor ve Bricks Builder one cikar. Elementor son derece yaygin ve zengin bir ekosisteme sahiptir; Bricks ise performans odakli, daha temiz kod ureten yeni nesil bir secenektir. Asagidaki tablo, secim yaparken en cok bakilan kriterleri ozetliyor.

Karar verirken sunu sorun: Mevcut sitem WPBakery uzerine kurulu ve iyi calisiyorsa, onu zorla degistirmek yerine onbellek ve optimizasyonla iyilestirmek en dusuk riskli yoldur. Ama sifirdan bir proje basliyorsaniz, gelecekteki tasima acisini dusunerek Gutenberg veya Bricks gibi daha temiz cikti ureten bir yol genellikle daha saglikli bir yatirimdir. Hangi yolu secerseniz secin, guncelleme ve bakim yukunu profesyonellere birakmak isterseniz WordPress bakim hizmetimiz devreye girebilir.

Sıkça Sorulan Sorular#

WPBakery ile Visual Composer ayni sey mi?#

Ayni kokten gelseler de bugun farkli iki urundurler. 2018'de eski "Visual Composer" eklentisi WPBakery Page Builder olarak yeniden adlandirildi ve "Visual Composer" ismi ayri, bagimsiz bir olusturucuya verildi. Temanizla birlikte gelen ve shortcode altyapisi kullanan surum neredeyse her zaman WPBakery'dir; piyasada hala eski aliskanlikla "Visual Composer" diye anilir.

WPBakery'yi kaldirirsam iceriklerim silinir mi?#

Icerik silinmez, ancak duzeni bozulur. Metinleriniz ve gorsel referanslariniz veritabaninda durur; fakat WPBakery kaldirilinca [vc_row] gibi shortcode'lari HTML'e cevirecek kod ortadan kalkar ve ziyaretci sayfada koseli parantezli ham kod gorur. Bu yuzden eklentiyi kaldirmadan once mutlaka tam yedek almali ve tercihen bir deneme ortaminda test etmelisiniz.

WPBakery sitemi yavaslatir mi?#

Optimize edilmezse yavaslatabilir. Her sayfa yuklemesinde shortcode'larin HTML'e cevrilmesi islemci yuku yaratir ve eklenti gereksiz CSS/JS dosyalarini da yukleyebilir. Ancak sunucu tarafinda sayfa onbellekleme, OPcache ve dogru gorsel optimizasyonu ile bu maliyetin buyuk kismi telafi edilir; guclu bir hosting altyapisi da farki belirgin sekilde kapatir.

WPBakery yeni baslayanlar icin uygun mu?#

Genel olarak evet, cunku ogrenme egrisi digerlerine gore daha yumusaktir. Satir-sutun-element mantigi sezgiseldir ve cogu tema hazir sablonlarla gelir, boylece bos sayfadan baslamak zorunda kalmazsiniz. Yine de uzun vadede tasima zorlugu ve performans konularini bastan bilmek, ilerde surpriz yasamamaniz acisindan onemlidir.

WPBakery'den Gutenberg'e nasil gecerim?#

Otomatik ve sorunsuz bir gecis yolu maalesef yoktur, cunku iki sistem icerigi tamamen farkli bicimde saklar. En saglikli yontem, once bir deneme ortami kurmak, sayfalari Gutenberg bloklariyla elle yeniden olusturmak ve arta kalan shortcode kalintilarini temizlemektir. Sayfa sayisi fazlaysa bu ise profesyonel bir tasima destegi almak, hem zaman kazandirir hem de veri kaybi riskini azaltir.

Kapanış#

WPBakery Page Builder, hazir temalarla gelen yayginligi sayesinde WordPress dunyasinda vazgecilmez bir konum edinmis, satir-sutun-element mantigiyla kod yazmadan sayfa kurmayi mumkun kilan pratik bir aractir. Backend ve frontend editorleri dogru yerlerde kullandiginizda hizli ve kontrollu bir is akisi elde edersiniz. Ancak temelindeki shortcode mimarisinin iki yuzu oldugunu unutmayin: bir yandan gorsel duzenlemeyi kolaylastirir, diger yandan da sizi eklentiye baglar ve optimize edilmezse performansi zorlar. Bu dengeyi bilerek ilerlemek, hem bugun iyi calisan hem de gelecekte tasinabilir bir site kurmanin anahtaridir.

Sitenizin altinda saglam bir altyapi olsun istiyorsaniz Clou.TR olarak yaninizdayiz. SSD tabanli, PHP 8 optimizasyonlu WordPress hosting ve genel hosting paketlerimiz shortcode agir sayfalari bile hizli tutar; daha fazla kaynak isteyen projeler icin sanal ve VDS sunucularimizi inceleyebilir, guvenlik icin ucretsiz SSL ve WAF cozumlerimizden yararlanabilirsiniz. Mevcut WPBakery sitenizi bize tasimak isterseniz site tasima ekibimiz tum sureci ustlenir, duzenli yedekleme ve WordPress bakim hizmetlerimizle de sitenizi kesintisiz ayakta tutariz. Dogru araci dogru altyapiyla birlestirin; gerisini birlikte hallederiz.