Elementor ile WordPress Başlığınızı Nasıl Düzenlersiniz?

Yayınlanan: 2022-02-16

Web sitesi başlığı, kullanıcıların sitenizle ilk etkileşim kurduğu alandır. Esas olarak web sitesinde gezinmek için kullanılır, böylece ziyaretçiler farklı sayfaları ziyaret ederken net bir yön alır. Ayrıca burayı markalaşmak, CTA butonu eklemek ve gerekli birçok bilgiyi saklamak için kullanabilirsiniz.

Varsayılan olarak, WordPress temaları bir başlık için genel bir tasarım formatı sağlar. Ancak özel bir başlık oluşturmak istiyorsanız, ana tema dosyalarını düzenleyebilirsiniz. Bu, teknik olmayan bir kullanıcı için çok zaman alıcı ve zordur.

En kolay çözüm ne olabilir?

Elementor, sürükle ve bırak özellikleriyle web sitenizi tasarlama görevlerinizi her zamankinden daha kolay hale getiren popüler sayfa oluşturucu eklentisidir. Elementor'u kullanarak çok verimli bir şekilde bir başlık oluşturabilir ve özelleştirebilirsiniz.

Bu blogda, size Elementor'da üstbilgiyi nasıl düzenleyeceğiniz konusunda adım adım bir kılavuz göstereceğiz.

Bugün şunları yapmayı öğreneceksiniz:

  • Elementor ile mevcut web sitesi başlığını düzenleyin
  • Önceden hazırlanmış Elementor başlık şablonlarını kullanarak başlıklar oluşturun
  • Yararlı widget'ları kullanarak sıfırdan Elementor başlığı tasarlayın

Kılavuzun sonunda, web sitesi tasarım yeteneğinizi bir sonraki seviyeye taşıyacak bir bonus puan alacaksınız. Bu yüzden kaçırmayın.

Elementor ile Mevcut Web Sitesi Başlığı Nasıl Düzenlenir

How to Edit Header in Elementor

Elementor web sitemizin mevcut başlığını nasıl düzenleyeceğinizi göstermenin zamanı geldi. Burada, başlığımızı tasarlamak için Elementor ücretsiz ve profesyonel widget'larını kullanıyoruz.

Yani bu iki eklentiyi yüklemeniz gerekiyor.

  • Elementor (Ücretsiz)
  • Elementor Pro

İlk olarak, mevcut web sitemizin başlığına bir göz atın. Web sitemizin logosunu ve başlığa bir gezinme menüsünü eklediğimizi fark ettiniz.

Default Header

Çok yaygın bir başlık gibi görünüyor, bu yüzden düzenlemeye karar verdik. Şimdi, mevcut başlığa bir Düğme ekleyeceğiz. Ayrıca, bir Arama Formu , Sosyal Kanallarımızı ve ofis Adresimizi görüntülemek için bir üst başlık tasarlayın.

İstenilen görünümü elde etmek için sadece 5 adım gerekir.

  • 1. Adım: Bir Düğme Ekle
  • 2. Adım: Arama Formunu Ekleyin ve Özelleştirin
  • 3. Adım: Sosyal Simge Ekleyin ve Özelleştirin
  • 4. Adım: Harita Simgesi Ekle
  • Adım 5: Başlık Ekle ve Özelleştir

1. Adım: Bir Düğme Ekle

Buton eklemek için nav menüsünün sağ tarafına A New Column eklememiz gerekiyor. Elementor'da nasıl yeni bir sütun ekleyeceğinizi öğrenmek için aşağıdaki resme bakın.

Add a New Column

Şimdi, Elementor widgets galerisinden Düğme widget'ını bulun. Ardından, yeni sütuna sürükleyip bırakın.

Add Button Widget

İçerik alanında, düğme içeriğini eklemek için gerekli tüm seçenekleri alırsınız. Burada, Varsayılan, Bilgi, Başarı, Uyarı ve Tehlike gibi düğme Türünü ayarlayabilirsiniz. Metin butonunu yazabilir, Bağlantı ekleyebilir, Hizalama ve Boyut butonlarını yönetebilirsiniz.

Ayrıca, bir Simge ekleyebilir ve Simge Aralığını ihtiyaca göre kontrol edebilirsiniz. Ancak, düğmeye özel kod eklemenize yardımcı olacak bir Düğme Kimliği ekleyebilirsiniz.

Manage Button Content

Düğme varsayılan stilini özelleştirmek için Stil alanına gidebilirsiniz. Burada, aşağıdaki stil seçeneklerini kullanarak düğme tasarımını değiştirebilirsiniz.

  • Sabit Boyut
  • tipografi
  • Metin gölgesi
  • Metin Rengi
  • Arka Plan Türü
  • Kenarlık Türü
  • Sınır Yarıçapı
  • Kutu Gölge
  • Dolgu malzemesi
