Divi'de Aşağı Kaydırmalı Menü Nasıl Oluşturulur

Çok sayıda gezinme bağlantısına sahip büyük başlıklar, sitenizde (özellikle ekranın üst kısmında) çok değerli gayrimenkuller kaplayabilir. Bu yüzden açılır ve kayar menüler giderek daha popüler hale geliyor. Çoğu zaman, görüntülemek için kayan menüler, belirli öğeleri gizleyerek sayfa içeriğinin üzerinde kalır. Ancak, kayan bir itme menüsü biraz farklı çalışır. Kaydırmalı itme efekti benzersizdir, çünkü menü sayfanın üstünden içeri kayarken aynı anda sayfa içeriğini aşağı doğru iter, böylece hiçbir şey görünümden gizlenmez.

Bu eğitimde, Divi Theme Builder'ı kullanarak sıfırdan kayan bir itme menüsünün nasıl oluşturulacağını göstereceğiz. Menü oluşturulduktan sonra, Divi Builder'ı kullanarak bölümü istediğiniz herhangi bir içerikle doldurabileceğiniz için her tür uygulama için çok yönlü bir araç haline gelir.

Hadi hadi bakalım!

Gizlice Bakış

İşte bu eğitimde oluşturacağımız kayan itme menüsüne 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.

Bölüm düzenini Divi Tema Oluşturucunuza aktarmak için Divi Tema Oluşturucu'ya gidin.

Taşınabilirlik simgesini tıklayın.

Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin.

Ardından içe aktar düğmesini tıklayın.

Tamamlandığında, bölüm şablonu Divi Tema Oluşturucu'da görünecektir.

Hadi öğreticiye geçelim, olur mu?

Divi Theme Builder ile Kayan Push Menüsünü Oluşturma

Yeni Global Menü Oluşturma

Menüyü oluşturmak için Divi Theme Builder'da yeni bir genel başlık oluşturacağız.

Divi > Tema Oluşturucu'ya gidin.

Ardından, Varsayılan Web Sitesi Şablonu içindeki "Genel Başlık Ekle" alanına tıklayın. Açılır menüden "Global Başlık Oluştur"u seçin.

Bu sizi genel başlık düzeni düzenleyicisine getirecektir.

Global Header Layout Editor'a girdikten sonra, "Sıfırdan Oluştur" seçeneğini seçin.

Basma Menüsü Oluşturma

Birlikte oluşturacağımız ilk öğe, push menü bölümüdür. Bu bölüm, menü geçiş düğmesine tıklandığında aşağı ve yukarı geçiş yapacak menü öğelerini tutacaktır.

Bölüm Ayarları

Varsayılan bölümün ayarlarını açın ve ayarları aşağıdaki gibi güncelleyin:

Arka plan

• Arka Plan Rengi: #1a1e36

Dolgu malzemesi

• Dolgu: 0 piksel üst, 0 piksel alt

CSS Sınıfı

Gelişmiş sekmesinin altına, daha sonra JS kodumuzda kullanılacak olan aşağıdaki CSS Sınıfını ekleyin.

• CSS Sınıfı: et-push-menü

Özel CSS (tablet)

Ardından, ekleyeceğimiz ana başlık çubuğuna uyması için hesaplanmış bir yükseklik kullanarak bölümün yüksekliğini mobilde ayarlamamız gerekiyor. Bu, kullanıcı menüyü açıp kapattığında, bölümün mobilde pencerenin tüm yüksekliğini kapsamasını sağlar.

Yalnızca tablette Ana Öğeye aşağıdaki özel CSS'yi ekleyin:

height: calc(100vh - 70px);
overflow:scroll !important;
overscroll-behavior: contain;

1. Satır Ekle

Bölüm ayarları bittiğinde, bölüm içinde tek sütunlu bir satır oluşturun.

1. Sıra Ayarları

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

Tasarım

• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: 1280 piksel
• Dolgu: 3vh üst, 3vh alt
• Alt Kenar Genişliği: 1px
• Alt Kenarlık Rengi: rgba(255,255,255,0.2)

Özel CSS

Gelişmiş sekmesinin altında, ana öğeye aşağıdaki özel CSS'yi ekleyin:

Masaüstü altında…

display:flex;
justify-content:center;
align-items:center;

Tabletin Altında…

display:flex;
flex-direction:column;
align-items:center;

Sütun Ayarları

Satır ayarları yapıldıktan sonra, sütun için ayarları açın ve ana öğeye özel bir CSS parçacığı ekleyin:

display:flex;
align-items:center;
justify-content:center;

Bu, sütunun içeriğini hem dikey hem de yatay olarak ortalayacaktır.

Düğme Ekle

Artık buton modüllerini kullanarak menü öğelerimizi eklemeye hazırız. Sütuna yeni bir düğme ekleyerek başlayın.

