Divi Web Siteniz için Dikey Gezinme Menüsü (veya Başlık) Nasıl Oluşturulur

Dikey gezinme menüleri, ön planda daha fazla menü öğesine ihtiyaç duyan belirli web siteleri için kullanışlı olabilir. Yatay menülerin, özellikle daha küçük tarayıcı genişliklerinde, gereken tüm menü bağlantılarına uyması zor olabilir. Bu eğitimde, Divi Tema Oluşturucu'yu kullanarak özel bir dikey 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. Dikey başlığa ek Divi Modülleri eklemek ve bunları Divi oluşturucu ile tasarlamak için tam güce sahip olacaksınız.

Başlayalım!

Gizlice Bakış

İşte bu eğitimde oluşturacağımız tasarıma hızlı bir bakış.

Düzeni ÜCRETSİZ İndirin

Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

Şablonu yüklemek için WordPress web sitenizin arka ucundaki Divi Tema Oluşturucu'ya gidin.

Global Varsayılan Web Sitesi Şablonunu Yükleyin

Ardından, sağ üst köşede iki oklu bir simge göreceksiniz. simgesine tıklayın.

İçe aktarma sekmesine gidin, bu gönderide indirebildiğiniz JSON dosyasını yükleyin ve 'Divi Tema Oluşturucu Şablonlarını İçe Aktar'a tıklayın.

Divi Tema Oluşturucu Değişikliklerini Kaydet

Dosyayı yükledikten sonra, varsayılan web sitesi şablonunuzda yeni bir genel üstbilgi ve altbilgi göreceksiniz. Şablonun etkinleştirilmesini istediğiniz anda Divi Tema Oluşturucu değişikliklerini kaydedin.

Hadi öğreticiye geçelim, olur mu?

Bölüm 1: Yeni Bir Küresel Başlık Oluşturma

Bu eğitim için, Divi Theme Builder'ı kullanarak Global Header'da dikey gezinme menüsünü oluşturacağız. Ancak, sitenizin ana menüsüne ek olarak kullanmak istemeniz durumunda, aynı menüyü bir sayfa şablonunun gövdesine nasıl ekleyeceğinizi yazının sonunda göstereceğiz.

Başlamak için WordPress Dashboard'a gidin ve Divi > Theme Builder'a gidin.

Ardından, Varsayılan Web Sitesi Şablonunun "Global Başlık Ekle" alanını tıklayın ve açılır menüden "Global Başlık Oluştur"u seçin.

Ardından “Sıfırdan Oluştur” seçeneğini seçin.

Bölüm 2: Dikey Bölüm Düzenini Tasarlama

Global Header Layout Editor içinde, zaten orada bulunan normal bölümün ayarlarını açın ve aşağıdakileri güncelleyin.

• Genişlik (masaüstü): 300 piksel
• Genişlik (tablet ve telefon): %100

• Yükseklik (masaüstü): 100vh
• Yükseklik (tablet ve telefon): otomatik

• Dolgu (masaüstü): 4vh üst, 0px alt
• Dolgu (tablet ve telefon): 0 piksel üst, 0 piksel alt

Aşağıdaki gibi bir kutu gölgesi ekleyerek tasarıma devam edin:

• Kutu Gölgesi: ekran görüntüsüne bakın
• Kutu Gölge Dikey Konumu: 0px
• Kutu Gölge Bulanıklığı Gücü: 20px
• Kutu Gölge Yayılma Gücü: -10px
• Gölge Rengi: rgba(0,0,0,0.3)

Kullanıcı ekranı kaydırırken dikey gezinme menüsünün solda görünmesini sağlamak için konumu sabit olarak güncelleyin ve z dizinini aşağıdaki gibi güncelleyin:

• Pozisyon: Sabit
• Z İndeksi: 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;

Artık bölümünüz şablonun sol tarafında dikey bir düzendedir.

Bölüm 3: Dikey Menünün Tasarlanması