Customize Button Style

Üst başlığımızı eklemenin zamanı geldi. Bunu yapmak için, başlığın üst kısmında üç sütunla birlikte yeni bir bölüm eklememiz gerekiyor. Elementor'da nasıl yeni bir bölüm ekleneceğini görelim.

Add New Section & Columns

2. Adım: Arama Formunu Ekleyin ve Özelleştirin

Yeni bölümü başarıyla ekledikten sonra, sağ sütuna Arama Formu widget'ını ekleyeceksiniz.

Add Search Form Widget

İçerik bölümüne giderek varsayılan arama formu içeriğini değiştirebilirsiniz. Klasik, Minimal ve Tam Ekran gibi arama formu dış görünümünü seçebilirsiniz. Yer Tutucuyu yazabilirsiniz. Ayrıca, Düğme Türü Simgesini veya Metin ve Simge Türü Arama ve Ok'u ayarlayın. Ancak Simge Boyutunu burada içerik alanında yönetebilirsiniz.

Search Form Content

Stil alanında, arama formu Giriş stilini değiştirebilir ve ayrıca Düğme Metni Rengi, Arka Plan Rengi, Simge Boyutu ve Genişliği özelleştirebilirsiniz.

Customize Search Form

3. Adım: Sosyal Simge Ekleyin ve Özelleştirin

Sosyal kanallarımızı üst başlığa göstermek istiyoruz. Bu nedenle, Elementor Sosyal Simgeler widget'ını orta sütuna ekledik.

Add Social Icons Widget

+ ÖĞE EKLE düğmesini tıklayarak sosyal hesapları verimli bir şekilde ekleyebilirsiniz. İhtiyacınıza göre bir Öğeyi Çoğaltabilir ve Kaldırabilirsiniz. Ayrıca Yuvarlak, Kare ve Daire gibi özel Şeklinizi seçin. Ve Sütunları yönetin ve Hizalamayı ayarlayın.

Conetnt of Social Icons

Bir Öğe, içerik eklemek için önce bir Öğe açmanız gerekir. Ardından sosyal Simgenizi ekleyebilir, bir Bağlantı ekleyebilir ve Rengi tanımlayabilirsiniz.

Add Social Item

Stil alanı, Simge Rengi, Boyut, Dolgu, Aralık, Satır Boşluğu, Kenarlık Türü ve Kenar Yarıçapını özelleştirmenize olanak tanır. Burada, Sosyal Simgelerinize canlı bir görünüm kazandırmak için Simge Vurgulu Animasyonunuzu da seçersiniz.

Customize Social Icons

Üst başlığa ofis adresimizi eklemenin zamanı geldi. Konum Man Simgesi ve bir Başlık eklemek istiyoruz. Bu nedenle, üst başlığın sol sütununa bir İç Bölüm eklemeniz gerekir. Widget'ı sol taraftaki Elementor widget'ları panelinde bulabilir ve sütuna ekleyebilirsiniz.

Add Inner Section

4. Adım: Harita Simgesi Ekle

Şimdi üst başlığın sol üst sütununda iki sütunumuz var. İlk olarak, Simge widget'ını ekledik. Ardından bir Harita Simgesi ekledik ve Hizalamasını ayarladık.

Add Lcation Icon

Stil alanına giderek Simge Birincil Renk ve Boyutunu değiştirdik. Burada Simge Döndürme değerini ayarlayabilirsiniz.

Customize Icon

Adım 5: Başlık Ekle ve Özelleştir

Adres eklemek için Başlık widget'ını ekledik. İçerik bölümünü kullanarak Başlığınızı ekleyebilir, ihtiyacınıza göre bir Bağlantı ekleyebilirsiniz. Ayrıca Boyut, HTML Etiketi ve Hizalama başlığını kendi stilinize göre ayarlayın.

Add Heading Widget & Write Address

Ayrıca Metin Rengi, Tipografi, Metin Konturu, Metin Gölgesi ve Karışım Modu gibi varsayılan stil seçeneklerini kullanarak başlığı özelleştirebilirsiniz.

Customize Heading Style

Mevcut Başlığın Son Önizlemesi

Başlığı özelleştirdikten sonra, bu, başlığımızın yeni görünümüdür.

Final Preview of the Current Header

Kendi yönteminizle özel bir Elementor başlığı oluşturmak istiyorsanız aşağıdaki kılavuzu izlemelisiniz. İki yolu kullanarak özel bir Elementor tasarlayabilirsiniz. Önceden hazırlanmış Elementor tarafından duyulan bloğu seçebilir veya Elementor widget'larını kullanarak sıfırdan oluşturabilirsiniz. Bakalım.

