Elementor’un kendi resmi sitesindeki header (üst menü) tasarımını, JetKit for Elementor eklentisinin demo oluşturucusuyla ve konteyner/flexbox mantığıyla birebir kopyalamak mümkündür — logo, ortalanmış menü ve sağa hizalı butonlardan oluşan bu şık header yapısı, sıfırdan kod yazmadan tamamen görsel araçlarla inşa edilebiliyor. Bu rehberde bu header’ın nasıl adım adım kurulduğunu, renklendirildiğini ve mobil uyumlu hale getirildiğini video anlatımıyla gösteriyoruz.

Header Oluşturmak İçin Hangi Eklenti Kullanılıyor?

Bu teknik, JetKit for Elementor eklentisinin demo/tema oluşturucu özelliğini kullanıyor. Bu araç, sitenizin tamamında (veya belirlediğiniz koşullara göre belirli sayfalarda) görünecek özel header/footer tasarımları oluşturmanızı sağlıyor.

Header Yapısı Adım Adım Nasıl Kurulur?

1. JetKit panelinden demo oluşturucu > Header bölümüne gelip “Add Header” ile yeni bir header oluşturun.
2. Header’a bir isim verin ve “tüm sitede görünsün” koşulunu (condition) ayarlayın.
3. Elementor düzenleyicisinde, içeriği alta hizalı bir konteyner açın; bunun içine “header” isimli, yönü yatay olan bir ana gövde konteyneri ekleyin.
4. Bu gövdenin içine sağ tık > “yeni konteyner ekle” ile bir tane konteyner ekleyip Ctrl+D ile iki kez çoğaltarak 3 eşit konteyner (logo, menü, butonlar) oluşturun.
5. Logo konteynerine bir görsel elementi ekleyip logonuzu yükleyin, boyutunu ayarlayın (video anlatımında 40px, sonra 28-32px aralığına küçültülüyor).
6. Menü konteynerine bir “Nav Menu” elementi ekleyip menünüzü (Main) seçin, ortalı hizalayın.
7. Buton konteynerine bir düğme elementi ekleyip sona hizalayın; ardından ikinci bir düğme daha ekleyip (örneğin “Login”) yan yana yerleştirin.

Renk ve Stil Ayarları Nasıl Yapılır?

Menü öğelerinin metin rengi, üzerine gelindiğinde (hover) değişen renk ve aktif durumdaki renk ayrı ayrı ayarlanabiliyor. Video anlatımında şu adımlar izleniyor:

• Menü metin rengi beyaz, hover ve aktif renk ise koyu tonlarda ayarlanıyor.
• Hover durumunda beliren arka plan rengine düşük bir opaklık (%5-8 civarı) verilerek ince, şık bir vurgu efekti elde ediliyor.
• Menü öğelerine hafif bir border-radius (köşe yuvarlaklığı, video anlatımında 8px) ekleniyor.
• Ana buton siyah arka plan + beyaz metinle, ikinci (Login) buton ise şeffaf arka plan + “float” (hafif yukarı kalkma) hover efektiyle ayrıştırılıyor.
• Header’ın genel arka plan konteynerine kenarlık boşluğu (video anlatımında 12px) verilerek header’ın sayfanın kenarlarına yapışmaması sağlanıyor.

Mobil/Tablet Uyumluluğu Nasıl Sağlanır?

Responsive ayarlar, header tasarımının en kritik kısımlarından biri:

1. Tablet görünümünde: Menü konteynerinin sırası en alta alınıyor, genişliği yüzde bazlı (video anlatımında %20) ayarlanarak logo ile yan yana sığdırılıyor.
2. Mobilde: Buton konteynerinin “duyarlılığı” (responsive visibility) kapatılarak butonlar gizleniyor, sadece logo ve hamburger menü ikonu kalıyor.
3. Hamburger menü stili: Açılan menünün arka plan rengi, ikon rengi ve kenarlık rengi ayrı ayrı özelleştiriliyor; açılan panelin arka planı ana renk temasıyla uyumlu hale getiriliyor.
4. Mobil logo: Açılan mobil menüde görünecek logo ayrı bir ayardan (mobil menü ayarları) tam boy olarak seçiliyor.

Bu Teknik Kimler İçin Faydalı?

Bu adım adım konteyner/flexbox tabanlı yaklaşım, Elementor’un widget kütüphanesindeki hazır header şablonlarıyla sınırlı kalmak istemeyen, tamamen özgün ve marka kimliğine uygun bir header tasarlamak isteyen kullanıcılar için değerli bir referans. Aynı zamanda, konteyner iç içe yerleştirme, flexbox yön ayarları ve responsive görünürlük ayarları gibi Elementor’un temel yapı taşlarını pratik bir örnek üzerinden öğrenmek isteyenler için de iyi bir alıştırma niteliğinde — bu teknikleri bir kez header’da uygulayıp anladıktan sonra, aynı mantığı footer, hero bölümü veya kart dizilimleri gibi sitenin başka alanlarında da tekrar tekrar kullanabilirsiniz.

