Navigasyon menünüzü bölen ile nasıl çerçeveleyebilirsiniz
Navigasyon menünüz, ziyaretçilerin sitenizi ziyaret ettiklerinde aradıkları ilk şeylerden biridir. Bu nedenle, web sitesi ona ana gayrimenkul (sayfanın en üstünde) vermeyi sağlar. Ancak navigasyon menünüzü biraz daha belirgin hale getirmek istiyorsanız, özel bir arka plan tasarımı ile renklendirebilirsiniz. Visual Builder Divi ile, sayfanızın her bir bölümünde bölücü arka plan seçenekleriyle bazı şaşırtıcı arka plan tasarımları oluşturabilirsiniz. Biraz yaratıcılıkla, navigasyon menünüz için benzersiz bir çerçeve olarak bir bölücü arka planı kullanabilirsiniz. Web sitenizin her sayfası için benzersiz bir menü arka planı bile yapabilirsiniz.
Bu öğreticide, navigasyon menünüzü bölücünün arka planını kullanarak güzel bir arka plan tasarımı ile çerçevelemenin ne kadar kolay olduğunu göstereceğim. Bu tasarımı oluşturmak için eczane düzen paketini örnek sitesi olarak kullanacağım. Başlayalım! Aşağıdaki gizlice göz atma, bu tasarım tekniği ile elde edilebileceklerden kaymanın zirvesidir.
Divi teması (yüklü ve aktif)
Eczane Düzeni Paketi (Divi Builder’da Ücretsiz önceden hazırlanmış düzen paketi)
Ana menünüzü bu öğretici için tema ayarında hazırlarken, ana menümle altı sayfalık eczane düzeni paketleri içeren yeni bir divi kurulumum var. İşte varsayılan olarak menü ekranı. Gördüğünüz gibi, başlığın beyaz bir arka planı vardır ve sayfanın ilk bölümünün üzerindedir. Yuvarlandığınızda, gölgelik sabit bir gezinme menüsü çubuğuna dönüşür. Ancak bu öğretici için, kendi özel arka planımı ekleyebilmem için arka plan başlığını şeffaf hale getirmek istiyorum. Bunu yapmak için tema ayarına atlamamız gerekiyor. WordPress Gösterge Tablosundan, Divi> Tema Özelleştirici’yi açın. Ardından Ayar Menüsü’nden Başlık ve Navigasyon> Ana Menü çubuğunu açın. Şeffaflık kaydırıcısını aşağı doğru sürükleyerek veya RGBA renk koduna (255,255,255.0) girerek arka plan rengini tamamen şeffaf olarak değiştirin. Gördüğünüz gibi, beyaz gölgeliklerin arka planı kayboldu ve kullanılmak üzere sayfaya atladığınız ilk bölüm Başlıklarınız ve ana menüleriniz bir arka plan. Navigasyon menümüzü çerçevelemek için bir renk arka planı ekleyeceğimiz için, aşağıdaki menü metin seçeneklerini güncelleyelim. Yazı Tipi: Montserrat Yazı Tipi Tarzı: Kalın (B) Renk Metin: Beyaz Renk Aktif Bağlantı: Beyaz Ayarlama menünüzde bir seviyeyi geri ve Sabit Gezinme sekmesini tıklayın. Sabit bir navigasyon işlevini sürdürecekseniz, görsel bir yapımcıda yapacağınız özel arka plan renginizi tamamlayan özel bir renk verebilirsiniz. Veya daha yaygın bir renk sağlayabilirsiniz, böylece ana menünüzü sayfa başına tabanda farklı renklerle çerçeveleyebilirsiniz. Şimdilik, navigasyonum için daha yaygın bir renk şeması kullanacağım. Aşağıdakileri güncelleyin: Ana Menü Arka Plan Rengi: #FFFFFF Renk Ana Menü Bağlantı Renk: RGBA (0.0,0,0.0.61) Aktif Ana Menü Rengi Bağlantılar: #FF5473
Şimdi hazırız! Değişikliklerinizi yayınladığınızdan emin olun. Navigasyon menünüzü bölücünün arka planına sararak Örnek 1 Eczane ana sayfanızı açın ve bir görsel üreticiyi uygulayın. Ardından, herhangi bir satır, sütun veya herhangi bir modül olmadan yeni bir normal bölüm ekleyin (ihtiyacınız yok) ve parçayı sayfanızın üstüne sürükleyin (tasarımı tamamlamak için masaüstü moduna daha kolay hissediyorum. Aşağıdaki bölümleri açın ve Güncelleme: Üst Bölü Kuvvetleri: Ekran Ekran Renk Merkezleri: #FF5473 Sivillik: 150px Yatay Bakım İncelemesi: 0.8x Özel Kenar: -80px Alt Özel Dolgu: 0px yukarı, 0px daha düşük 0px Renk bölücüsü, düzende kullanılan aynı pembe renktir. Bölücüyü biraz düzleştirmek için yatay bölücü tekrar 0.8x’e ayarladım. Alt marj -80px, parçanın beyaz arka planını gizlemek için sayfanın tabanını taşır. Bu, sağdaki navigasyonu çerçeveleyen bir bölücü ile sonuçlanır. Bölücü, logonuza da iyi bir arka plan eklemek için sola uzanır.
Bu doğrudan sitedeki görünümdür. Örnek #Aşağıdaki örnek için bölümü, bariyerin arka planının yalnızca navigasyon menüsünü çerçeveleyecek şekilde, logoya da uzanmadan konumlandıracağım. Bunu yapmak için, bizim tarafımıza özel bir genişlik vermeliyiz ve navigasyon menüsüne uyması için sağa paralel hale getirmeliyiz. Bölüm ayarlarını açın ve aşağıdakileri güncelleyin: (Not: Çerçeve görüntü modunda ayarları açmanız gerekebilir, çünkü bölümün özel marjı bölüm menüsünü tıklamamış olabilir. Çerçeve görüntü modundaki ayarları açtıktan sonra, Masaüstü Ekran Moduna geri dönebilirsiniz.) Genişlik:% 75 Tesviye Bölümü: Sağ Bölü Kuvvet: Bkz. Yatay Bölme Ekran Görüntüsü Tekrar: 1x
Aşağıdaki görünüm: Navigasyon hala etkinleştirildiğinde, menü çerçeveden ayrılmaya başladığında menünün nasıl etkin kalabileceğini görebilirsiniz.
Sabit gezinmeyi devre dışı bırakmak, Divi> tema seçeneklerine gitmek ve genel ayarların altındaki sabit gezinme çubuğu seçeneklerini devre dışı bırakmak istiyorsanız. Etkinleştirilen sabit bir navigasyon olmadan, kaydırdığınızda menünüz çerçeve tasarımınızda kilitli kalacaktır. Duyarlı çerçeve cep telefonunda da iyi görünecektir. Ancak, masaüstü ve hücresel için sıfır için özel bir bölücünün yüksekliğinin bir kısmını vererek her zaman çerçeveyi gizlemeyi seçebilirsiniz. Ve ardından mobil menünüzü tema ayarında ayarlayın. Farklı sayfalarda farklı renk çerçeveleri kullanın İsterseniz, sayfa başına farklı renkler ve tasarımlar ekleyebilirsiniz.Tek yapmanız gereken, parçanızı Divi kütüphanenize kaydetmek ve web sitenizdeki başka bir sayfaya eklemektir.Ardından istediğiniz rengi veya tasarımı ayarlayabilirsiniz.Olasılık sınırsızdır.Son zihin, navigasyon menünüze özel bir arka plan ekler, divi üreticisi ile aslında oldukça kolaydır.Bilmeniz gereken, menünüzde arka plan olarak kullanılacak parçanızı nasıl konumlandıracağınızdır.Ve bu ayarla, navigasyon menünüz için her türlü benzersiz çerçeve yapmak için farklı bölücü stillerini test edebilirsiniz.Bölümü kullandığınız için, çerçevenizi tasarlamak için tüm tasarım seçeneklerine sahipsiniz.Basit bir arka plan veya gradyan bile kullanabilir ve istediğiniz yerde kendi rolünüzün konumunu ayarlayabilirsiniz. Umarım yorumlarda sizden haber almayı umuyorum.Kızarmış ekmek!
