WordPress’te Elementor ile Üstbilgi ve Altbilgi Nasıl Düzenlenir

Elementor, WordPress için görsel bir sayfa oluşturucudur; sürükle-bırak arayüzü aracılığıyla özel üstbilgi ve altbilgileri tasarlamanıza, değiştirmenize ve yönetmenize olanak tanır — PHP şablon düzenlemesi veya alt tema gerekmez. İki temel yöntem şunlardır: üstbilgi ve altbilgi şablonlarını yerel olarak işleyen Elementor Pro’nun Tema Oluşturucusu ve ücretsiz katmandaki kullanıcılar için bu işlevselliği kopyalayan ücretsiz Elementor Header & Footer Builder eklentisi.

Her iki yöntem de temanın varsayılan header.php ve footer.php çıktısını geçersiz kılarak özel şablonunuzu WordPress’in şablon hiyerarşisine enjekte eder. Bu ayrımı anlamak, aktif temanız veya önbellek katmanıyla yaşanan çakışmaları giderirken önem taşır.

Başlamadan Önce Ön Koşullar

Herhangi bir şablona dokunmadan önce aşağıdakileri doğrulayın:

• WordPress kurulumunuz 6.0 veya daha yüksek bir sürümde çalışıyor (mevcut kararlı sürümler itibarıyla Elementor’ın minimum gereksinimi).
• Üst temanız kendi üstbilgi/altbilgi mantığıyla geliyorsa alt tema etkin olmalıdır. Bir üst temayı doğrudan düzenlemek, bir sonraki tema güncellemesinde değişikliklerin kaybolmasına neden olur.
• PHP bellek sınırı en az 256 MB olarak ayarlanmış olmalıdır. Elementor’ın düzenleyicisi bellek yoğundur ve düşük bir sınır sessiz kayıt hatalarına yol açar. wp-config.php veya sunucunuzun php.ini dosyasını kontrol edin.
• Değişiklikleri test etmeden önce tüm sayfa önbelleğini temizlemiş olmalısınız. Önbelleğe alınmış HTML, Elementor’da kaydettiğinizden bağımsız olarak eski üstbilgi/altbilgiyi sunmaya devam eder.

WordPress siteniz bir VPS Hosting ortamında çalışıyorsa, bir hosting kontrol paneline güvenmeden php.ini dosyasına doğrudan erişebilir ve memory_limit = 256M ayarını yapabilirsiniz.

Yöntem 1: Elementor Pro Tema Oluşturucusu

Elementor Pro’nun Tema Oluşturucusu, kanonik ve tam destekli çözümdür. Ayrıntılı görüntüleme koşulları, dinamik içerik etiketleri ve WooCommerce öğeleriyle doğrudan entegrasyon sunar.

Adım 1: Elementor Pro’yu Yükleyin ve Etkinleştirin

Elementor Pro’yu resmi Elementor web sitesinden satın alın. Bir ZIP dosyası ve lisans anahtarı alacaksınız.

WordPress kontrol panelinizde Eklentiler > Yeni Ekle > Eklenti Yükle bölümüne gidin. ZIP dosyasını seçin, Şimdi Yükle‘ye tıklayın, ardından Etkinleştir‘e tıklayın. Etkinleştirmenin ardından Elementor > Lisans bölümüne gidin ve lisans anahtarınızı bağlayın. Hem ücretsiz Elementor çekirdek eklentisi hem de Elementor Pro aynı anda etkin olmalıdır — Pro, bağımsız bir eklenti değil, bir eklentidir.

Adım 2: Tema Oluşturucusunu Açın

Şablonlar > Tema Oluşturucusu bölümüne gidin. Arayüz şu bölümlere ayrılmıştır: Üstbilgi, Altbilgi, Tekil, Arşiv, Arama Sonuçları ve Hata 404. Her bölüm, farklı görüntüleme koşullarına sahip birden fazla şablon barındırabilir; bu sayede açılış sayfalarında blog gönderilerinden farklı bir üstbilgi sunabilirsiniz.

Adım 3: Üstbilgi Şablonu Oluşturun veya Düzenleyin

