Elementor ile WordPress Sayfa Tasarimi Baslangic Rehberi

Elementor, WordPress dünyasında kod yazmadan sayfa tasarlamak isteyenlerin ilk sırada karşılaştığı isim. Klasik WordPress editörünün metin ağırlıklı, blok tabanlı yapısının aksine Elementor size boş bir tuval verir ve tasarladığınız her şeyi anında ekranda gösterir. Bir başlık, bir buton, bir görsel galerisi ya da fiyatlandırma tablosu eklemek için hiçbir HTML veya CSS bilmenize gerek kalmaz; öğeyi sol paneldeki listeden alıp sayfanın istediğiniz yerine bırakırsınız. Bu "gördüğün şeyi elde edersin" (WYSIWYG) mantığı, tasarımı geliştiriciden alıp doğrudan içerik üreticinin eline verdiği için son on yılın en çok indirilen WordPress eklentilerinden biri haline geldi.

Bu rehber, Elementor'a ilk kez oturan birinin gerçekten ihtiyaç duyduğu bilgileri sırayla ele alıyor. Editörün nasıl açıldığından bölüm-sütun-widget hiyerarşisine, şablon kütüphanesinden global renk ve font sistemine, responsive ön izlemeden Tema Oluşturucu'ya (Theme Builder) kadar tüm temel taşları göreceksiniz. Bunun yanında sıkça atlanan ama sitenizin kaderini belirleyen bir konuya, Elementor'un sayfa hızına etkisine ve doğru tema seçiminin neden bu kadar kritik olduğuna da değineceğiz. Amaç, rehberin sonunda kendi ana sayfanızı sıfırdan kurabilecek özgüvene sahip olmanız.

Elementor Nedir ve Free ile Pro Farkı#

Elementor, WordPress'e kurulan bir görsel sayfa oluşturucu (page builder) eklentisidir. Kurulumdan sonra herhangi bir sayfa veya yazının düzenleme ekranında beliren "Elementor ile Düzenle" düğmesine bastığınızda, WordPress'in klasik editörü yerine tam ekran bir tasarım arayüzü açılır. Sol tarafta widget'ların ve ayarların bulunduğu panel, sağ tarafta ise sayfanızın canlı ön izlemesi yer alır.

Elementor iki sürüm halinde gelir. Ücretsiz sürüm (Free), WordPress deposundan kurulur ve temel bölüm/sütun yapısı, 30'a yakın widget, responsive ön izleme ve birkaç hazır şablon içerir. Küçük bir tanıtım sitesi ya da basit bir açılış sayfası için çoğu zaman yeterlidir. Pro sürümü ise ücretli bir lisansla gelir ve asıl gücü orada açığa çıkar: Tema Oluşturucu (header, footer, tekil yazı ve arşiv şablonları), 90'dan fazla ek widget, form oluşturucu, dinamik içerik, WooCommerce widget'ları, pop-up builder ve global widget gibi ciddi özellikler Pro'ya özeldir.

Başlangıç için Free sürümüyle çalışıp mantığı kavramanızı, ihtiyaç büyüdüğünde Pro'ya geçmenizi öneririm. Elementor'un çalışabilmesi için sunucunuzun makul bir PHP sürümü (7.4 ve üzeri, ideali 8.1+) ve yeterli bellek limiti sağlaması gerekir; bu ayrıntıya hız bölümünde döneceğiz.

Editöre İlk Giriş ve Arayüz#

Bir sayfa oluşturmak için WordPress panelinden Sayfalar > Yeni Ekle yolunu izleyin, sayfaya bir başlık verin ve "Elementor ile Düzenle" düğmesine tıklayın. Editör açıldığında ekranı üç ana bölge olarak düşünebilirsiniz.

Sol panel sizin araç kutunuzdur. Üstteki dokuz noktalı ızgara simgesi widget'lar arasında geçiş yapmanızı sağlar; alt kısımdaki ayarlar bir öğeyi seçtiğinizde o öğeye özel seçenekleri gösterir. Sol alt köşedeki hamburger menüsü ise site ayarlarına, global renklere, fontlara ve tema ayarlarına açılan kapıdır.

