Elementor Pro satın almadan, tamamen ücretsiz bir eklenti olan Ultimate Addons for Elementor (eski adıyla Elementor Header Footer Builder) ile sitenizin tamamında görünecek özel bir header ve footer tasarlayabilirsiniz — logo, menü ve buton içeren bir header ile logo, linkler, hizmetler ve iletişim bilgilerini içeren çok bölümlü bir footer, tamamen görsel araçlarla ve konteyner mantığıyla inşa ediliyor. Bu rehberde bu header/footer çiftinin nasıl adım adım oluşturulduğunu video anlatımıyla gösteriyoruz.
Ultimate Addons Eklentisi Nasıl Kurulur?
- WordPress panelinde Eklentiler > Yeni Ekle yolunu izleyip “Ultimate Addons” arayın.
- Karşınıza çıkan (eski adıyla “Elementor Header Footer Builder” olarak da bilinen) eklentiyi kurun ve etkinleştirin.
Header Nasıl Oluşturulur?
- UAE (Ultimate Addons Elementor) panelinden yeni bir şablon ekleyip başlık verin, türünü “Header” olarak seçin.
- “Display On” ayarından header’ın nerede görüneceğini belirleyin — tüm site için “Entire Website” seçilir.
- “User Roles” ayarından kimlerin göreceğini belirleyin — herkes için “All” seçilir.
- Yayınlayıp Elementor ile düzenlemeye başlayın: 3 alanlı (logo, menü, buton) bir konteyner oluşturun, genişliğini 1440px olarak ayarlayın.
- Logo alanına görsel ekleyip sola hizalayın; buton alanına “Teklif Al” gibi bir CTA butonu ekleyip sağa hizalayın.
- Menü alanına bir “Nav Menu” elementi ekleyin — menünüz hazır değilse Görünüm > Menüler‘den önce bir menü oluşturup sayfalarınızı ekleyin.
Header Stil Ayarları Nasıl Yapılır?
- Menü metin rengini, hover rengini ve aktif renk durumunu ayrı ayrı özelleştirin.
- Menünün genel hizalamasını (layout > alignment) ortalayın.
- Açılır (dropdown) alt menülerin üst mesafesini (top distance) ayarlayarak, menünün butonun/logonun üzerine binmesini önleyin.
Header Mobil/Tablet Uyumu Nasıl Sağlanır?
- Tablette: Menü konteynerinin sırasını sona alıp genişliğini küçültün (örneğin %50’den %10’a), kalan genişliği butona verin.
- Mobilde: Buton konteynerini “duyarlılık” (responsive visibility) ayarından mobilde gizleyin; logo ve menü konteynerlerinin genişliğini %50-%50 paylaştırın, menüyü sağa hizalayın.
Footer Nasıl Oluşturulur?
Footer için de aynı UAE panelinden yeni bir şablon (türü “Footer”) oluşturulur. Video anlatımındaki örnek footer 4 ana alandan oluşuyor:
- Logo + açıklama + sosyal medya ikonları: Koyu arka planlı bir konteynerde logo, kısa bir slogan metni ve dairesel sosyal medya ikonları.
- Linkler: “Hakkımızda”, “Hizmetlerimiz”, “Blog”, “İletişim” gibi hızlı erişim linklerinin bulunduğu bir liste.
- Hizmetlerimiz: Sunulan hizmetlerin (kurumsal web tasarım, dijital pazarlama, e-ticaret gibi) listelendiği ikinci bir link grubu.
- İletişim: Adres, telefon ve e-posta bilgilerinin ikonlarla birlikte listelendiği alan.
Bu dört alanın altına, beyaz arka planlı ayrı bir konteynerde copyright metni ekleniyor. Tüm bu bölümler responsive olarak test edilip tablet/mobilde boşluk ve font boyutları küçültülerek uyarlanıyor — özellikle mobilde dört alanın alt alta sıkışmadan, yeterli boşlukla ayrılarak okunabilir kalması önemli bir detay.
Header ile Footer Arasındaki Tasarım Farkları
| Özellik | Header | Footer |
|---|---|---|
| Alan sayısı | 3 (logo, menü, buton) | 4 (marka, linkler, hizmetler, iletişim) + copyright |
| Arka plan | Açık/nötr | Koyu (üst kısım) + beyaz (copyright) |
| Ana işlev | Navigasyon + birincil CTA | Bilgi erişimi + marka güveni |
| Mobilde öncelik | Logo + hamburger menü | Alt alta dizilim, tüm bilgi korunur |
Bu Teknik Elementor Pro Gerektiriyor mu?
Hayır — video anlatımında özellikle vurgulandığı gibi, Ultimate Addons ile header/footer oluşturmak tamamen ücretsiz bir yöntem. Bu, Elementor Pro’nun kendi tema oluşturucusuna (Theme Builder) bütçe ayırmak istemeyen ancak yine de sitenin tamamında tutarlı, özel bir header/footer kullanmak isteyen kullanıcılar için pratik bir alternatif sunuyor. Özellikle yeni başlayan freelancer’lar veya bütçesi kısıtlı küçük işletmeler için, aylık/yıllık bir Elementor Pro lisansı almadan profesyonel görünümlü bir header/footer elde etmek, projenin genel maliyetini düşürmenin somut bir yolu.
Neden Header ve Footer’ı Ayrı Bir Eklentiyle Yönetmek Mantıklı?
WordPress’in standart yapısında header ve footer, kullanılan temanın kodunda sabit olarak tanımlıdır — değiştirmek için ya temanın kendi özelleştirme seçeneklerine bağlı kalırsınız ya da kod düzeyinde müdahale gerekir. Ultimate Addons gibi bir “header/footer builder” eklentisi, bu sınırlamayı ortadan kaldırıp header/footer’ı da tıpkı sitenizin diğer sayfaları gibi Elementor ile serbestçe tasarlamanızı sağlıyor. Bu yaklaşımın büyük avantajı, tema değiştirseniz bile (bazı durumlarda) header/footer tasarımınızı koruyabilmeniz ve farklı sayfa türleri için farklı header/footer varyasyonları (örneğin bir kampanya sayfası için sadeleştirilmiş bir header) oluşturabilmenizdir.
Konteyner Genişliğinin (1440px) Önemi
Video anlatımında header konteynerine 1440 piksel gibi sabit bir genişlik veriliyor. Bu, çoğu modern monitörün standart genişliğine yakın bir değer olduğu için, header içeriğinin çok geniş ekranlarda aşırı yayılmasını, çok dar ekranlarda ise sıkışmasını önlüyor. Bu tür bir “maksimum genişlik” yaklaşımı, header ve footer gibi sitenin her sayfasında görünen kritik alanlarda tutarlı bir görünüm sağlamak için yaygın bir tasarım pratiği — konteynerin kendisi ekranın tamamını kaplasa da, içindeki asıl içerik (logo, menü, buton) bu sabit genişlik içinde ortalanmış kalıyor.
Sık Sorulan Sorular
Ultimate Addons ücretsiz mi?
Evet, header/footer oluşturma dahil temel özellikler ücretsiz sürümde mevcuttur.
Bu eklenti Elementor Pro’nun yerini tutar mı?
Header/footer oluşturma açısından benzer bir işlevi ücretsiz sunuyor; ancak Elementor Pro’nun sunduğu diğer gelişmiş özellikler (dinamik içerik, form oluşturucu gibi) bu eklentinin kapsamı dışında.
Header’ı sadece belirli sayfalarda gösterebilir miyim?
Evet, “Display On” ayarından header’ın tüm sitede mi yoksa belirli sayfa türlerinde mi (yazılar, 404 sayfası gibi) görüneceğini seçebilirsiniz.
Bu yöntem ile JetKit ile header yapmak arasındaki fark nedir?
İkisi de benzer bir amaca hizmet ediyor (ücretsiz, koşullu header/footer oluşturma), farklı eklenti arayüzleri sunuyorlar — detaylar için JetKit ile header kopyalama rehberimize bakabilirsiniz.
Footer’daki sosyal medya ikonlarını nasıl özelleştiririm?
İkon listesi elementinde her ikonun rengini, boyutunu, şeklini (kare/daire) ve hover efektini (büyüme gibi) ayrı ayrı özelleştirebilirsiniz.
Sitenize Özel Header/Footer Tasarımı İster misiniz?
Ücretsiz veya premium araçlarla özel bir header/footer tasarımı ya da genel site tasarımı konusunda destek isterseniz web tasarımı hizmetlerime göz atabilir ya da doğrudan WhatsApp’tan ulaşabilirsiniz. Farklı bir yöntemle header tasarımı için JetKit ile header kopyalama rehberimize göz atabilirsiniz.
