Ana menü çubuğunu Fullwidth Divi Menü Modülü ile nasıl değiştirir

Ana menü çubuğu ziyaretçilerin navigasyonunu pürüzsüz hale getirir. Normalde WordPress’te kullandığımız varsayılan ana menü çubuğunun yanı sıra, Divi tarafından da sunulan tam geniş bir menü modülü bulabilirsiniz. Genellikle bu, web sitenizde her sayfanın üst kısmındaki ana menüden farklı olan diğer menüleri görüntülemek için kullanılır. Ancak ana menü çubuğunuzu değiştirmek için FullWidth menü modülünü kolayca kullanabilirsiniz. Bu, sayfanızın üst kısmındaki yinelenen bir menü ile uğraşmadan sayfaya istediğiniz yere menüyü yerleştirme özgürlüğü verir. Menüyü istediğiniz gibi düzenlemek için Divi’nin varsayılan seçeneklerini de kullanabilirsiniz, bu da örneğin sınır ve bölme seçeneklerini kullanarak şaşırtıcı sonuçlar verebilirsiniz.
Bu öğreticide, bir Divi Carpenter’ın düzeni paketini kullanarak ana menü çubuğunuzu tam geniş bir menü modülüyle 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ç sayfa için mi uygulamak isteyip istemediğinizi seçebilirsiniz. Haydi Yapalım şunu! Önizleme Kullanım durumunun öğreticisine girmeden önce, sonucuna farklı ekran boyutlarında bakalım.

Devre Dışı Navigasyon Bilah Divi Tema Seçeneğini Açık Kalıyor. Yapmamız gereken ilk şey Divi Tema seçeneğinde sabit gezinme seçeneklerini devre dışı bırakmaktır. Bunu sayfamızın üst kısmındaki ana menü odasını ortadan kaldırmak için yapıyoruz. Bunu yapmak için WordPress Dashboard> Divi> tema seçeneklerini açın.

Sabit gezinme çubuğunu devre dışı bırak Genel sekmesini açın ve sabit gezinme çubuğu seçeneklerini devre dışı bırakın.

Yapacağımız bir sonraki menüyü açmak için ana menüyü oluşturun Ana menümüzü oluşturmaktır. Bu ana menüyü üstte varsayılan ana menü çubuğu ve tam geniş menü modülünde kullanacağız. Menünüzü eklemek için WordPress Gösterge Tablosu> Ekran> menüsünü açın. Yeni ana menüyü ekleyin Yeni bir menü ekleyin, menünüzü adlandırın ve ana menünüzü yapın.

Sayfayı ekleyin ve son fakat en az değil menüyü kaydedin, tüm sayfalarınızı ekleyin ve menünüzü kaydedin.

Temanın ayarlanmasındaki ana menü çubuğu, temanın temasını açın, tüm sayfalarda varsayılan ana menü çubuğunu gizlemek isteyip istemediğinize bağlıdır, önce varsayılan ana menüyü ayarlamak isteyebilirsiniz. Bunu yalnızca birkaç sayfada kullanmayı planlıyorsanız yapmanız gerekir. Ana menü çubuğunu herhangi bir yerde silmek istiyorsanız, bu adımı geçebilirsiniz.

Ana Menü Çubuğu Ayarları Düzen paketine uyacak şekilde 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
Ana menü çubuğunu gizleyin, bir sayfa açılış sayfası tercih edilen sayfa ve görsel üreticileri etkinleştirin Ana menü çubuğunu sayfamızın üst kısmına gizlemek için küçük bir CSS kodu kullanmamız gerekir. Sabit navigasyon bıçaklarını (önceki adımlardan biri) devre dışı bırakmanın önemli olduğunu unutmayın. Değilse, ana menü çubuğu tarafından kullanılan alan beyaz olacaktır ve tamamen kaybolmaz. Ana menü çubuğunu bir sayfada, özellikle sayfayı açacak ve görsel oluşturucuyu etkinleştirecekseniz.

