Divi bölümüne/satırına animasyonlu efektler nasıl eklenir
Bugünün Divi öğreticisinde, divi bölümüne ve satırlara nasıl animasyon efektleri ekleyeceğinizi göstereceğiz. Divi teması, web sitenize ekstra etkileşim seviyesini getirmenize yardımcı olan birkaç alakalı animasyonlu efekt sağlar. Bu etki, gelişmiş sekmedeki animasyon alt kategorisindeki divi oluşturucunuzdaki görüntüye kolayca belirlenir. Ancak, bu animasyon efektini web sitenizin modüllerine, parçalarına veya diğer satırlarına eklemenin yollarını arıyorsanız, bu da mümkündür. Bu yazıda size nasıl yapılacağını göstereceğiz. Varsayılan bir animasyon efekti nasıl ekleyeceğinizi göstermenin yanı sıra, WOW.JS ve Animal.css’i Divi web sitenize nasıl entegre edeceğinizi de göstereceğiz.
Bu yazının sonunda, satırlarınıza ve parçalarınıza iyi bir etki ekleyebilirsiniz. Süreci görselleştirmenize yardımcı olmak için, aşağıdaki örneği paylaşmak istiyoruz (bu, bu yazının sonunda bunu nasıl başaracağınızı göstereceğiz):
Divi animasyonunu ne zaman kullanmalı Divi’de kullanabileceğiniz beş animasyonlu efekt vardır:
Hangi soluk
Aşağıdaki Slayt
Sol kaydır
Doğru slayt
En iyi slayt
Sadece beş olasılık olmasına rağmen, bunlar da en yaygın olarak kullanılanlardır. Basit ve noktaya kadar. Web sitenize çok fazla denemeden iyi bir ekstra etki vermek istiyorsanız, Divi’nin animasyon etkisi yoldur. Bu efektlerin her biri, kaydırdığınız ve efekti eklediğiniz modülleri, satırları veya parçaları gördüğünüz için etkinleştirilir. Bu şekilde, ziyaretçileriniz, örneğin sayfanın altında bulunan efektleri kaçırmayacaklardır. Bu efekti hala ana tema üzerinde çalışırken kolayca ekleyebilirsiniz. Wow.js & anize.css ne zaman kullanılır
Wow.js & Animal.css’i web sitenize entegre et, sahip olduğunuz birçok seçenek nedeniyle gerçekten sevebileceğiniz bir şeydir. Bu kategoriyle ilgili farklı efektler içeren 14 animasyon kategorisi vardır. Seçebileceğiniz kategoriler aşağıdaki gibidir: Dikkat Arayanlar
Giriş sıçradı
Zıplayan
Giriş kaybolur
Silik
yüzgeci
Işık Hızı
Giriş dönüyor
Dışarı çıkıyor
Slayt girişi
Slayt çıkışı
Zoom girdi
Zoom çıktı
Özel
Aşağıdaki bağlantıyı tıklayarak mevcut tüm efektleri görebilirsiniz. Bu animasyonlu etki, yuvarlanırken de görünür.
YouTube kanalına abone olarak bölüm/satıra animasyon efektleri nasıl eklenir Varsayılan animasyon efekti kullanıyoruz, göstereceğimiz ilk olasılık doğuştan gelen animasyon efektidir. Etkinin bölüme ve satıra nasıl uygulanacağını göstereceğiz. Değişiklikler yapmak istediğiniz sayfayı açın. Örneğimizde, sayfalarımızın ilk bölümüne ve satırına animasyon efektleri ekleyeceğiz. Her iki durumda da aynı şekilde parçaya veya satıra animasyon ekleyin. Farklı animasyon efektleri için CSS sınıf kodu aşağıdaki gibidir: CSS FADE -Sınıfta: ET -WayPoint ET_PB_ANIMATION_Fade_IN
CSS Class Slayt Aşağıda: ET-WayPoint ET_PB_ANIMATION_BOTTOM
Slayt-In Sol CSS Sınıfı: ET-WayPoint ET_PB_ANIMATION_LEFT
Slayt Sağ: CSS Sınıfı: ET-WayPoint ET_PB_ANIMATION_RIGHT
CSS Sınıfı CSS Slayt Üstü: ET-WayPoint ET_PB_ANIMATION_TOP
Belirli bir satıra animasyon eklemek, satır ayarlarını açmak ve devam eden sekmeyi açmak için animasyon efektini satıra ekleyin. Gelişmiş sekmesinin içine, CSS animasyon efekt sınıfını CSS sınıfına yerleştirin. Bu durumda, size Fade-in animasyonunun nasıl ekleneceğini göstereceğiz.
Aynı yönteme animasyon efektleri ekleyin, satırlara animasyon efektleri eklemeniz için bölümler için de geçerlidir. Gelişmiş sekmesini açın ve CSS sınıf alanında seçtiğiniz animasyon etkisinin CSS sınıfını yerleştirin. Bu örnekte, en üst slayt-in animasyon efekti nasıl ekleneceğinizi göstereceğiz.
Sonuçlar Etki bölümünüze ve satırınıza ekledikten sonra aşağıdaki sonuçları göreceksiniz: WOW.JS & ANIZE.CSS ekleyin Çocuğunuzun temasına bu sonraki bölümde, WordPress sitenize Wow.js ve Anize.css’in nasıl ekleneceğini ve tüm divi temalarınızda nasıl kullanılacağını göstereceğiz. Her şeyden önce, Wow.js ve Animal.css’i WordPress’e nasıl entegre edeceğinizle ilgili bunu yayınlamak için Jeremy Cookson’a kredi vermek istiyorum. Bu yazıda, Divi temasıyla oluşturulan WordPress web sitesi için entegrasyonun nasıl yapılacağını tam olarak göstereceğiz. Wow.js & anize.css eklemek için web sayfanıza, Web Sitenizde Çocuk Temasını kullanmanız gerekir. Bir çocuk teması nasıl yapacağınızı merak ediyorsanız, bu gönderiye bakın. Çocuk temanızın ana dosyasını oluşturduktan sonra, çocuğunuzun temasını animasyonlu efektle tamamlamak için iki dosya eklemelisiniz. Dosyayı indirin ve çocuğunuzun temasına ekleyin ve aşağıdaki ikisini indirmek için çocuğunuzun temasına ekleyin Aşağıdaki iki bağlantıya tıklarken dosyalar: animate.min.css
wow.min.js
İki dosya indirdikten sonra, çocuğunuzun temasında bir alt klasör oluşturun. Bunlardan birinden CSS ve diğer JS’den bahsedin. Bundan sonra, CSS ve Wow.min.js klasörünü JS klasörüne CSS’ye yerleştirin.
Yapmanız gereken bir sonraki şeyin temasını yükleyin Wow.js ve hayvan.css ile eklediğiniz çocuğun temasını yüklemek ve etkinleştirmektir. WordPress Dashboard> Ekran> Tema> ‘ı açın ve sayfanın üst kısmındaki’ Yeni Ekle’yi tıklayın.
PHP kodunu işlevlerinize ekleyin. ‘sk_enqueue_scripts’; Sk_enquee_scripts () function () {wp_enqueue_style (‘animasyon’, get_stylesheet_directory_uri (). ‘/Css/animate.min.css’); wp_enqueue_script (‘vay’, get_stylesheet_directory_uri (). ‘/js/wow.min.js’, array (), “, true); } //* wow.js add_raction (‘wp_enqueue_scripts’, ‘sk_wow_init_in_footer’) etkinleştirmek için enqueue betiği; İşlev sk_wow_init_in_footer () {add_action (‘print_footer_scripts’, ‘wow_init’);} //* javascript için javascript ekle işlev wow_init () {?>
<? PHP} Wow.js ve animasyon.css'in etkisini eklemek için sistem ve sistem parçalarına animasyon ekleyin ve divi animasyon efekti ile aynı kısım. Satır ayarlarını veya hayvan efekti eklemek istediğiniz parçaları açmanız gerekir. Ardından, animasyon için CSS sınıf setini bölümünüzdeki veya satırınızdaki CSS sınıf alanına yerleştirebilirsiniz. Satırla göstereceğimiz örnek için satıra animasyon ekleyin, animasyon efekt listesinde bulduğumuz FadeInright efektini kullanırız. Satır ayarlarınızdan Gelişmiş sekmesini açın ve CSS sınıfına 'Wow Faderight' ekleyin. Web sitenize her efekt eklemek istediğinizde, kullandığınız etkinin önüne 'vay' koyduğunuzdan emin olun.
Sonuçlar CSS sınıfını eklediğinizde ve üzerinde çalıştığınız sayfaları görüntülediğinizde, aşağıdaki sonuçları elde etmelisiniz: Aynı yönteme animasyon ekle, bölüme animasyon efektleri eklemek için geçerlidir. Devam sekmesini açın ve bölümünüzdeki CSS 'Wow BounceIndown' sınıfını CSS sınıf alanına ekleyin.
Şimdi, aşağıdaki düğmeyi tıklayarak üzerinde çalıştığınız sayfa ayarlarına CSS gecikme sınıfını ekleyin: Ardından, CSS kod hattı ile CSS sınıfını özel CSS alanına ekleyin. Bu örnekte yapacağımız gibi 2 saniye gecikme eklemek istiyorsanız, aşağıdaki CSS kod satırlarına ihtiyacınız var: .delay { -Webkit-Animation-Delay: 2s; -Moz-animasyon gecikmesi: 2s; -Ms-animasyon gecikmesi: 2s; -o-animasyon-gecikme: 2s; } Sonuçlar Gecikme süresini ekledikten sonra, sonuçlar şöyle görünecektir:
Bu yazıdaki son zihin, Divi web sitenize nasıl animasyon efektleri ekleyeceğinizi gösterdik.Size iki olasılık veriyoruz.Birincisi, Divi tarafından sağlanan standart animasyon efekti nasıl kullanılacağını gösterir.İkinci olasılık, wow.js ve hayvan.css entegre olmanızı sağlar.Web sitenizdeki animasyon efektleri kullanmak, ziyaretçilerinizle paylaşmak istediğiniz içeriği vurgulamanıza yardımcı olabilir.Buna ek olarak, aynı zamanda iyi görünüyor.Sorularınız veya önerileriniz varsa;Aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun.Büyük duyuruları, yararlı ipuçlarını veya divi freebie’yi asla kaçırmayacak şekilde e -posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun!Üstün Görüntü Top / Shutterstock.com Stocker