Sağ taraftaki geniş alan sayfanızın kendisidir. Buraya widget'ları sürükleyip bırakırsınız ve yaptığınız her değişikliği anında görürsünüz. Alt kısımdaki gri çubukta ise en çok kullanacağınız kontroller bulunur: kaydetme/yayınlama düğmesi, responsive mod (masaüstü/tablet/mobil geçişi), geri-ileri al, geçmiş (history) ve tam ekran ön izleme.

İlk denemenizde sayfaya bir bölüm ekleyip içine bir başlık ve bir buton koymanızı tavsiye ederim. Boş sayfada gördüğünüz artı işaretine tıklayıp yapı seçin, ardından sol panelden "Başlık" widget'ını sürükleyip bölümün içine bırakın. Metni doğrudan tuval üzerinde düzenleyebilir, sol panelden yazı tipini, rengini ve boyutunu değiştirebilirsiniz. Bu ilk beş dakika, Elementor'un tüm mantığını anlamanız için yeterlidir.

Bölüm, Sütun ve Widget Hiyerarşisi#

Elementor'un kalbi üç katmanlı bir yapıdadır ve bu yapıyı kavramadan düzgün tasarım yapmak zordur. Bir sayfa yatay şeritlerden oluşur; her şeride Bölüm (Section) denir. Bir bölümün içine bir veya daha fazla Sütun (Column) yerleşir. Sütunların içine ise asıl içerik parçaları olan Widget'lar girer. Yani hiyerarşi şöyledir:

Sayfa
└── Bölüm (Section)        → arkaplan, kenar boşluğu, tam/kutu genişlik
    └── Sütun (Column)     → genişlik yüzdesi, dikey hizalama
        └── Widget         → başlık, görsel, buton, video, form...

Bu yapı sayesinde bir bölümü bir bütün olarak taşıyabilir, arkaplanına renk veya görsel verebilir, iç boşluklarını (padding) ve dış boşluklarını (margin) ayarlayabilirsiniz. Örneğin iki sütunlu bir "hakkımızda" alanı kurmak istediğinizde önce bir bölüm ekler, yapı olarak iki sütunu seçer, sol sütuna bir görsel widget'ı, sağ sütuna bir başlık ve metin widget'ı koyarsınız. Sütunların genişliğini bölme çizgisinden fare ile çekerek ayarlayabilirsiniz; örneğin 40/60 gibi bir oran verebilirsiniz.

Her öğenin ayarları üç sekmede toplanır. İçerik (Content) sekmesi metin, bağlantı, görsel gibi verileri; Stil (Style) sekmesi renk, tipografi, arkaplan, kenarlık gibi görünümü; Gelişmiş (Advanced) sekmesi ise boşluklar, animasyon, özel CSS sınıfı ve responsive görünürlük gibi ince ayarları barındırır. Gelişmiş sekmesindeki "Boşluk" (Margin/Padding) kontrolleri tasarımın nefes almasını sağlayan en önemli araçtır; başlangıçta en çok vakit ayırmanız gereken yer burasıdır.

Elementor'un yeni sürümlerinde bölüm ve sütunun daha esnek bir alternatifi olan Konteyner (Container) yapısı Flexbox tabanlı olarak gelir. Konteynerler daha az DOM öğesi ürettiği için daha hızlı ve daha esnektir; yeni projelere başlarken konteyner tabanlı çalışmayı öğrenmeniz uzun vadede size avantaj sağlar.

Şablon Kütüphanesi ile Hızlı Başlangıç#

Her sayfayı sıfırdan kurmak zorunda değilsiniz. Elementor'un en pratik özelliklerinden biri hazır şablon kütüphanesidir. Boş bir bölüm eklerken beliren klasör simgesine tıkladığınızda iki tür hazır içerik göreceksiniz: Bloklar (tek bir bölümlük hazır tasarımlar, örneğin bir fiyat tablosu veya müşteri yorumları alanı) ve Sayfalar (baştan sona tasarlanmış tam sayfalar).

