Divi'de kayan ve duyarlı bir yan menü oluşturmak ister misiniz?
oluştururken Site Web, genellikle ne tür bir başlık oluşturacağınızı merak ediyorsunuz. Web'de en çok kullanılan, en üstteki yatay menü çubuğudur, ancak kayan menü gibi başka seçenekler de vardır.
Kayan menüler genellikle genel başlığın kapladığı alanı sınırlamanıza yardımcı olur. Böylece, bir kayan menünün görüntülenmesine izin verebilirsiniz. ziyaretçi sağ üst köşedeki hamburger simgesine tıklayın.
Bu nedenle, kayar bir menü kullanmak, içeriğinize ekstra etkileşim eklemenize yardımcı olur. Site Web.
Bu eğitimde, bu nedenle size Divi's Theme Builder'ı kullanarak nasıl bir tane oluşturacağınızı göstereceğiz.
Hadi başlayalım!
anket
Bu öğreticiye dalmadan önce, elde edeceğimiz sonuca bir bakalım.
Tema Oluşturucu'ya gidin ve genel bir başlık oluşturun
Tema Oluşturucu'ya gidin
Başlamak için, WordPress panonuzda bulunan Divi menüsünden Tema Oluşturucu'ya gidin ve "Global Başlık Ekle"yi tıklayın.
Genel başlığı oluşturun
'Genel başlık oluştur' öğesini seçerek devam edin.
Bir başlık stili oluşturun
Bölüm ayarları
Arka plan rengi
Şablon düzenleyiciye girdikten sonra bir bölüm göreceksiniz. Bu bölümü açın ve arka plan rengini şeffaf yapın.
- Arka plan: rgba (255,255,255,0)
aralık
Stil sekmesine geçin ve tüm alt ve üst kenar boşluklarını kaldırın.
- İç Kenar Boşluğu Tepe Noktası: 0px
- Alt İç Kenar Boşluğu: 0px
Postalamak
Ardından, gelişmiş sekmesine gidip konum ayarlarını değiştirerek bölümün konumunu değiştireceğiz.
- Pozisyon: Sabit
- Konum: Üst merkez
İlk satırı ekle
Sütunun yapısı
Bölüm ayarlarını tamamladıktan sonra aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyin:
boyutlandırma
Henüz herhangi bir modül eklemeden satır ayarlarını açın ve boyutlandırma ayarlarını aşağıdaki gibi değiştirin:
- Maksimum genişlik: %97
- Maksimum genişlik: %100
aralık
Aralık ayarlarını değiştirin.
- En Yüksek İç Marj: %1
- Alt İç Kenar Boşluğu: 0px
ana unsur
Daha sonra gelişmiş sekmesine gidin ve satırın ana öğesine iki satır CSS kodu ekleyin. Bu, dikey olarak hizalamamıza yardımcı olacaktır. içindekiler satırımızdaki sütunun.
display: flex;
align-items: center;
Sütun 1'e bir Görüntü modülü ekleyin
Logoyu indir
Sütun 1'deki Resim modülünden başlayarak modülleri eklemenin zamanı geldi. Logonuzu yükleyin.
3. sütuna bir Metin modülü ekleyin
İçerik alanına 3 boşluk ekleyin
<spanclass="line line-1"></span>
<spanclass="line line-2"></span>
<spanclass="line line-3"></span>
Arka plan rengi
Modülün arka plan rengini değiştirin.
- Arka plan: rgba (0,0,0,0.04)
Metin ayarları
Ardından, Stil sekmesine geçin ve metin satırı yüksekliğini kaldırın. Bu, eklediğimiz kapsamlar üzerinde tam kontrole sahip olmamıza yardımcı olacaktır.
- Metin satırı yüksekliği: 0em
boyutlandırma
Modül boyutlandırma parametrelerini değiştireceğiz.
- Maksimum genişlik: 120 piksel
- Metin hizalama: sağ
aralık
Ve modülü kareye dönüştürerek modül parametrelerini tamamlayacağız. Bunun için boşluk ayarlarında özel dolgu değerleri kullanacağız.
- İç Kenar Boşluğu Tepe Noktası: 40px
- Alt İç Kenar Boşluğu: 60px
- Sol İç Kenar Boşluğu: 40px
- Sağ İç Kenar Boşluğu: 40px
İkinci satırı ekle
Sütunun yapısı
Sonraki sıra! Tüm kayan menümüzü tasarlamak için bu satırı kullanacağız. Aşağıdaki sütun yapısını kullanın:
Arka plan rengi
Modül eklemeden satır ayarlarını açın ve arka plan rengini aşağıdaki gibi değiştirin:
- Arka plan: #e7e0e2
Arka plan resmi
Ayrıca desenli bir arka plan resmi kullanıyoruz. Seçtiğiniz bir arka plan desenini kullanabilirsiniz.
- Arka plan resmi boyutu: gerçek boyut
- Arka plan resmi konumu: merkez
- Arka Plan Resmini Tekrarla: Tekrarla
boyutlandırma
Ardından, Stil sekmesine geçin ve boyutlandırma ayarlarını buna göre değiştirin:
- Özel Oluk Genişliğini Kullan: Evet
- Sütun aralığı: 1
- Maksimum genişlik: %20 (masaüstü), %40 (tablet), %60 (telefon)
- Yükseklik: 100vh
aralık
Ayrıca farklı ekran boyutlarındaki boşluk ayarlarını da değiştirin.
- Zirve iç marjı: 10 vw (masaüstü), 30 vw (tablet), 40 vw (telefon)
sınır
Ve bir sol kenarlık ekleyerek çizgi parametrelerini tamamlayın.
- Sol kenarlık genişliği: 10 piksel
- Sol kenarlık rengi: #24394a
- Sol Kenar Stili: Çift
Sütuna bir Metin modülü ekleyin
İçerik ekle
İlk Metin Modülü menü öğesini eklemenin zamanı geldi! Kopyayı kutuya ekleyin içindekiler.
Bir link ekle
Menü öğesine ilgili bir bağlantı ekleyerek devam edin.
- Modül Bağlantı URL'si: #
Arka plan rengi
Ardından arka plan rengini değiştirin.
- Arka plan: rgba (216,210,212,0.35)
Metin ayarları
Ardından, Style'3 sekmesine geçin ve metin ayarlarını aşağıdaki gibi değiştirin:
- Metin Yazı Tipi: Domine
- Yumuşak Hafif Metin: Kalın Metin
- Metin Rengi Metin: #000000
- Metin Metin boyutu: 1vw (masaüstü), 2vw (tablet), 3vw (telefon)
- Metin Hizalama: Ortalanmış
aralık
Farklı ekran boyutlarına özel aralık değerleri ekleyerek modül ayarlarını tamamlayın.
- Alt Kenar Boşluğu: 1vw (masaüstü), 2vw (tablet), 3vw (telefon)
- En yüksek iç marj: 1vw
- Alt iç kenar boşluğu: 1vw
Klon metin modülü (menü öğesi başına 1 modül)
İlk menü öğesi metin modülünü tamamladıktan sonra, gerektiği kadar klonlayabilirsiniz. Modüllerinizin pencerenin yüksekliğini aşmadığından emin olun.
Yinelenen Metin modülü içeriğini ve bağlantılarını düzenleyin
Değiştirmek içindekiler ve her Yinelenen Metin modülünün bağlantıları.
Sütuna Düğme Modülü Ekle
Bir kopya ekle
Bu satırda ihtiyacımız olan son modül bir Düğme modülüdür. Seçtiğiniz bir kopyasını ekleyin.
Bir link ekle
Ayrıca bir bağlantı ekleyin.
- Düğme Bağlantı URL'si: #
hizalanma
Stil sekmesine geçin ve düğme hizalamasını değiştirin.
- Düğme hizalaması: ortalanmış
Düğme Ayarları
Düğme modülünü aşağıdaki gibi özelleştirerek devam edin:
- Düğme için özel stiller kullanın: Evet
- Düğme Metin Boyutu: 0,7 vw (masaüstü), 1,5 vw (tablet), 2,5 vw (telefon)
- Düğme metin rengi: #000000
- Arka plan düğmesi: rgba (0,0,0,0)
- Düğme Kenar Rengi: #24394a
- Kenar Yarıçapı düğmesi: 0 piksel
- Düğme Harf Aralığı: 4px
- Yazı Tipi Düğmesi: Hiçbirini Aç
- Yumuşak Işık düğmesi: Kalın metin
- Stili kopyala düğmesi: TT
aralık
Ve farklı ekran boyutlarına özel aralık değerleri ekleyerek modül ayarlarını tamamlayın.
- Üst Marj: 5vw
- En yüksek iç kenar boşluğu: 1vw (masaüstü), 2vw (tablet), 3vw (telefon)
- İç Kenar Boşluğu Alt: 1vw (masaüstü), 2vw (tablet), 3vw (telefon)
- Sol İç Kenar Boşluğu: 1,8 vw (masaüstü), 3 vw (tablet), 4 vw (telefon)
- Sağ iç kenar boşluğu: 1,8 vw (masaüstü), 3 vw (tablet), 4 vw (telefon)
Kaydırma işlevi ekleyin
Menü simgesi metin modülüne CSS kimliği ekleyin
Artık tüm öğeleri yerine getirdiğimize göre, duyarlı kayan menü efektini oluşturma zamanı! İlk olarak, ilk satırınızın üçüncü sütunundaki Metin modülünü (kapsamları içeren) açın ve gelişmiş sekmesinde özel bir CSS kimliği kullanın. Kodumuzda bir tıklama işlevi oluşturmak için bu CSS kimliğini kullanacağız.
- CSS kimliği: açık slayt
2. satıra CSS sınıfı ekleyin
Ardından ikinci satırı açın, gelişmiş sekmeye gidin ve özel bir CSS sınıfı ekleyin. Tıklandığında çizgi kayar.
- CSS sınıfı: menüde slayt kapsayıcı
2. satırın konumunu değiştirin
Bu hattı da yeniden konumlandıracağız. Boyutlandırma ayarlarında yatay ofsetin farklı ekran boyutlarında çizgi genişliğiyle nasıl eşleştiğine dikkat edin.
- Pozisyon: Mutlak
- Konum: Sağ üst
- Yatay ofset: -%20 (masaüstü), -%40 (tablet), -%60 (telefon)
2. satırın opaklığını değiştirin
Ve varsayılan durumda opaklığı 0'a getirin.
opacity: 0;
Kod modülünü ilk satırın ikinci sütununa ekleyin
CSS kodu ekle
Tıklama işlevi efekti oluşturmak ve hamburger simgemizin çıtalarına stil vermek için biraz CSS koduna ihtiyacımız olacak. İlk satırınızın ikinci sütununa bir kod modülü ekleyin ve stil etiketleri arasına aşağıdaki CSS kod satırlarını yerleştirin, Aşağıdaki yazdırma ekranında görebileceğiniz gibi:
#slide-in-open{
cursor: pointer;
}
.line{
display: block;
position: absolute;
height: 4px;
width: 100%;
background: #24394A;
border-radius: 9px;
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;
}
#slide-in-open.open .line-1{
top: 10px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#slide-in-open.open .line-2{
display: none;
}
#slide-in-open.open .line-3{
top: 10px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.slide-in-menu {
right: 0!important;
opacity: 1!important;
}
.slide-in-menu-container {
-webkit-transition: all0.5s ease !important;
-moz-transition: all0.5s ease !important;
-o-transition: all0.5s ease !important;
-ms-transition: all0.5s ease !important;
transition: all0.5s ease !important;
}
JQuery kodunu ekle
Ayrıca tıklama işlevi için biraz JQuery eklememiz gerekecek. Emin olun kodu komut dosyası etiketleri arasına yerleştirin , aşağıdaki baskı ekranında görebileceğiniz gibi:
jQuery(function($){ $('#slide-in-open').click(function(){ $(this).toggleClass('open'); $('.slide-in-menü-container') .toggleClass('menüde kaydır'); }); });
Tema oluşturucu değişikliklerini kaydedin ve sonucu web sitesinde görüntüleyin
Genel başlığınızın tüm öğelerini tamamladıktan sonra, tüm değişiklikleri kaydetmeniz ve sonucu sitenizde görüntülemeniz yeterlidir!
anket
Tüm adımların üzerinden geçtik, şimdi sonuca son bir göz atalım.
Sonuç
Sonuç olarak, bu makalede, duyarlı bir sürgülü menü oluşturmak için Divi'nin tema oluşturucusunu nasıl kullanacağınızı gösterdik. Bunun için Divi'nin en iyi yerleşik öğelerini ve seçeneklerini özel bir tıklama işlev koduyla birleştirdik. Böylece, açılır menüyü tasarlamaya odaklanmanıza ve genel başlığın işlevsel kısmıyla kodun ilgilenmesine izin verir!
Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorumlar bölümüne yorum yapmaktan çekinmeyin.
