Elementor ile Ölçeklenebilir Site: Global Stiller, Şablonlar ve Bileşenler

Aynı mavi on farklı tonda kullanılmış, her sayfanın başlığı ayrı ayarlanmış, bir hizmet kartındaki tek cümleyi değiştirmek için yirmi sayfa tek tek açılıyor. Elementor ile kurulan kurumsal siteler ilk aylarda hızlı ilerler, sonra bu noktaya gelir. Sorun Elementor değil, yapı standardının olmaması. Bu rehber, platform olarak WordPress ve Elementor seçilmiş bir kurumsal site için global stiller, container yerleşimi, Theme Builder şablonları ve yeniden kullanılabilir bölümlerle bakımı sürdürülebilir bir yapı kurmayı anlatır. Hedef okur web ekipleri, ajans tarafındaki geliştiriciler ve siteyi yönetecek içerik sorumlularıdır.

Yapı standardının dört ilkesi

Büyüyen bir Elementor sitesinde bakım maliyetini tek bir şey belirler: bir değişikliğin kaç yerde yapılması gerektiği. Cevap “bir” değilse yapı zamanla çürür. Standart dört ilkeye dayanır:

• Tek kaynak: Renk, yazı tipi, boşluk ve buton stili bir kez tanımlanır, her yerde referansla kullanılır.
• Katmanlı şablon: Sitenin iskeleti (header, footer, tekil yazı, arşiv) Theme Builder’da durur; sayfalar yalnız kendi içeriğini taşır.
• Native öncelik: İçerik, editörün görsel olarak düzenleyebileceği native widget’larla kurulur; özel kod istisnadır ve belgelenir.
• Sade yerleşim: Gereğinden fazla iç içe kapsayıcı kullanılmaz; DOM boyutu tasarım kararlarının ölçülen bir çıktısıdır.

Bu ilkeler platform seçiminden sonra gelir. WordPress ile headless bir yapı arasında karar henüz verilmediyse önce WordPress mi Next.js mi yazısındaki kriterlere bakın.

Global renkler, tipografi ve tasarım token’ları

Site Ayarları (Site Settings) altındaki Global Renkler ve Global Yazı Tipleri, sitenin tasarım token’larının Elementor’daki karşılığıdır. Widget’ta renk veya yazı tipi seçerken sabit değer yazmak yerine globe simgesinden global değeri seçtiğinizde değer o token’a bağlanır; token değişince bağlı tüm widget’lar güncellenir. Sabit değer girilmiş widget bu değişiklikten etkilenmez. Tutarsızlık oradan başlar.

Global değerleri kullanıldıkları yere göre değil, rollerine göre adlandırın. “Ana sayfa mavisi” yerine “Birincil”, “Hero başlığı” yerine “Başlık XL” gibi adlar değer değiştiğinde de anlamını korur. Örnek bir token seti:

Grup	Token	Kullanım
Renk	Birincil, İkincil, Vurgu	Buton, bağlantı, ikon
Renk	Metin, Metin ikincil, Kenarlık, Zemin alternatif	Gövde, açıklama, kart çerçevesi
Tipografi	Başlık XL, L, M, S	H1–H4 eşlemesi
Tipografi	Gövde, Gövde küçük, Etiket	Paragraf, not, üst başlık
Boşluk	Bölüm dikey boşluğu, kart iç boşluğu	Container padding ve gap

Klasik editörde boşluk için global renk ve yazı tipi kadar doğrudan bir mekanizma yoktur. Sürümünüzde global değişkenler veya sınıflar varsa onları kullanın; yoksa boşluk ölçeğini yazılı bir standartta sabitleyin (ör. 8’in katları) ve kaydedilmiş şablonlarda uygulayın. Site Ayarları’ndaki Tema Stili bölümünde başlık, buton, form alanı ve görsel varsayılanlarını da tanımlayın; böylece yeni eklenen her widget doğru stille başlar. Token yapısının sitenin ötesinde kurumsal bir tasarım sistemine nasıl bağlanacağını kurumsal tasarım sistemi yazısında anlattık.

Container tabanlı yerleşim ve DOM boyutu

Flexbox Container, eski section–column yapısının yerini alan yerleşim modelidir. Eski yapıda her bölüm en az üç katmanlı bir sarmalayıcı zinciri üretirdi; container tek kapsayıcıyla yatay veya dikey dizilim, hizalama ve gap boşluğu sağlar. Izgara düzenleri için Grid Container seçeneği de var.

Container kullanmak tek başına sade DOM demek değil. Sahada en sık gördüğümüz hata, her ögeyi ayrı bir container’a sarıp dört beş seviye iç içe yapı kurmak. Pratik kurallar:

• Bir container’ın tek görevi varsa (yalnız arka plan veya yalnız hizalama) üst container’la birleştirilip birleştirilemeyeceğine bakın.
• Kartlar arasındaki boşluk için her karta kenar boşluğu vermeyin; üst container’da gap kullanın.
• Mobil ve masaüstü için aynı içeriği iki kez kurup birini gizlemeyin; container’ın yönünü ve sırasını duyarlı ayarlardan değiştirin. Gizlenen öge de DOM’da ve sayfa ağırlığında kalır.
• Sekme, akordeon ve kaydırıcı widget’larına uzun içerik koymadan önce içeriğin sayfada açık durup duramayacağını değerlendirin.

DOM boyutunu ölçmek için Lighthouse’un DOM boyutu denetimini (sürüme göre “Avoid an excessive DOM size” denetimi veya “Optimize DOM size” içgörüsü olarak görünür) ya da tarayıcı konsolunda document.querySelectorAll('*').length komutunu kullanın. Değeri her ana şablon için kaydedin, tasarım değişikliklerinden sonra karşılaştırın. Ölçülmeyen DOM büyür. Büyük DOM’un etkileşim gecikmesine etkisi web.dev üzerindeki DOM boyutu ve INP yazılarında anlatılır; genel hız iyileştirmesi için LCP, INP ve CLS rehberine bakın.

Elementor ayarlarındaki Özellikler (Features) ekranında DOM çıktısını ve CSS/JS yüklemesini optimize eden seçenekler bulunur; hangisinin kararlı, hangisinin deneysel olduğu sürüme göre değişir. Değişiklikleri önce staging ortamında açın, görsel karşılaştırma yapın, sonra canlıya alın.

Theme Builder ile şablon hiyerarşisi

Elementor Pro’nun Theme Builder’ı sitenin tekrar eden iskeletini koşula bağlı şablonlarla yönetir. Doğru kurulmuş hiyerarşide sayfa düzenleyicisi yalnız sayfaya özgü içeriği görür; header, footer, yazı düzeni ve arşiv listesi merkezi şablonlardan gelir.

Şablon türü	Koşul örneği	Not
Header / Footer	Tüm site; kampanya sayfaları hariç	Hariç tutma koşulu, sadeleştirilmiş başlık için
Single Post	Tüm yazılar veya belirli kategori	Kategoriye özel varyant gerekiyorsa
Single (özel içerik türü)	Hizmet içerik türü	Hizmet sayfalarını tek şablondan yönetmek için
Archive	Blog arşivi, kategori, etiket	Liste kartı Loop Item şablonundan
404 / Arama sonuçları	İlgili sayfa türü	Sık unutulur

Hizmet sayfaları gibi aynı düzeni paylaşan çok sayıda sayfa varsa bunları tek tek tasarlanmış sayfalar yerine bir özel içerik türü ve tek bir Single şablonu olarak kurun; bakım yükü belirgin biçimde düşer. Şablondaki başlık, özet, görsel ve özel alanlar dinamik etiketlerle (Dynamic Tags) dolar; editör yalnız alanları doldurur. Liste ve kart görünümlerinde Loop Grid ile Loop Item şablonu, kartın tasarımını tek yerden yönetmeyi sağlar.

Koşul çakışmalarını da yönetin. Aynı sayfaya iki header şablonu eşleşirse Elementor daha özel koşulu seçer; ama zamanla biriken şablonlar hangisinin geçerli olduğunu belirsizleştirir. Konsolda değil, şablon listesinde kaybolursunuz. Şablon adlarına türü ve kapsamı yazın (ör. “Header – Genel”, “Header – Kampanya”) ve kullanılmayanları arşivleyin.

Yeniden kullanılabilir bölümler ve bileşenler

Tekrar eden bölümler için Elementor üç mekanizma sunar ve davranışları farklıdır:

• Kaydedilmiş şablon (Saved Template): Sayfaya eklendiğinde kopyalanır. Sonraki değişiklikler eklenmiş kopyaları etkilemez. Başlangıç kalıbı için uygundur.
• Şablon kısa kodu veya Template widget’ı: Kaydedilmiş bölümü referansla gösterir; şablon değişince tüm kullanımlar güncellenir. Teklif çağrısı bandı, iletişim bloğu gibi her yerde aynı kalması gereken bölümler içindir.
• Global widget veya bileşen: Tek bir widget’ı ya da yeni editör sürümlerinde bileşen olarak tanımlanan yapıyı referansla paylaşır. Kullanılabilirliği sürüme ve lisansa göre değişir; ekibin kullandığı sürümde hangisinin desteklendiğini kontrol edin.

Kural basit: İçeriği her yerde aynı kalacak bölüm referansla eklenir; düzeni ortak, içeriği değişecek bölüm kaydedilmiş şablonla. Bu kuralı şablon kütüphanesinde kategori adlarıyla görünür kılın (ör. “Bölüm – Kopyala” ve “Bölüm – Referans”).

