Gezinme Menünüzü Bölüm Bölücülerle Nasıl Çerçevelendirirsiniz?

Gezinme menünüz, ziyaretçilerin sitenize gittiklerinde ilk aradıkları şeylerden biridir. Bu nedenle, web siteleri ona hak ettiği birincil gayrimenkulü (sayfanın en üstünde) verdiğinden emin olur. Ancak navigasyon menünüzü biraz daha öne çıkarmak istiyorsanız, özel arka plan tasarımlarıyla renklendirebilirsiniz. Divi's Visual Builder ile sayfanızın her bölümünde bulunan Divider arka plan seçenekleriyle harika arka plan tasarımları oluşturabilirsiniz. Ve biraz yaratıcılıkla, gezinme menünüz için benzersiz bir çerçeve görevi görmesi için ayırıcı bir arka plan kullanabilirsiniz. Hatta web sitenizin her sayfası için benzersiz bir menü arka planı oluşturabilirsiniz.

Bu eğitimde, bölüm ayırıcı arka planları kullanarak gezinme menülerinizi güzel arka plan tasarımlarıyla çerçevelemenin ne kadar kolay olduğunu göstereceğim. Bu tasarımları oluşturmak için örnek bir site olarak eczane yerleşim paketini kullanacağım.

Başlayalım!

Gizlice Bakış

İşte bu tasarım tekniği ile neler yapılabileceğinin bir özeti.

Neye ihtiyacın var

Bu eğitim için, gerçekten ihtiyacınız olan tek şey şudur:

• Divi Teması (yüklü ve etkin)
• Eczane Düzen Paketi (Divi Builder'da bulunan ücretsiz bir hazır düzen paketi)

Tema Özelleştiricide Birincil Menünüzü Ayarlama

Bu eğitim için, eczane düzen paketinin altı sayfasını içeren birincil menümle yeni bir Divi kurulumum var. Menü varsayılan olarak böyle görünüyor.

Gördüğünüz gibi başlık beyaz bir arka plana sahip ve sayfanın ilk bölümünün üzerinde oturuyor. Aşağı kaydırdığınızda, başlık sabit bir gezinme menü çubuğuna dönüşür.

Ancak bu eğitim için, kendi özel arka planımı ekleyebilmem için başlık arka planını şeffaf yapmak istiyorum. Bunu yapmak için tema özelleştiriciye atlamamız gerekiyor. WordPress panosundan Divi > Tema Özelleştirici'ye gidin. Ardından, özelleştirici menüsünden Başlık ve Gezinme > Birincil Menü Çubuğu'na gidin.

Saydamlık kaydırıcısını tamamen aşağı sürükleyerek veya rgba(255,255,255,0) renk kodunu girerek arka plan rengini tamamen şeffaf olacak şekilde değiştirin.

Gördüğünüz gibi, beyaz başlık arka planı kayboldu ve ilk bölümünüz, üstbilginizin ve ana menünüzün arka planı olarak hizmet etmek için sayfanın en üstüne atladı.

Navigasyon menümüzü çerçevelemek için renkli bir arka plan ekleyeceğimizden, aşağıdaki menü metin seçeneklerini de güncelleyelim.

Yazı Tipi: Montserrat
Yazı Tipi Stili: Kalın (B)
Metin Rengi: Beyaz
Aktif Bağlantı Rengi: Beyaz

Özelleştirici menünüzde bir seviye geri gidin ve Sabit Gezinme sekmesine tıklayın. Sabit gezinmeyi işlevsel tutacaksanız, görsel oluşturucuda oluşturacağınız özel arka planınızın rengini tamamlayan özel bir renk verebilirsiniz. Veya ana menülerinizi sayfa bazında farklı renklerle çerçeveleyebilmeniz için daha genel bir renk verebilirsiniz. Şimdilik, sabit navigasyonum için daha genel bir renk şeması kullanacağım. Aşağıdakileri güncelleyin:

Birincil Menü Arka Plan Rengi: #ffffff
Birincil Menü Bağlantı Rengi: rgba(0,0,0,0.61)
Aktif Birincil Menü Bağlantı Rengi: #ff5473

Şimdi hazırız! Değişikliklerinizi yayınladığınızdan emin olun.

Gezinme Menünüzü Bölüm Bölücü Arka Planıyla Çerçeveleme

Örnek 1

Eczane ana sayfanıza gidin ve görsel oluşturucuyu dağıtın. Ardından, herhangi bir satır, sütun veya modül içermeyen yeni bir normal bölüm ekleyin (bunlara ihtiyacınız yoktur) ve bölümü sayfanızın en üstüne sürükleyin (daha büyük bloklar oldukları için bölümleri tel kafes modunda yeniden düzenlemeyi daha kolay buluyorum).

Şimdi tasarımı tamamlamak için masaüstü moduna geri dönün.

Bölüm ayarlarını açın ve aşağıdakileri güncelleyin:

Üst Bölücü Stili: ekran görüntüsüne bakın
Bölücü Rengi: #ff5473
Bölücü Yüksekliği: 150px
Bölücü Yatay Tekrar: 0.8x
Özel Kenar Boşluğu: -80 piksel alt
Özel Dolgu: 0px Üst, 0px Alt

Ayırıcı renk, düzende kullanılan pembe renkle aynıdır. Bölücüyü biraz düzleştirmek için bölücü yatay tekrarını 0,8x olarak ayarladım. -80px alt kenar boşluğu, bölümün beyaz arka planını gizlemek için bölümü sayfanın altına getirir. Bu, sağdaki navigasyonu çerçeveleyen bölücüyle sonuçlanır. Ayırıcı, logonuza güzel bir arka plan eklemek için sola doğru uzanır.

İşte canlı sitede nasıl göründüğü.

Örnek #2

Bu sonraki örnekte, bölümü, ayırıcı arka planın logoyu genişletmek yerine yalnızca gezinme menüsünü çerçeveleyeceği şekilde konumlandıracağım. Bunu yapmak için bölümümüze özel bir genişlik vermeli ve onu navigasyon menüsüne sığacak şekilde sağa hizalamalıyız.

Bölüm ayarlarına gidin ve aşağıdakileri güncelleyin:

(Not: Bölümün özel kenar boşluğu, bölüm menüsünü tıklanamaz hale getirebileceğinden, ayarları tel kafes modunda açmanız gerekebilir. Ayarları tel kafes modunda açtığınızda, masaüstü görünüm moduna geri dönebilirsiniz.)

Genişlik: %75
Bölüm Hizalama: Sağ
Bölücü Stili: ekran görüntüsüne bakın
Bölücü Yatay Tekrar: 1x

İşte böyle görünüyor:

Sabit Navigasyon etkinleştirildiğinde, menü çerçeveden çıkmaya başlarken sabit menü başlığının nasıl etkinleştiğini görebilirsiniz.

Sabit gezinmeyi devre dışı bırakmak istiyorsanız Divi > Tema Seçenekleri'ne gidin ve Genel Ayarlar altındaki Sabit Gezinti Çubuğu seçeneğini devre dışı bırakın.

Sabit navigasyon etkinleştirilmeden, menünüz, kaydırmanız olarak çerçeve tasarımınız içinde yerinde kilitli kalacaktır.

Duyarlı

Çerçeve, mobil cihazlarda bile iyi görünecek.

Ancak, bölümünüze masaüstü ve mobil için özel bir ayırıcı yüksekliği sıfır vererek çerçeveyi her zaman gizlemeyi seçebilirsiniz. Ardından, tema özelleştiricide mobil menünüzü özelleştirin.

Farklı Sayfalarda Farklı Renkli Çerçeveler Kullanın

Dilerseniz sayfa bazında farklı renk ve desenler ekleyebilirsiniz. Tek yapmanız gereken bölümünüzü Divi Kitaplığınıza kaydetmek ve web sitenizin farklı bir sayfasına eklemek. Ardından rengi veya tasarımı istediğiniz gibi ayarlayabilirsiniz. İmkanlar sonsuzdur.

Son düşünce

Navigasyon menünüze özel bir arka plan eklemek Divi Builder ile aslında oldukça kolaydır. Bilmeniz gereken tek şey, menünüz için bir arka plan olarak hizmet etmek üzere bölümünüzü nasıl konumlandıracağınızdır. Ve bu kurulum yerindeyken, navigasyon menünüz için her türden benzersiz çerçeve oluşturmak üzere farklı bölücü stillerini test edebilirsiniz. Ve bir bölüm kullandığınız için, çerçevenizi tasarlamak için bir bölümün tüm tasarım seçeneklerine sahipsiniz. Hatta basit bir bölüm arka planı veya gradyan kullanabilir ve bölümünüzün konumunu istediğiniz yerde ayarlayabilirsiniz.

Yorumlarda sizden haber bekliyorum.

Şerefe!