Üstbilgi sekmesine tıklayın, ardından Yeni Ekle‘ye tıklayın. Bir modal, şablona ad vermenizi (örneğin Main Header) ve isteğe bağlı olarak Elementor’ın şablon kitaplığından önceden oluşturulmuş bir blok seçmenizi ister.

Elementor tuvalinde, bir üstbilgi için en yaygın kullanılan widget’lar şunlardır:

• Site Logosu — WordPress çekirdeğiyle senkronize tutarak Görünüm > Özelleştir > Site Kimliği altında ayarlanan logoyu çeker.
• Gezinme Menüsü — Görünüm > Menüler altında kayıtlı herhangi bir menüye başvurur. Hover durumlarını, açılır menüleri ve mobil hamburger davranışını doğrudan widget ayarlarından biçimlendirebilirsiniz.
• Arama Formu — canlı bir arama girişi ekler. Pro kullanıcıları için bu, özel gönderi türlerine bağlanabilir.
• Düğme — “Teklif Al” veya giriş bağlantıları gibi CTA öğeleri için kullanışlıdır.
• Sepet (WooCommerce) — WooCommerce etkinse öğe sayısıyla birlikte dinamik bir sepet simgesi görüntüler.

Kritik tuzak: Bir Bölüm (veya Flexbox modunda Kapsayıcı) sürükleyip genişliğini Full Width olarak ayarlarsanız, üstbilgi arka planı görünüm alanını doğru şekilde kaplar. Boxed olarak bırakırsanız, arka plan rengi içerik genişliğinde durur ve kenarlarda ham sayfa arka planı görünür — yeni kullanıcıların sıkça düştüğü yaygın bir görsel hata.

Adım 4: Yapışkan Üstbilgiyi Yapılandırın

Üstbilginin kaydırma sırasında görünüm alanının üstüne yapışmasını sağlamak için:

1. Tüm üstbilgi düzeninizi saran bölüme/kapsayıcıya tıklayın.
2. Sol panelde Gelişmiş sekmesini açın.
3. Hareket Efektleri altında Yapışkan‘ı etkinleştirin ve Üst olarak ayarlayın.
4. İsteğe bağlı olarak, dikey ekran alanını çok fazla tüketen mobil cihazlarda yapışkanlığı devre dışı bırakmak için bir Yapışkan Açık kesme noktası ayarlayın.

Uç durum: Yapışkan üstbilgiler, bir kullanıcı oturum açtığında WordPress Yönetici Çubuğuyla uyumsuz çalışır. Yönetici çubuğu üste 32px’lik bir ofset ekler. Elementor bunu çoğu durumda otomatik olarak yönetir, ancak yapışkan bölümde özel bir z-index kullanıyorsanız, oturum açmış durumdayken test ederek yönetici çubuğuyla çakışmadığını doğrulayın.

Adım 5: Üstbilgi için Görüntüleme Koşullarını Ayarlayın

Yayınla‘ya tıkladıktan sonra Elementor hemen Görüntüleme Koşullarını tanımlamanızı ister. Bu, en güçlü ve en yanlış anlaşılan özelliklerden biridir.

Dahil Et ve Hariç Tut kurallarını kullanarak birden fazla koşulu üst üste ekleyebilirsiniz. Örneğin: tüm siteyi dahil edin, ancak ödeme sayfasını hariç tutun — dikkat dağıtıcı unsurlardan arındırılmış bir ödeme üstbilgisi isteyen WooCommerce mağazaları için yaygın bir kalıp.

İşiniz bittiğinde Kaydet & Kapat‘a tıklayın.

Adım 6: Altbilgi Şablonu Oluşturun veya Düzenleyin

Altbilgi iş akışı, üstbilgiyle birebir aynıdır. Tema Oluşturucusunda Altbilgi sekmesine tıklayın, ardından Yeni Ekle‘ye tıklayın.

Yaygın altbilgi widget’ları ve düzen kalıpları:

• Telif hakkı bildirimleri için Metin Düzenleyici veya Başlık widget’ı. Yılı manuel olarak güncellemekten kaçınmak için Elementor’ın dinamik içerik sistemi aracılığıyla [current_year] dinamik etiketini kullanın.
• Sosyal medya bağlantıları için Simge Listesi veya Sosyal Simgeler widget’ı.
• İkincil altbilgi gezintisi için Gezinme Menüsü widget’ı (gizlilik politikası, hizmet şartları, site haritası bağlantıları).
• Ödeme rozetleri veya güven mühürleri için Görsel widget’ı.
• Üçüncü taraf eklentilerden çıktı gömmek için Kısa Kod widget’ı (örneğin, bir çerez onayı kısa kodu).

Üstbilgiyle aynı mantığı izleyerek görüntüleme koşullarını ayarlayın, ardından Kaydet & Kapat‘a tıklayın.

Yöntem 2: Elementor Header & Footer Builder (Ücretsiz)

Ücretsiz Elementor katmanındaysanız, Brainstorm Force tarafından geliştirilen Elementor Header & Footer Builder eklentisi, Pro lisansı gerektirmeden neredeyse aynı işlevselliği sunar.

Adım 1: Eklentiyi Yükleyin

Eklentiler > Yeni Ekle bölümüne gidin, Elementor Header & Footer Builder için arama yapın ve Brainstorm Force tarafından geliştirilen eklentiyi yükleyin (yazarı doğrulayın — benzer adlı eklentiler mevcuttur). Etkinleştir‘e tıklayın.

Uyumluluk notu: Bu eklenti çoğu büyük temayla çalışır, ancak aktif temanızın header.php ve footer.php kancalarını desteklemesi gerekir. Twenty Twenty-Three ve Twenty Twenty-Four gibi tamamen blok tabanlı Tam Site Düzenleme (FSE) üzerine inşa edilmiş temalar farklı bir şablon sistemi kullanır ve bu eklentinin enjeksiyon yöntemine yanıt vermeyebilir. Bu durumda Astra, GeneratePress veya Hello Elementor gibi klasik bir temaya geçin ya da Elementor Pro’ya yükseltin.

Adım 2: Üstbilgi Şablonu Oluşturun

Görünüm > Elementor Header & Footer Builder bölümüne gidin, ardından Yeni Ekle‘ye tıklayın.

Şablon oluşturma modalında:

• Tür‘ü Header olarak ayarlayın.
• Açıklayıcı bir ad verin.
• Şablon Oluştur‘a tıklayın.

Standart Elementor düzenleyicisine yönlendirileceksiniz. Tasarım süreci Elementor Pro ile aynıdır — aynı widget’ları kullanın (Site Logosu, Gezinme Menüsü, Düğme vb.).

Adım 3: Görüntüleme Kurallarını Atayın

Yayınladıktan sonra, Görüntüleme Kuralları meta kutusunu bulmak için şablonun WordPress düzenleme ekranında (Elementor tuvali değil) aşağı kaydırın. Bu, Elementor Pro’nun görüntüleme koşulları modalından ayrıdır ve standart WordPress gönderi meta verileri aracılığıyla çalışır.

Seçenekler şunlardır:

• Tüm Site
• Belirli sayfalar (tek tek seçilir)
• Tüm Tekil Sayfalar
• Tüm Arşiv Sayfaları

Ücretsiz eklentinin görüntüleme kuralı sistemi, Elementor Pro’nunkinden daha az ayrıntılıdır — kullanıcı oturum açma durumuna, özel gönderi türü arşivlerine göre hedefleme yapamaz veya hariç tutma kuralları kullanamazsınız. Çoğu küçük site için bu yeterlidir.

Adım 4: Altbilgi Şablonu Oluşturun

Görünüm > Elementor Header & Footer Builder bölümüne dönün, Yeni Ekle‘ye tıklayın ve türü Footer olarak ayarlayın. Tasarım ve görüntüleme kuralı atama süreci, yukarıdaki üstbilgi iş akışıyla aynıdır.

Karşılaştırma: Elementor Pro Tema Oluşturucusu ve Ücretsiz Eklenti

Gelişmiş Özelleştirme Teknikleri

Duyarlı Üstbilgi ve Altbilgi Tasarımı

Elementor’ın düzenleyicisi, tuvalin altındaki simgeler aracılığıyla erişilebilen üç görünüm alanı moduna sahiptir: Masaüstü, Tablet ve Mobil. Her aralık, yazı tipi boyutu ve görünürlük ayarı, kesme noktası başına geçersiz kılınabilir.

Pratik iş akışı:

1. Önce masaüstü düzenini tasarlayın.
2. Tablet görünümüne geçin ve sütun yığınlamasını, yazı tipi boyutlarını ve dolguyu ayarlayın.
3. Mobil görünümüne geçin. Gelişmiş > Duyarlı > Mobilde Gizle seçeneğini kullanarak ikincil gezinme öğelerini gizleyin. Gezinme Menüsü widget’ının Kesme Noktasını Mobile olarak ayarlayarak tam gezinme menüsünü hamburger geçişiyle değiştirin.

Tüm kesme noktalarında aynı dolgu değerlerini kullanmayın. Masaüstünde 40px üst/alt dolgu, 375px genişliğindeki bir telefon ekranında bunaltıcı hale gelir. Mobil dolguyu 15px veya 20px olarak ayarlayın.

Şeffaf veya Kaydırmaya Bağlı Üstbilgi Ekleme

Yaygın bir tasarım kalıbı, kaydırma sırasında katı hale gelen bir hero görüntüsünün üzerinde şeffaf bir üstbilgidir. Elementor Pro bunu Kaydırma Efekti ile birleştirilmiş Yapışkan ayarları aracılığıyla yönetir:

1. Üstbilgi bölümünün arka planını None (şeffaf) olarak ayarlayın.
2. Hareket Efektleri altında Yapışkan‘ı etkinleştirin.
3. Yapışkan ayarları altında Şeffaflık Efektleri‘ni etkinleştirin ve kaydırılmış durum arka plan rengini ayarlayın.

Ücretsiz eklenti için özel CSS gereklidir. Aşağıdakini Görünüm > Özelleştir > Ek CSS bölümüne ekleyin:

/* Transparent header on load */
.hfe-header {
    background-color: transparent !important;
    transition: background-color 0.3s ease;
}