Beğendiğiniz bir şablonu "Ekle" ile sayfanıza aktarabilir, ardından metinleri ve görselleri kendi içeriğinizle değiştirebilirsiniz. Bu, özellikle tasarım konusunda deneyimsizseniz profesyonel görünümlü bir başlangıç yapmanın en hızlı yoludur. Şablonu ekledikten sonra renklerini global paletinize uydurmayı, gereksiz bölümleri silmeyi ve kendi marka görsellerinizi yerleştirmeyi unutmayın; aksi halde site "hazır tema" gibi durur.

Kendi tasarladığınız bir bölümü ileride tekrar kullanmak isterseniz, bölümün üzerine sağ tıklayıp "Şablon olarak kaydet" diyebilirsiniz. Kaydedilen şablonlar Şablonlar > Kaydedilenler altında toplanır ve başka sayfalarda tek tıkla çağrılır. Sık kullandığınız bir CTA bloğunu ya da iletişim bölümünü bir kez tasarlayıp her sayfada yeniden kullanmak, hem zaman kazandırır hem tutarlılığı korur.

Global Renkler, Fontlar ve Tutarlı Tasarım#

Amatör ve profesyonel Elementor tasarımları arasındaki en görünür fark tutarlılıktır. Bir sayfada beş farklı mavi tonu ve üç farklı font kullanan siteler dağınık görünür. Bu tuzağa düşmemenin yolu, sol alt menüdeki Site Ayarları > Global Renkler ve Global Yazı Tipleri bölümlerini baştan yapılandırmaktır.

Global renklerde markanızın ana rengini, ikincil rengini, metin rengini ve vurgu rengini bir kez tanımlarsınız. Sonrasında herhangi bir widget'ta renk seçerken bu global renkleri seçerseniz, ileride markanızın ana rengini değiştirdiğinizde tüm site otomatik güncellenir. Aynı mantık fontlar için de geçerlidir: birincil başlık fontu, ikincil başlık fontu ve gövde metni fontunu global olarak tanımlar, her yerde bunları kullanırsınız.

Renk paletinizi belirlerken genel bir başlangıç şeması şöyle olabilir:

global_renkler:
  birincil:  "#2563EB"   # ana marka rengi, butonlar
  ikincil:   "#0F172A"   # başlıklar, koyu alanlar
  metin:     "#334155"   # gövde metni
  vurgu:     "#F59E0B"   # dikkat çeken küçük öğeler
tipografi:
  baslik_fontu: "Poppins"
  govde_fontu:  "Inter"
  temel_boyut:  "16px"

Bu disiplini baştan kurmak, ilerledikçe on kez tekrar renk düzeltmekten sizi kurtarır. Font seçimi konusunda çok sayıda ağır Google Font yüklemekten kaçının; iki fontu geçmeyin, çünkü her ek font sitenizin yüklenme süresini uzatır. Tema ve tipografi kararlarının bütünsel yaklaşımı için WordPress tema seçimi rehberimizi incelemenizi öneririm.

Responsive Tasarım ve Mobil Görünüm#

Ziyaretçilerin büyük çoğunluğu sitenize telefondan girer, dolayısıyla mobil görünüm masaüstü kadar önemlidir. Elementor bu konuda güçlü araçlar sunar. Editörün alt çubuğundaki cihaz simgesine tıklayarak masaüstü, tablet ve mobil görünümler arasında geçiş yapabilirsiniz. Her cihaz için farklı ayarlar tanımlayabilmeniz en güçlü yanıdır.

Örneğin masaüstünde 48 piksel olan bir başlık, mobilde çok büyük durabilir. Mobil moda geçip başlık boyutunu 28 piksele düşürdüğünüzde bu değişiklik yalnızca mobili etkiler; masaüstü olduğu gibi kalır. Aynı şekilde masaüstünde yan yana duran iki sütunun mobilde alt alta dizilmesini, boşlukların daralmasını ya da belirli bir öğenin mobilde tamamen gizlenmesini sağlayabilirsiniz.

