Home / CMS / Wordpress / Cara Menambahkan Efek Smooth Background Color di WordPress

Cara Menambahkan Efek Smooth Background Color di WordPress

Apakah Anda ingin menambahkan Efek Smooth Background Color di situs WordPress? Anda mungkin telah melihat di beberapa situs web populer di mana warna latar belakang area tertentu atau seluruh halaman web secara otomatis bertransisi dari satu warna ke warna lainnya. Efek cantik ini dapat membantu Anda menarik perhatian pengguna dan meningkatkan keterlibatan di situs web. Dalam artikel ini, kami akan menunjukkan cara mudah menambahkan efek Efek Smooth Background Color di WordPress.

Apa itu Efek Perubahan Smooth Background Color?

Efek perubahan Smooth Background Color memungkinkan Anda beralih secara otomatis di antara warna latar belakang yang berbeda. Perubahan terjadi secara perlahan melalui warna yang berbeda sampai mencapai warna akhir. Terlihat seperti ini:

Teknik ini digunakan untuk menangkap perhatian pengguna dengan efek lembut yang menyenangkan bagi mata.

Untuk caranya langsung saja simak dibawah ini.

Menambahkan Efek Smooth Background Color di WordPress

Tutorial ini mengharuskan Anda untuk menambahkan kode di file WordPress.

Pertama, Anda perlu mencari tahu Class CSS dari area yang ingin Anda ubah. Anda dapat melakukan ini dengan menggunakan alat Inspect di browser Anda. Cukup arahkan mouse ke area yang ingin Anda ubah dan klik kanan untuk memilih alat Inspect.

Selanjutnya, Anda perlu menuliskan Class CSS yang ingin Anda targetkan. Sebagai contoh, screenshot di atas kita ingin menargetkan area widget di bagian bawah yang memiliki Class CSS ‘page-header’.

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

Selanjutnya, Anda perlu menambahkan kode berikut di dalam file JS tersebut:

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, maka akan melihat bahwa kami telah menggunakan Class CSS yang ingin kami targetkan dalam kode. Kami juga menambahkan empat warna. Efek latar belakang kami yang halus akan dimulai dari warna pertama, kemudian transisi ke warna berikutnya, dan tetap melaju melalui warna-warna ini.

Jangan lupa menyimpan perubahan ke file.

Selanjutnya, Anda perlu mengunggah file wpb-background-tutorial.js ke folder / js / folder WordPress Anda menggunakan FTP . Jika tema tidak memiliki folder js di dalamnya, maka Anda perlu membuatnya.

Setelah mengunggah file JavaScript, sekarang saatnya untuk memuatnya di WordPress.

Anda perlu menambahkan kode berikut ke file functions.php tema.

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 benar memuat file JavaScript dan skrip jQuery dependen yang Anda perlukan agar kode ini berfungsi.

Itu saja, Anda sekarang dapat mengunjungi situs web untuk melihatnya beraksi. Anda akan melihat efek perubahan warna latar belakang yang halus di area yang Anda targetkan.

Leave a Reply

Your email address will not be published. Required fields are marked *