Elementor Pro ile saydam (transparan), kaydırınca yapışkan (sticky) kalan ve arka plan rengi değişen bir header yapmanın yolu, header konteynerine negatif alt kenar boşluğuyla saydamlık, yüksek bir Z-index ile ön planda kalma, sticky efektiyle kayma sırasında sabitlenme kazandırıp son olarak özel bir CSS koduyla kaydırma anında arka plan rengini değiştirmektir. Bu rehberde iki farklı video anlatımına dayanarak hem temel tekniği hem de kaydırınca header’ı küçülten ek bir bonus efekti adım adım inceliyoruz.
Neden Saydam ve Renk Değiştiren Bir Header Kullanılmalı?
Hero banner’ın hemen üzerinde duran, sayfanın arka planıyla bütünleşen saydam bir header, ilk izlenimde daha modern ve “tasarlanmış” bir görünüm veriyor — özellikle koyu renkli veya görsel ağırlıklı hero alanlarında logo ve menünün ayrı bir kutuda değil, sayfanın kendisinin bir parçası gibi görünmesini sağlıyor. Ancak ziyaretçi aşağı kaydırdıkça arka plan (genelde beyaz metin/açık renkli içerikle) değişirse, saydam header okunaksız hale gelir. Bu yüzden kaydırma anında header’ın arka planına otomatik bir renk kazandırmak, hem estetik hem de kullanılabilirlik açısından gerekli oluyor.
Header’ı Saydam (Transparan) Yapmak İçin Hangi Ayarlar Gerekir?
Elementor Pro’nun tema oluşturucusuyla (Theme Builder) yeni bir header şablonu oluşturduktan sonra, varsayılan olarak header kendi arka planına ve normal akışa sahiptir. Saydam hale getirmek için genel header konteynerinin Gelişmiş sekmesinde iki ayar değiştirilir:
- Kenar (Margin): Alt kenara negatif bir değer verilir (örn. -100px). Bu, header’ı normal akıştan çıkarıp bir sonraki bölümün (hero banner’ın) üzerine bindirir.
- Z-index: Yüksek bir değer (örn. 99) verilir — aksi halde header, üzerine bindiği hero bölümünün arkasında kalıp görünmez olur.
Bu iki ayar birlikte, header’ın kendi arka planı olmadan doğrudan sayfanın (veya hero banner’ın arka plan görselinin) üzerinde “yüzmesini” sağlıyor.
Sticky (Yapışkan) Özelliği Nasıl Aktifleştirilir?
Header konteynerinin Gelişmiş sekmesindeki “Hareket Efektleri” bölümünde bir “Sticky” ayarı bulunuyor:
- Sticky seçeneğini aktif edin.
- Effect Offset değerini girin (örn. 50-100px) — bu, sayfa kaç piksel aşağı kaydırıldıktan sonra sticky/renk değişimi efektinin tetikleneceğini belirler.
- Kaydedip önizlediğinizde header artık kayarken aynı yerde sabit kalır, ancak arka plan rengi olmadığı için içerik üzerinden geçerken görünmez kalmaya devam eder — rengi bir sonraki adımda özel CSS ile ekliyoruz.
Kaydırınca Arka Plan Rengi Özel CSS ile Nasıl Değiştirilir?
Bu noktada iki farklı, birbirinden bağımsız çalışan CSS yaklaşımı kullanılabiliyor — hangisini seçeceğiniz, ne kadar özelleştirme istediğinize bağlı:
Yöntem 1: Sabit Renk Kodu ile Basit Geçiş
Header konteynerinin Gelişmiş sekmesindeki “Custom CSS” alanına, sticky durumdaki arka plan rengini ve geçiş süresini belirten kısa bir kod eklenir. Örneğin koyu bir tona (16, 13, 10 gibi bir hex/rgb değerine) geçiş ve 1 saniyelik yumuşak (ease) bir animasyon tanımlanır. Bu değer istediğiniz herhangi bir renk koduyla değiştirilebilir — markanızın ana rengini kullanmak en tutarlı sonucu verir.
Yöntem 2: Ayarlanabilir Saydamlıkla RGBA Geçişi
İkinci videoda gösterilen yaklaşım, rengi RGB değerleriyle değil RGBA (kırmızı, yeşil, mavi, alfa/saydamlık) formatında tanımlıyor — örneğin rgba(255,255,255,0.9) beyaza yakın, hafif saydam bir arka plan verir. Buradaki dördüncü değer (alfa) 0 ile 1 arasında değiştirilerek saydamlık derecesi ince ayar yapılabiliyor: 0’a yakın değerler neredeyse görünmez, 1 tamamen opak bir arka plan üretiyor. Bu yöntem, sabit bir renk yerine markanıza uygun bir saydamlık seviyesi arayan tasarımcılar için daha esnek bir kontrol sunuyor.
Bonus: Kaydırınca Header ve Logo Küçülme Efekti Nasıl Eklenir?
İkinci video anlatımında, sadece renk değişimiyle yetinmeyip bir adım daha ileri gidiliyor: kaydırma anında hem header’ın yüksekliği hem de logonun boyutu otomatik küçülüyor. Bu, ekstra iki custom CSS kuralıyla uygulanıyor:
- Genel header konteynerine, sticky durumda maksimum yüksekliği (örn. 70px’e) küçülten bir kural eklenir.
- Logoya özel bir CSS sınıfı (örn. “logo”) atanır ve bu sınıfa, sticky durumda görsel genişliğini küçülten (örn. 140px’ten 120px’e) ikinci bir kural eklenir. CSS sınıfı atanmadan bu kural aktifleşmez — bu, sık atlanan bir adımdır.
Sonuç olarak, ziyaretçi aşağı kaydırdıkça header hem renk kazanıyor hem de daha kompakt bir hale küçülüyor — bu, büyük hero banner’lı sitelerde header’ın gereksiz yer kaplamasını önleyen zarif bir detay.
| Özellik | Yöntem 1 (Sabit Renk) | Yöntem 2 (RGBA + Küçülme) |
|---|---|---|
| Header düzeni | 3 alan: logo, menü, buton | 2 alan: logo, menü |
| Renk kontrolü | Sabit hex/rgb kodu | RGBA ile ayarlanabilir saydamlık |
| Ekstra efekt | Yok | Header ve logo küçülme animasyonu |
| Uygunluk | Hızlı, sade bir çözüm isteyenler | Daha fazla özelleştirme isteyenler |
Duyarlı (Responsive) Ayarlarda Nelere Dikkat Edilmeli?
Tablet ve mobilde saydam/sticky header genellikle şu düzenlemeleri gerektiriyor:
- Header’daki bazı öğeler (örneğin ayrı bir buton) dar ekranlarda tamamen gizlenebilir — konteynerin duyarlılık ayarlarından “tablet ve mobilde gizle” seçilerek yapılır.
- Logo ve menü/hamburger ikonunun konteyner genişlikleri genelde %50-%50 olarak ayarlanır, böylece ikisi de yan yana düzgün sığar.
- Mobil menü (hamburger) açıldığında dropdown’ın arka plan ve metin renkleri, header saydamken görünürlüğü koruyacak şekilde (örn. beyaz arka plan + siyah metin) ayrıca ayarlanmalı — aksi halde açılan menü, saydam header’ın arka planıyla karışıp okunaksız olabilir.
Bu Teknik Hangi Site Tipleri İçin Uygun, Hangileri İçin Değil?
Saydam sticky header, özellikle hero banner’ı büyük ve görsel/video ağırlıklı olan sitelerde (ajans, portföy, otel, restoran, etkinlik siteleri gibi) çok işe yarıyor — logo ve menü sayfanın bir parçası gibi görünüp ilk izlenimi güçlendiriyor. Ancak her site için ideal değil:
- İçerik ağırlıklı siteler (blog, haber, dokümantasyon): Ziyaretçi genelde hemen okumaya başladığı için saydamlık fark edilmeden geçilir; klasik, sabit arka planlı bir header burada daha kullanışlı olabilir.
- Çok sayfalı, karmaşık menülü kurumsal siteler: Saydam header’ın okunabilirliği, arka planda değişen farklı sayfa içerikleriyle tutarsız kalabilir; her sayfanın hero alanı aynı kontrastı sağlamıyorsa header bazı sayfalarda okunaksızlaşabilir.
- E-ticaret siteleri: Sepete ekle, arama gibi sık kullanılan header öğelerinin her zaman net görünür olması öncelikli olduğu için, saydamlık yerine sabit ve yüksek kontrastlı bir header genelde daha güvenli bir tercih.
Sık Yapılan Hatalar Nelerdir?
- Z-index vermeyi unutmak: Header saydam hale gelir ama hero bölümünün arkasında kalıp tamamen görünmez olur.
- Sticky efekti aktif ama CSS kodu eklenmemiş olması: Header kayarken sabit kalır ama arka plan rengi hiç değişmez, saydam kalmaya devam eder — içerik üzerinden geçtiğinde okunaksız olur.
- CSS sınıfını widget’a atamayı unutmak: Küçülme efekti kodu eklenir ama logoya “logo” sınıfı verilmezse hiçbir şey değişmez; custom CSS kuralları her zaman bir CSS ID veya sınıfa bağlıdır.
Sık Sorulan Sorular
Saydam sticky header için Elementor Pro şart mı?
Evet, bu teknik Elementor Pro’nun Tema Oluşturucu (Theme Builder) ve Custom CSS özelliklerine dayanıyor; ücretsiz sürümde header’ı tüm sitede otomatik gösterecek bir tema oluşturucu bulunmuyor.
Kaydırma sonrası header rengi hangi noktada değişmeli?
Bu, “Effect Offset” değeriyle ayarlanır; 50-100 piksel arası bir değer çoğu tasarımda doğal bir geçiş noktası sağlıyor — çok erken tetiklenirse header sürekli renk değiştiriyormuş gibi görünür, çok geç tetiklenirse saydam kalma süresi gereğinden uzun olur.
Header küçülme efekti mobilde de çalışır mı?
Evet, custom CSS genel bir kural olduğu için tüm cihazlarda çalışır, ancak mobilde header zaten daha kompakt olduğu için küçülme farkı daha az fark edilir; bu efekti masaüstü deneyimine öncelik vererek eklemek daha mantıklı.
RGBA yerine sabit hex renk kullanmak performansı etkiler mi?
Hayır, ikisi de aynı derecede hafif CSS kurallarıdır; seçim tamamen görsel tercihe bağlıdır — RGBA saydamlık ayarı isteyenler için, sabit hex kodu ise net bir marka rengine geçiş isteyenler için daha uygundur.
Kendi Sitenize Saydam Sticky Header Eklemek İster misiniz?
Bu tekniği kendi projenizde uygularken takılırsanız veya profesyonel bir header tasarımı isterseniz web tasarımı hizmetlerime göz atabilir ya da doğrudan WhatsApp’tan ulaşabilirsiniz. Header’ı sıfırdan klonlama tekniği için Elementor orijinal header tasarımı kopyalama rehberimize, konteyner/Z-index gibi ayarların tüm mantığı için konteyner ayarları rehberimize göz atabilirsiniz.