Sayfa Ayarlarını Açın Sayfanızın altındaki aşağıdaki simgeyi tıklayarak sonraki sayfa ayarlarını açın: Gelişmiş sekmesine geçmek için CSS kodunu ekleyin ve aşağıdaki CSS kodunu özel CSS kutusuna ekleyin: #Playing-Heading {

Görüntü yok;

}
Tüm web siteleri Divi Tema Seçenekleri Açıyor Web sitenizdeki ana menü bıçaklarından kurtulmak istiyorsanız, bunu da yapabilirsiniz. Her sayfaya manuel olarak kod eklemenize gerek yoktur. Bunun yerine, WordPress Dashboard> Divi> Tema Seçeneklerine gidebilirsiniz.
CSS kodunu ekleyin, özel CSS kutusunu bulana kadar aşağı kaydırarak devam edin ve aynı CSS kodunu buraya ekleyin:

#oyun başlığı {

Görüntü yok;
}
Ana menü çubuğunu Yöne sayfasının açık sayfasına ekleyin Bir Visual Builder ile şimdi ana menü çubuğunu gizliyoruz, sayfamıza tam bir tam menü modülü eklemeye başlayabiliriz. Bunu yapmak için, örneğin yön sayfanızı açın ve görsel oluşturucuyu etkinleştirin.
Tam geniş bir bölüm ekleyin. Kahramanınızın hemen altına tam genişlik bölümünü ekleyerek devam edin.

Üst sınır, istediğiniz tasarımı oluşturmak için tüm varsayılan Divi seçeneklerini kullanabilirsiniz. Temiz tutacağız. Parça seçeneğimize ekleyeceğimiz tek şey üst sınırdır:

Üst sınır genişliği: 7px

Üst sınır rengi: #f25b3a
Tam Geniş Menü Modülünü Ekleyin Sonraki, Bölümünüze FullWidth Menü Modülünü ekleyin.
Ana menüyü seçin Görüntülemek istediğiniz menü olarak ana menünüzü seçin.

Arka plan rengi, modülünüze siyah arka planın rengini vererek devam edin.

Son bağlantı ayarları, bağlantı ayarlarını açın ve aşağıdaki değişiklikleri uygulayın:

Aktif bağlantı rengi: #ffffff

Açılır menü metin rengi: #ffffffffffroms hücresel menü metin: #fffffff
Metin Oryantasyonu: Sol
Metin Rengi: Işık
Açılır menü ayarları Bir sonraki 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

Hücresel Menü Arka Plan Rengi: #000000
Son menü metin ayarları, metin ayarlarını düzen paketine göre yapacağız:
Yazı tipi menüsü ağırlığı: çok kalın
Menü yazı tipi stili: büyük harf

Global ile dolu geniş bir parça yapın ve başka bir sayfada kullanın, ayrıca yeni ana menümüzü yapmayı bitirdiğimiz küresel bir parça olarak da kaydedin! Başka bir sayfada kullanmayı planlıyorsanız, devam edin ve Divi kütüphanenize küresel bir öğe olarak ekleyin.
Ana menü çubuğunuz olmadan başka bir sayfaya ekleyin Artık bu tam geniş menüyü başka bir sayfaya kolayca ekleyebilir. Konumunu seçebilirsiniz ve eşlik eden varsayılan tasarım seçenekleriyle oynamakta özgürsünüz!
Önizleme Şimdi tüm adımlardan geçtik, nihai sonuçlara farklı ekran boyutlarında bakalım.

Blog gönderisindeki son zihin Bu kullanım durumunda, sayfanızın üst kısmındaki ana menü çubuğunun tam geniş bir menü modülü ile nasıl değiştirileceğini gösterdik. Bu yöntemi uygulamak, menünüzü sayfanızda istediğiniz yere yerleştirme özgürlüğü verir. Ayrıca, düzenlemek için Divi’nin varsayılan seçeneklerini de kullanabilirsiniz. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun.

admin

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir