Hover.css kullanarak gelişmiş vurgunun divi bulanık modülüne etkisi nasıl eklenir
Bugünün Divi öğreticisinde, hover.css kullanarak Divi Blurb modülüne bazı gelişmiş havuz efektleri nasıl ekleyeceğinizi göstereceğiz. Tabii ki, kutunun dışında Divi, aklınıza gelebilecek her türlü sayfa için inanılmaz bir açıklama yapmak için ihtiyacınız olan her şeye sahiptir. Ancak topluluğumuzda, müşterinin sitesini rekabetten çok farklı hale getirmek için Divi’yi her zaman sınırlarına itmek (ve bazen ötesine) itmek isteyen birçok tasarımcı olduğunu biliyoruz. Dolayısıyla bu öğretici, Divi’nin gelişmiş özelliklerini kullanmayı seven herkes için tasarlanmıştır. Bakalım bugün ne yapacağımız.
Önizleme: Bu yazının sonundaki nihai sonuç (ve size hover.css aracılığıyla rehberlik ettikten sonra), aşağıdaki sonuçları nasıl elde edeceğinizi göstereceğiz:
Geliştirici Lisansı (14 $ ve 1 proje için iyi)
Takım Lisansı (18 $ ve sınırsız projeler için iyi)
İhtiyaçlarınıza bağlı olarak, lisansınızı satın alabilir ve web sitenizdeki etkilerini kullanabilirsiniz.
Yüzen liste
Ardından, hover.css ile istediğiniz çeşitli kaydırma efektlerine bakalım. Çeşitli kategorilere dahil olanların çoğuna sahipsiniz. Toplamda yedi kategori vardır: 2D geçiş Arka plan geçişi
Simge
Sınır geçişi
Gölge ve Işık Geçişi
Kabarcıklar Konuşma
Kıvırcık
Bu efektlerin her biri, bulanık modülünüze veya web sitenizdeki herhangi bir modül türüne ekstra ayarlamalar verebilecek bir dizi etki içerir. Yükleme Hover.css’i doğrudan çocuğunuzun temasına koyarak yükleyebilseniz bile, bit ve parçaları da kullanabilirsiniz. Bu öğreticide yapacağımız şey bu. CSS kodunu belirli bir etkiden alacağız ve doğrudan Divi Builder’ımıza ekleyeceğiz. Bunu yapmamızın nedeni, bazı durumlarda (efektleri yalnızca modül öğeleri için geçerli olmak istediğimiz yerde), sağlanan küçük bir kodu değiştirmeniz gerektiğidir.
Zappayan indirme klasörünü açın ve hover.css dosyasını bulun.
Bu dosyayı Notepad ++ gibi bir kod düzenleyicisiyle açın ve tek tek düşürmenin tüm efektlerini göreceksiniz. CSS dosyasında kullanılan adlar web sitesindekilerle aynıdır. Web sitesine gidebilir ve hangi animasyonu sevdiğinizi görebilirsiniz. Bundan sonra, CSS dosyasına geri dönebilir ve adını arayabilirsiniz.
Etkileşimli Blurb Modülünüzü Oluşturma Şimdi size hover.css kullanmanın kolay bir yolunu gösterdik, şimdi sağlanan efekti kullanırken etkileşimli bir bulanıklık modülünü nasıl yeniden oluşturacağınızı göstermenin zamanı geldi. Bir hatırlatma olarak, sonuçta bakalım: Üç sütun satır ekleyin Yapmanız gereken ilk şey, yeni bir sayfadaki veya mevcut bir sayfadaki yeni bir bölüme üç sütun satırı eklemektir. İlk bulanıklık modülünü nasıl ekleyeceğinizi göstereceğiz ve bundan sonra, aynı adımları tekrarlayarak başka bir sütuna bir bulanıklık modülü de ekleyebilirsiniz. Yapmanız gereken bir sonraki şeyin geniş bir çizgisini yapın, satırı tam olarak yapmak. Bunu yapmak için çizgi ayarlarınızı açın ve tasarım sekmesini açın. Tasarım sekmesinin içinde; Alt kategori boyutlandırmasında ‘Bu satır tam genişliğinde yap’ seçeneğini etkinleştirin. Uygulamalı dolgu sütunu Yapmanız gereken bir sonraki şey, satır ayarlarında hala tasarım sekmesinde olduğunuzda birkaç sütun yatağı eklemektir. Aşağı kaydırın ve sütun 1’in altındaki dolguya% 5 ekleyin. Kutu Gölgesi ve Sınır yarıçapını sütuna uygulayın ve satır ayarında yapmanız gereken son şey gelişmiş sekmeye gitmektir. Gelişmiş sekmesinin içinde, sütun 1’in ana öğelerine gidin ve aşağıdaki CSS kodunu kopyalayıp yapıştırın: -Webkit-Box-Shadow: 0 19px 38px RGBA (0.0.0.0.15), 0 15px 12px RGBA (0, 0.0 , 0.10); -Moz-Box-Shadow: 0 19px 38px RGBA (0.0,0,0.0.15), 0 15px 12px RGBA (0.0.0.0.10); Box-Shadow: 0 19px 38px RGBA (0.0,0,0.0.15), 0 15px 12px RGBA (0.0.0.0.10); Border-Radius: 6px;
Bunu yapmayı bitirdikten sonra satır ayarlarını kapatabilirsiniz. Görüntü Modülünü Ekle Yapacağımız bir sonraki şey, görüntü modülünü ilk sütuna eklemektir. Teknik olarak, bu bulanıklık modülünün bir parçası değil, sonuçta paylaşılıyor gibi görünüyor. Bunun nedeni, sütunları tüm modülleri toplayan ve birbirine uygun hale getiren bir tür kutu olarak kullanmamızdır.
Resmi yükleyin ve şimdilik olduğu gibi görüntü modülünü bırakın. Blurb Modülünü Ekle Çizgiye eklememiz gereken bir sonraki şey bulanıklık modülü. Bir bulanıklık modülü ekledikten sonra bazı değişiklikler yapmalısınız. Başlık metni, içerik metni ve simgeler seçerek ve tasarım sekmesine dönerek başlayın. Tasarım sekmesindeki simgeyi ayarlayın, bulacağınız ilk şey görüntü ve simgelerin bir alt kategorisidir. Bu alt kategoride, aşağıdaki değişikliklerin geçerli olduğundan emin olun: Renk simgesi: #ffffff
Çember simgesi: evet Çember rengi: #004370
Resim Yerleştirme/Simge: Üst
Simge yazı tipi boyutu kullanın: evet
Yazı tipi boyutu simgesi: 45px (masaüstü), 40 piksel (tablet), 37 (cep telefonu)
Editoryal metni aynı sekmede ayarlayın ve başlık metni alt kategorisinde aşağıdaki değişiklikleri yapın:
Yazı tipi başlık boyutu: 16 (masaüstü ve tablet), 14 (cep telefonu)
Renk Renk Travması: #004370
Gölgelik çizgisinin yüksekliği: 2.2em
Top:% 25
Doğru:% 5
Sol:% 5 Aşağıda:% 5
Alt kenar boşluğunu sonuna ekleyin, ancak en az değil, gelişmiş sekmeyi açın ve bulanıklık başlığının altındaki kenar boşluğuna ‘3px’ ekleyin:
Hover.css efektini, hover.css efektinin eklenmesini içeren bu yazının son kısmına ekleyin. Önce görüntü modülüne ve bulanık modülüne ve bu yazının bir sonraki bölümüne, Hover efektini sadece bulanıklık modülünün öğesine ekleyeceğiz.
Tambahkan Kelas CSS ke Modul Gambar Buka pengaturan gambar Anda dan buka tab Advanced. Di dalam tab Advanced, tulis kelas CSS efek hover yang ingin Anda gunakan. Dalam hal ini, kami menerapkan efek ripple out yang memiliki ‘hvr-ripple-out’ sebagai nama kelas CSS-nya. Tekrar; Anda dapat menemukan nama kelas ini di dalam file hover.css di folder zip Anda.Tambahkan Kelas CSS ke Modul Blurb Demikian juga, buka pengaturan Blurb dan buka tab Advanced. Dalam hal ini, kita akan menerapkan efek shrink hover ke modul lengkap. Jadi, ketik ‘hvr-shrink’ di bidang Kelas CSS.
Tambahkan Kode CSS Selanjutnya, tambahkan baris kode CSS berikut ke pengaturan halaman Anda dengan mengklik tombol berikut: Lanjutkan dengan menempatkan baris kode CSS berikut di bidang CSS Kustom: .hvr-shrink { Ekran: satır içi blok;
Dikey-High: Orta; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
.hvr-shrink:hover, .hvr-shrink:focus, .hvr-shrink:active {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
@-webkit-keyframes hvr-ripple-out {
100% {
top: -12px;
right: -12px;
bottom: -12px;
left: -12px;
Opaklık: 0;
}
}
@keyframes hvr-ripple-out {
100% {
top: -12px;
right: -12px;
bottom: -12px;
left: -12px;
Opaklık: 0;
}
}
.hvr-ripple-out {
Ekran: satır içi blok;
Dikey-High: Orta;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
Pozisyon: göreceli;
}
.hvr-ripple-out:before {
İçerik: ”;
Pozisyon: Mutlak; Sınır: #004370 Katı 6px;
Üst: 0;
Sağ: 0;
Alt: 0;
Sol: 0;
-Webkit-animasyon süresi: 1s;
Animasyon süresi: 1s;
}
.HVR-Ripple-Out: Hover: Önceden, .hvr-rippple out: Odak: Daha önce, .hvr-Ripple-Out: Active: Önce {
-Webkit-Animation-Name: HVR-Ripple-Out;
Animasyon adı: HVR-Ripple out;
}
Bu, hover.css dosyasında bulabileceğinizle neredeyse aynı olan bir CSS kod satırıdır. Tek farklı şey, dalgalanma etkisi için kullanılan sınırın rengidir. Renk, daire simgesinde kullanılanla aynıdır. Bu açıklamaya eklediğimiz üçüncü bulanıklık modülündeki ayrı öğeler için hover.css efektini kullanın, imleci bulanıklık başlığına yönlendirdikten sonra görünen çizgidir. Bulanıklık modülü farklı öğeler içerir. Bu nedenle, listede sadece hover.css sınıfını kullanamayız. Bunun yerine, CSS kimliğini modüle ayarlamalıyız ve Blurb başlığı için özel olarak belirlenen CSS sınıfını kullanmalıyız. Blurb modülüne CSS kimliği ekleyin, bulanıklık modülüne CSS kimliği ekleyerek başlayın. Bu durumda ‘merkez’ kullanıyoruz.
CSS kodunu ekleyin, önceki CSS kodunu koyduğunuzla aynı yere kopyalayıp ekleyerek devam edin: #center.et_pb_blurb_0.et_pb_brurb h4 {
-Webkit-Transform: Perspektif (1px) Translatez (0);
Dönüşüm: Perspektif (1px) Translatez (0);
Box-Shadow: 0 0 1px şeffaf;
Pozisyon: göreceli; Taşma: gizli; }
#center.et_pb_blurb_0.et_pb_blurb h4: {
İçerik: “”;
Pozisyon: Mutlak;
Z -index: -1;
Sol:%50;
Sağ:%50;
Alt: 0;
Arka plan: #004370;
Yükseklik: 4px;
-Webkit-Transition-Profession: Sol, sağ;
Geçiş-property: sol, sağ;
-Webkit-Transition süresi: 0.3s; geçiş süresi: 0.3s;
-Webkit-Transition-Timing-Fonction: kolaylık;
Geçiş-zamanlama fonksiyonu: kolaylık;
}
#center.et_pb_blurb h4: Hover: Önceden, #center.et_pb_brurb_0.et_pb_brurb H4: Focus: daha önce, #center.et_pb_blurb_0.et_pb_brurb h4: aktif: öncesi {
Sol: 0;
Sağ: 0;
} Kodda kullandığınız sınıf adı modülden modüle farklıdır. Bunu yalnızca bir modüle uygulamak istiyorsanız, belirli bir modülden bulanıklığın başlığına bir sınıf kümesi kullanmalısınız:
Ancak, kodun tüm açıklamalar için geçerli olmasını istiyorsanız, aşağıdaki CSS kod satırını kullanın: #center.et_pb_blurb h4 {
-Webkit-Transform: Perspektif (1px) Translatez (0);
Dönüşüm: Perspektif (1px) Translatez (0);
Box-Shadow: 0 0 1px şeffaf;
Pozisyon: göreceli;
Taşma: gizli;
} #center.et_pb_blurb h4: Önce {
İçerik: “”;
Pozisyon: Mutlak;
Z -index: -1;
Sol:%50;
Sağ:%50;
Alt: 0;
Arka plan: #004370;
Yükseklik: 4px;
-Webkit-Transition-Profession: Sol, sağ;
Geçiş-property: sol, sağ;
-Webkit-Transition süresi: 0.3s;
Geçiş süresi: 0.3s;
-Webkit-Transition-Timing-Fonction: kolaylık;
Geçiş-zamanlama fonksiyonu: kolaylık;
}
#center.et_pb_blurb h4: Hover: Önceden, #center.et_pb_brurb_0.et_pb_brurb H4: Focus: daha önce, #center.et_pb_blurb_0.et_pb_brurb h4: aktif: öncesi {
Sol: 0;
Sağ: 0;
