Cara Menambahkan Animasi ke Teks di WordPress

Gaya teks mewah menarik perhatian pemirsa dengan cepat. Pemilik situs web WordPress sering bertanya bagaimana cara menambahkan animasi ke teks. Tentu saja, Anda akan menemukan beberapa metode untuk mendesain teks situs WordPress Anda. Anda dapat secara manual menambahkan efek HTML CSS yang membutuhkan lebih banyak kode. Tetapi pengkodean adalah cara yang bagus untuk menambahkan animasi khusus ke situs Anda. Sekali lagi, plugin dengan widget terbaik relatif praktis, efektif, dan juga populer .

Namun, kami telah mencoba membahas kedua teknik semudah mungkin. Jika Anda menjalankan situs WordPress maka luangkan waktu untuk membaca blog dan memahami prosesnya. Mengikuti langkah-langkah dan instruksi dengan benar akan memungkinkan Anda menyesuaikan animasi Anda sendiri dengan lancar.

Cara Menambahkan Efek Teks Animasi di WordPress

Efek teks animasi dapat digunakan untuk menambahkan gaya dan kepribadian ke situs WordPress Anda. Dalam tutorial ini, kami akan menunjukkan cara menambahkan efek ini; tetapi sebelum itu, Anda harus memiliki gambaran yang jelas tentang teks animasi dan perannya; Ayo Belajar!

Apa itu Efek Teks Animasi dan bagaimana tampilannya?

Efek teks animasi adalah cara yang bagus untuk menambahkan sedikit kesenangan dan kegembiraan pada artikel dan judul Anda juga . Saat Anda memilih untuk menggunakan efek teks animasi mewah, Anda dapat membuat berbagai efek. Beberapa efek sederhana seperti mengubah warna atau ukuran teks , sementara beberapa lainnya berupa animasi detail seperti kedipan atau kedipan teks .

Teks animasi sedikit berbeda dari teks biasa. Biasanya jenis teks ini tidak bergerak dengan sendirinya. Sebaliknya, itu memiliki efek yang membuatnya tampak seolah-olah sedang bergerak melintasi layar. Jadi, teks mewah membuat orang lebih cenderung mengklik konten, tautan, atau membuka email .

Peran Teks Animasi di Situs Web Anda

Ada berbagai jenis efek teks animasi yang tersedia di tema WordPress, tetapi semuanya memiliki fungsi dasar yang sama. Mereka mengubah warna atau gaya teks dan hanya mengubah gaya pengujian. Misalnya, Anda dapat mengubah tombol "ajakan bertindak" dengan latar belakang merah dan teks putih bertuliskan "Klik di sini!" ketika diklik.

Tajuk animasi atau bagian pahlawan dengan teks mewah memainkan peran berikut-

• Membuat desain Anda secara visual lebih menarik.
• Sorot penawaran khusus dan informasi penting.
• Membuat fitur produk Anda terlihat.
• Membuat situs web lebih interaktif dan mempromosikan bisnis.

Cara Paling Mudah Menambahkan Efek Teks Animasi

Menggunakan Plugin WordPress

Pasar saat ini memberi Anda berbagai jenis plugin untuk mempermudah tugas penataan teks. ElementsKit adalah plugin dan addon yang sangat kuat untuk pembuat halaman Elementor. Dengan ElementsKit, Anda akan mendapatkan semuanya dalam satu tudung.

Teks animasi mewah adalah widget mengesankan yang disajikan oleh ElementsKit pro.

Masuk ke Dasbor Anda -> Pilih Halaman atau Posting apa saja -> Klik edit dengan ElementsKit -> Cari widget Teks Animasi Mewah ElementsKit -> Seret dan Jatuhkan widget

Bagian Konten

Bagian itu disebut bagian Fancy Text , berisi bidang-bidang berikut-

Animasi

• Gaya Animasi – Di sini dua opsi adalah Teks atau SVG, keduanya memungkinkan Anda membuat gaya animasi yang berbeda.
• Jenis Animasi – Berdasarkan jenis animasi Anda, Anda akan mendapatkan berbagai pilihan di sini.
• Reveal Duration (ms) – Anda dapat mengatur durasi animasi dalam milidetik menggunakan kotak opsi.
• Reveal Animation Delay (ms) – Sesuaikan waktu tunda animasi di sini. Ini menentukan animasi dapat dimulai nanti, langsung dari awal, atau langsung dan sebagian dari animasi.

Isi