/* Solid header after scroll — requires a JS class toggle */
.hfe-header.scrolled {
    background-color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

Ardından Code Snippets gibi bir eklenti aracılığıyla küçük bir JavaScript kod parçacığı ekleyin:

window.addEventListener('scroll', function () {
    const header = document.querySelector('.hfe-header');
    if (window.scrollY > 50) {
        header.classList.add('scrolled');
    } else {
        header.classList.remove('scrolled');
    }
});

Altbilgide Dinamik Etiketler Kullanma (Pro)

Elementor Pro’nun dinamik etiketleri, değerleri sabit kodlamadan altbilgi metnine canlı veri eklemenizi sağlar. En pratik kullanım durumu telif hakkı yılıdır:

1. Altbilginize bir Metin Düzenleyici widget’ı ekleyin.
2. Metin alanının yanındaki dinamik etiket simgesine (veritabanı simgesi) tıklayın.
3. Site > Geçerli Yıl‘ı seçin.

Çıktı, geçerli dört haneli yıl olarak işlenir ve 1 Ocak’ta otomatik olarak güncellenir — manuel düzenleme gerekmez. Aynı widget’ta statik metin ve dinamik etiketleri birleştirebilirsiniz: © [dynamic: Current Year] Your Company Name. All rights reserved.

Performans Değerlendirmeleri

Özel Elementor üstbilgileri ve altbilgileri her sayfaya ek CSS ve JavaScript yükler. Etkiyi denetleyin:

• Üstbilgi şablonunuzun sayfa yükü başına kaç veritabanı sorgusu eklediğini kontrol etmek için Query Monitor eklentisini kullanın.
• Özel üstbilgiyi etkinleştirmeden önce ve sonra bir Lighthouse denetimi çalıştırın. Logo görüntüsü düzgün boyutlandırılmamışsa veya WebP formatında sunulmuyorsa, kötü yapılandırılmış bir üstbilgi En Büyük İçerikli Boyama’ya (LCP) 200–400ms ekleyebilir.
• CDN kullanıyorsanız, her üstbilgi/altbilgi güncellemesinin ardından CDN önbelleğini temizleyin. Eski CDN düğümleri eski şablon HTML’sini sunmaya devam eder.

Bir cPanel’li VPS ortamında, Elementor’ın şablon çözümlemesinin her istekte eklediği veritabanı sorgusu yükünü azaltmak için Redis veya Memcached ile nesne önbelleğini yapılandırabilirsiniz.

Yaygın Sorunları Giderme

Yayınladıktan sonra üstbilgi görüntülenmiyor:

En sık karşılaşılan neden, eksik veya çakışan bir görüntüleme koşuludur. Şablonlar > Tema Oluşturucusu > Üstbilgi bölümüne gidin, şablonu açın, Yayınla‘ya tıklayın ve görüntüleme koşullarının test ettiğiniz sayfayı kapsadığını doğrulayın. Ayrıca aktif temanızın Elementor’ın kancasını atlayan bir get_header() çağrısını sabit kodlamadığını kontrol edin.

Altbilgi sayfa içeriğiyle çakışıyor:

Bu genellikle altbilgi şablonunun bölümünün negatif üst kenar boşluğuna sahip olduğu veya temanın ana içerik sarmalayıcısının alt dolgusu olmadığı anlamına gelir. Öğeyi tarayıcı DevTools’unda inceleyin ve çakışmaya neden olan CSS kuralını belirleyin.

Elementor düzenleyicisi yüklenmiyor (beyaz ekran veya döndürücü):

Teşhis için PHP bellek sınırını geçici olarak 512 MB’a yükseltin. Ayrıca Elementor çekirdeği ve Pro dışındaki tüm eklentileri devre dışı bırakın, ardından bir çakışmayı belirlemek için bunları tek tek yeniden etkinleştirin.

Mobilde yapışkan üstbilgi atlıyor:

iOS Safari’nin position: sticky ile ve kaydırma sırasında tarayıcı çerçevesinin görünüp kaybolmasından kaynaklanan dinamik görünüm alanı yüksekliği değişiklikleriyle ilgili bilinen sorunları vardır. Geçici çözüm olarak position: fixed ve sayfa gövdesinde telafi edici bir padding-top kullanın ya da yapışkan seçeneği yalnızca masaüstüne ayarlayın.

Özel üstbilgi WooCommerce sayfalarında görünmüyor:

WooCommerce kendi sayfa türlerini kaydeder (Mağaza, Sepet, Ödeme, Hesabım). Elementor Pro’nun görüntüleme koşullarında WooCommerce > Shop Page veya WooCommerce > All WooCommerce Pages öğelerini açıkça dahil etmeniz gerekir — bazı tema yapılandırmalarında genel “Tüm Site” koşulu bunları kapsamaz.

Hosting Ortamı ve Performans

Elementor ile oluşturulan üstbilgi ve altbilginizin performansı, doğrudan sunucunuzun yanıt süresiyle bağlantılıdır. Elementor, şablon verilerini WordPress veritabanında gönderi meta verisi olarak depolar ve sunucuda CSS dosyaları oluşturur. Sınırlı G/Ç’ye sahip paylaşımlı hostingde, şablon güncellemesinin ardından CSS yeniden oluşturma sessizce zaman aşımına uğrayabilir ve sitenizde güncel olmayan stiller kalabilir.

Elementor kullanan üretim WordPress siteleri için, en az 2 CPU çekirdeği ve 4 GB RAM’e sahip bir VPS Hosting ortamı, sorunsuz düzenleyici performansı ve hızlı CSS oluşturma için gereken esnekliği sağlar. Özel üstbilgi ve altbilgiye sahip bir WooCommerce mağazası işletiyorsanız, Dedicated Sunucular kaynak çekişmesini tamamen ortadan kaldırır.

Hosting katmanınızdan bağımsız olarak, WordPress kurulumunuzu her zaman geçerli bir SSL Sertifikası ile eşleştirin. HTTP varlıklarının bir HTTPS sayfasına yüklenmesiyle tetiklenen karışık içerik uyarıları, Elementor’ın düzenleyici arayüzünü bozar ve bazı tarayıcılarda üstbilginizdeki varlıkların (logolar, simgeler) yüklenmesinin başarısız olmasına neden olur.

Karar Matrisi: Hangi Yöntemi Kullanmalısınız?

Yayına Almadan Önce Pratik Kontrol Listesi

• Görüntüleme koşullarının 404 ve arama sonuçları sayfaları dahil tüm hedeflenen sayfa türlerini kapsadığını doğrulayın.
• Üstbilgi ve altbilgiyi yalnızca tarayıcı DevTools emülasyonuyla değil, gerçek bir mobil cihazda test edin.
• Logonun WebP görüntüsü kullandığını ve düzen kaymasını (CLS) önlemek için Görsel widget’ında açık width ve height özelliklerinin ayarlandığını doğrulayın.
• Şablon yayınlandıktan sonra tüm gezinme menüsü bağlantılarının doğru şekilde çözümlendiğini kontrol edin.
• Tüm önbellek katmanlarını temizleyin: sunucu tarafı önbelleği, CDN önbelleği ve tarayıcı önbelleği.
• LCP veya CLS gerileme olmadığını doğrulamak için hem masaüstü hem de mobilde Lighthouse çalıştırın.
• Elementor Pro dinamik etiketleri kullanıyorsanız, oturumu kapatmış bir kullanıcı olarak görüntülendiğinde doğru çıktıyı işlediklerini doğrulayın.
• Altbilgi telif hakkı yılı dinamik etiketinin etkin olduğunu ve sabit kodlanmadığını doğrulayın.
• WordPress Yönetici Çubuğu görünür durumdayken (oturum açmış durum) yapışkan üstbilgi davranışını test edin.
• WooCommerce sayfalarının (varsa) doğru görüntüleme koşuluyla kapsandığını doğrulayın.

SSS

Elementor Pro olmadan Elementor ile üstbilgi ve altbilgileri düzenleyebilir miyim?

Evet. Brainstorm Force tarafından geliştirilen ücretsiz Elementor Header & Footer Builder eklentisini yükleyin. Ücretsiz Elementor düzenleyicisiyle entegre olur ve görüntüleme kurallarıyla özel üstbilgi ve altbilgiler tasarlamanıza olanak tanır; ancak Elementor Pro’nun Tema Oluşturucusuna kıyasla daha az hedefleme seçeneği sunar.

Elementor üstbilgimi yayınladıktan sonra neden WordPress sitemde görünmüyor?

En yaygın neden, yapılandırılmamış veya yanlış bir görüntüleme koşuludur. Şablonu Tema Oluşturucusunda açın, Yayınla‘ya tıklayın ve görüntüleme koşulunun en azından Tüm Site veya hedeflediğiniz belirli sayfa türü olarak ayarlandığından emin olun. Ayrıca üst temanın şablon dosyalarında sabit kodlanmış tema düzeyi bir üstbilgi olmadığını doğrulayın.

Elementor’ın özel üstbilgisi temanın varsayılan üstbilgisinin yerini alır mı?

Evet. Bir görüntüleme koşulu eşleştiğinde, Elementor elementor/theme/before_do_header kancasına bağlanır ve temanın get_header() çıktısını tamamen değiştirir. Temanın orijinal header.php dosyası bu sayfalar için atlanır.

Özel bir Elementor üstbilgisi sitemin hızını yavaşlatır mı?

Optimize edilmezse yavaşlatabilir. Elementor, şablon başına kendi CSS dosyasını yükler. Logonun sıkıştırılmış bir WebP görüntüsü olduğundan emin olun, gereksiz widget yüklemekten kaçının ve her sayfada yalnızca kullanılan widget’lar için CSS yüklemek amacıyla Elementor > Ayarlar > Gelişmiş bölümündeki Elementor’ın Geliştirilmiş Varlık Yükleme seçeneğini etkinleştirin.

Elementor ile WordPress’te farklı sayfalar için farklı üstbilgiler kullanabilir miyim?

Evet, Elementor Pro ile. Birden fazla üstbilgi şablonu oluşturun ve her birine belirli bir görüntüleme koşulu atayın — örneğin, ana sayfa için bir üstbilgi, blog gönderileri için başka bir üstbilgi ve ödeme sayfası için minimal bir üstbilgi. Pro Tema Oluşturucusu koşulları öncelik sırasına göre değerlendirir; bu nedenle daha spesifik koşullar daha geniş olanları geçersiz kılar.