Cara Menambahkan Efek Animasi ke Bagian/Baris di Divi

Dalam tutorial Divi hari ini, kami akan menunjukkan cara menambahkan efek animasi ke bagian dan baris di Divi. Tema Divi sendiri menyediakan beberapa efek animasi relevan yang membantu Anda menghadirkan tingkat interaksi ekstra ke situs web Anda. Efek ini mudah ditetapkan ke gambar dalam Divi Builder Anda di subkategori Animasi pada tab Lanjutan.

Namun, jika Anda mencari cara untuk menambahkan efek animasi ini ke modul, bagian, atau baris lain dari situs web Anda, itu mungkin juga. Dalam posting ini, kami akan menunjukkan kepada Anda bagaimana melakukannya. Selain menunjukkan cara menambahkan efek animasi bawaan, kami juga akan menunjukkan cara mengintegrasikan wow.js dan animate.css ke situs web Divi Anda.

Di akhir posting ini, Anda akan dapat menambahkan efek bagus ke baris dan bagian Anda. Untuk membantu Anda memvisualisasikan prosesnya, kami ingin membagikan contoh berikut (yang akan kami tunjukkan cara mencapainya di akhir posting ini):

Divi Animations atau Wow.js & Animate.css?

Anda mungkin bertanya-tanya dalam kasus apa Anda harus mempertimbangkan untuk menggunakan animasi Divi dan dalam kasus apa wow.js & animate.css akan melakukan pekerjaan dengan lebih baik. Meskipun menggunakan animasi bawaan Divi adalah solusi termudah jika Anda tidak ingin membuat beberapa efek animasi tingkat lanjut, efek wow.js & animate.css pasti akan memberikan nilai tambah yang bagus untuk situs web Anda juga.

Kapan Menggunakan Animasi Divi

Ada lima efek animasi yang tersedia dalam Divi yang dapat Anda gunakan:

• Yang memudar
• Slide bawah
• Slide-in kiri
• Slide-in yang tepat
• Slide-in atas

Meskipun hanya ada lima kemungkinan, mereka adalah yang paling sering digunakan juga. Mereka sederhana dan to the point. Jika Anda ingin memberikan efek ekstra yang bagus ke situs web Anda, tanpa terlalu banyak berusaha, efek animasi Divi adalah caranya. Masing-masing efek ini diaktifkan sejak Anda menggulir dan melihat modul, baris, atau bagian yang telah Anda tambahkan efeknya. Dengan begitu, pengunjung Anda tidak akan melewatkan efek yang terletak di bagian bawah halaman, misalnya.

Untuk mengintegrasikan efek animasi Divi, Anda tidak perlu mengunggah tema anak di situs web Anda. Anda dapat dengan mudah menambahkan efek ini saat masih mengerjakan tema induk.

Kapan Menggunakan Wow.js & Animate.css

Mengintegrasikan wow.js & animate.css ke dalam situs web Anda adalah sesuatu yang mungkin sangat Anda sukai karena banyaknya pilihan yang Anda miliki. Ada 14 kategori efek animasi yang berisi efek berbeda yang relevan dengan kategori tersebut. Kategori yang dapat Anda pilih adalah sebagai berikut:

• Pencari perhatian
• Pintu Masuk Memantul
• Keluar Memantul
• Pintu Masuk Memudar
• Keluar Memudar
• sirip
• Kecepatan cahaya
• Pintu Masuk Berputar
• Keluar Berputar
• Pintu Masuk Geser
• Pintu Keluar Geser
• Zoom Masuk
• Zoom Keluar
• Spesial

Anda dapat melihat semua efek yang tersedia dengan mengklik link berikut. Efek animasi ini juga muncul saat menggulir.

Cara Menambahkan Efek Animasi ke Bagian/Baris di Divi

Berlangganan Saluran Youtube Kami

Gunakan Efek Animasi Bawaan

Kemungkinan pertama yang akan kami tunjukkan adalah efek animasi bawaan. Kami akan menunjukkan cara menerapkan efek ke bagian dan baris. Buka halaman tempat Anda ingin melakukan modifikasi.

