Divi'de Bölümlere/Satırlara Animasyon Efektleri Nasıl Eklenir

Bugünün Divi eğitiminde, Divi'de bölümlere ve satırlara nasıl animasyon efektleri ekleyeceğinizi göstereceğiz. Divi temasının kendisi, web sitenize ekstra bir etkileşim düzeyi getirmenize yardımcı olan bazı ilgili animasyon efektleri sağlar. Bu efektlerin Divi Builder'ınızdaki Gelişmiş sekmesinin Animasyon alt kategorisindeki bir görüntüye atanması kolaydır.

Ancak, bu animasyon efektlerini web sitenizin diğer modüllerine, bölümlerine veya satırlarına eklemenin bir yolunu arıyorsanız, bu da mümkündür. Bu yazıda, size bunu tam olarak nasıl yapacağınızı göstereceğiz. Size yerleşik animasyon efektlerini nasıl ekleyeceğinizi göstermenin yanı sıra, wow.js ve animate.css'yi Divi web sitenize nasıl entegre edeceğinizi de göstereceğiz.

Bu yazının sonunda hem satırlarınıza hem de bölümlerinize güzel efektler ekleyebileceksiniz. Süreci görselleştirmenize yardımcı olmak için aşağıdaki örneği paylaşmak istiyoruz (ki bunu nasıl başaracağınızı bu yazının sonunda göstereceğiz):

Divi Animasyonları mı, Wow.js ve Animate.css mi?

Muhtemelen hangi durumlarda Divi animasyonlarını kullanmayı düşünmeniz gerektiğini ve hangi durumlarda wow.js & animate.css'nin işi daha iyi yapacağını merak ediyorsunuzdur. Bazı gelişmiş animasyon efektleri oluşturmak istemiyorsanız Divi yerleşik animasyonunu kullanmak en kolay çözüm olsa da, wow.js ve animate.css efektleri kesinlikle web sitenize büyük bir katma değer getirecektir.

Divi Animasyonları Ne Zaman Kullanılır?

Divi'de kullanabileceğiniz beş kullanılabilir animasyon efekti vardır:

• soldurma
• Alt slayt
• Sol kaydırma
• Doğru kaydırma
• Üst kaydırma

Sadece beş olasılık olmasına rağmen, bunlar en sık kullanılanlardır. Onlar basit ve noktaya. Web sitenize çok fazla çaba harcamadan hoş bir ekstra efekt vermek istiyorsanız, Divi animasyon efektleri tam size göre. Bu efektlerin her biri, kaydırdığınız andan itibaren etkinleştirilir ve efekti eklediğiniz modül, satır veya bölümün görünümüne sahip olursunuz. Bu şekilde, örneğin ziyaretçileriniz sayfanın alt kısmında bulunan efektleri kaçırmazlar.

Divi animasyon efektlerini entegre etmek için web sitenize bir alt tema yüklemeniz gerekmez. Ana tema üzerinde çalışırken bu efektleri kolayca ekleyebilirsiniz.

Wow.js ve Animate.css Ne Zaman Kullanılır?

wow.js ve animate.css'yi web sitenize entegre etmek, sahip olduğunuz birçok seçenek nedeniyle muhtemelen gerçekten seveceğiniz bir şeydir. Bu kategoriyle alakalı farklı efektler içeren 14 animasyon efekti kategorisi vardır. Aralarından seçim yapabileceğiniz kategoriler şunlardır:

• Dikkat Arayanlar
• Zıplayan Girişler
• Zıplayan Çıkışlar
• Solan Girişler
• Solan Çıkışlar
• palet
• Işık hızı
• Döner Girişler
• Döner Çıkışlar
• Kayar Girişler
• Kayar Çıkışlar
• Yakınlaştırma Girişleri
• Yakınlaştırma Çıkışları
• Özel

Mevcut tüm efektleri aşağıdaki bağlantıya tıklayarak görüntüleyebilirsiniz. Bu animasyon efektleri kaydırma sırasında da görünür.

Divi'de Bölümlere/Satırlara Animasyon Efektleri Nasıl Eklenir

Youtube Kanalımıza Abone Olun

Yerleşik Animasyon Efektlerini Kullanın

Size göstereceğimiz ilk olasılık, yerleşik animasyon efektleridir. Efektleri hem bir bölüme hem de bir satıra nasıl uygulayacağınızı göstereceğiz. Değişiklikleri yapmak istediğiniz sayfayı açın.