Mobil optimizasyonunda dikkat etmeniz gereken birkaç nokta var. Bölümlerin dikey iç boşluklarını (padding) mobilde azaltın, aksi halde kullanıcı gereksiz boş alanlar için kaydırma yapar. Yazı boyutlarını okunabilir tutun; mobilde 16 pikselin altına inmeyin. Büyük arkaplan görsellerinin mobilde farklı bir kırpma ile gösterilmesini sağlayın veya mobil için ayrı bir görsel yükleyin. Gelişmiş sekmesindeki "Responsive" bölümünden bir öğeyi yalnızca belirli cihazlarda görünür yapabilirsiniz; masaüstüne özel süslü animasyonları mobilde kapatmak hem performans hem sadelik açısından iyi bir alışkanlıktır.

Yayınlamadan önce mutlaka gerçek bir telefonda kontrol edin. Editördeki mobil ön izleme iyi bir yaklaşımdır ama gerçek cihazdaki dokunma alanları, kaydırma davranışı ve yükleme hızı her zaman birebir aynı değildir.

Tema Oluşturucu (Theme Builder) ile Site Geneli Tasarım#

Elementor'la ilk tanışan çoğu kişi yalnızca tekil sayfalar tasarlar; oysa asıl güç, sitenin tekrar eden parçalarını da Elementor ile yönetmekte gizlidir. Tema Oluşturucu (yalnızca Pro sürümünde), sitenizin başlığını (header), alt bilgisini (footer), blog yazısı şablonunu, arşiv sayfasını ve 404 sayfasını görsel olarak tasarlamanızı sağlar.

Örneğin tüm sitede aynı olan üst menü ve logolu başlık şeridini bir kez tasarlarsınız; Elementor bunu her sayfada otomatik gösterir. Bir blog yazısı şablonu oluşturduğunuzda, yazının başlığı, öne çıkan görseli, içeriği ve yazar bilgisi gibi alanlar dinamik olarak her yazı için doldurulur. Böylece 200 yazınız da olsa hepsi tek bir şablondan beslenir ve tutarlı görünür.

Tema Oluşturucu'da her şablona bir görüntüleme koşulu (display condition) atanır. Yani "bu header tüm sitede görünsün" ya da "bu yazı şablonu yalnızca Blog kategorisindeki yazılarda geçerli olsun" gibi kurallar belirlersiniz. Bu, farklı sayfa türleri için farklı düzenler kurmak isteyenlere büyük esneklik verir. Başlangıç için header ve footer tasarlamakla işe koyulmanızı, blog ve arşiv şablonlarını siteniz büyüdükçe eklemenizi öneririm.

Elementor'un Hıza Etkisi ve Doğru Tema Seçimi#

Elementor'un görmezden gelinemeyecek bir bedeli vardır: ürettiği HTML ve CSS, elle yazılmış koda göre daha ağırdır. Her bölüm, sütun ve widget ek DOM öğeleri ve stil dosyaları üretir. Ağır şablonlar, çok sayıda animasyon ve gereksiz eklentilerle birleştiğinde sayfa yükleme süresi uzar; bu da hem kullanıcı deneyimini hem SEO'yu olumsuz etkiler. İyi haber şu ki, birkaç doğru kararla Elementor hızlı da olabilir.

En kritik karar tema seçimidir. Elementor'u ağır, çok özellikli bir temanın üzerine kurarsanız iki katman birbiriyle çakışır ve site yavaşlar. Bunun yerine Elementor ekibinin geliştirdiği Hello Elementor gibi ultra hafif, neredeyse "boş" bir temayla çalışın. Bu tema kendi başına hiçbir tasarım dayatmaz, sadece Elementor'a temiz bir zemin sunar. Tema seçimi konusunda daha geniş bir bakış için tema seçim rehberimize göz atabilirsiniz.

