Elementor, WordPress sayfalarını kod yazmadan, sürükle-bırak yöntemiyle ve değişiklikleri anında görerek tasarlamayı sağlayan bir sayfa oluşturucu eklentidir. Elementor nasıl kullanılır sorusunun özü dört adımda toplanır: önce Site Ayarları’nda global renk ve yazı tipleri tanımlanır, sayfa konteynerlerle kurulur, her bölüm tablet ve mobil modda ayrıca kontrol edilir, son olarak Elementor’un kendi performans ayarları açılır.
Bu rehber yeni başlayanlar için hazırlandı; anlatılan her ayar ve menü adı Elementor’un resmi yardım merkezindeki belgelere dayanır. Menü adları sürüme göre küçük farklılıklar gösterebilir, ancak mantık aynıdır.
Elementor Nedir ve Nasıl Çalışır?
Elementor, WordPress’in içinde çalışan görsel bir düzenleyicidir: sol paneldeki öğeler (widget’lar) sayfaya sürüklenir, ayarları panelden değiştirilir ve sonuç aynı ekranda görülür. Eklentinin ücretsiz sürümü temel düzen ve içerik öğelerini sunar; Elementor Pro ise tema oluşturucu, form ve açılır pencere gibi ek araçlar ekler. Hangisinin yeterli olduğu, sitenin ihtiyacına göre değişir.
Elementor’da iki editör kuşağı bir arada bulunur. Uzun süredir kullanılan 3.x editöründe her öğenin İçerik, Stil ve Gelişmiş sekmeleri vardır. Elementor’un yardım belgelerine göre V4 editörü ise stilleri sınıflar üzerinden yönetir, her öğede Genel ve Stil olmak üzere iki sekme kullanır ve Elementor 4.x sürümlerinde V4 öğeleri varsayılan olarak açık gelir. V4 öğeleri, mevcut 3.x konteynerlerinin içine yerleşerek eski sayfalarla birlikte çalışır.
Sayfa oluşturucu her site için zorunlu değildir. WordPress’in kendi blok düzenleyicisi basit sayfalar için yeterli olabilir; görsel olarak özgün, çok sayıda farklı bölüm düzeni içeren kurumsal ve kampanya sayfalarında ise Elementor gibi bir araç düzenleme işini hızlandırır. Altyapı kararının genel çerçevesi WordPress mi, hazır site oluşturucu mu karşılaştırmasında ele alınır.
Başlamadan Önce: Kurulum ve İlk Ayarlar
Elementor ile sayfa tasarımına başlamadan önce eklentinin ve sitenin temel ayarlarını düzenlemek, sonradan sayfa sayfa düzeltme yapmayı önler. Elementor, WordPress panelindeki Eklentiler bölümünden kurulur; hafif ve Elementor ile uyumlu bir tema seçilmesi, temanın kendi stilleriyle çakışmaları azaltır.
Sunucunun da eklentinin gereksinimlerini karşılaması gerekir. Elementor’un sistem gereksinimleri sayfasına göre eklenti WordPress 6.5 ve üzerinde, en az PHP 7.4 ile çalışır ancak PHP 8.x önerilir; WordPress bellek sınırı için en az 256 MB istenir, 512 MB önerilir. Düzenleyici paneli yüklenmiyorsa ya da kaydetme sırasında hata alınıyorsa ilk bakılacak yer çoğu zaman bu bellek sınırıdır.
WordPress panelinde Elementor menüsündeki Ayarlar ekranı, Elementor’un hangi içerik türlerinde kullanılacağını belirlemeyi ve varsayılan renk ve yazı tiplerinin temadan mı yoksa Elementor’dan mı yönetileceğini seçmeyi sağlar. Aynı ekrandaki SVG ve JSON gibi filtresiz dosya yüklemelerine izin veren seçenek, Elementor’un kendi uyarısına göre güvenlik riski taşıdığı için yalnızca gerçekten gerektiğinde açılmalıdır.
Konteyner Mantığı: Bölüm ve Sütunların Yerini Ne Aldı?
Elementor’da sayfalar artık bölüm (section), sütun ve iç bölüm yerine konteynerlerle kurulur. Elementor’un konteyner belgelerine göre esnek kutu (flexbox) tabanlı konteynerler, içindeki öğelerin genişliğini, yüksekliğini ve sırasını alana göre ayarlamayı sağlar; daha iyi sayfa yükleme ve daha fazla duyarlı kontrol sunar. Yeni Elementor sitelerinde konteyner varsayılan düzen öğesidir.
Konteyner, içindeki öğeleri yatay (satır) ya da dikey (sütun) dizer; bu yön her cihaz boyutu için ayrı ayarlanabilir. Masaüstünde yan yana duran üç kart, mobilde aynı konteynerin yönü değiştirilerek alt alta dizilir. Satır ve sütunlardan oluşan düzenli ızgaralar için ayrı bir ızgara (grid) konteyneri de vardır.
Eski bölüm ve sütunlarla kurulmuş sayfalar “Konteynere Dönüştür” seçeneğiyle dönüştürülebilir. Elementor bu işlemin tek yönlü olduğunu, konteynere çevrilen bir sayfanın bölüm ve sütun yapısına geri döndürülemeyeceğini belirtir; dönüştürmeden önce sayfanın yedeği alınmalıdır.
İlk Sayfayı Konteynerlerle Adım Adım Kurmak
Yeni bir sayfa, her biri tek bir amaca hizmet eden bloklar hâlinde kurulduğunda hem düzenlemesi hem mobil uyarlaması kolaylaşır. Basit bir hizmet sayfası için akış şöyledir:
- WordPress’te yeni sayfa oluşturulur ve “Elementor ile Düzenle” düğmesine basılır.
- Kanvastaki artı simgesinden bir konteyner eklenir; sayfanın her ana bölümü (giriş, hizmetler, süreç, iletişim) ayrı bir üst konteyner olur.
- Giriş bölümüne başlık, kısa metin ve düğme öğeleri eklenir; başlık öğesinin HTML etiketi sayfada bir kez H1 olacak şekilde seçilir.
- Hizmet kartları için bir konteyner açılır, yönü satır yapılır ve her kart için içeride birer alt konteyner kullanılır.
- Boşluklar ve hizalama tek tek öğelerde değil, konteynerin boşluk (gap) ve hizalama ayarlarından verilir.
- Tekrar kullanılacak bölümler (iletişim çağrısı gibi) şablon olarak kaydedilir.
- Sayfa tablet ve mobil modda kontrol edildikten sonra yayımlanır.
Gereğinden fazla iç içe konteyner kullanmak, sayfanın HTML yapısını gereksiz yere büyütür. Elementor’un konteyner ve performans belgesi, aynı tasarımın daha az kapsayıcıyla kurulmasının sayfanın yükünü azalttığını örnekle gösterir.
Sayfa İçeriği
Global Renkler ve Yazı Tipleri: Site Ayarları
Renk ve yazı tipleri her öğede tek tek seçilmez; bir kez Site Ayarları‘nda tanımlanır ve bütün sayfalarda bu global değerler kullanılır. Site Ayarları’na düzenleyicinin üst çubuğundaki Elementor simgesinden ya da WordPress panelindeki Elementor menüsünden ulaşılır.
Tasarım Sistemi bölümünde birincil, ikincil, metin ve vurgu olmak üzere hazır global renkler ve global yazı tipleri bulunur; markaya özel yeni renk ve yazı stilleri de eklenebilir. Tema Stili bölümü başlıklar, düğmeler, görseller ve form alanları için varsayılan görünümü, Ayarlar bölümü ise site kimliği, düzen, ışık kutusu ve özel CSS gibi site geneli seçenekleri toplar.
Global değer kullanmanın asıl faydası değişiklik anında ortaya çıkar. Marka rengi güncellendiğinde, global renge bağlı her düğme ve başlık tek hamlede yenilenir; elle renk kodu girilmiş öğeler ise tek tek bulunup düzeltilmek zorundadır. Elementor’un yardım belgesi de sayfalar arasında değişen renk ve yazı tiplerinin ziyaretçiyi karıştırabileceğini ve marka kimliğini zayıflatabileceğini belirtir.
Elementor Sayfalarına Birlikte Bakalım
Mevcut Elementor sitesinde global stillerin kullanılıp kullanılmadığı, konteyner yapısının ne kadar sade olduğu ve mobil görünümün nerede bozulduğu ücretsiz ön değerlendirmede birlikte incelenir. Düzeltilmesi gereken noktalar önem sırasıyla not edilir.
Duyarlı Tasarım: Masaüstü, Tablet ve Mobil Modu
Elementor’da her sayfa masaüstü, tablet ve mobil için ayrı ayrı ayarlanabilir; geçiş, düzenleyicinin üst çubuğundaki cihaz simgeleriyle yapılır. Elementor’un mobil düzenleme belgesine göre varsayılan kırılma noktaları şöyledir:
| Cihaz modu | Varsayılan ekran genişliği | Kontrol edilecekler |
|---|---|---|
| Masaüstü | 1024 pikselden geniş | Genel düzen, görsel oranları, menü |
| Tablet | 767–1024 piksel arası | Kartların satır/sütun dizilimi, boşluklar |
| Mobil | 767 pikselden dar | Başlık boyutu, düğme genişliği, form alanları, yatay kayma |
Ayarlar büyük ekrandan küçüğe doğru miras alınır: masaüstünde verilen yazı boyutu, tablette değiştirilmedikçe tablette de geçerlidir; tablette verilen değer de mobile aktarılır. Belgeye göre bu kuralın istisnası geniş ekran modudur ve diğer ekranları etkilemez. Ek Özel Kırılma Noktaları özelliğiyle geniş ekran, dizüstü, geniş tablet ve geniş mobil gibi ek boyutlar da tanımlanabilir.
Bir öğeyi mobilde gizleyip yerine mobile özel bir kopya koymak yerine, konteynerin yönünü ve öğelerin sırasını cihaz bazında değiştirmek daha temiz bir yoldur. Elementor, konteynerlerde her kırılma noktası için özel sıralama yapılabildiğini ve böylece cihaza göre gizlenen ek bölümlere gerek kalmadığını belirtir.
Şablonlar, Yapı Paneli ve Geçmiş
Elementor’da iş hızını artıran üç araç vardır: tekrar kullanılabilir şablonlar, sayfanın ağaç görünümünü gösteren Yapı paneli ve yapılan değişiklikleri geri almayı sağlayan Geçmiş paneli. Şablonlar sayesinde iletişim bölümü, referans şeridi ya da çağrı kutusu gibi bloklar bir kez tasarlanır ve farklı sayfalara eklenir.
Uzun ve katmanlı sayfalarda bir öğeyi kanvasta tıklayarak bulmak zorlaşır. Yapı paneli (Ctrl/Cmd + I) sayfadaki tüm öğeleri ağaç şeklinde listeler; arkada kalmış ya da gizlenmiş öğelere de buradan ulaşılır ve öğeler sürüklenerek yeniden sıralanabilir.
Geçmiş panelinin iki sekmesi bulunur. Eylemler sekmesi o düzenleme oturumunda yapılan her adımı tutar; Revizyonlar sekmesi ise sayfanın her kaydedilişinde ya da yayımlanışında oluşan sürümleri listeler ve seçilen sürüme dönmeyi sağlar. Ctrl/Cmd + Z ile son adım geri alınır.
Elementor’un Kendi Performans Ayarları
Elementor, sayfa hızını artırmak için ayarlar ekranındaki Performans ve Özellikler sekmelerinde bir dizi seçenek sunar. Elementor’un performans özellikleri belgesinde sayılan başlıca ayarlar şunlardır:
- Optimize Görsel Yükleme: sayfanın en büyük görseline yüksek yükleme önceliği verir, ekranın altında kalan görselleri tembel yüklemeye alır.
- Arka Plan Görsellerinde Tembel Yükleme: ilki dışındaki arka plan görsellerini ekrana yaklaştıkça yükler.
- Optimize Gutenberg Yükleme: kullanılmayan blok düzenleyici betik ve stillerini sayfadan çıkarır.
- Satır İçi Yazı Tipi Simgeleri: simgeleri ayrı simge kütüphaneleri yüklemeden satır içi SVG olarak basar.
- Google Yazı Tiplerini Yerelden Yükleme: yazı tiplerini Google sunucusu yerine sitenin kendi sunucusundan sunar; Elementor 3.32.1’den itibaren varsayılan olarak kapalıdır ve elle açılması gerekir.
- Öğe Önbelleği: öğelerin çıktısını saklayıp tekrar kullanır; deneysel bir özelliktir ve ziyaretçiye özel içerik gösteren dinamik öğelerde kullanılmamalıdır.
Yardım merkezine göre daha önce isteğe bağlı olan sade HTML çıktısı (optimize DOM) 3.19 sürümünden itibaren çekirdeğe kalıcı olarak eklenmiştir. Bu ayarlar değiştirilmeden önce yedek alınmalı ve her değişiklikten sonra sayfalar farklı cihazlarda kontrol edilmelidir.
Elementor Sayfalarını Yavaşlatan Kurgu Hataları
Elementor sitelerinin yavaşlığı çoğunlukla eklentinin kendisinden değil, sayfanın nasıl kurulduğundan kaynaklanır. Birbirinin içine gereksiz yere yerleştirilmiş konteynerler, açılışta otomatik oynayan büyük kaydırıcılar, her bölümde farklı animasyonlar ve çok sayıda yazı tipi ağırlığı sayfanın yükünü artırır.
Sıkıştırılmadan yüklenen büyük görseller ve Elementor’a ek öğe sunan çok sayıda eklenti paketi de aynı etkiyi yaratır. Varlık yükleme belgesi ise kendi yükleme iyileştirmelerini düzgün uygulamayan üçüncü taraf eklentilerin çakışmalara yol açabileceğini not eder. Ölçüm ve iyileştirme adımları Core Web Vitals rehberinde anlatılır; kapsamlı bir çalışma gerektiğinde WordPress hız optimizasyonu ayrı bir iş olarak ele alınır.
Elementor ile SEO ve Erişilebilirlik Temelleri
Elementor ile hazırlanan bir sayfanın arama motorları ve tüm kullanıcılar için anlaşılır olması, doğru başlık düzenine ve anlamlı içeriğe bağlıdır. Başlık öğesinin görünen boyutu ile HTML etiketi birbirinden bağımsızdır; bu yüzden her sayfada tek bir H1 bulunmalı, alt başlıklar H2 ve H3 sırasını izlemelidir. Yalnızca görsel büyüklük için H1 ya da H2 seçmek, sayfanın yapısını bozar.
Görsellerin alternatif metinleri medya kütüphanesinde doldurulmalı, düğme ve bağlantı metinleri nereye gidildiğini anlatmalıdır. Metin ile arka plan arasındaki renk karşıtlığı, global renkler seçilirken kontrol edilirse sonradan sayfa sayfa düzeltmeye gerek kalmaz. Bu temel kuralların bütünü SEO uyumlu web tasarım yaklaşımının da çekirdeğini oluşturur.
Yeni Başlayanların Sık Yaptığı Hatalar ve Doğru Yöntem
İlk Elementor sayfalarında görülen sorunların çoğu aynı alışkanlıklardan doğar ve baştan doğru kurulan bir düzenle kolayca önlenir. En sık karşılaşılan hatalar ve karşılıkları şunlardır:
- Her öğeye elle renk ve yazı tipi vermek: global değerler kullanılmadığında marka rengi değiştiğinde onlarca öğe tek tek düzeltilir. Doğrusu, renk ve yazı stillerini yalnızca Site Ayarları’ndan seçmektir.
- Mobil görünümü en sona bırakmak: masaüstünde bitirilen sayfa mobilde taşan başlıklar ve yatay kaydırma sorunlarıyla karşılaşır. Her bölüm bitirildiğinde tablet ve mobil modu hemen kontrol edilmelidir.
- Boşluğu boş öğelerle vermek: aralık bırakmak için eklenen boş ayırıcılar sayfayı şişirir; boşluklar konteynerin iç boşluk ve öğe arası mesafe ayarlarından verilir.
- Başlık etiketini görünüme göre seçmek: büyük görünsün diye her başlığa H1 vermek sayfa yapısını bozar; boyut stil ayarından, etiket ise içeriğin hiyerarşisinden belirlenir.
- Her ihtiyaç için yeni bir öğe paketi kurmak: tek bir öğe için kurulan ek eklentiler yükü ve güncelleme takibini artırır; önce Elementor’un kendi öğeleriyle çözüm aranır.
- Canlı sitede deneme yapmak: büyük tasarım değişiklikleri ve deneysel özellikler önce yedek alınarak, mümkünse bir test kopyasında denenir.
Elementor Projesini Birlikte Planlayalım
Elementor nasıl kullanılır sorusu, birkaç sayfadan sonra yerini “bu site nasıl sürdürülebilir kalır” sorusuna bırakır. Yeni bir site kurulacaksa ya da mevcut Elementor sayfaları sadeleştirilecekse, global stil yapısı ve sayfa şablonları baştan birlikte belirlenebilir. WordPress site yapımı sürecinde teslimle birlikte panel eğitimi de verilir; ücretsiz ön değerlendirme için WhatsApp’tan yazılabilir ya da aranabilir.
Sıkça Sorulan Sorular
Elementor nasıl kullanılır?
Önce Site Ayarları’nda global renk ve yazı tipleri tanımlanır, ardından sayfa konteynerlerle kurulur ve öğeler sol panelden sürüklenerek eklenir. Her bölüm tablet ve mobil modda ayrıca kontrol edilir, son olarak performans ayarları gözden geçirilir.
Elementor ücretsiz mi?
Elementor’un ücretsiz bir sürümü vardır ve temel düzen ile içerik öğelerini sunar. Tema oluşturucu, form ve açılır pencere gibi ek araçlar Elementor Pro ile gelir; hangisinin gerektiği sitenin ihtiyacına bağlıdır.
Elementor'da konteyner nedir?
Konteyner, eski bölüm ve sütun yapısının yerini alan, esnek kutu (flexbox) tabanlı düzen öğesidir. İçindeki öğeleri yatay ya da dikey dizer ve bu yön her cihaz boyutu için ayrı ayarlanabilir.
Elementor'da mobil görünüm nasıl düzenlenir?
Düzenleyicinin üst çubuğundan mobil simgesi seçilir ve öğelerin ayarları bu modda değiştirilir. Ayarlar büyük ekrandan küçüğe miras alındığı için mobilde yalnızca farklı olması gereken değerler düzenlenir.
Elementor siteyi yavaşlatır mı?
Yavaşlığın çoğu sayfanın kuruluş biçiminden gelir; gereksiz iç içe konteynerler, büyük görseller, ağır animasyonlar ve çok sayıda ek eklenti yükü artırır. Elementor’un optimize görsel yükleme ve yerel yazı tipi gibi performans ayarları da açılmalıdır.
Elementor'da global renk nasıl değiştirilir?
Düzenleyicinin üst çubuğundaki Elementor simgesinden Site Ayarları açılır ve Tasarım Sistemi altındaki global renkler düzenlenir. Global renge bağlı tüm öğeler kaydedildiğinde kendiliğinden güncellenir.
Eski Elementor sayfaları konteynere çevrilebilir mi?
Evet, bölüm ve sütunlarla kurulmuş sayfalar Konteynere Dönüştür seçeneğiyle çevrilebilir. Elementor’a göre işlem tek yönlüdür, bu yüzden dönüştürmeden önce yedek alınmalıdır.
Bizi Arayın
Detaylı bilgi için bizi arayın.
Sizi, Biz Arayalım!
Numaranızı paylaşın sizi, biz arayalım!
Diğer Hizmetlerimiz
- › Kurumsal Web Tasarım
- › E-Ticaret Sitesi Yapımı
- › SEO Optimizasyonu
- › WordPress Site Yapımı
- › Google Reklam Yönetimi
- › WordPress Hızlandırma
Hizmet Bölgeleri
- › Sakarya Web Tasarım
- › Tekirdağ Web Tasarım
- › Bursa Web Tasarım
- › Beşiktaş Web Tasarım
- › Şişli Web Tasarım
- › Tuzla Web Tasarım
- › Ümraniye Web Tasarım
- › Kadıköy Web Tasarım
- › İstanbul Web Tasarım
- › Ankara Web Tasarım
- › Ataşehir Web Tasarım
- › Üsküdar Web Tasarım
- › Kartal Web Tasarım
- › Maltepe Web Tasarım
- › Pendik Web Tasarım
- › Kocaeli Web Tasarım
- › İzmir Web Tasarım
- › Antalya Web Tasarım