Düğme Ayarları

Ardından düğme ayarlarını aşağıdaki gibi güncelleyin:

İçerik

• Düğme Metni: Tasarım
• Düğme Bağlantı URL'si: # (bunu daha sonra kendi özel URL'nizle değiştirin)

Tasarım

• Düğme Metin Rengi: #ffffff
• Düğme Kenar Genişliği: 0px
• Düğme Yazı Tipi: Montserrat
• Düğme Yazı Tipi Ağırlığı: Ağır
• Düğme Simgesi: [seçiminiz]
• Düğme Simge Yerleşimi: Sol

Sütunu Çoğaltmak

Şimdi menü için ek düğmeler oluşturmak için sütunu çoğaltabiliriz. Bu tasarım için, bize toplam 5 menü öğesi/düğmesi vermek için sütunu 4 kez çoğaltalım. beş sütunlu bir satırda.

2. Satırı Ekle

İlk satır tamamlandığında, farklı menü öğeleri için kullanılabilecek başka bir düğme satırı eklemeye hazırız.

Bir sonraki satırı oluşturmak için 1. satırı çoğaltın.

Biri Hariç Tüm Sütunları Sil

Ardından, yinelenen satırdaki biri hariç tüm sütunları silin.

2. Sıra Ayarları

Satır 2 ayarlarını aşağıdaki gibi güncelleyin:

• Maksimum Genişlik: 1080 piksel
• Alt Kenar Genişliği: 0px

Sütun Ayarları

Ardından sütuna aşağıdaki gibi bir kenarlık ekleyin:

• Sağ Kenar Genişliği: 1px
• Sağ Kenar Rengi: rgba(255,255,255,0.2)

Düğme Ayarlarını Güncelle

Sütun sağ kenarlığa sahip olduktan sonra, düğmenin ayarlarını açın ve aşağıdakileri güncelleyin:

• Düğme Metin Boyutu: 14px
• Düğme Harf Aralığı: 2px
• Düğme Yazı Ağırlığı: Yarı Kalın
• Düğme Yazı Tipi Stili: TT
• Düğme Simgesini Göster: HAYIR

Sütunu Çoğalt

Daha önce yaptığımız gibi, ek düğmeler ve sütunlar oluşturmak için sütunu çoğaltalım. Bu tasarım için, 4 sütunlu bir satırda bize toplam 4 düğme verecek şekilde sütunu 3 kez çoğaltalım.

Son Sütun Kenarlığını Silme

Son sütunun doğru kenarlığa sahip olmasını istemediğimizden, 4. sütun için ayarları açın ve kenarlık genişliğini güncelleyin:

• Sağ Kenar Genişliği: 0px

Ana Başlık Çubuğunu Oluşturma

Ardından, ana başlık çubuğu için bölüm oluşturacağız. Bu başlık çubuğu her zaman görünür kalacak ve site logomuzu, bir CTA'yı ve Menü geçiş düğmemizi tutan şey olacaktır.

Bölüm Ekle

Yeni bölümü eklemeden önce, bir önceki bölümün etiketini “Push Menü Bölümü” okuyacak şekilde güncellemek iyi bir fikirdir.

Ardından, ilk bölümün altında yeni bir bölüm oluşturun.

Bölüm Ayarları

Şimdi yeni bölümdeki etiketi “Başlık Bölümü” okuyacak şekilde güncelleyin. Ardından bölüm ayarlarını açın ve aşağıdakileri güncelleyin:

Dolgu malzemesi

• Dolgu: 0 piksel üst, 0 piksel alt

Satır ekle

Bölüm dolgusu eklendikten sonra bölüme üç sütunlu bir satır ekleyin.

Satır Ayarları

Satır ayarını açın ve aşağıdakileri güncelleyin:

boyutlandırma

• Oluk Genişliği: 1
• Genişlik: %90
• Yükseklik: 70 piksel

Dolgu malzemesi

• Dolgu: Dolgu: 0 piksel üst, 0 piksel alt

Özel CSS

Gelişmiş sekmesi altında, Ana Öğeye aşağıdaki Özel CSS'yi ekleyin:

display:flex;
align-items:center;

Bu, satır içindeki sütunları dikey olarak ortalayacaktır.

Düğme Ekle

Başlık bölümünde ana CTA'yı oluşturmak için üst bölümde ikinci satırdan bir buton kullanabiliriz. Düğmeyi üst bölümün 2. satırındaki 1. sütundan kopyalayın ve başlık bölümündeki satırın 1. sütununa yapıştırın.

Düğme Ayarlarını Güncelle

Ardından, çoğaltma düğmesi için düğme ayarlarını açın ve aşağıdakileri güncelleyin:

• Düğme Metni: Kaydolun
• Düğme Metin Boyutu: 14px
• Düğme Metin Rengi: #1a1e36
• Düğme Simgesini Göster: EVET
• Düğme Simgesi: Sağ Ok (ekran görüntüsüne bakın)

Logo Ekle

Orta sütuna bir görüntü modülü ekleyin. Site logosunu dinamik olarak bu şekilde ekleyeceğiz.

İmleci resim kutusunun üzerine getirin ve "Dinamik İçeriği Kullan" simgesini tıklayın. Açılır menüden “Site Logosu”nu seçin.

Görüntü Ayarları

Ardından, tasarım sekmesi altında aşağıdakileri güncelleyin:

• Görüntü Hizalama: merkez
• Maksimum Yükseklik: 55px

Özel Hamburger Simgesi Ekle

Menü geçişimiz olarak bir tanıtım yazısı modülü aracılığıyla normal bir simge kullanabilirdik, ancak bu eğitim için harika bir geçiş efektine sahip özel bir menü geçişi ekleyeceğimizi düşündüm.

Metin Modülü Ekle

Menü simgesini oluşturmak için, harici CSS ile stillendirilecek bazı özel HTML'li bir metin modülü kullanacağız.

Devam edin ve sütun 3'e bir metin modülü ekleyin.

Metin Modülü HTML'si Ekle

Ardından, metin modülünün içeriğine aşağıdaki HTML'yi ekleyin:

<p><span class="line line-1"></span><br /> <span class="line line-2"></span><br /> <span class="line line-3"></span></p>

Arka plan

Metin modülüne bir arka plan rengi verin:

• Arka Plan Rengi: #1a1e36

Metin Tasarımı

Ardından tasarım ayarlarını aşağıdaki gibi güncelleyin:

• Genişlik: 70 piksel
• Modül Hizalama: sağ
• Yükseklik: 70 piksel
• Dolgu: 20 piksel üst, 20 piksel alt, 16 piksel sol, 16 piksel sağ

CSS Sınıfı

Gelişmiş sekmesinin altına aşağıdaki CSS Sınıfını ekleyin:

• CSS Sınıfı: et-push-menü-toggle

Kod Ekle

Bu kayar basmalı menünün çalışması için ihtiyacımız olan işlevselliği eve getirmek için, bir kod modülüne özel CSS ve jQuery'mizi ekleyeceğiz.

Devam edin ve metin modülünün altındaki sütun 3'e bir kod modülü ekleyin.

Ardından aşağıdaki kodu yapıştırın (önemli: düzgün çalışması için bu kodu stil etiketlerine sarın):

  .line {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: #ffffff;
    opacity: 1;
    -webkit-transition: .1s ease-in-out;
    -moz-transition: .1s ease-in-out;
    -o-transition: .1s ease-in-out;
    transition: .1s ease-in-out;
  }
  .line-2 {
    top: 10px;
  }
  .line-3 {
    top: 20px;
  }
  .et-push-menu-toggle.open .line-1 {
    top: 10px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  .et-push-menu-toggle.open .line-2 {
    display: none;
  }
  .et-push-menu-toggle.open .line-3 {
    top: 10px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }
  .et-push-menu {
    display:none;
  }
  .et-fb .et-push-menu {
    display:block;
  }
  .et-push-menu-toggle {
    cursor:pointer;
  }

Ardından, bu kodu kopyalayıp doğrudan altına yapıştırın (önemli: düzgün çalışması için bu kodu komut dosyası etiketlerine sarın):

(function($) {
  $(document).ready(function(){
    $('.et-push-menu-toggle').click(function(){
      $(this).toggleClass('open');
      $('.et-push-menu').slideToggle( "300").toggleClass('et-push-menu-active');
    });
  });  
})( jQuery );

Düğme Metni ve Bağlantıları Güncelle

Son olarak gerekli buton metni ve link URL'leri ile tüm butonları güncelleyebiliriz.

Bu kadar!

Ayarları kaydet

Düzeni ve tema oluşturucu ayarlarını kaydetmeyi unutmayın.

Son sonuç

Nihai sonucu görüntülemek için sitenizdeki canlı bir sayfaya göz atın.

Yapışkan hale getirmek

Menünün “yapışkan” versiyonunu istiyorsanız, tek yapmanız gereken aşağıdaki CSS parçasını kod modülüne ( stil etiketleri arasına) eklemektir:

  header {
    position: sticky;
    top:0;
    z-index:9999;
  }
  #page-container {
    overflow-y: visible !important;
  }

Ve işte sonuç.

Son düşünceler

Umarım bu sürgülü menüden hoşlanırsınız. Efekt benzersizdir ve ileride daha yaratıcı başlıklar için kapıyı açar.

Yorumlarda sizden haber bekliyorum.

Şerefe!