Global stillerde veya şablonlarda değişiklikten sonra üretilen CSS dosyalarının yenilenmesi gerekebilir. “Değiştirdim ama sitede görünmüyor” şikâyetinin çoğu buradan çıkar. İşlem yönetim panelindeki Araçlar ekranından ya da WP-CLI ile yapılır:

# Elementor’un ürettiği CSS dosyalarını yeniden oluşturur
wp elementor flush-css

# Çok siteli kurulumda belirli bir alt site için
wp elementor flush-css --url=https://alt-site.ornek.com

Sayfa önbelleği veya CDN kullanılıyorsa CSS yenilemesinden sonra onları da temizleyin; aksi halde ziyaretçiler eski stil dosyalarına başvuran sayfaları görmeye devam eder. Kontrol sırası: Elementor CSS, sonra sayfa önbelleği, sonra CDN.

Editör yönetişimi ve sık yapılan hatalar

Yapı standardı, siteyi düzenleyen herkes aynı kurala uyduğu sürece ayakta kalır. Elementor Pro’nun Rol Yöneticisi (Role Manager) ile editör rolündeki kullanıcıları yalnız içerik düzenlemeyle sınırlayabilirsiniz. Stil ve yerleşim yetkisini küçük bir ekipte tutun; global yapının aşınmasını en etkili bu önler.

Denetimlerde en sık karşımıza çıkan hatalar:

• HTML widget bağımlılığı: Başlık, kart ve butonların HTML widget’ında elle yazılması. Görünüm doğru olsa bile içerik görsel olarak düzenlenemez ve global stillere bağlanmaz.
• Sayfa bazlı özel CSS: Her sayfanın kendi CSS alanında aynı sınıfların farklı değerlerle tanımlanması. Ortak CSS gerekiyorsa site genelinde tek yerde toplanmalı.
• Sabit değerli widget’lar: Global token yerine elle girilmiş renk ve yazı boyutu.
• Kopyalanan bölümler: Referans olması gereken bölümün yirmi sayfaya kopyalanması.
• Gereksiz eklenti paketleri: Tek bir widget için koca bir Elementor eklenti paketi kurulması; her paket ek CSS, JS ve güncelleme yükü getirir.
• Başlık hiyerarşisinin ihmali: Başlık widget’ında HTML etiketinin görsel boyuta göre seçilmesi. Yazı boyutu global tipografiden, etiket içerik hiyerarşisinden gelmeli.

Yeni sayfa yayına girmeden önce dört soru yeter: global olmayan renk veya yazı tipi var mı, HTML widget’ı neden kullanıldı, mobilde gizlenmiş kopya içerik var mı, başlık sırası doğru mu. Sayfa yapısından önce içeriğin nasıl organize edileceği için kurumsal site bilgi mimarisi yazısına bakın. Elementor yapı standardının kurulması ve mevcut sitenin native yapıya dönüştürülmesi için WordPress ve Elementor geliştirme, token ve bileşen setinin tasarımı için UI/UX ve kurumsal tasarım sistemi sayfalarımızı inceleyebilirsiniz. Elementor’un güncel özellik ve sürüm bilgileri için birincil kaynak Elementor yardım merkezidir.

Sık sorulan sorular

Mevcut bir Elementor sitesini global stillere geçirmek için her sayfayı yeniden mi kurmak gerekir?

Gerekmez, ama kademeli bir temizlik gerekir. Önce Site Ayarları’nda global renk ve yazı tiplerini tanımlayın, sonra en çok kullanılan şablonlardan başlayarak widget’lardaki sabit değerleri global değerlere bağlayın. Header, footer ve tekil yazı şablonları ilk sırada olmalı; tüm sayfaları etkilerler.

HTML widget’ı hiç kullanılmamalı mı?

Kullanılabilir, ama istisna olmalı. Harita gömme kodu veya özel bir form betiği gibi native karşılığı olmayan küçük parçalar için uygundur. Başlık, metin, kart ve buton gibi içerikleri HTML widget’ına yazmak, editörün bu içeriği görsel olarak düzenleme imkânını ortadan kaldırır.

Section/column yapısındaki eski sayfalar container’a dönüştürülmeli mi?

Sık düzenlenen ve trafiği yüksek sayfalar için evet. Elementor eski yapıyı container’a dönüştüren bir araç sunar, ama dönüşümden sonra boşlukları ve hizalamaları tek tek kontrol edin. Nadiren değişen sayfaları yeniden tasarım sırasında dönüştürebilirsiniz.

Çok siteli bir WordPress kurulumunda Elementor global ayarları paylaşılır mı?

Hayır. Multisite ağında her alt sitenin kendi Elementor kiti, global stilleri ve şablon kütüphanesi vardır. Ortak tasarım dili için kitin dışa ve içe aktarılması veya şablonların kontrollü senkronizasyonu gibi bilinçli bir yöntem kurulmalı.