Bölüm yerindeyken, dikey menüyü tasarlamaya hazırız. Bunu yapmak için, dikey olarak görüntülenecek navigasyonu biçimlendirmek için bazı özel CSS'li bir menü modülü kullanacağız.

Menünün farklı tarayıcı yükseklikleriyle güzel bir şekilde ölçeklenmesi için vh uzunluk birimini de kullanacağız.

Satır Ekleme

Başlamak için bölüme tek sütunlu bir satır ekleyin.

Ardından satır ayarlarını aşağıdaki gibi güncelleyin:

Boyut ve Dolgu

• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %80
• Dolgu (masaüstü): 3vh üst, 3vh alt
• Dolgu (tablet ve telefon): 0 piksel üst, 0 piksel alt

Sınır

• Kenar Genişliği: 1px
• Kenar Rengi: #eeeeee

Menü Modülünü Ekleme

Tek sütunlu satırın içine yeni bir Menü Modülü ekleyin.

İçerik geçişi altında görüntülenecek bir menü seçin.

Ardından, Logo geçişi altında Site Logonuzu dinamik içerik olarak ekleyin.

Tasarım sekmesi altında aşağıdakileri güncelleyin:

• Stil: Merkezli
• Menü Yazı Tipi: Nunito Sans
• Menü Metin Rengi: #535b7c
• Menü Metin Boyutu: 18px (masaüstü), 14px (tablet ve telefon)
• Menü Satır Yüksekliği: 2em
• Açılır Menü Satır Rengi: #535b7c
• Açılır Menü Aktif Bağlantı Rengi: #535b7c

• Alışveriş Sepeti Simge Rengi: #535b7c
• Arama Simgesi Rengi: #535b7c
• Hamburger Menü Simgesi Rengi: #535b7c

• Dolgu (masaüstü): 2vh üst, 2vh alt
• Dolgu (masaüstü): 10 piksel üst, 10 piksel alt

Bölüm 4: Menü için Özel CSS Ekleme

Menünün, elde etmek istediğimiz dikey gezinmeyi elde etmek için bazı özel CSS'lere ihtiyacı var. Başlamak için gelişmiş sekmesine gidin ve aşağıdaki özel CSS'yi Menü Bağlantısı ve Menü Logosuna ekleyin.

Menü Bağlantısı CSS (masaüstü):

width: 100%;
padding: 1vh 15px;
background: #f8f8f8;
border-radius: 3px;
border: 1px solid #eeeeee;

Menü Bağlantısı CSS (tablet):

width: auto;
border:none;

Menü Logo CSS'si:

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ü

Bir kod modülü kullanarak ekleyeceğimiz harici özel CSS'mizde bu belirli menüyü hedeflemek için kullanılacaktır.

Kod Modülü ile Özel CSS Ekleme

Menü modülünün altına yeni bir kod modülü ekleyin.

Ardından aşağıdaki kodu kod kutusuna yapıştırın (stil etiketleri arasına yerleştirdiğinizden emin olun):

/*Style Vertical Navigation Menu*/  
.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: 10px 0 !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 all and (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;
}
}

Bölüm 5: Düğmeyi ve Sosyal Medya Takip Simgelerini Tasarlama

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 altına yeni bir tek sütunlu satır ekleyin.

Düğme Ekleme

Ardından satıra yeni bir düğme modülü ekleyin.

Düğme ayarlarını aşağıdaki gibi güncelleyin:

• Düğme Hizalama: merkez
• Düğme Metin Boyutu: 18px (masaüstü), 14px (tablet ve telefon)
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #535b7c
• Düğme Kenar Genişliği: 0px

Ardından gelişmiş sekmeye gidin ve aşağıdaki özel CSS'yi Ana Öğeye yapıştırın:

Ana Öğe CSS (masaüstü)

display:block;
width: 100%;

Ana Öğe CSS (tablet)

display:inherit;