Dalam contoh kita, kita akan menambahkan efek animasi ke bagian dan baris pertama halaman kita. Menambahkan animasi untuk bagian atau baris dalam kedua kasus sama. Kode kelas CSS untuk efek animasi yang berbeda adalah sebagai berikut:

• Kelas CSS fade -in: et-waypoint et_pb_animation_fade_in
• Kelas CSS slide-in bawah: et-waypoint et_pb_animation_bottom
• Slide-in kelas CSS kiri: et-waypoint et_pb_animation_left
• Slide-in kanan: Kelas CSS: et-waypoint et_pb_animation_right
• Kelas CSS slide-in teratas: et-waypoint et_pb_animation_top

Tambahkan Efek Animasi ke Baris

Untuk menambahkan Animasi ke baris tertentu, buka pengaturan baris itu dan buka tab Lanjutan. Di dalam tab Advanced, tempatkan kelas CSS efek animasi di bidang Kelas CSS. Dalam hal ini, kami akan menunjukkan cara menambahkan animasi fade-in.

Tambahkan Efek Animasi ke Bagian

Metode yang sama untuk Anda menambahkan efek animasi ke baris juga berlaku untuk bagian. Buka tab Advanced dan tempatkan kelas CSS efek animasi pilihan Anda di bidang Kelas CSS. Dalam contoh ini, kami akan menunjukkan cara menambahkan efek animasi slide-in teratas.

Hasil

Setelah Anda menambahkan efek ke bagian dan baris Anda, Anda akan melihat hasil berikut ini:

Tambahkan Wow.js & Animate.css ke Tema Anak Anda

Di bagian selanjutnya ini, kami akan menunjukkan cara menambahkan wow.js dan animate.css ke situs WordPress Anda dan cara menggunakannya di seluruh tema Divi Anda.

Pertama-tama, saya ingin memberikan kredit kepada Jeremy Cookson untuk posting ini tentang cara mengintegrasikan wow.js dan animate.css ke WordPress. Di bagian posting ini, kami akan menunjukkan kepada Anda dengan tepat bagaimana membuat integrasi terjadi untuk situs web WordPress yang dibuat dengan tema Divi.

Untuk menambahkan wow.js & animate.css ke halaman web Anda, Anda harus menggunakan tema anak di situs web Anda. Jika Anda bertanya-tanya bagaimana cara membuat tema anak, lihat posting ini. Setelah Anda membuat file utama tema anak Anda, Anda harus menambahkan dua file lain untuk melengkapi tema anak Anda dengan efek animasi.

Unduh File & Tambahkan ke Tema Anak Anda

Jauhkan tema anak Anda dalam jangkauan dan unduh dua file berikut sementara dengan mengklik dua tautan berikut:

• animate.min.css
• wow.min.js

Setelah Anda mengunduh dua file, buat subfolder di dalam tema anak Anda. Sebutkan salah satunya CSS dan JS lainnya. Setelah itu, letakkan animate.min.css di folder CSS dan wow.min.js di folder JS.

Unggah Tema Anak

Hal berikutnya yang perlu Anda lakukan adalah mengunggah dan mengaktifkan tema anak yang baru saja Anda tambahkan dengan wow.js dan animate.css. Buka Dasbor WordPress > Tampilan > Tema > Dan klik 'Tambah Baru' di bagian atas halaman.

Tambahkan Kode PHP ke File Functions.php Anda

Setelah Anda mengunggah tema anak, tambahkan baris kode PHP berikut ke file functions.php tema anak Anda:

//* Enqueue Animate.CSS dan WOW.js
add_action( 'wp_enqueue_scripts', 'sk_enqueue_scripts' );
fungsi 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 );
}
//* Enqueue script untuk mengaktifkan WOW.js
add_action('wp_enqueue_scripts', 'sk_wow_init_in_footer');
function sk_wow_init_in_footer() { add_action( 'print_footer_scripts', 'wow_init' );}
//* Tambahkan JavaScript sebelum </body>function wow_init() { ?>
<script type="text/javascript">
baru WOW().init(); </script><?php }