• Teks Awalan – Anda perlu menulis konten awalan di sini yang ingin Anda tampilkan. Itu berarti itu akan ditulis sebelum animasi mewah.
• Daftar Mewah – Tambahkan item di sini untuk animasi mewah.
• Teks Akhiran – Tulis konten akhiran yang ingin Anda tampilkan. Jadi, itu akan ditentukan setelah animasi mewah.

• Judul Tag HTML – Pilih tag HTML dari konten di sini.
• Tautan (Opsional) – Tambahkan tautan apa pun jika Anda ingin pengguna mengalihkan ke lokasi lain.

Bagian Gaya

• Judul Teks – Gunakan bidang ini untuk menyesuaikan perataan tajuk, tipografi, warna, dll.
• Fancy Text Lists – Gunakan bidang ini untuk menyesuaikan tipografi, warna, dan padding.
• Fancy Cursor – Anda dapat memberikan kursor tampilan mewah dengan warna, lebar, dan tinggi menggunakan bidang ini.

Setelah mengedit dan menata semua pernyataan yang diperlukan, klik perbarui dan lihat perubahan dari front end. Contohnya adalah –

Menerapkan CSS

Saat membuat animasi CSS di WordPress, ingatlah hal-hal dasar namun penting berikut ini :

• Menetapkan nama animasi yang tepat – Ini adalah nama yang akan ditampilkan pada elemen saat dipindahkan oleh animasi CSS. Misalnya, jika Anda memiliki tombol dengan animasi bernama "fadeIn", ini akan menjadi nilai yang akan Anda gunakan untuk properti ini.
• Durasi animasi – Ini adalah jumlah detik yang diperlukan untuk menyelesaikan animasi. Anda juga dapat menyetelnya ke none atau 0 untuk membuat animasi bertahan tanpa batas waktu atau hingga sesuatu yang lain terjadi (seperti pemuatan halaman).
• Animation-timing-function – Ini mengontrol bagaimana elemen berpindah dari satu tempat ke tempat lain berdasarkan berapa lama waktu yang dibutuhkan untuk jumlah waktu tertentu (dalam milidetik). Misalnya, jika Anda menyetel properti ini ke ease-out, maka elemen Anda akan mulai bergerak perlahan dan kemudian mempercepatnya di akhir durasinya sebelum memulai lagi dari awal.
• Animation-delay – Ini adalah nilai yang menentukan jumlah milidetik yang harus ditambahkan setelah animasi selesai sebelum dimulai lagi (misalnya, 1 detik).
• Animation-iteration-count – Ini adalah jumlah waktu yang Anda perlukan untuk memutar animasi. Menggunakan properti CSS Anda dapat menghitung iterasi ini.
• Animations-direction – Ini adalah urutan atau arah di mana animasi harus dimainkan. Itu bisa normal, mundur, bergantian, dan bergantian-terbalik.
• Animation-fill-mode – Nilai-nilai ini menentukan bagaimana suatu elemen harus ditampilkan. Itu bisa sebelum dan sesudah animasi diterapkan padanya.
• Mengetahui @keyframes – Ini menentukan properti animasi yang berubah selama kursus dan juga nilai yang harus diambil oleh properti tersebut. Contohnya:

 @keyframes example { 0% {background-color: red;} 25% {background-color: yellow;} 50% {background-color: blue;} 100% {background-color: green;} }

Umumnya, persentase digunakan untuk menunjukkan waktu animasi. Keyframe di atas menunjukkan bahwa warna latar belakang elemen akan berubah 25 persen dari merah menjadi kuning, melalui animasi.

Namun, from dan to dapat digunakan masing-masing sebagai pengganti 0% dan 100% .

Membuat File animate.css

Anda harus membuat file terpisah terlebih dahulu dengan semua properti yang diperlukan, di editor teks tempat Anda bekerja. Anda dapat memilih bingkai utama untuk animasi apa pun . Selanjutnya, Anda harus menggabungkannya dengan kelas CSS tertentu untuk diterapkan dengan teks apa pun di situs WordPress Anda.

Mulailah dengan menulis kode sederhana ke file CSS Anda. Contoh kode untuk teks animasi mungkin terlihat seperti-

 ```@keyframes MyAnimation { from { opacity: 0; transform: rotate(20deg); animation-duration: 3s; } to {opacity: 1;} transform: rotate(0deg); } }

Sekarang untuk mengikat bingkai utama ini ke kelas CSS, kami telah menetapkan teks bernama MyAnimation. Jadi, setelah kode di atas sekarang Anda perlu memasukkan kode di bawah ini ke dalam file.

 .MyAnimation { animation-name: MyAnimation; }

Anda dapat menemukan semua pengetahuan dasar animasi CSS dan mempraktikkan kodenya di sini!

Anda dapat mengulangi prosedur ini untuk membuat animasi sebanyak mungkin sesuai kebutuhan Anda. Kemudian, simpan file tersebut sebagai animate.css. Atau, Anda dapat mengunduh file Animate.css . Ini adalah file populer yang berisi keyframes dan kelas CSS untuk banyak desain animasi populer. Selain itu, menggunakan file tersebut akan mengurangi kesulitan Anda dalam membuat kode animasi yang rumit.

Kode di atas akan menganimasikan teks dari tag h1 Anda ' MyAnimation '. Anda dapat mengubah durasi animasi dengan mengubah "3s" ke nilai yang berbeda . Anda juga dapat mengubah warna dengan mengubah nilai hex. Setelah Anda menyimpan file CSS, Anda dapat membuat perubahan lebih lanjut pada tampilan situs web Anda, Anda dapat mengedit file CSS. Anda dapat mengubah font, ukuran teks, dan warna teks dengan mengedit file CSS. Anda juga dapat mengubah warna latar belakang dan ukuran header dengan mengubah file CSS.

Memuat File animate.css Anda ke Situs WordPress

Setelah Anda selesai dengan pekerjaan file, unggah ke direktori tema Anda. Kami telah membagi seluruh proses dalam tiga langkah,

Langkah 1

Buka situs menggunakan File Transfer Protocol (FTP) -> Pilih klien FTP (FileZilla, WinSCP, Cyberduck, dll.) -> Pilih kredensial yang diperlukan di akun hosting Anda.

Langkah 2

Akses ke direktori public_html Anda -> Arahkan ke konten-wp -> Tema -> Pilih folder tema aktif atau anak

Langkah-3

Sekarang, cari subdirektori bernama css. Jika Anda mendapatkannya, unggah file animate.css atau animate.min.css Anda dari file Animate.css dengan subdirektori.

Namun, jika Anda tidak memiliki folder subdirektori, Anda dapat dengan mudah membuat yang baru. Untuk itu, setelah memuat file, lakukan pengeditan sederhana untuk membuat file baru dan selesai.

Memanggil Animate Stylesheet Via functions.php

Anda akan menemukan file functions.php di folder tema aktif Anda. Sekarang, Anda perlu menambahkan potongan kode ini untuk memanggil Animate Stylesheet:

 add_action( 'wp_enqueue_scripts', 'wpb_animate_styles' ); function wpb_animate_styles() { wp_enqueue_style( 'animate-css', get_stylesheet_directory_uri() . '/css/animate.css', '3.5.0', 'all'); }

Ingat , jika Anda menggunakan file animate.min.css dari Animate.css, Anda harus menulis animate.min.css di baris akhir, bukan animate.css. Setelah menyimpan semua perubahan, buka dasbor WordPress Anda.

Terapkan Animasi Menggunakan Kelas CSS

Jadi sekarang dimungkinkan untuk menerapkan kelas apa pun yang Anda inginkan di file animate.css untuk melihat berbagai efek animasi di postingan dan halaman. Juga file Animate.css memungkinkan Anda untuk mereferensikan daftar lengkap semuanya.

Terakhir, Pilih posting atau halaman di Editor Klasik -> Beralih ke editor teks -> Atau klik ikon tiga titik dari bilah alat blok jika itu adalah Editor Blok -> Pilih Edit sebagai HTML-> Tambahkan animasi kelas dan kelas untuk animasi Anda ke tag elemen -> Pratinjau

Ini adalah dua teknik efektif untuk menambahkan teks animasi ke situs Anda, dan keduanya dapat membantu menjadikan situs Anda lebih menarik dan menarik secara visual . Dengan menggunakan salah satu teknik ini, Anda dapat menambahkan beberapa gerakan dan minat ke halaman Anda.

Namun, menerapkan CSS bisa jadi agak sulit jika Anda tidak tahu cara membuat kode. Jadi, disarankan untuk mengambil bantuan ahli untuk membuat animasi CSS di WordPress. Sebagai alternatif, teks animasi mewah ElementsKit adalah widget pintar yang mendukung Anda untuk merancang animasi gaya apa pun dengan cepat. Dengan widget, Anda dapat mengubah teks pilihan Anda menjadi animasi mewah.