Konteyner ve Flexbox Mantığı Neden Önemli?

Bu header tekniğinin temelinde yatan mantık, Elementor’un modern “konteyner” sistemi ve flexbox düzenidir. Eski Elementor sürümlerinde satır/sütun (section/column) yapısı kullanılırken, konteyner sistemi web standartlarında yaygın olan flexbox mantığını doğrudan görsel arayüze taşıyor. Bir konteynerin yönünü (yatay/dikey) belirlemek, içindeki elemanları otomatik olarak yan yana veya alt alta dizilmesini sağlıyor — bu da üç ayrı konteyner (logo, menü, buton) oluşturup sadece ana konteynerin yönünü yatay yaparak, üç öğenin otomatik olarak yan yana sıralanmasını mümkün kılıyor. Bu yaklaşımı öğrenmek, sadece header için değil, footer, kart dizilimleri veya herhangi bir yan yana/alt alta düzen gerektiren tasarım için de kullanılabilecek temel bir beceri kazandırıyor.

Sık Yapılan Hatalar ve Çözümleri

• Elemanların dikey/yatay ortalanmaması: Video anlatımında sıkça karşılaşılan bir durum — bir konteynerin içindeki elemanı ortalamak için hem konteynerin kendi hizalama ayarını hem de içindeki elemanın “öğeleri hizala” ayarını birlikte kontrol etmek gerekiyor.
• Hover renginin görünmemesi: Bazen doğru ayar bulunamayıp yanlış bir alanda (örneğin “Menu Height” yerine “Menu Item Style”) arama yapılabiliyor — Elementor’un stil panelinde ilgili ayarı ararken sabırlı olmak ve farklı alt sekmeleri kontrol etmek gerekiyor.
• Logonun mobilde kaybolması: Mobil menü açıldığında logo görünmüyorsa, bu genellikle ayrı bir “mobil logo” ayarının unutulmuş olmasından kaynaklanıyor — masaüstü ve mobil logo ayarlarının ayrı ayrı yapılandırılması gerektiğini unutmamak gerekiyor.
• Renk kontrastı sorunları: Arka plan rengini değiştirdikten sonra üzerindeki metin/ikon renklerini güncellemeyi unutmak, okunamayan bir header’a yol açabiliyor — arka plan her değiştiğinde üzerindeki tüm renkleri yeniden kontrol etmek iyi bir alışkanlık.

Sık Sorulan Sorular

JetKit for Elementor ücretsiz mi?

Temel demo oluşturucu ve header/footer koşullu görüntüleme özellikleri ücretsiz sürümde mevcuttur; gelişmiş özellikler için premium sürüm gerekebilir.

Bu header tasarımı için mutlaka JetKit mi kullanmam gerekiyor?

Video anlatımında JetKit kullanılıyor, ancak benzer koşullu header/footer oluşturma özelliğine sahip başka eklentilerle de (veya Elementor Pro’nun kendi tema oluşturucusuyla) benzer bir yapı kurulabilir.

Header’ı sadece belirli sayfalarda göstermek mümkün mü?

Evet, JetKit’in “condition” (koşul) ayarı sayesinde header’ın tüm sitede mi yoksa belirli sayfa/kategorilerde mi görüneceğini seçebilirsiniz.

Bu tasarımı kendi logom ve renklerimle nasıl uyarlarım?

Video anlatımındaki adımları takip edip logo görselini kendi logonuzla değiştirmeniz, renk ayarlarını (arka plan, hover, buton renkleri) markanıza uygun tonlarla güncellemeniz yeterli.

Mobilde menü tasarımını özelleştirmek karmaşık mı?

Birden fazla ayrı ayar (arka plan, ikon rengi, kenarlık, logo) gerektirdiği için biraz detaylı, ancak her ayar tek tek ve görsel olarak yapılabildiği için teknik bilgi gerektirmiyor.

---

Markanıza Özel Bir Header Tasarımı İster misiniz?

Kendi markanıza özgü bir header/footer tasarımı veya genel site tasarımı konusunda destek isterseniz web tasarımı hizmetlerime göz atabilir ya da doğrudan WhatsApp’tan ulaşabilirsiniz. Elementor’a yeni başlıyorsanız Elementor’a giriş rehberimize göz atabilirsiniz.