Elementor, WordPress’te kod yazmadan sürükle-bırak ile sayfa tasarlamayı sağlayan en popüler sayfa oluşturuculardan biri. WordPress.org sayfasında “drag & drop” editör, tasarım kontrolü ve mobil uyumlu düzenleme gibi özellikleri öne çıkarıyor.
Bu yazıda hedefimiz: Elementor’u basitçe kurmak, ilk sayfanı oluşturmak ve en önemlisi siteyi şişirmeden (hız bozmadan) kullanmak.
1) Elementor kurulumu (1 dakika)
- WordPress Panel → Eklentiler → Yeni Ekle
- “Elementor Website Builder” ara → Kur → Etkinleştir
2) İlk sayfanı Elementor ile oluştur (en pratik yol)
- Sayfalar → Yeni Ekle
- Başlık yaz → “Elementor ile Düzenle”
- Şablon seç (tema destekliyorsa):
- “Tam genişlik / Full width”
- veya “Canvas” (header/footer istemiyorsan)
Tavsiye: İlk sayfanda “Hero başlık + kısa açıklama + 3 özellik kutusu + çağrı butonu” gibi tek ekranlık basit bir düzenle başla.
3) Mobil uyum (en çok aranan ayar)
Elementor’un mobil düzenleme yaklaşımı “mobil responsive editing” olarak zaten temel özelliklerinden.
Yapman gereken pratikler:
- Mobil görünüm ikonundan mobilde kontrol et
- Çok büyük boşlukları (padding/margin) mobilde düşür
- 2–3 font ağırlığı (weight) üstüne çıkma (hız + okunabilirlik)
4) Elementor siteyi yavaşlatmasın diye “altın kurallar”
Elementor tarafında performans için “Performance experiments / features” yaklaşımı var.
En kritik nokta: sayfaya gereksiz kod yüklememek.
A) “Optimized / Improved Asset Loading” (mümkünse aç)
Elementor, “Improved/Optimized asset loading” ile sayfa bazında sadece gerekli kodları yükleyerek performansı artırdığını anlatıyor.
Pratikte bu, özellikle JS yükünü düşürüp hız skorlarına yardımcı olabilir.
B) Fazla widget/animasyon = fazla JS = daha kötü INP
INP, sayfanın tıklama/etkileşimlere ne kadar hızlı yanıt verdiğini ölçer.
INP’yi düzeltmenin temel mantığı: ana iş parçacığını (main thread) kilitleyen uzun JS işlerini azaltmak.
Bu yüzden:
- Slider, popup, sayaç, ağır animasyonları minimumda tut
- Üçüncü parti script’leri (chat/heatmap vb.) gerçekten lazımsa ekle
C) Görselleri WordPress mantığıyla ekle (WordPress zaten responsive yapar)
WordPress, görsellerde srcset ve sizes ile native responsive images desteğini uzun süredir otomatik veriyor.
Elementor’da da görsel yüklerken:
- “aşırı büyük” görseli küçük alanda kullanma
- mümkünse WebP kullan
- “ilk ekrandaki” büyük görseli gereksiz yere ağırlaştırma (LCP’ye vurur)
5) En sık Elementor sorunları (hızlı çözümler)
“Editör açılmıyor / takılıyor”
- Cache/JS optimizasyon (özellikle “delay/defer”) bazen editörü bozabilir → test için geçici kapat
- Güvenlik/WAF bazen REST API çağrılarını zorlayabilir (Site Kit’te de benzeri olur)
“Sayfa görünüyor ama tasarım kayıyor”
- Tema + Elementor genişlik ayarları çakışabilir
- Mobilde ayrı padding/margin ayarlamadıysan taşma olur