Alt çekmeceler, herhangi bir eşyaya faydalı eklemelerdir. Site Web, kullanıcılar tarafından kolayca erişilebilen ek içeriği depoladıkları için. Alt bilgi çekmeceleri, bir düğme tıklanarak veya üzerlerine gelinerek açılıp kapatılabilen web içeriği kaplarıdır (Divi bölümü gibi). Premium içerik için küçük bir zulaya sahip olmak gibi.
Bu eğitimde, Divi'de kayan bir altbilgi çekmecesi tasarlayacağız. Altbilgi çekmecesini global altbilgi alanına ekleyeceğiz. web sitesi şablonu böylece alt bilgi çekmecesine site genelinde normal alt bilgi içeriğiyle erişilebilir.
Kullanacağımız işlemle, herhangi bir Divi bölümü (ve içeriği) birkaç dakika içinde bir alt bilgi çekmecesine dönüştürülebilir.
Altbilgi Çekmecesi Şablonunu Divi Sitenize Ekleme
Bu modelin eklenmesi, web sitesi şablonu varsayılan olarak (varsa) Divi sitenizde. Canlı bir sitede hiçbir şeyi karıştırmamak için onu bir test sitesine eklemenizi öneririz.
Sabit altbilgi çekmecesi şablonunu kendi başınıza içe aktarmak için Site Web, JSON dosyasına erişmek için indirme zip dosyasını açın.
Ardından WordPress kontrol paneline gidin ve Divi> Tema Oluşturucu'ya gidin.
Ardından sayfanın sağ üst tarafındaki taşınabilirlik simgesine tıklayın.
Taşınabilirlik penceresinde, yeni açtığınız JSON dosyasını seçin ve daha önce bir şeyiniz olması ihtimaline karşı "İçe aktarmadan önce yedeklemeyi indir" seçeneğini seçin. web sitesi şablonu geçersiz kılmak istemediğiniz varsayılan.
Ardından İçe Aktar düğmesini tıklayın.
Son olarak, tema üreticisine değişiklikleri kaydedin ve sabit altbilgi çubuğunu görmek için canlı bir sayfa görüntüleyin.
Şimdi öğreticiye geçelim, tamam mı?
Bölüm 1: Global Altbilgi Ekleme
Divi tema oluşturucusu, varsayılan web sitesi şablonunu güncelleyerek varsayılan altbilgiyi yenisiyle değiştirmenize olanak tanır.
Global bir altbilgi oluşturmak için, WordPress kontrol paneline gidin ve Divi> Tema Oluşturucu'ya gidin. Ardından, Varsayılan Web Sitesi Şablonunun içindeki "Genel Altbilgi Ekle" alanına tıklayın.
Ardından açılır listeden "Genel Altbilgi Oluştur" seçeneğini seçin.
Genel altbilgi düzenine önceden tanımlanmış bir düzen ekleme
Bu, Model Yerleşim Düzenleyicisini dağıtacak ve burada, inşa etmeye nasıl başlamak istediğinize dair üç seçenek size hemen sorulacaktır. "Önceden tanımlanmış bir düzen seçin" seçeneğini seçin.
Kitaplıktan Yükle açılır penceresinde, kırtasiye açılış sayfası düzenini bulun. Ardından "Bu düzeni kullan" ı tıklayın.
Hazır mizanpajdaki istenmeyen içeriği kaldırın
Düzen düzenleyiciye yüklendikten sonra, ayarlar menüsündeki katmanlar simgesine tıklayarak Katmanlar açılır kutusunu genişletin. Ardından, son ikisi dışındaki tüm düzen bölümlerini silin.
İki bölümü taşıma ve etiketleme
Bölümler kaldırıldıktan sonra, biri "Altbilgi" ve diğeri "Nasıl çalışır" başlıklı iki bölümünüz olmalıdır. "Altbilgi" bölümünü düzenin en üstüne taşıyın.
Alt bölümdeki ifadeyi "Altlık Çekmecesi" olarak değiştirin. Bu, altlık çekmecemizin içeriği olarak kullanacağımız bölüm olacaktır.
Bölüm 2: Sabit altbilgi çekmecesini oluşturma
Bölümlerden birini altbilgi ve diğerini altbilgi çekmecesi olarak belirlediğimize göre, artık sabit altlık çekmecemizi oluşturmaya hazırız. Altbilgi çekmecesini değiştirmek için kullanacağımız blurb simgesini oluşturarak başlayalım.
Altbilgi çekmecesi düğmesinin oluşturulması
Yeni bir satır ekle
Alt altbilgi bölümünde, bir sütuna yeni bir satır ekleyin.
Yeni satırı "Çekmece Düğmesi" olarak etiketleyin çünkü bu, çekmeceyi açıp kapatmak için kullanılan düğmeyi içerecek satırdır. Ardından çizgiyi bölümün üstüne taşıyın.
Satır dolgu
Bir modül eklemeden önce, satır ayarlarını açın ve dolguyu aşağıdaki gibi güncelleyin:
- Dolgu: 0 piksel yüksek, 0 piksel düşük
Bölüm dolgusu
Ardından "Altbilgi çekmecesi" bölümündeki ayarları açın ve dolguyu aşağıdaki gibi güncelleyin:
Altbilgi çekmecesini değiştiren tıklanabilir düğmeyi oluşturmak için, simgeli bir tanıtım modülü kullanacağız. Ve, Blurb kapsülü kabının kare şeklini daire simgesiyle birleştirerek ona benzersiz bir su damlası şekli vereceğiz.
İşte böyle.
Bir Bulanıklaştırma modülü ekleme
Bölümün üst kısmındaki "Çekmece düğmesi" satırına bir sunum metin modülü ekleyin.
Bulanık içerik / simge
Ardından, varsayılan başlığı ve gövde içeriğini kaldırın ve sol üst köşeyi işaret eden ok simgesini seçin (ekran görüntüsüne bakın). Kısmen döndürülmüş simgeyi kullanıyoruz çünkü onu daha sonra döndüreceğiz.
Bulanık Tasarım
Ardından sunum metnini aşağıdaki gibi verin:
- Arka Plan Rengi: # 081540
Ardından tasarım parametrelerini aşağıdaki gibi güncelleyin:
- Simge rengi: #eeeeee
- Daire simgesi: EVET
- Daire rengi: # 081540
- Simge yazı tipi boyutunu kullan: EVET
- Simge yazı tipi boyutu: 17 piksel
Sunum metni boyutu
Şimdi modüle aşağıdaki gibi bir yükseklik ve genişlik verin:
- Genişlik: 30px
- Yükseklik: 30px
Bu, su damlası şeklini oluşturmak için daire simgesinin metin kabına taşmasına neden olur.
Bulanık Konum
Ardından, sunum metnine bölümün üst ortasında mutlak bir konum verin.
- Pozisyon: Mutlak
- Yer: Top Center
Bulanık dönüşüm ayarları
Şimdi, bulutu / simgeyi yukarı döndürmek ve bölüm kabının hemen üstüne konumlandırmak için dönüştürme seçeneklerini kullanabiliriz. Şimdi, tarayıcı penceresinin altındaki bölümü gizlediğimizde, simge görünür / tıklanabilir kalacaktır.
Aşağıdaki öğeleri güncelleyin:
- Çevir X eksenini dönüştür: -50%
- Y ekseni çevirisini dönüştür:% -250
- Z ekseni dönüşünü dönüştürün: -45 derece
Ardından varsayılan simge animasyonunu kaldırın:
- Resim / Simge Animasyonu: Animasyon Yok
Çekmeceyi değiştirmek için JQuery kullanacağız, bu nedenle metni / simgeyi kodda daha sonra kullanacağımız bir CSS sınıfıyla tıklanabilir bir öğe olarak hedeflememiz gerekiyor. Aşağıdaki CSS sınıfını ekleyin:
- CSS sınıfı: hedef çekmece
Altbilgi çekmecesi bölüm ayarları
Şimdi çeviri dönüştürme seçeneğini kullanarak "Altlık Çekmecesi" bölümünü gizleyeceğiz. Bölüm ayarlarını açın ve aşağıdakileri güncelleyin:
- Y eksenini çevirme dönüşümü:% 100
Buradaki dönüşümü kullanmanın güzelliği, yüzde değerlerinin öğenin gerçek boyutuna dayalı olmasıdır. Böylece, Y ekseni üzerindeki% 100, doğrudan bölümün yüksekliğine göre olacaktır (herhangi bir zamanda neyse, nomatter). Başka bir deyişle, eleman kendi yüksekliği kadar tam mesafe aşağı hareket ettirilecektir.
"Alt Bilgi Çekmecesi" ni tekrar görünüme kavuşturmak için, bölüme az önce eklediğimiz dönüştürme çevirisini tersine çevirmemiz gerekecek. Bunu yapmak için, öğeyi bir CSS sınıfıyla hedeflememiz ve simgeye tıklayarak çeviri dönüşümünü devre dışı bırakmamız gerekir (tüm bölümü orijinal konumuna geri getirin).
Altbilgi çekmecesi bölümüne bir CSS sınıfı ekleme
Gelişmiş sekmesinin altında, aşağıdaki CSS sınıfını ekleyin:
- CSS sınıfı: has-dönüşümü
Altbilgi çekmecesi bölümü Sabit konum
Son adım için, altlık çekmecesini tarayıcı penceresinin altında (simgesiyle birlikte) kayacak şekilde sabitlememiz gerekir.
"Altbilgi Çekmecesi" bölümünün konumunu aşağıdaki gibi güncelleyin:
- Pozisyon: sabit
- Yer: sol alt
- Z Endeksi: 13
Mobil içeriği kapat
Hem tablete hem de telefona sığacak sınırlı miktarda altlık çekmecesi içeriğiniz olacağından (sınırlı ekran yüksekliği nedeniyle), gerekli olmayan öğeleri ekrandan devre dışı bırakmanız / gizlemeniz gerekecektir. Bu örnekte, kesit düzeninin orta satırını gizleyeceğiz.
"Altlık Çekmecesi" bölümünde ikinci satırdan son satıra kadar ayarları açın. Gelişmiş sekmesinin altında, telefon ve tablette hattı kapatmak için görünürlük seçeneğini güncelleyin.
Özel kod ekleme
Altbilgi çekmecesine tıklama ve geçiş işlevini eklemek için sayfaya özel CSS ve JQuery eklememiz gerekir. Bunu yapmak için, düğme için kullanılan Blurb modülünün altında yeni bir kod modülü oluşturun.
Sonra kod alanına aşağıdaki kodu yapıştırın:
.has-transform, .drawer-target {transition: all 400ms ease-in-out;} .toggle-drawer-animation {transform: none !important;}.toggle-icon-animation {transform: rotate(-135deg) !important;} .drawer-target {cursor: pointer;}(function($) {$(document).ready(function(){$('.drawer-target').click(function(){$(this).toggleClass('toggle-icon-animation'); $('.has-transform').toggleClass('toggle-drawer-animation'); }); });})( jQuery );
Değişiklikleri kaydet
Düzenleyiciden çıkmadan önce düzeni kaydetmeyi unutmayın.
Ayrıca tema üreticisine değişiklikleri kaydedin.
Nihai sonuç
Artık herhangi bir sayfanıza gidebiliriz Site Web Nihai sonucu görmek için.
Son düşünceler
Kayan altbilgi çekmecesinin size yardımcı olacağını umuyoruz desteklemek içeriği eğlenceli ve erişilebilir bir şekilde sunar. Herhangi bir çekmece gibi, onu da aklınıza gelebilecek hemen hemen her şeyle doldurabilirsiniz.
Diğer Kaynaklar
İşte Divi'nin dahili özellikleriyle daha fazlasını başarmanıza yardımcı olabilecek öğreticilerin bir listesi.
- Divi'de tema araç kutusu nasıl oluşturulur
- Divi'de animasyonlu bir tanıtım bölümü nasıl oluşturulur
- Divi'deki ızgaraları özelleştirme
Çeviri: Zarif Temalar