Örneğimizde, sayfamızın ilk bölümüne ve satırına animasyon efektleri ekleyeceğiz. Bölüm veya satır için animasyon eklemek her iki durumda da aynıdır. Farklı animasyon efektleri için CSS sınıf kodları şunlardır:

• Fade-in CSS sınıfı: et-waypoint et_pb_animation_fade_in
• Alt kaydırmalı CSS sınıfı: et-waypoint et_pb_animation_bottom
• Sol kaydırmalı CSS sınıfı: et-waypoint et_pb_animation_left
• Sağ kaydırmalı: CSS sınıfı: et-waypoint et_pb_animation_right
• Üst kaydırmalı CSS sınıfı: et-waypoint et_pb_animation_top

Satıra Animasyon Efekti Ekle

Animasyonu belirli bir satıra eklemek için o satırın ayarlarını açın ve Gelişmiş sekmesine gidin. Gelişmiş sekmesinde, CSS sınıfı animasyon efektini CSS Sınıfı alanına yerleştirin. Bu durumda, solma animasyonunu nasıl ekleyeceğinizi göstereceğiz.

Bölüme Animasyon Efekti Ekle

Bir satıra animasyon efekti eklemeniz için aynı yöntem, bir bölüm için de geçerlidir. Gelişmiş sekmesine gidin ve seçtiğiniz animasyon efekti CSS sınıfını CSS Sınıfı alanına yerleştirin. Bu örnekte, size en üstteki slayt animasyon efektinin nasıl ekleneceğini göstereceğiz.

Sonuç

Efektleri bölümünüze ve satırınıza ekledikten sonra, aşağıdaki sonucun yerine oturduğunu göreceksiniz:

Wow.js ve Animate.css'i Çocuk Temanıza Ekleyin

Bu sonraki bölümde, wow.js ve animate.css'yi WordPress web sitenize nasıl ekleyeceğinizi ve Divi temanız boyunca nasıl kullanacağınızı göstereceğiz.

Her şeyden önce, wow.js ve animate.css'nin WordPress'e nasıl entegre edileceğine dair bu yazı için Jeremy Cookson'a teşekkür etmek istiyorum. Yazının bu bölümünde, Divi temasıyla oluşturulmuş bir WordPress web sitesi için entegrasyonun tam olarak nasıl gerçekleştirileceğini göstereceğiz.

wow.js & animate.css'yi web sayfanıza eklemek için web sitenizde bir alt tema kullanmanız gerekir. Bir çocuk temasının nasıl oluşturulacağını merak ediyorsanız, bu gönderiye göz atın. Alt temanızın ana dosyalarını oluşturduktan sonra, alt temanızı animasyon efektleriyle tamamlamak için iki dosya daha eklemeniz gerekir.

Dosyaları İndirin ve Alt Temanıza Ekleyin

Çocuğunuzun temasını elinizin altında tutun ve aşağıdaki iki bağlantıya tıklayarak aşağıdaki iki dosyayı aynı anda indirin:

• canlandırmak.min.css
• vay.min.js

İki dosyayı indirdikten sonra alt temanızda alt klasörler oluşturun. Bunlardan birine CSS, diğerine JS adını verin. Bundan sonra, animate.min.css dosyasını CSS klasörüne ve wow.min.js dosyasını JS klasörüne yerleştirin.

Alt Temayı Yükle

Yapmanız gereken bir sonraki şey, wow.js ve animate.css'yi eklediğiniz alt temayı yüklemek ve etkinleştirmektir. WordPress Panonuz > Görünüm > Temalar > Sayfanın üst kısmındaki 'Yeni Ekle'ye tıklayın.

Functions.php Dosyanıza PHP Kodu Ekleyin

Alt temayı yükledikten sonra, alt temanızın function.php dosyasına aşağıdaki PHP kod satırlarını ekleyin:

//* Animate.CSS ve WOW.js'yi kuyruğa alın
add_action('wp_enqueue_scripts', 'sk_enqueue_scripts');
function sk_enqueue_scripts() {
wp_enqueue_style('animate', get_stylesheet_directory_uri() .'/css/animate.min.css');
wp_enqueue_script('wow', get_stylesheet_directory_uri() .'/js/wow.min.js', array(), ”, true );
}
//* WOW.js'yi etkinleştirmek için komut dosyasını kuyruğa alın
add_action('wp_enqueue_scripts', 'sk_wow_init_in_footer');
function sk_wow_init_in_footer() { add_action('print_footer_scripts', 'wow_init');}
//* JavaScript'i </body>function'den önce ekleyin wow_init() { ?>
<script type=”metin/javascript”>
yeni WOW().init(); </script><?php }

