Bagaimana cara menambahkan efek perubahan warna latar belakang di WordPress
Catatan: Dalam topik berikutnya yang akan Anda baca, Anda akan mempelajari tentang: Bagaimana cara menambahkan efek perubahan warna latar belakang di WordPress
Apakah Anda ingin menambahkan efek halus untuk mengubah warna latar belakang situs WordPress Anda? Anda mungkin pernah melihat di beberapa situs web populer bahwa warna latar belakang area tertentu atau seluruh situs secara otomatis berubah dari satu warna ke warna lainnya. Efek cantik ini dapat membantu Anda menarik perhatian pengguna dan meningkatkan interaksi dengan situs web Anda. Pada artikel ini, kami akan menunjukkan cara menambahkan efek perubahan warna latar belakang di WordPress dengan mudah.
Apa efek halus pada perubahan warna latar belakang?
Dengan efek perubahan warna latar belakang, Anda dapat secara otomatis beralih di antara warna latar belakang yang berbeda. Perubahan dilakukan secara perlahan melalui warna yang berbeda hingga warna akhir tercapai. Ini terlihat seperti ini:
Mari kita lihat bagaimana Anda bisa menambahkan efek perubahan warna latar belakang yang halus ini ke tema WordPress apa pun.
Tambahkan efek untuk mengubah warna latar belakang WordPress
Dalam tutorial ini, tambahkan kode ke file WordPress Anda. Jika Anda belum melakukannya, lihat panduan kami untuk menyalin dan menempelkan kode di WordPress.
Pertama, tentukan kelas CSS untuk area yang ingin Anda ubah. Anda dapat melakukannya dengan alat pengujian di browser Anda. Arahkan kursor ke area yang ingin Anda ubah dan klik kanan untuk memilih Alat Inspeksi.
jQuery(function($){ $(‘.page-header’).each(function(){ var $this = $(this), colors = (‘#ec008c’, ‘#00bcc3’, ‘#5fb26a’, ‘#fc7331’); setInterval(function(){ var color = colors.shift(); colors.push(color); $this.animate({backgroundColor: color}, 2000); },4000); }); });
Jika Anda mempelajari kode ini, Anda akan melihat bahwa kami menggunakan kelas CSS, yang akan kami bahas dalam kode. Kami juga menambahkan empat warna. Efek latar belakang lembut kita dimulai dengan warna pertama, lalu berubah ke warna berikutnya dan berlanjut dengan warna tersebut.
Jangan lupa untuk menyimpan perubahan Anda ke file.
Kemudian unggah file wpb-bg-guide.js ke direktori /js/ tema WordPress Anda melalui FTP. Jika tema Anda tidak berisi folder js, buatlah.
Kode ini memuat persis file JavaScript dan skrip jQuery dependen yang Anda perlukan agar ini berfungsi.
Inilah yang dapat Anda kunjungi di situs web mereka untuk melihat aksinya. Anda akan melihat efek perubahan warna latar belakang yang halus pada area yang Anda targetkan.
Ada cara lain untuk menggunakan warna latar belakang WordPress untuk menarik perhatian pengguna atau menonjolkan konten Anda. Misalnya, coba:
- Tambahkan wallpaper ke layar penuh
- Tambahkan wallpaper video ke mode layar penuh
- Muat warna latar belakang acak di setiap halaman
- Tambahkan efek paralaks ke tema WordPress apa pun
- Rancang posting individual dengan latar belakang berbeda
Kami harap artikel ini membantu Anda mempelajari cara menambahkan efek halus ke perubahan warna latar belakang di WordPress dengan mudah. Anda mungkin juga ingin melihat daftar plugin pembuat situs web WordPress terbaik yang dapat Anda coba.
Jika Anda menyukai artikel ini, berlangganan saluran kami YouTube untuk menonton tutorial video WordPress. Anda juga dapat menemukan kami di Twitter y Facebook.
