Elementor V4 (Atomic Editor), 30 Mart 2026’da çıkan 4.0.0 sürümünden beri yeni kurulumlarda varsayılan olarak açık geliyor; mevcut siteler kendiliğinden V4’e dönmüyor. V4’te stil widget ayarında değil sınıflarda duruyor ve temel stilden global sınıfa kadar bütün katmanlar aynı özgüllükle basılıyor, yani hangi kuralın kazanacağını dosyaların yüklenme sırası belirliyor. Tasarım sistemini değişken, global sınıf ve varsayılan stil sırasıyla kurduğunda tuzakların çoğu baştan kapanıyor.
Bu yazı panelden ya da REST ve MCP üzerinden V4 sitesi kuran meslektaşlar için. Tuzakların bir kısmı Elementor 4.3 ve Pro 4.2 ile yaptığım kurulumların notlarından geliyor; değerler ve mekanizmalar Elementor 4.3.2’nin (24 Eylül 2026) kaynak kodu ve kendi alt alan adımdaki V4 kurulumunun ön yüz CSS dosyalarıyla karşılaştırılarak doğrulandı. Sürüm bilgileri 26 Eylül 2026 itibarıyla geçerli. Yazıyı kendi notlarımdan, taslak aşamasında yapay zekâ yardımıyla hazırladım.
Elementor V4 nedir, V3’ten farkı ne?
V4, Elementor’un CSS öncelikli yeni öğe setine ve bu öğeleri düzenleyen Atomic Editor’a verilen ad. Flexbox, Div Block, Grid, Heading, Paragraph ve Button gibi atomic öğelerin panelinde üç yerine iki sekme var (General ve Style) ve Style sekmesi her öğede aynı. Stil öğenin ayarına değil, öğenin yerel sınıfına ve eklediğin global sınıflara yazılıyor. Elementor’un 4.0 duyurusuna göre her öğe eski sürümlerdeki iç içe div’ler yerine tek bir sarmalayıcıyla basılıyor. Başlıkta ek div hiç yok: kaynak koda göre h2 doğrudan kendi etiketiyle çıkıyor.
Özellikler parça parça geldi. İlk alfa 3.29.0 (19 Mayıs 2025), değişkenler 3.31.0, beta ve “production-ready” etiketi 3.35.0 (2 Şubat 2026), kararlı sürüm ve yeni kurulumlarda varsayılan açılış 4.0.0 (30 Mart 2026) ile geldi. Değişkenleri ve sınıfları tek yerde toplayan Design System paneli 4.1.0’da, Grid 4.2.0’da, etiket bazlı Default Styles, Accordion ve Elementor MCP 4.3.0’da (22 Eylül 2026) eklendi. Bu yüzden “V4’te Grid yok” ya da “akordeon yok” diyen İngilizce yazıların çoğu artık bayat.
Mevcut sitede ne olur?
Hiçbir şey dönüşmüyor. Elementor’un V4 SSS sayfasına göre güncelleme mevcut siteleri değiştirmiyor, eski düzenleri yeniden kurmak gerekmiyor ve eski widget’larla atomic öğeler aynı sayfada birlikte kullanılabiliyor. Atomic Editor, WP Admin > Elementor > Editor > Settings > Atomic Editor yolundan açılıp kapatılıyor; çekirdek ücretsiz kalıyor. Dikkat edilecek tek şey kapatma. Elementor’un geliştirici dokümanına göre kapatınca atomic içerik ön yüzde basılmayı bırakıyor, veri ise veritabanında duruyor. V4 ile kurulmuş bölümü olan bir sitede bu ayarı kapatırsan o bölümler ziyaretçiye görünmez. Açmadan önce tam yedek almak da Elementor’un kendi önerisi.
Tasarım sistemini hangi sırayla kuruyorum?
V4’te tasarım sistemini dört katmanda düşünüyorum: değişken token’dır, global sınıf bileşendir, varsayılan stil sıfırlamadır, yerel stil ise yalnızca istisnadır. Bu sıra Elementor’un resmi hiyerarşisiyle örtüşüyor: sınıflar ve değişkenler varsayılan stilleri, öğeye doğrudan verilen stil de hepsini eziyor. Token çıkarmadan önce sitenin neyi anlatacağını bilmek gerekiyor; o yüzden işe renk paletinden değil sayfa kurgusundan başlıyorum. Bu adımı kurumsal web sitesi için sayfa sayfa kurgu rehberinde ayrıntılı anlattım.
Değişkenler: renk, font ve boyut token’ları
Renk ve font değişkenleri herkese açık. Sabit boyut (16px, 1.5rem) ve clamp(), calc() gibi serbest değer alan boyut değişkenleri ise Elementor Pro istiyor. Kit başına üst sınır 1.000 değişken. Değişkenin etiketi CSS adı oluyor ve kit CSS dosyasına :root { –x-lacivert: #1F3A57; } biçiminde yazılıyor. Bu dosya her sayfada yüklendiği için sınıflar değeri var(–x-lacivert) ile okuyor; renk değişince tek yerden değişiyor. 4.3.2’deki panel doğrulamasına göre etikette harf, rakam, tire ve alt çizgi kullanılabiliyor, boşluk kabul edilmiyor ve ad en fazla 50 karakter; MCP dokümanı ayrıca küçük harf istiyor.
Etiket ile kimlik ayrı şeyler. Elementor’un değişken dokümanına göre stil alanına bağladığın değer, değişkenin iç kimliğiyle tutuluyor ve CSS’e çıkarken güncel etikete çevriliyor. Kit özel CSS’ine ya da custom_css’e yazdığın var(–etiket) ise düz metin olarak kalıyor. Bu yüzden etiketi sonradan değiştirmek, kit CSS’indeki ve özel CSS alanlarındaki eski adlı başvuruları boşa düşürür. Etiketleri projenin başında bir kez adlandırıp dondurmak en az sorunlu yol.
Global sınıflar ve öncelik sırası
Elementor’un çakışan stiller yardım sayfası kuralı net koyuyor: öğede soldaki sınıf sağdakini ezer, yerel sınıf hep en solda durduğu için her zaman en yüksek önceliği alır. Class Manager’da listede üstte duran sınıf kazanır. Kaynak koddaki karşılığı şöyle: ön yüz dosyası yazılırken liste ters çevriliyor, yani listenin ilk sınıfı dosyaya en son basılıyor ve eşit özgüllükte sonra gelen kazandığı için üstün geliyor. Sınıf sınırı 4.1.0’dan beri 1.000.
Kurduğum sitelerde kullandığım temel set şöyle: bölüm için x-section, içerik genişliği için x-wrap, başlıklar için x-h1, x-h2, x-h3, metin için x-lead ve x-body, butonlar için x-btn ve varyantları (x-btn-primary, x-btn-outline). Sıra kuralım basit: varyant bileşenin, bileşen genel sınıfın üstünde durur. Varyant tabanın üstünde değilse “renk neden tutmuyor” sorusu kaçınılmaz oluyor.
Varsayılan stiller: 4.3.0 ile gelen sıfırlama katmanı
Default Styles, Design System panelindeki Defaults sekmesinden etiket bazında stil tanımlatıyor; WordPress 6.8+ istiyor ve Normal, Hover, Focus, Active durumlarını destekliyor. Kaynak koda göre h1–h6, p, a, button, div, section, header, footer, nav, main, form ve img dahil 30 etiket izinli. Elementor’un varsayılan stiller yardım sayfası en işe yarar örneği kendisi veriyor: div etiketine 0px dolgu varsayılanı verdiğinde Flexbox öğesinin standart 10px dolgusu eziliyor. Ben div, section, header, footer, article, aside, nav, main ve a için padding:0 ve min-width:0 yazıyorum. Canlı çıktısı tek satır: .elementor .e-default-div{min-width:0px;padding:0px;}
Her atomic öğe e-default-<etiket> sınıfını taşıdığı için varsayılan, öğenin HTML etiketine bağlı. Bir Flexbox’ın etiketini section yaparsan div için yazdığın sıfırlama artık ona uymaz; section için ayrıca yazman gerekir. Sıfırlamayı bir “reset sınıfı” ile yapmıyorum, çünkü sınıf katmanında durduğu için diğer sınıflarla sıra kavgasına giriyor.
Yerel stil yalnızca istisna için
Yerel stil tek seferlik farklar için var. Şablona, özellikle Template Widget içine girecek her şeyi sınıfla kuruyorum. Elementor’un GitHub deposundaki açık bir hata kaydına göre Template Widget içindeki atomic öğelerin yerel stilleri ön yüze basılmıyor; aynı stil sınıfa taşınınca sorun kalkıyor. Kayıt 26 Eylül 2026 itibarıyla hâlâ açık.
Elementor V4’te CSS hangi sırayla yükleniyor, kim kimi eziyor?
V4’ün en az konuşulan tarafı burası. Temel stiller, varsayılan stiller, global sınıflar ve yerel stiller aynı biçimde basılıyor: .elementor .<ad>. MDN’nin özgüllük hesabıyla bu (0,2,0) eder; hover gibi durumlar bir sözde sınıf eklediği için (0,3,0) olur. Kaynak koda göre hover için yazdığın stil otomatik olarak :focus-visible’a da uygulanıyor, klavyeyle gezen kullanıcı aynı görünümü alıyor. Özgüllük eşit olduğunda MDN’nin kuralı devreye giriyor: sonra tanımlanan kazanır. V4’te “kim kazanır” sorusunun cevabı bu yüzden dosya sırası.
Kendi V4 kurulumumun ana sayfasında (4.3.2, 26 Eylül 2026) HTML’deki stil dosyası sırası şöyle: kit CSS’i, sayfanın kendi CSS’i, base-desktop.css, default-desktop.css, sınıfların masaüstü dosyası (global-<id>-frontend-desktop.css), tablet dosyası, base-mobile.css ve sınıfların mobil dosyası. Sayfada yerel stil olsaydı local-<id> dosyası her kesme noktasında sınıfların arkasından gelecekti; kaynak koddaki katman öncelikleri base 10, default 15, global 20, local 30.
| Seçici | Nereden geliyor | Özgüllük |
|---|---|---|
| .e-con | V3 çerçeve CSS’i (frontend.min.css) | 0,1,0 |
| .x | Kit özel CSS’i | 0,1,0 |
| .elementor .e-flexbox-base | base-desktop.css (temel stil) | 0,2,0 |
| .elementor .e-default-div | default-desktop.css (varsayılan stil) | 0,2,0 |
| .elementor .x-kart | global-<id> dosyası (global sınıf) | 0,2,0 |
| .elementor .x-btn:hover | global-<id> dosyası (durum) | 0,3,0 |
| body .elementor .x | Kit özel CSS’i (ezmek için) | 0,2,1 |
| :where(.x) | Kit özel CSS’i (ezilmek için) | 0,0,0 |
Kit CSS’i sınıflardan önce yüklendiği için kitteki düz bir .x kuralı hem özgüllükte hem sırada kaybediyor. Kitten bir sınıfı gerçekten ezmek istediğimde seçiciyi body .elementor .x yapıp (0,2,1)’e çıkarıyorum. Sınıflar tarafından her zaman ezilebilmesi gereken bir taban kuralı için tersini yapıp :where(.x) ile özgüllüğü sıfıra indiriyorum. Kurulum notlarıma göre kit özel CSS’i sitenin tamamında güvenilir çalışan tek özel CSS yeri; ::before ve ::after, alt öğe seçicileri, @keyframes ve geçişler de bu yüzden orada duruyor.
Elementor V4’te 9 tuzak ve çözümü
Her maddede önce belirti, sonra sebep ve çözüm var. Damgada mekanizmanın nereden doğrulandığını yazdım: Elementor 4.3.2 kaynak kodu, kendi kurulumumun canlı CSS’i ya da Elementor’un resmi dokümanı (26 Eylül 2026).
- Kutular birbirinden aralıklı duruyor. Flexbox, Div Block ve Grid’in temel stilinde padding:10px var (.elementor .e-flexbox-base{padding:10px;…}). Çözüm, yukarıdaki varsayılan stil sıfırlaması. Kurulum notlarımda mobilde ızgara ve döngülerin 10px yatay dolgu aldığı da kayıtlı; Grid’de bunun kaynağı aynı temel dolgu. Damga: kaynak kod ve canlı CSS.
- Başlık ile paragraf yan yana diziliyor. Flexbox, column değil flex-direction:row ile doğuyor. Elementor’un MCP için yazdığı en iyi uygulama dokümanı da bunu “gotcha” olarak işaretliyor ve çok çocuklu her kapsayıcıda yönün açıkça yazılmasını istiyor. Damga: resmi doküman ve canlı CSS.
- Izgara garip yükseklikte ya da boş satırlı. Grid’in temeli 3 sütun × 2 satır (repeat(3, 1fr) ve repeat(2, 1fr)), 20px sütun ve satır aralığı; mobilde tek sütun. Grid’in koddaki kendi açıklaması da uyarıyor: boş fr satırları çökmüyor, içeriğin altında eşit yükseklikte boş bir bant bırakıyor. Satır sayısını her zaman açıkça yaz. Mobil sütun sayısını da sınıfın @media(–mobile) bloğunda ver: base-mobile.css masaüstü sınıf dosyasından sonra yüklendiği için kesme noktası vermeden yazılan repeat(2, 1fr) mobilde temel stildeki tek sütuna yenilir. Damga: kaynak kod ve canlı yükleme sırasından çıkarım.
- Logo ve menü sıkışıyor. Atomic Flexbox, Div Block ve Grid, V3’ün e-con sınıfını da taşıyor. V3 çerçeve CSS’indeki .e-con{–width:100%; width:var(–width)} kuralı yüzünden yan yana öğeler tam genişlik istiyor. Çocuk öğelerin sınıfına width:auto ve flex:0 0 auto ver; (0,2,0)’lık sınıf, (0,1,0)’lık .e-con’u ezer. Damga: kurulum notu, mekanizma 4.3.2 frontend.min.css.
- Bölüm boşlukları kayboldu. Öğeye yerel olarak yazdığın padding:0, global sınıftaki dolguyu ezer; yerel katman en son yüklenir ve Elementor’a göre en yüksek önceliği taşır. Bölüm kökünde yerel dolgu yazma, farkı bir varyant sınıfıyla ver. Damga: resmi yardım ve kaynak kod.
- Varyantın rengi tutmuyor. REST ya da MCP ile oluşturulan yeni sınıf, kaynak koda göre sıra listesinin sonuna ekleniyor, yani en düşük öncelikle doğuyor. Varyantları tabandan önce oluştur ya da elementor/reorder-classes ile sırayı varyant, bileşen, genel olarak düzelt. Panelde aynı sırayı Class Manager’dan değiştiriyorsun. Damga: kaynak kod.
- 404 gibi şablon sayfalarında varyant tutmuyor. 404 gibi şablon sayfalarında sınıf CSS’i tek dosyada birleşmiyor: canlı kurulumda header, footer ve 404 şablonu için üç ayrı global-<id> dosyası bu sırayla yüklendi. Sonra gelen dosyadaki temel sınıf, önceki dosyadaki varyantı eşit özgüllükle eziyor. Kural: temel sınıf, varyantların değiştirdiği özelliği hiç tanımlamasın; örneğin buton kenar rengini her varyant kendisi versin. Damga: canlı CSS.
- Hover animasyonu yazdığın eğriyi ve gecikmeyi kullanmıyor. CSS metnini stile çeviren ayrıştırıcı, transition değerinden yalnızca özelliği ve ilk süreyi alıyor; easing ve gecikme atılıyor. Kısaltmaların karşılığı olmayan parçaları da custom_css alanına düşebiliyor ve yerel stildeki custom_css, Pro olmadan ön yüze basılmıyor. Geçişleri, ::before kurallarını ve @keyframes’i kit CSS’ine taşı; kısaltma yerine uzun yazım kullan (border-top-width, margin-top). Elementor’un dokümanı da uzun yazımı öneriyor. Damga: kaynak kod.
- Bağlantılı başlığın görünümü değişiyor. Başlığa ya da paragrafa bağlantı verdiğinde içeride bir <a> oluşuyor ve bu etiketin temel stili all:unset. Bağlantı satır içi davranıyor, renk ve fontu başlıktan miras alıyor, tarayıcının bağlantı stilleri gidiyor. Tıklanabilir alanı büyütmek ya da bağlantıya ayrı stil vermek istiyorsan kit CSS’ine .elementor .x-kart-baslik > a gibi bir alt öğe kuralı yaz; (0,2,1) özgüllüğüyle temel stili geçer. Notlarımda bunu “başlığın kendisi all:unset alıyor” diye kaydetmiştim; 4.3.2 kaynak koduna göre all:unset başlıkta değil, içindeki bağlantıda. Damga: kaynak kod ve canlı CSS.
Notlarımda bir tuzak daha vardı: olmayan bir kimliği silmeye çalışmak tüm sınıfları silebiliyordu. 4.3.2’de kod bu durumda “class_not_found” hatası dönüyor ve sıraya dokunmuyor, bu yüzden listeye almadım. Dikkat edilecek yer başka: sınıf listesini toptan kaydeden yol, gönderilmeyen her sınıfı siliyor. Silmeden ya da toplu yazmadan önce listelemek alışkanlık olarak kalsın.
V3 widget’larıyla birlikte çalışmak
Aynı sayfada V3 widget’ı ve V4 öğesi yan yana durabiliyor, ama tasarım sistemi köprüsü sınırlı. V4 SSS’si açık: eski widget’lara sınıf ya da değişken uygulanamıyor. Ters yönde de otomatik köprü yok: Atomic Button, Site Settings’teki Global Colors ve Global Typography değerlerini kendiliğinden almıyor; bunu bildiren 36112 numaralı GitHub kaydı 26 Eylül 2026 itibarıyla açık ve inceleme bekliyor. Köprü olarak Variables Manager’daki senkron seçenekleri var: renk değişkeni Global Colors’a, font değişkeni Global Fonts’a bağlanabiliyor. Yardım sayfasına göre font senkronunda renk, boyut ve kalınlık taşınmıyor. V3 widget’larının CSS’i de sınıf dosyalarına değil, sayfanın kendi post-<id>.css dosyasına yazılmaya devam ediyor.
REST veya MCP ile kuranlar için üç not
- Kit ayarı birleştirilmiyor. elementor/update-page-settings yeteneğinin açıklaması ayarların mevcut olanlarla birleştirildiğini söylüyor, ama 4.3.2’deki kod yolu _elementor_page_settings metasını gönderdiğin diziyle baştan yazıyor. Kurulum notlarımda da aynı kural var: kite yalnızca system_typography gönderirsen kitin özel CSS’i siliniyor (4.3 + Pro 4.2). Kiti her güncellediğinde tam seti gönder, öncesinde yedek al.
- manage-classes toplu çalışıyor. Tek çağrıda 1 ile 50 arası işlem kabul ediyor. Yeni sınıf listenin sonuna ekleniyor, aynı etiket gelirse DUP_ önekiyle yeniden adlandırılıyor, kısaltmalar custom_css’e düşebiliyor.
- İş bitince CSS yeniden üretilir. DELETE /wp-json/elementor/v1/cache ya da panelde Elementor > Tools > Regenerate CSS & Data, ardından sayfa önbelleği temizliği. Sınıf panelde doğru görünüp canlıda başka görünüyorsa ilk bakılacak yer burası.
Uygulama şifresi, taslakta kurma, yayın sırası kuralı ve MCP yerine Abilities REST’e geçiş için Claude Code ile WordPress ve Elementor kurulum günlüğüne bakabilirsin.
Sık sorulan sorular
Mevcut V3 sitemi Elementor V4’e çevirmem gerekiyor mu?
Hayır. Güncelleme mevcut siteyi değiştirmiyor ve otomatik dönüşüm yok; eski widget’lar ile atomic öğeler aynı sayfada çalışıyor. Yeni bölümleri V4 ile kurabilirsin, ama V4 içeriği olan bir sitede Atomic Editor’ı kapatırsan o bölümler ön yüzde görünmez.
Div Block mu, Flexbox mu kullanmalıyım?
Div Block display:block ve min-width:30px ile, Flexbox display:flex ve flex-direction:row ile doğuyor; ikisinde de 10px dolgu var. Öğeleri yalnızca alt alta dizeceksen Div Block, hizalama ya da yan yana düzen gerekiyorsa Flexbox. Flexbox’ta yönü her seferinde açıkça yaz.
Boyut değişkeni neden görünmüyor?
Boyut ve serbest değerli (clamp, calc) değişkenler Elementor Pro’ya bağlı; Pro yoksa kod sabit boyut türündeki değişkenleri listeden çıkarıyor. Ücretsiz sürümde renk ve font değişkenleri kullanılabiliyor.
Elementor V4’te özel CSS nereye yazılır?
Sınıfın kendi stiline uzun yazımla, kalanı kit özel CSS’ine: ::before ve ::after, alt öğe seçicileri, @keyframes ve geçişler. Yerel stildeki custom_css Pro olmadan ön yüze basılmıyor, bu yüzden ona güvenmiyorum.
Sınıf panelde doğru, canlıda farklı görünüyor: ilk nereye bakmalı?
Önce CSS’i yeniden üret ve sayfa önbelleğini temizle. Sorun sürüyorsa tarayıcının geliştirici araçlarında kuralın hangi dosyadan geldiğine bak: eşit özgüllükte sonra yüklenen dosya kazanır. Yerel stil, mobil temel dosyası ve şablon başına bölünmüş global-<id> dosyaları en sık rastlanan sebepler.
V4’te tasarım sistemi baştan doğru kurulursa renk değişikliği tek değişkende, buton değişikliği tek sınıfta biter; yanlış kurulursa her sayfada yerel stil avına dönüşür. Sayfa kurgusundan token’lara, sınıf setinden yayın öncesi kontrollere kadar düzenli ve yönetilebilir bir WordPress yapısı istiyorsan WordPress ve Elementor ile web sitesi kurulumu sayfamdan kapsamı birlikte netleştirebiliriz.