Satırlar ve Bölümlere Animasyon Ekleme

wow.js ve animate.css efektlerini satırlara ve bölümlere ekleme sistemi Divi animasyon efektleriyle aynıdır. Animasyon efektini eklemek istediğiniz satırın veya bölümün ayarlarını açmanız gerekir. Ardından, animasyona atanan CSS sınıfını, bölüm veya satırınızın CSS Sınıfı alanına yerleştirebilirsiniz.

Satıra Animasyon Ekle

Satırla birlikte size göstereceğimiz örnek için, animasyon efektleri listesinde bulduğumuz fadeInRight efektini kullanıyoruz. Satır ayarlarınızın Gelişmiş sekmesine gidin ve CSS Sınıfı alanına 'wow fadeInRight'ı ekleyin. Web sitenizin bir bölümüne her efekt eklemek istediğinizde, kullandığınız efektin önüne 'wow' koyduğunuzdan emin olun.

Sonuç

CSS sınıfını eklediğinizde ve üzerinde çalıştığınız sayfanın önizlemesini yaptığınızda, aşağıdaki sonucu elde etmiş olmalısınız:

Bölüme Animasyon Ekle

Aynı yöntem, bir bölüme animasyon efekti eklemek için de geçerlidir. Gelişmiş sekmesine gidin ve bölümünüzün CSS Sınıfı alanına 'wow sıçramaInDown' CSS Sınıfını ekleyin.

Sonuç

Tüm adımları doğru bir şekilde takip ettiyseniz, aşağıdaki sonucu elde etmelisiniz:

Gelişmiş seçenekler

Animasyonunuza bazı ek özellikler eklemek isterseniz, bunu da yapabilirsiniz. Örneğin, animasyon efektlerinizden birine bir gecikme süresi ekleyebilirsiniz. Bu, aynı bölümde bir bölüm animasyonunu satır animasyonuyla birleştirirken kullanışlı olabilir. Bu şekilde, animasyon efektlerinin birbiriyle örtüşmediğinden emin olursunuz.

Bu gecikme süresini nasıl ekleyeceğinizi göstermek için, bu yazının önceki bölümünde kullandığımız iki efekti birleştireceğiz. Bir animasyon efekti bölüme, diğeri ise satıra atanır. Satır animasyon efektinin kaybolmadığından emin olmak için ona 2 saniyelik bir gecikme süresi ekleyeceğiz.

Satır ayarlarını açın ve Gelişmiş sekmesine geri dönün. CSS Sınıfı alanına 'delay' adında başka bir sınıf ekleyin. Bu sınıf henüz mevcut değil, ancak bir sonraki adımımıza eklemek üzereyiz.

Şimdi, aşağıdaki butona tıklayarak üzerinde çalıştığınız sayfanın ayarlarına gecikme CSS sınıfını ekleyin:

Ardından, CSS kod satırlarıyla birlikte CSS sınıfını Özel CSS alanına ekleyin. Bu örnekte yapacağımız gibi 2 saniyelik bir gecikme süresi eklemek istiyorsanız, aşağıdaki CSS kod satırlarına ihtiyacınız olacak:

.delay {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-ms-animation-delay: 2s;
-o-animation-delay: 2s;
}

Sonuç

Gecikme süresini ekledikten sonra sonuç şöyle görünmelidir:

Son düşünceler

Bu gönderide, Divi web sitenize nasıl animasyon efektleri ekleyeceğinizi gösterdik. Size iki olasılık sunduk. İlki, Divi tarafından sağlanan standart animasyon efektlerinin nasıl kullanılacağını gösterir. İkinci olasılık, wow.js ve animate.css'yi entegre etmenize olanak tanır. Web sitenizde animasyon efektleri kullanmak, ziyaretçilerinizle paylaşmak istediğiniz içeriği vurgulamanıza yardımcı olabilir. Bunun yanında, aynı zamanda harika görünüyor. Herhangi bir sorunuz veya öneriniz varsa; Aşağıdaki yorum bölümünde bir yorum bıraktığınızdan emin olun.

Büyük bir duyuruyu, faydalı ipucunu veya Divi freebie'sini asla kaçırmamak için e-posta bültenimize ve YouTube kanalımıza abone olmayı unutmayın!

Öne Çıkan Görsel Stocker top / Shutterstock.com