Cara Membuat Latar Belakang Gradien di WordPress

Reka bentuk laman web kini lebih menarik dengan latar belakang gradien. Dengan CSS sahaja, anda boleh menambah latar gradien pada WordPress tanpa perlu memuat naik gambar yang dipotong. Walaupun WordPress tidak membenarkan gradien terus pada tag body, anda boleh mencipta div pembungkus yang meliputi keseluruhan laman.

Langkah-Langkah

Langkah 1 – Akses Editor Tema

Masuk ke direktori wp-admin laman web anda dan log masuk ke papan pemuka WordPress. Navigasi ke Penampilan lalu klik Editor Tema. Pilih fail header.php di bawah tajuk "Templat" untuk memuatkan kod HTML yang mengandungi tag body.

Langkah 2 – Tambah div Pembungkus

Cari satu div dengan ID "container" tepat di bawah tag body dalam fail header.php. Jika tiada, tambahkan kod berikut:

<div id="container">

Simpan perubahan dengan menekan butang Update File. Jika anda menambah div, buka fail footer.php dan letakkan

</div>

sekali sebelum tag </body> untuk menutup pembungkus.

Langkah 3 – Tetapkan Gradien di style.css

Buka fail style.css melalui editor. Tambahkan kod berikut di bahagian bawah fail:

#container {
    background-color: #038394;
    background-image: linear-gradient(to bottom, #038394, #00CCCC);
    background-image: -webkit-linear-gradient(top, #038394, #00CCCC);
    background-image: -moz-linear-gradient(top, #038394, #00CCCC);
}

Baru ini menetapkan latar belakang gradien dengan fallback warna jika pelayar tidak menyokong gradien. Pastikan anda menetapkan arah gradien dan dua warna yang saling mengalir.

Simpan fail dengan menekan butang Update File. Latar belakang gradien kini akan muncul di setiap halaman laman WordPress anda.

Tip Tambahan

• Tetapkan semua margin ke sifar pada div "container" jika anda melihat ruang putih di sekitar gradien.