Elementor Başlık Şablonlarını Kullanarak Başlıklar Oluşturun

Create Headers Using Elementor’s Theme Builder

Elementor's Theme Builder'ı kullanarak bir başlık oluşturmak için, web sitenize hem Elementor'u (Ücretsiz & Pro) yüklemeniz gerekir.

Aşağıdaki adımları izleyin ve özel başlığınızı oluşturun.

  1. Şablon->Tema Oluşturucu->Başlık'ta gezinin.
  2. Yeni Ekle düğmesini veya Yeni Başlık Ekle düğmesini tıklayın.
  3. Şablon Türü->Başlığı seçin ve şablonunuzun adını yazın.
  4. Şablonu kaydetmek için Şablon Oluştur düğmesini tıklayın.
  5. Sonraki sayfada, önceden hazırlanmış Bloklar ve Sayfalar içeren Elementor Kitaplığı alacaksınız.
  6. Doğru bir Başlık Bloğu seçin ve web sitenize yükleyin .

Bu kadar.

Elementor Widget'ını Kullanarak Elementor Başlığını Sıfırdan Tasarlayın ve Özelleştirin

Design & Customize Elementor Header From Scratch Using Elementor Widget

Normal bir Elementor kullanıcısıysanız, özel başlığınızı oluşturmak için Elementor widget'larını kullanabilirsiniz. Elementor, başlığınızı tasarlamanız için ihtiyaç duyduğunuz tüm gerekli widget'ları ücretsiz sürümünde sağlar. Temel olarak, ortak bir başlıkta Site Logosu, Gezinme Menüsü ve Arama Formu bulunur.

Bu adım adım kılavuzu takip edebilir ve Elementor widget'larını kullanarak Elementor başlığını nasıl oluşturup özelleştireceğinizi öğrenebilirsiniz.

Modern web tasarımını takip etmek için web siteniz için yapışkan bir başlık oluşturabilirsiniz. Kullanıcı web sayfasını aşağı kaydırırken ekranda aynı yerde olacaktır. Elementor'da nasıl yapışkan bir başlık oluşturulacağına ilişkin bu kılavuza bakın.

Bonus: Adidas, Dribbble ve Puma gibi Büyük Ölçekli Menüler Oluşturmak için Happy Addons' Happy Mega Menu Widget'ı kullanın

Bir e-ticaret veya işletme web siteniz var ve menüye çok sayıda sayfa eklemeniz gerekiyor. Ancak, varsayılan Elementor gezinme menüsü, ihtiyaçlarınıza göre daha büyük bir menü oluşturma seçeneği sunmaz. Ve ondan kurtulmak için bir çözüm arıyorsunuz.

Sorununuzu çözmek için, en iyi ve hızlı yüklenen Elementor eklentilerinden biri olan Happy Addons, yakın zamanda yeni bir ' Happy Mega Menu ' widget'ını başlattı. Bu özel widget ile Adidas, Dribbble, weDevs, InVision, Puma ve daha fazlası gibi büyük boyutlu Menüler oluşturabilirsiniz.

Navigasyon menünüzü dakikalar içinde yapmak için Mutlu Mega Menü widget'ını deneyin.

Ayrıca Happy Addons' Happy Mega Menu widget'ının eksiksiz belgelerine göz atabilir ve onu doğru şekilde nasıl kullanacağınızı öğrenebilirsiniz.

Elementor Başlığınızı Düzenlemeye Hazır mısınız?

Elementor, web sitenizin başlığını tasarlamak ve özelleştirmek için size tüm esnekliği sağlar. Elementor'u kullanarak yalnızca sıfırdan yeni bir başlık oluşturmakla kalmaz, aynı zamanda sitenizin mevcut başlığını da düzenleyebilirsiniz.

Yukarıdaki kılavuzda, Elementor'da başlığın doğru şekilde nasıl düzenleneceğini ele aldık. Özel bir Elementor başlığı yapmak için ne yapılması gerektiğini tartıştık. Son olarak, Mutlu eklentilerin Mutlu Mega Menü widget'ının web siteniz için kolaylıkla bir mega menü oluşturmanıza nasıl yardımcı olacağına dair bir bonus puan da paylaştık.

Öğreticiyi faydalı bulursanız, sosyal kanallarınızda paylaşın. WordPress ve Elementor ile ilgili daha kullanışlı kılavuzlar almak için bültenimize katılmayı unutmayın.

Haber bültenimize abone ol

Elementor ile ilgili en son haberleri ve güncellemeleri alın