Apakah Anda ingin menambahkan efek halus pada perubahan warna latar belakang ke situs WordPress Anda? Anda mungkin telah melihat di beberapa situs web populer bahwa warna latar belakang area tertentu atau seluruh halaman web secara otomatis berubah dari satu warna ke warna lain. Efek indah ini dapat membantu Anda menarik perhatian pengguna dan meningkatkan interaksi dengan situs Anda. Pada artikel ini, kami akan menunjukkan kepada Anda cara mudah menambahkan efek perubahan warna latar di WordPress.
Apa efek halus pada perubahan warna latar belakang?
Dengan efek mengubah warna latar belakang, Anda dapat secara otomatis beralih di antara warna latar belakang yang berbeda. Perubahan dilakukan secara perlahan melalui warna yang berbeda sampai warna akhir tercapai. Ini terlihat seperti ini:
Mari kita lihat bagaimana Anda dapat menambahkan efek perubahan warna latar belakang yang halus ini ke tema WordPress apa pun.
Tambahkan efek untuk mengubah warna latar 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 inspeksi di browser Anda. Arahkan kursor ke area yang ingin Anda ubah dan klik kanan untuk memilih Alat Inspeksi.
Langkah selanjutnya adalah membuka editor teks biasa di komputer Anda dan membuat file baru. Anda harus menyimpan file ini sebagai wpb-background-tutorial.js di desktop Anda.
Kemudian masukkan kode berikut ke file JS Anda:
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 rujuk dalam kode tersebut. Kami juga menambahkan empat warna. Efek latar belakang lembut kami mulai dengan warna pertama, kemudian berubah ke warna berikutnya dan berlanjut dengan warna-warna itu.
Jangan lupa untuk menyimpan perubahan Anda ke file.
Kemudian unggah file wpb-bg-tutorial.js ke direktori / js / tema WordPress Anda melalui FTP. Jika topik Anda tidak mengandung direktori js, buatlah satu.
![]( "uploadjs \"src =\" https://cdn3.wpbeginner.com/wp-content/uploads/2018/02/uploadjs.png \"alt =\" Unggah file javascript Anda")
function wpb_bg_color_scripts() {
wp_enqueue_script( 'wpb-background-tutorial', get_stylesheet_directory_uri() . '/js/wpb-background-tutorial.js', array( 'jquery-color' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpb_bg_color_scripts' );
Kode ini memuat dengan benar file JavaScript dan skrip jQuery yang Anda perlukan agar kode ini berfungsi.
Inilah yang sekarang Anda dapat mengunjungi situs mereka untuk melihat beraksi. Anda akan melihat efek perubahan warna latar belakang yang halus pada area yang Anda targetkan.
Ada banyak cara lain untuk menggunakan warna latar WordPress untuk mendapatkan perhatian pengguna atau menyoroti konten Anda. Misalnya, coba:
- Tambahkan gambar latar belakang ke layar penuh
- Tambahkan wallpaper video ke mode layar penuh
- Muat warna latar belakang acak pada setiap halaman
- Tambahkan efek paralaks ke tema WordPress apa pun
- Rancang setiap posting dengan latar belakang yang berbeda
Kami harap artikel ini membantu Anda mempelajari cara mudah menambahkan efek halus pada perubahan warna latar di WordPress. Anda mungkin juga ingin melihat daftar plugin pembuat situs WordPress terbaik yang dapat Anda coba.
Jika Anda menyukai artikel ini, berlangganan saluran kami YouTube untuk menonton video tutorial WordPress. Anda juga dapat menemukan kami di Twitter y Facebook.
