Bagaimana cara menambahkan efek perubahan warna latar belakang yang mulus ke WordPress

Catatan: Dalam topik berikutnya yang akan Anda baca, Anda akan mempelajari tentang: Bagaimana cara menambahkan efek perubahan warna latar belakang yang mulus ke WordPress

Ingin menambahkan efek perubahan warna latar belakang yang mulus ke situs WordPress Anda? Anda mungkin pernah melihat beberapa situs web populer di mana warna latar belakang situs web tertentu atau seluruh situs web 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 kepada Anda cara menambahkan efek perubahan warna latar belakang yang mulus ke WordPress dengan mudah.

Efek seragam Apa itu pengubah warna latar belakang?

The efek perubahan warna latar belakang yang seragam memungkinkan Anda untuk secara otomatis beralih di antara warna latar belakang yang berbeda. Perubahan tersebut berlangsung secara perlahan melalui berbagai warna hingga mencapai warna akhir. Tampilannya seperti ini:

Dengan itu, mari kita lihat bagaimana menambahkan efek perubahan warna latar belakang yang halus ini ke semua tema WordPress.

Tambahkan efek perubahan warna latar belakang yang mulus ke WordPress

Tutorial ini mengharuskan Anda menambahkan kode ke file WordPress Anda. Jika Anda belum pernah melakukannya, lihat panduan kami tentang cara menyalin dan menempelkan kode ke WordPress.

Pertama, Anda perlu mencari tahu kelas CSS di area yang ingin Anda ubah. Anda dapat melakukan ini menggunakan Alat Uji di browser Anda. Cukup telusuri area yang ingin Anda ubah dan klik kanan untuk memilih Alat Inspeksi.

Maka Anda harus menulis kelas CSS yang ingin Anda targetkan. Misalnya, pada tangkapan layar di atas, kami ingin mengarahkan ke area widget di bagian bawah "judul" Kelas CSS.

Pada langkah berikutnya, Anda harus membuka editor teks biasa di komputer dan membuat file baru. Anda harus menyimpan file ini sebagai wpb-background-guide.js di desktop Anda.

Kemudian Anda perlu menambahkan kode berikut ke file JS Anda:

jQuery(function ($) {$(‘.page-header’).Setiap (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 ingin kami tampilkan dalam kode. Kami juga menambahkan empat warna. Efek latar belakang lembut kita dimulai dengan warna pertama, lalu beralih ke warna berikutnya dan berlanjut melalui warna tersebut.