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

Yayınlanan: 2022-05-12

Slayt menüleriyle ilgili en güzel şey, ekranda fazladan yer kaplamadan daha fazla içeriğin kullanılabilir olmasına izin vermeleri ve çoğu düzene uymaları ve genellikle mobil uygulamalarda bulunmalarıdır, bu nedenle bunları kullanırken bir aşinalık duygusu olacaktır.

Bu eğitimde Divi web sitenizde bir kayar menüye sahip olmanın iki yolunu göstereceğiz, ilki Divi Teması için tema özelleştiriciyi kullanmak ve ikincisi Divi tema oluşturucuyu kullanarak küresel bir başlık oluşturmak.

Divi Via Tema Özelleştirici'de Kaydırmalı Menü Nasıl Oluşturulur

İlk olarak, web sitesi tema özelleştiricisine erişebilmek için WordPress'te yönetici olarak oturum açmanız ve Divi tema oluşturucusunda etkin bir genel başlık bulunmadığından emin olmanız gerekir. Ardından Divi → Tema Özelleştirici seçeneğine ilerleyin.

Web sitenizi özelleştirmek için tema özelleştirmesine yönlendirileceksiniz. Buradan site başlığınızı ve sloganınızı değiştirebilir, bir kenar çubuğuna veya altbilgiye widget'lar ekleyebilir, menüler oluşturabilir, ana sayfa ayarlarınızı değiştirebilir ve daha fazlasını yapabilirsiniz.

Başlık ve Gezinme bloğu → Başlık Formatı → Başlık Stili'ni tıklatarak devam edin, ardından İçeri kaydır seçeneğini seçin.

Viola, tıpkı sürgülü menünüz harekete geçmeye hazır gibi.

Ancak, içeri kaydırmalı menü genişliğini, arka plan rengini, metin boyutunu ve daha fazlasını değiştirmek gibi daha fazla özelleştirme eklemek isterseniz, seçiminizi yaptıktan sonra görünen Başlık ve Gezinme bloğundaki İçeri Kaydır ve Tam Ekran Üstbilgi Ayarları'na gidebilirsiniz. sürgülü veya tam ekran menü seçeneği.

Divi Via Theme Builder'da Kaydırmalı Menü Nasıl Oluşturulur

Bu sefer genel bir başlık oluşturarak Divi tema oluşturucusunu kullanarak Divi'de nasıl açılır menü oluşturacağınızı göstereceğiz. WordPress panosundaki Divi menüsünden Tema Oluşturucu seçeneğini seçin ve ardından genel bir başlık oluşturmaya devam edin.

Bölüm Ayarı

Divi Builder düzenleyicisine yönlendirileceksiniz, bölüm ayarları simgesine tıklayarak başlayın İlk bölüm ayarını değiştirmek için Bölüm arka plan rengini saydam olana değiştirerek devam edin: rgba(255,255,255,0)

Varsayılan Üst ve Alt dolguyu kaldırmak için Tasarım sekmesi → Aralık'a gidin. Her ikisi için de değeri 0 olarak ayarlayın.

Gelişmiş sekmesi → Konum'a gidin, ardından Konum seçeneğini Sabit olarak değiştirin ve Konumu en üst orta olana değiştirin.

İlk Satır Ayarı

Aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır ekleyerek devam edin:

Herhangi bir modül eklemeden önce, önce Satır Ayarları'nı açın, ardından Tasarım sekmesindeki Boyutlandırma ve Aralık seçeneğini aşağıdaki gibi değiştirin:

boyutlandırma :

  • Genişlik : %97
  • Maksimum Genişlik : %100

boşluk :

  • Üst Dolgu : 1%
  • Alt Dolgu : 0px

Ardından Gelişmiş sekmesi → Özel CSS → Ana Öğe'ye gidin ve aşağıdaki parçacıkları buraya ekleyin: 

 ekran: esnek;
hizalama öğeleri: merkez;

Buraya bir Görüntü Modülü ekleyerek site logonuzu bu satırın ilk sütununa yerleştirebilirsiniz.

Etkileşimli Hamburger Simgesi Oluşturun

Üçüncü sütuna veya sütun 3'e gidin ve bir Metin Modülü ekleyin. Etkileşimli bir hamburger simgesi oluşturmak için özel sınıflarla üç HTML aralığı eklemek için görsel yerine metin sekmesini kullanacağız. 

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

Ardından bu değeri kullanarak arka plan rengini değiştirin: rgba(0,0,0,0.04)

Eklediğimiz açıklıklar üzerinde tam kontrole sahip olmak için 0em değeri girerek metin satırı yüksekliğini kaldırmak için Tasarım sekmesi → Metin → Metin Satırı Yüksekliği'ne gidin.

Boyutlandırma ayarına gidin ve değeri aşağıdaki gibi değiştirin:

  • Genişlik : 120 piksel
  • Modül Hizalaması : Sağ

Boşluk ayarlarına dolgu özel değerleri ekleyerek modülü kare haline getirelim, değer aşağıdaki gibi:

  • Üst Dolgu : 40px
  • Alt Dolgu : 60px
  • Sol Dolgu : 40px
  • Sağ dolgu : 40px

Ardından modülü tamamlamak için özel bir CSS kimliği ekleyin. Kodumuzda bir tıklama işlevi oluşturmak için bu CSS kimliğini kullanacağız. Gelişmiş sekmesine gidin → CSS Kimliği ve Sınıfları , ardından aşağıdaki metni CSS Kimliği alanına girin:

  • CSS kimliği : açık kaydırma

İkinci Satır Ayarları