Sosyal Medya Takip Simgelerini Ekleme

Düğmenin altına bir Sosyal Medya Takip modülü ekleyin.

İçerik sekmesi altında istediğiniz Sosyal Ağları ekleyin.

Tasarım sekmesi altında aşağıdakileri güncelleyin:

• Modül Hizalaması: Merkez
• Simge Rengi: #535b7c

Ardından ağların her birinin ayarlarını açın ve arka plan rengini silin.

Ardından, aşağıdaki gibi biraz üst kenar boşluğu ekleyin:

• Marj: 3vh üst

Satır Ayarlarını Güncelle

Sosyal medya takip simgeleri tamamlandıktan sonra, satır ayarlarını açın ve aşağıdakileri yapın:

• Oluk Genişliği: 1
• Dolgu (masaüstü): 3vh üst, 0px alt
• Dolgu (tablet ve telefon): 10 piksel üst

Düzeni ve Şablonu Kaydet

Bittiğinde, düzeni ve şablonu kaydedin.

Son sonuç

İşte canlı bir sayfada nihai sonuç.

Sayfa Şablonunun Gövde Alanına Dikey Gezinme Menüsü Nasıl Eklenir

Bir sayfa düzenine dikey gezinme menüsü eklemek istiyorsanız (genel başlığınız yerine), önce bölüm düzenini Divi Kitaplığına kaydetmeniz gerekir.

Bunu yapmak için Global Başlık Düzen Düzenleyicisini açın ve dikey bölümü (menüyü içeren) Divi Kitaplığınıza kaydedin.

Ardından mizanpaj düzenleyicisinden çıkın ve yeni bir şablon oluşturun ve istediğiniz sayfaya/sayfalara atayın. Sayfa şablonu için özel bir gövde oluşturmak için tıklayın.

Sıfırdan inşa etmek için seçin.

Düzene yeni bir tam genişlik bölümü ekleyin.

Ardından bölüme Tam Genişlikli Gönderi İçeriği Modülü ekleyin.

Sayfanın üst kısmındaki varsayılan normal bölümü silin ve ardından tam genişlik bölümü için ayarları açın ve Ana Öğeye aşağıdaki özel CSS'yi ekleyin:

Ana Öğe CSS (masaüstü)

width: calc(100% - 300px);
margin-left:300px !important;

Ana Öğe CSS (tablet)

width: 100%;

Normal bölümün altında, yeni bir bölüm eklemek için tıklayın ve Kitaplıktan Ekle sekmesi altında, daha önce kitaplığa kaydettiğiniz dikey menü bölümünü seçin.

Bölümün mobilde görünmesini istemediğimiz için bölüm ayarlarını açın ve bölümün tablet ve telefonda görünürlüğünü devre dışı bırakın.

Ardından bölüm düzeni içindeki kod modülünü açın ve bu kod parçasını değiştirin…

#et-main-area { 
width: calc(100% - 300px); 
margin-left: 300px;
}

Bununla…

#main-header, #main-footer { 
width: calc(100% - 300px); 
margin-left: 300px;
}

Bu, sayfa şablonunun solundaki sabit dikey menüye sığdırmak için ana üstbilgi ve altbilgiyi hareket ettirecektir. Divi'nin varsayılan üstbilgisini ve altbilgisini kullanan canlı bir sayfada nasıl göründüğü aşağıdadır.

Son düşünceler

Burada yer alan 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. Kullanıcıya menü öğeleri arasında gezinme olanağı vermek için dikey taşmayı kaydırmak için de değiştirebilirsiniz (sadece bu taşma ayarıyla alt menüleri göremeyeceğinizi/kullanamayacağınızı unutmayın).

Dikey bölüm kurulumu, bazı özel kenar çubukları oluşturmak için de kapıyı açar. Umarım bu gelecekteki projeler için kullanışlı olur.

Yorumlarda sizden haber bekliyorum.

Şerefe!