DIVI'da ön planda daha fazla öğe sunması için dikey bir gezinme menüsü oluşturmak ister misiniz?
Dikey gezinme menüleri, ön planda daha fazla menü öğesine ihtiyaç duyan bazı web siteleri için faydalı olabilir. Yatay menüler, özellikle daha küçük tarayıcı genişliklerinde, gereken tüm menü bağlantılarına uyması zor olabilir.
Bu eğitimde size Divi Tema Oluşturucu'yu kullanarak dikey bir gezinme menüsünün nasıl oluşturulacağını göstereceğiz.
Bu, WordPress menü öğelerinizi sergilemek için size daha fazla alan sağlayacaktır.
Hadi başlayalım!
anket
İşte bu eğitimde oluşturacağımız tasarıma hızlı bir bakış.
Gelelim öğreticiye.
Yeni Bir Global Başlık Oluşturma
Bu eğitim için, Divi'nin tema oluşturucusunu kullanarak global bir başlıkta dikey gezinme menüsünü oluşturacağız.
Başlamak için WordPress panosuna gidin ve Divi > Tema Oluşturucu'ya gidin.
Ardından, "Global başlık ekle" alanına tıklayın web sitesi şablonu varsayılanı seçin ve açılır listeden "Global Başlık Oluştur"u seçin.
Ayrıca okuyun: DIVI'da Tema Oluşturucu ile Global Başlık Nasıl Oluşturulur
Dikey bölüm düzeni tasarımı
Genel başlık düzeni düzenleyicisinde, zaten orada olan normal bölüm ayarlarını açın ve aşağıdakileri güncelleyin.
- Maksimum genişlik: 300 piksel
- Yükseklik: 100vh
- İç Kenar Boşluğu: 4vh Üst, 0px Alt
Aşağıdaki gibi bir gölge kutusu ekleyerek özelleştirmeye devam edin:
- Gölge kutusu: ekran görüntüsüne bakın
- Kutu gölgesi dikey konumu: 0px
- Kutu gölge bulanıklığı gücü: 20 piksel
- Kutu Gölge Yayılma Gücü: -10px
- Gölge rengi: rgba(0,0,0,0.3)
Kullanıcı kaydırırken dikey gezinme menüsünün solda görünmesini sağlamak için Gelişmiş sekmesini sabit konuma güncelleyin ve z-endeksini aşağıdaki gibi güncelleyin:
- Sabit istasyon
- Z-endeksi: 9999
Bölümün dışına taşacak alt menü navigasyonunu görebilmemiz için ana öğeye aşağıdaki özel CSS'yi ekleyin:
overflow: visible !important;
Bölümünüz artık şablonun sol tarafında dikey bir düzende olacaktır.
Dikey menüyü tasarlayın
Bölüm yerindeyken, dikey menüyü tasarlamaya hazırız. Bunu yapmak için, navigasyonu dikey olarak görüntülenecek şekilde özelleştirmek için özel CSS'li bir menü modülü kullanacağız.
Menünün farklı tarayıcı yüksekliklerine iyi uyum sağlaması için vh uzunluk birimini de kullanacağız.
Satır ekleme
Başlamak için bölümdeki bir sütuna bir satır ekleyin.
Ardından, satır parametrelerini aşağıdaki gibi güncelleyin:
Boyutlandırma ve Aralık
- Özel Oluk Genişliğini Kullan: EVET
- Sütun aralığı: 1
- Maksimum genişlik: %100
- Maksimum genişlik: %80
- İç Marj: 3vh Üst, 3vh Alt
sınır
- Kenar genişliği: 1 piksel
- Kenar rengi: #eeeeee
Menü modülü eklendi
Tek sütunlu satırın içine yeni bir Menü modülü ekleyin.
Sekmede görüntülenecek bir menü seçin içindekiler.
Ardından logonuzu ekleyin web sitesi olarak içindekiler Logo düğmesinin altında dinamik.
Stil sekmesi altında aşağıdakileri güncelleyin:
- Stil: Merkezli
- Yazı Tipi Menüsü: Nunito Sans
- Menü metin rengi: #535b7c
- Metin Boyutu menüsü: 18px (masaüstü), 14px (tablet ve telefon)
- Menü satırı yüksekliği: 2 em
- Açılır satır rengi: #535b7c
- Aktif Bağlantı Rengi açılır menüsü: #535b7c
- Sepet simgesi rengi: #535b7c
- Arama simgesi rengi: #535b7c
- Hamburger Menü simge rengi: #535b7c
- İç Marj: 2vh Üst, 2vh Alt
Menü için özel CSS eklendi
Menünün, elde etmek istediğimiz dikey gezinmeyi elde etmek için özel CSS'ye ihtiyacı var. Başlamak için gelişmiş sekmeye gidin ve aşağıdaki özel CSS'yi menü bağlantısına ve menü logosuna ekleyin.
CSS menü bağlantısı (masaüstü):
width: 100%;
padding: 1vh 15px;
background: #f8f8f8;
border-radius: 3px;
border: 1px solid #eeeeee;
CSS menü bağlantısı (tablet):
width: auto;
border:none;
Menü CSS logosu:
margin-bottom: 20px;
Ardından, Menü modülüne aşağıdaki gibi özel bir CSS sınıfı ekleyin:
CSS sınıfı: et-vert-menü
Bu sınıf, bir Kod modülü kullanarak ekleyeceğimiz harici özel CSS'mizde bu belirli menüyü hedeflemek için kullanılacaktır.
Kod modülüyle özel CSS ekleme
Menü modülünün altına bir Kod modülü ekleyin.
Ardından aşağıdaki kodu kod alanına yapıştırın (stil etiketleri arasına yerleştirdiğinizden emin olun):
/* MenudeNavigation Style Vertical*/
.et-vert-menu .et_pb_menu__menu>nav>ul {
flex-direction: column;
margin-left: 0px!important;
margin-right: 0px!important;
width: 100%;
}
.et-vert-menu .et_pb_menu__menu>nav>ul>li {
margin: 10px0!important;
}
.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul li {
display:block!important;
padding: 0px!important;
}
.et-vert-menu .et_pb_menu__menu>nav>ul ul {
padding: 0px!important;
top: 0px!important;
}
.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul {
left:calc(100%- 1px) !important;
top:0px!important;
}
.et-vert-menu .et-menu .menu-item-has-children>a:first-child:after {
content: "5"!important; /*change arrow icon for submenu*/
right: 20px!important;
}
.et-vert-menu .nav li ul {
left: calc(100%- 1px) !important; /*align submenu to the right of menu link*/
}
@media alland (min-width: 981px) {
.et-vert-menu .et_pb_menu__menu, .et-vert-menu .et_pb_menu__menu>nav {
width: 100%; /*width of the vertical navigation menu*/
}
/*Adjust the width of the main content and footer area to make room for the fixed vertical header*/
#et-main-area {
width: calc(100%- 300px);
margin-left: 300px;
}
}
Sosyal medya takip düğmesi ve simgeleri tasarlayın
Artık menü tamamlandığında, dikey başlığı tamamlamak için bir düğme ekleyebilir ve bazı sosyal medya bağlantıları takip edebiliriz.
Satır ekleme
Geçerli satırın bir sütun altına yeni bir satır ekleyin.
Bir düğme ekleyin
Ardından satıra bir Düğme modülü ekleyin.
Düğme ayarlarını aşağıdaki gibi güncelleyin:
- Düğme hizalaması: orta
- Düğme için özel stiller kullanın: EVET
- Düğme metni boyutu: 18 piksel (masaüstü), 14 piksel (tablet ve telefon)
- Düğme metin rengi: #ffffff
- Düğme arka plan rengi: #535b7c
- Düğme kenarlık genişliği: 0 piksel
Ardından, gelişmiş sekmeye gidin ve aşağıdaki özel CSS'yi ana öğeye yapıştırın:
CSS ana öğesi (masaüstü)
display:block;
width: 100%;
CSS ana öğesi (tablet)
display:inherit;
Sosyal medya takip simgeleri eklendi
Düğmenin altına, bizi sosyal medyada takip edin modülünü ekleyin.
Sekmenin altına istediğiniz sosyal ağları ekleyin içindekiler.
Stil sekmesinde aşağıdakileri güncelleyin:
- Modül Hizalaması: Merkez
- Simge rengi: #535b7c
Ardından, her bir sosyal ağ için ayarları açın ve arka plan rengini kaldırın.
Ardından, aşağıdaki gibi küçük bir üst kenar boşluğu ekleyin:
- Marj: 3vh Tepe
Satır parametrelerini güncelleme
Sosyal Medya Takip Simgeleri tamamlandığında, Hat Ayarları'nı açın ve aşağıdakileri ayarlayın:
- Özel Oluk Genişliğini Kullan: EVET
- Sütun aralığı: 1
- İç Kenar Boşluğu: 3vh Üst, 0px Alt
Düzeni ve şablonu kaydet
Bittiğinde, düzeni ve şablonu kaydedin.
Nihai sonuç
İşte canlı bir sayfadaki sonuç.
DIVI'yı Şimdi İndirin !!!
Sonuç
Burada gösterilen dikey gezinme menüsüne sabit bir konum verilmiştir. Ancak, ek menü öğeleri veya içerik için daha fazla alana ihtiyacınız varsa, bölümün konumunu mutlak olarak değiştirebilirsiniz.
Dikey bölüm kurulumu ayrıca özel kenar çubukları oluşturmanın kapısını da açar.
Herhangi bir endişeniz veya öneriniz varsa, bizi yorumlar bölümü bunu tartışmak için.
Ancak, ayrıca kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.
Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.
...