Tambahkan Animasi ke Baris & Bagian

Sistem untuk menambahkan efek wow.js dan animate.css ke baris dan bagian sama dengan efek animasi Divi. Anda harus membuka pengaturan baris atau bagian yang ingin Anda tambahkan efek animasinya. Selanjutnya, Anda dapat menempatkan kelas CSS yang ditetapkan untuk animasi ke dalam bidang Kelas CSS di bagian atau baris Anda.

Tambahkan Animasi ke Baris

Untuk contoh yang akan kami tunjukkan dengan baris, kami menggunakan efek fadeInRight yang kami temukan di daftar efek animasi. Buka tab Advanced dari pengaturan Baris Anda dan tambahkan 'wow fadeInRight' ke bidang Kelas CSS. Setiap kali Anda ingin menambahkan efek ke bagian situs web Anda, pastikan Anda meletakkan 'wow' di depan efek yang Anda gunakan.

Hasil

Ketika Anda telah menambahkan kelas CSS dan melihat pratinjau halaman yang sedang Anda kerjakan, Anda seharusnya telah mencapai hasil berikut:

Tambahkan Animasi ke Bagian

Metode yang sama berlaku untuk menambahkan efek animasi ke bagian. Buka tab Lanjutan dan tambahkan Kelas CSS 'wow bounceInDown' ke bidang Kelas CSS di bagian Anda.

Hasil

Jika Anda mengikuti semua langkah dengan benar, Anda akan mencapai hasil berikut:

Opsi Lanjutan

Jika Anda ingin menambahkan beberapa spesifikasi tambahan ke animasi Anda, Anda juga dapat melakukannya. Anda dapat, misalnya, menambahkan waktu tunda ke salah satu efek animasi Anda. Ini mungkin berguna saat Anda menggabungkan animasi bagian dengan animasi baris dalam bagian yang sama. Dengan begitu, Anda memastikan bahwa efek animasi tidak saling tumpang tindih.

Untuk menunjukkan cara menambahkan waktu tunda ini, kami akan menggabungkan dua efek yang telah kami gunakan di bagian sebelumnya dari posting ini. Satu efek animasi ditetapkan ke bagian dan yang lainnya ke baris. Untuk memastikan efek animasi baris tidak hilang, kami akan menambahkan waktu tunda 2 detik untuk itu.

Buka pengaturan baris dan kembali ke tab Advanced. Di dalam bidang Kelas CSS, tambahkan kelas lain yang disebut 'penundaan'. Kelas ini belum ada tetapi kami akan menambahkannya di langkah berikutnya.

Sekarang, tambahkan kelas penundaan CSS ke pengaturan halaman yang sedang Anda kerjakan dengan mengklik tombol berikut:

Selanjutnya, tambahkan kelas CSS dengan baris kode CSS ke bidang CSS Kustom. Jika Anda ingin menambahkan waktu tunda 2 detik, seperti yang akan kita lakukan dalam contoh ini, Anda memerlukan baris kode CSS berikut:

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

Hasil

Setelah Anda menambahkan waktu tunda, hasilnya akan terlihat seperti ini:

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara menambahkan efek animasi ke situs web Divi Anda. Kami memberi Anda dua kemungkinan. Yang pertama menunjukkan cara menggunakan efek animasi standar yang disediakan oleh Divi. Kemungkinan kedua memungkinkan Anda untuk mengintegrasikan wow.js dan animate.css. Menggunakan efek animasi di situs web Anda dapat membantu Anda menekankan konten yang ingin Anda bagikan dengan pengunjung Anda. Selain itu, itu juga hanya terlihat bagus. Jika Anda memiliki pertanyaan atau saran; pastikan Anda meninggalkan komentar di bagian komentar di bawah.

Pastikan untuk berlangganan buletin email dan saluran YouTube kami sehingga Anda tidak akan pernah melewatkan pengumuman besar, tip bermanfaat, atau Divi freebie!

Gambar Unggulan oleh Stocker top / shutterstock.com