Hız için diğer önlemler şöyle sıralanabilir. Elementor ayarlarındaki performans seçeneklerinden "geliştirilmiş yükleyici" (improved asset loading) ve kullanılmayan CSS'i sayfa bazında yükleme özelliklerini aktif edin. Görsellerinizi WebP formatında ve doğru boyutta yükleyin; 3000 piksellik bir görseli 400 piksellik bir alana koymak boşuna bant genişliği tüketir. Bir önbellek eklentisiyle sayfaları statik hale getirin. Gereksiz widget ve üçüncü parti eklentilerden kaçının.

Sunucu tarafı da en az yazılım kadar önemlidir. Elementor bellek yoğun bir eklentidir; sunucunuzun PHP bellek limitini en az 256 MB tutmalısınız. Paylaşımlı bir hosting hesabında düşük limitler editörün donmasına veya kayıt sırasında hataya yol açabilir. wp-config.php üzerinden limiti şöyle yükseltebilirsiniz:

; wp-config.php içine eklenir
define( 'WP_MEMORY_LIMIT', '256M' );
define( 'WP_MAX_MEMORY_LIMIT', '512M' );

Sunucu tarafında PHP-FPM ve OPcache'in etkin olduğu, LiteSpeed veya NGINX önbelleğinin devrede olduğu bir ortam Elementor sitelerini gözle görülür biçimde hızlandırır. Clou.TR WordPress hosting paketlerimiz Elementor için önerilen bellek ve PHP ayarlarıyla önceden yapılandırılmış olarak gelir; hangi eklentileri kurmanız gerektiğini planlarken WordPress eklenti önerileri rehberimiz de yol gösterici olacaktır. Trafiğiniz büyüyüp paylaşımlı kaynaklar yetersiz kalırsa, izole kaynak sunan bir sanal sunucu çözümüne geçmek performansı bir üst seviyeye taşır.

Yayınlama, Bakım ve Sık Yapılan Hatalar#

Tasarımınız hazır olduğunda alt çubuktaki yeşil "Yayınla" düğmesine basmanız yeterli. Ancak yayınlamadan önce birkaç kontrol yapmanızı öneririm: tüm bağlantıların doğru çalıştığını, formların gerçekten e-posta gönderdiğini, mobil görünümün düzgün olduğunu ve sayfa hızının kabul edilebilir olduğunu test edin.

Yeni başlayanların en sık düştüğü hatalar arasında her metni ayrı bir widget yapıp yüzlerce öğe biriktirmek, global renk/font sistemini hiç kullanmayıp elle renk girmek, mobil görünümü hiç kontrol etmemek ve devasa görselleri sıkıştırmadan yüklemek geliyor. Bir diğer önemli nokta düzenli yedeklemedir; kapsamlı bir Elementor tasarımı saatlerinizi alır, bir eklenti çakışması ya da güncelleme hatası bunları riske atabilir. Otomatik yedekleme için yedekleme çözümlerimizi ve büyük değişiklikleri önce denemek için bir staging (deneme) ortamını kullanmayı alışkanlık haline getirin.

Son olarak Elementor, WordPress çekirdeği ve PHP sürümü güncellemelerini geciktirmeyin ama üretim sitenizde körlemesine yapmayın. Önce bir kopyada test edin, sorun yoksa canlıya alın. Düzenli bakımı kendiniz üstlenmek istemiyorsanız WordPress bakım hizmetimiz güncelleme, yedek ve güvenlik takibini sizin yerinize yürütür.

Sıkça Sorulan Sorular#

Elementor ücretsiz mi, para ödemem gerekir mi?#

Elementor'un ücretsiz bir sürümü vardır ve WordPress deposundan kurulabilir; temel sayfa oluşturma ihtiyaçlarının çoğunu karşılar. Tema Oluşturucu, form oluşturucu, dinamik içerik ve WooCommerce widget'ları gibi ileri özellikler ise ücretli Pro lisansıyla gelir. Başlangıç için ücretsiz sürümle mantığı öğrenmenizi, ihtiyaç büyüdüğünde Pro'ya geçmenizi öneririm.

Elementor sitemi yavaşlatır mı?#

Elementor, elle yazılmış koda göre daha fazla HTML ve CSS ürettiği için doğası gereği bir miktar ek yük getirir. Ancak hafif bir tema (örneğin Hello Elementor) kullanmak, görselleri WebP formatında optimize etmek, bir önbellek eklentisi çalıştırmak ve Elementor'un performans ayarlarını açmak sitenizi rahatlıkla hızlı tutar. Sorun genellikle Elementor'un kendisi değil, üzerine kurulan ağır tema ve gereksiz eklenti yığınıdır.

Elementor için hangi tema en uygun?#

En güvenli seçim, kendi tasarımını dayatmayan ultra hafif bir temadır. Elementor ekibinin geliştirdiği Hello Elementor bu iş için özel olarak yapılmıştır ve Elementor'a temiz bir zemin sunar. Astra ve GeneratePress gibi hafif temalar da iyi çalışır. Çok özellikli, ağır çok amaçlı temalardan kaçının, çünkü bunlar Elementor ile çakışıp sitenizi yavaşlatır.

Bölüm, sütun ve widget arasındaki fark nedir?#

Bölüm, sayfayı yatay şeritlere ayıran en dış katmandır ve arkaplan, genişlik gibi ayarları taşır. Sütun, bir bölümün içinde içeriği yan yana dizmenizi sağlayan dikey alandır. Widget ise başlık, görsel, buton veya form gibi asıl içerik parçasıdır ve mutlaka bir sütunun içine yerleşir. Bu üç katmanlı yapıyı kavramak, düzenli ve responsive tasarım yapmanın temelidir.

Elementor ile e-ticaret sitesi kurabilir miyim?#

Evet, ancak bunun için WooCommerce eklentisini ve Elementor'un Pro sürümünü birlikte kullanmanız gerekir. Pro sürüm, ürün ızgarası, sepet, ödeme ve tekil ürün sayfası gibi WooCommerce widget'larını içerir ve Tema Oluşturucu ile mağaza şablonlarını görsel olarak tasarlamanıza imkan tanır. Ücretsiz sürüm tek başına e-ticaret için yeterli değildir.

Yaptığım tasarımı başka bir sayfada tekrar kullanabilir miyim?#

Evet. Beğendiğiniz bir bölümün üzerine sağ tıklayıp "Şablon olarak kaydet" diyerek onu kütüphaneye ekleyebilir, ardından başka sayfalarda tek tıkla çağırabilirsiniz. Pro sürümdeki "global widget" özelliği ise bir öğeyi bir kez tasarlayıp her yerde kullanmanızı ve tek noktadan güncellemenizi sağlar. Bu yaklaşım hem zaman kazandırır hem site genelinde tutarlılığı korur.

Kapanış#

Elementor, WordPress'te kod yazmadan profesyonel sayfalar üretmenin en erişilebilir yollarından biri. Bölüm-sütun-widget hiyerarşisini, global renk ve font disiplinini, responsive ön izlemeyi ve Tema Oluşturucu mantığını kavradığınızda, artık hazır temalara mahkum olmadan kendi tasarımınızı kurabilirsiniz. Unutmayın ki bir Elementor sitesinin başarısı yalnızca güzel görünmesine değil, hızlı açılmasına ve düzgün bir altyapıda çalışmasına da bağlıdır.

Bu ikili, hafif bir tema ve güçlü bir sunucu, doğru kurulduğunda Elementor'un tüm potansiyelini açığa çıkarır. Elementor projeniz için önerilen PHP ve bellek ayarlarıyla hazır gelen Clou.TR WordPress hosting paketlerimize göz atabilir, kaynaklarınız büyüdükçe izole performans için sanal sunucu çözümlerimizi değerlendirebilir, kurulum ve güncelleme yükünü bize bırakmak isterseniz WordPress bakım hizmetimizden yararlanabilirsiniz. Tasarımınızı güvenle yayınlamanız için düzenli yedekleme ve gerektiğinde site taşıma desteğimiz de yanınızda.