Birincil Menü Çubuğu Divi'nin Tam Genişlik Menü Modülü ile Nasıl Değiştirilir

Birincil menü çubuğu, ziyaretçiler için gezinmeyi sorunsuz hale getirir. WordPress'te alıştığımız varsayılan birincil menü çubuğunun yanı sıra Divi'nin sunduğu Tam Genişlikli Menü Modülü ile de karşılaşmışsınızdır. Genellikle, web sitenizde, her sayfanın başındaki birincil menüden farklı olan diğer menüleri görüntülemek için kullanılır.

Ancak, birincil menü çubuğunuzu değiştirmek için Tam Genişlik Menü Modülünü de kolayca kullanabilirsiniz. Bu size, sayfanızın üst kısmındaki yinelenen bir menü ile uğraşmadan menüyü sayfada istediğiniz yere yerleştirme özgürlüğü verir. Menüyü istediğiniz gibi biçimlendirmek için Divi'nin yerleşik seçeneklerini de kullanabilirsiniz; bu, örneğin kenarlık ve ayırıcı seçeneklerini kullanarak çarpıcı sonuçlar oluşturabileceğiniz anlamına gelir.

Bu eğitimde, Divi's Carpenter Layout Pack kullanarak birincil menü çubuğunuzu Tam Genişlik Menü Modülü ile nasıl değiştireceğinizi göstereceğiz. Bu, devam eden Divi tasarım girişimimizin bir parçasıdır. Bu yöntemi tüm sayfalara mı yoksa yalnızca birkaçına mı uygulamak istediğinizi seçebilirsiniz. Hadi hadi bakalım!

Ön izleme

Kullanım örneği eğitimine geçmeden önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

Sabit Gezinti Çubuğunu Devre Dışı Bırak

Divi'nin Tema Seçeneklerine Git

Yapmamız gereken ilk şey, Divi'nin tema seçeneklerindeki sabit gezinme seçeneğini devre dışı bırakmak. Bunu sayfamızın üst kısmındaki birincil menü alanından kurtulmak için yapıyoruz. Bunu yapmak için WordPress Panonuz > Divi > Tema Seçenekleri'ne gidin.

Sabit Gezinti Çubuğunu Devre Dışı Bırak

Genel sekmesini açın ve Sabit Gezinti Çubuğu seçeneğini devre dışı bırakın.

Birincil Menü Oluştur

Menülere Git

Bir sonraki yapacağımız şey birincil menümüzü oluşturmak. Bu birincil menüyü hem üstteki varsayılan Birincil Menü Çubuğu hem de Tam Genişlik Menü Modülü için kullanacağız. Menünüzü eklemek için WordPress Panonuz > Görünüm > Menüler'e gidin.

Yeni Birincil Menü Ekle

Yeni bir menü ekleyin, menünüze bir ad verin ve onu Birincil Menünüz yapın.

Sayfa Ekle ve Menüyü Kaydet

Son olarak, tüm sayfalarınızı ekleyin ve menünüzü kaydedin.

Tema Özelleştiricide Stil Birincil Menü Çubuğu

Tema Özelleştirici'ye gidin

Tüm sayfalarda varsayılan birincil menü çubuğunu gizlemek isteyip istemediğinize bağlı olarak, önce varsayılan Birincil Menü Çubuğunu biçimlendirmek isteyebilirsiniz. Bunu yalnızca bazı sayfalarda kullanmayı planlıyorsanız yapmanız gerekir. Birincil Menü Çubuğunu her yerden kaldırmak istiyorsanız bu adımı atlayabilirsiniz.

Birincil Menü Çubuğu Ayarları

Düzen paketini eşleştirmek için aşağıdaki değişiklikleri uyguladık:

• Yazı Tipi Stili: Kalın ve Büyük Harf
• Metin Rengi: #FFFFFF
• Aktif Bağlantı Rengi: #FFFFFF
• Arka Plan Rengi: #f25b3a
• Açılır Menü Arka Plan Rengi: #f25b3a

Birincil Menü Çubuğunu Gizle

Bir sayfa

Seçim Sayfasına Git ve Görsel Oluşturucuyu Etkinleştir

Sayfalarımızın üst kısmındaki Birincil Menü Çubuğunu gizlemek için az miktarda CSS kodu kullanmamız gerekecek. Sabit Gezinti Çubuğu seçeneğini devre dışı bırakmanın önemli olduğunu unutmayın (önceki adımlardan biri). Aksi takdirde, Birincil Menü Çubuğunun kapladığı alan beyaz olacak ve tamamen gitmeyecektir. Özellikle bir sayfada Birincil Menü Çubuğunu gizleyecekseniz, o sayfaya gidin ve Görsel Oluşturucu'yu etkinleştirin.

Sayfa Ayarlarını Aç

Sayfanızın altındaki aşağıdaki simgeye tıklayarak sayfa ayarlarını açın:

CSS Kodu Ekle

Gelişmiş sekmesine geçin ve aşağıdaki CSS kodunu Özel CSS kutusuna ekleyin:

#main-header {
display: none;
}

Tüm Web Sitesi

Divi'nin Tema Seçeneklerine Git

Web sitenizin tamamındaki Birincil Menü Çubuğundan kurtulmak istiyorsanız, bunu da yapabilirsiniz. Kodu her sayfaya manuel olarak eklemeniz gerekmez. Bunun yerine, WordPress Panonuz > Divi > Tema Seçenekleri'ne gidebilirsiniz .

CSS Kodu Ekle

Özel CSS kutusuyla karşılaşana kadar aşağı kaydırarak devam edin ve aynı CSS kodunu buraya ekleyin:

#main-header {
display: none;
}

Sayfaya Birincil Menü Çubuğu Ekle

Visual Builder ile Açılış Sayfası Açın

Artık Birincil Menü Çubuğunu gizlediğimize göre, Tam Genişlik Menü Modülünü sayfamıza eklemeye başlayabiliriz. Bunu yapmak için örneğin açılış sayfanıza gidin ve Görsel Oluşturucu'yu etkinleştirin.

Tam Genişlik Bölümü Ekle

Kahraman bölümünüzün hemen altına bir Tam Genişlik bölümü ekleyerek devam edin.

Üst Kenarlık

Tam olarak istediğiniz tasarımı oluşturmak için tüm Divi'nin yerleşik seçeneklerini kullanabilirsiniz. Onu oldukça temiz tutacağız. Bölüm seçeneklerimize ekleyeceğimiz tek şey üst kenarlıktır:

• Üst Kenar Genişliği: 7px
• Üst Kenar Rengi: #f25b3a

Tam Genişlik Menü Modülü Ekle

Ardından, Tam Genişlik Menü Modülünü bölümünüze ekleyin.

Birincil Menüyü Seç

Göstermek istediğiniz menü olarak birincil menünüzü seçin.

Arka plan rengi

Modülünüze siyah bir arka plan rengi vererek devam edin.

Bağlantı Ayarları

Ardından, Bağlantılar ayarlarını açın ve aşağıdaki değişiklikleri uygulayın:

• Aktif Bağlantı Rengi: #FFFFFF
• Açılır Menü Metin Rengi: #FFFFFF
• Mobil Menü Metin Rengi: #FFFFFF
• Metin Yönü: Sol
• Metin Rengi: Açık

Açılır Menü Ayarları

Daha sonra Açılır Menü ayarlarını değiştirin:

• Açılır Menü Arka Plan Rengi: #000000
• Açılır Menü Satır Rengi: #000000
• Mobil Menü Arka Plan Rengi: #000000

Menü Metin Ayarları

Son olarak, metin ayarlarını yerleşim paketine uygun hale getireceğiz:

• Menü Yazı Tipi Ağırlığı: Ultra Kalın
• Menü Yazı Tipi Stili: Büyük Harf

Tam Genişliği Global Yap ve Diğer Sayfalarda da Kullan

Global Bölüm olarak kaydet

Yeni birincil menümüzü oluşturmayı bitirdik! Diğer sayfalarda da kullanmayı planlıyorsanız, devam edin ve Divi Kitaplığınıza global bir öğe olarak ekleyin.

Birincil Menü Çubuğu Olmadan Diğer Sayfalara Ekle

Artık bu Tam Genişlik Menüsünü diğer sayfalara kolayca ekleyebilirsiniz. Konumunu seçebilir ve beraberinde gelen yerleşik tasarım seçenekleriyle oynamakta özgürsünüz!

Ön izleme

Artık tüm adımlardan geçtik, şimdi sonuca farklı ekran boyutlarında son bir göz atalım.

Son düşünceler

Bu kullanım örneği blog gönderisinde, sayfalarınızın üst kısmındaki Birincil Menü Çubuğunu Tam Genişlik Menü Modülü ile nasıl değiştireceğinizi gösterdik. Bu yöntemi uygulamak size menünüzü sayfanızda istediğiniz yere yerleştirebilme özgürlüğü verir. Bunun da ötesinde, stil vermek için Divi'nin yerleşik seçeneklerini de kullanabilirsiniz. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümünde bir yorum bıraktığınızdan emin olun.