Yeni bir satır, ikinci satır oluşturarak devam edelim. Henüz herhangi bir modül eklemeden, ayarlarını açmak için satır ayarları simgesine tıklayın. Bu satır, tüm sürgülü menümüzün yeri olacaktır.

Arka plan rengini istediğiniz gibi değiştirelim, menümüz için şu rengi seçiyoruz: #e7e0e2

Tasarım sekmesine giderek devam edin → Boyutlandırma ve değeri aşağıdaki gibi değiştirin:

  • Özel Oluk Genişliğini Kullan : Evet
  • Oluk Genişliği : 1
  • Genişlik : %20 (Masaüstü), %40 (Tablet), %60 (Telefon)
  • Yükseklik : 100vh

Ardından Aralık ayarlarına gidin ve Üst Doldurma için farklı cihazlarda değeri değiştirin: 10vw (Masaüstü), 30vw (Tablet), 40vw (Telefon).

Özel bir CSS sınıfı ekleyerek devam edin, satırın içeri girmesine izin vermek için buna ihtiyacımız var. Gelişmiş sekmesine gidin → CSS Kimliği ve Sınıfları , ardından aşağıdaki metni CSS Sınıfları alanına girin:

  • CSS Sınıfı : menüde kaydırmalı kapsayıcı

Ardından, opacity ekleyerek satırın opaklığını varsayılan durumda 0'a getirin opacity: 0; Özel CSS → Ana Öğe'de .

İkinci sıra ayarını bitirmek için, Konum ayarındaki konumlandırmayı aşağıdaki değerlere değiştirin:

  • Pozisyon : Mutlak
  • Konum : Sağ Üst
  • Yatay Ofset : -%20 (Masaüstü), -%40 (Tablet), -%60 (Telefon)

Menü Eklemek

Bir metin modülü ekleyerek ve göstermek istediğiniz ilk menüyü yazarak menüyü eklemeye başlayalım, ilk menümüz için home'u kullanıyoruz. Ardından, ilgili bir bağlantı ekleyin.

Arka plan rengini şu şekilde değiştirerek devam edin: rgba(216,210,212,0.35)

Tasarım sekmesine gidin ve Metin ayarlarını aşağıdaki gibi değiştirin:

  • Yazı Tipi : Arial
  • Metin Yazı Tipi Ağırlığı : Kalın
  • Metin Rengi : #0c71c3
  • Metin Boyutu : 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
  • Metin Gölgesi : Işık Efekti
  • Metin Hizalama : Merkez

Farklı cihazlarda Aralık değerlerini değiştirerek devam edin. Değerler aşağıdaki gibidir:

  • Alt Kenar Boşluğu : 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
  • Üst Dolgu : 1vw
  • Alt Dolgu : 1vw

İlk menü tamamlandı, şimdi menünün geri kalanı için, yinelenen modül simgesine tıklayarak ilk menüyü klonlamamız gerekiyor. ve sonra metni ve bağlantıyı istediğimiz gibi değiştirin.

Slide-In İşlevini Ekleme

İlk satırın ikinci sütununa bir kod modülü ekleyerek menüyü bitirelim, ardından aşağıdaki kodu modülün içine kopyalayalım. 

 <stil>
#açık kaydırma{
imleç: işaretçi;
}
 
.astar{
Ekran bloğu;
konum: mutlak;
yükseklik: 4 piksel;
genişlik: %100;
arka plan: #24394A;
sınır yarıçapı: 9 piksel;
opaklık: 1;
-webkit-geçiş: .1s giriş-çıkış kolaylığı;
-moz-geçiş: .1s giriş-çıkış kolaylığı;
-o-geçiş: .1s giriş-çıkış kolaylığı;
geçiş: .1s giriş-çıkış kolaylığı;
}
 
.hat 2 {
üst: 10 piksel;
}
 
.line-3 {
üst: 20 piksel;
}
 
#slide-in-open.open .line-1 {
üst: 10 piksel;
-webkit-dönüşüm: döndür (135deg);
-moz-dönüşüm: döndür (135 derece);
-o-dönüşüm: döndür (135 derece);
dönüştürmek: döndürmek(135deg);
}
 
#slide-in-open.open .line-2 {
görüntü yok;
}
 
#slide-in-open.open .line-3 {
üst: 10 piksel;
-webkit-dönüşüm: döndür(-135deg);
-moz-dönüşüm: döndür(-135deg);
-o-dönüşüm: döndür(-135deg);
dönüştür: döndür (-135 derece);
}
 
.slide-menü {
sağ: 0 !önemli;
opaklık: 1 !önemli;
}
 
.slide-in-menü-konteyner {
-webkit-geçişi: tüm 0,5 saniyelik kolaylık !important;
-moz-geçişi: 0,5 saniyenin tamamı !important;
-o-geçiş: tüm 0,5'ler kolaylaşır !important;
-ms-geçişi: 0,5 saniyenin tümü !important;
geçiş: tüm 0,5 saniye kolaylık !important;
}
</style>
<script>
jQuery(işlev($){
$('#slide-in-open').click(function(){
$(bu).toggleClass('açık');
$('.slide-in-menü-container').toggleClass('menüde-kaydır');
});
});
</script>

Kod, tıklama işlevi efektiyle ilgilenmeli ve hamburger simgesinin yayılma şeklini belirlemeli, ardından simgeye tıklandığında menünün kaymasını sağlamalıdır.

Kaydırmalı menü tamamlandıktan sonra projeyi kaydedelim ve Divi tema oluşturucudaki tüm değişiklikleri kaydet'e tıklayarak değişiklikleri uygulayalım. Web sitemizdeki bir yazıdaki menüye bir göz atalım.