Cara Menambahkan Gaya Kustom ke Widget WordPress
Kebanyakan widget sidebar WordPress biasanya terlihat sama. Akan sangat bagus jika semua widget Anda sama pentingnya, tetapi kenyataannya adalah beberapa lebih penting untuk pertumbuhan situs Anda daripada yang lain. Misalnya, ekstensi berlangganan daftar email tentu lebih penting daripada ekstensi file. Bukankah lebih baik jika Anda dapat dengan mudah mendesain berbagai widget penting? Pada artikel ini, kami akan menunjukkan cara menambahkan gaya kustom ke widget WordPress.
Gunakan plugin untuk menambahkan gaya khusus ke widget WordPress
Hal pertama yang harus Anda lakukan adalah menginstal dan mengaktifkan plugin CSS Classes Widget. Setelah aktivasi, buka saja Penampilan »Widget dan klik widget apa saja di bilah sisi untuk memperluasnya.
Anda akan melihat yang baru kelas CSS di bawah widget Anda, sehingga Anda dapat dengan mudah menentukan kelas CSS untuk setiap widget. Misalnya, kami menambahkan kelas langganan ke widget formulir langganan.
Sekarang Anda dapat pergi ke halaman template tema Anda dan menambahkan aturan gaya Anda di sana. Saya suka ini:
.subscribe {
background-color: #858585;
color:#FFF;
}
Anda dapat menambahkan CSS khusus apa pun yang Anda suka, seperti menambahkan latar belakang, mengubah batas, menggunakan warna yang berbeda, dll.
Tambahkan gaya khusus secara manual ke widget WordPress
Jika Anda tidak ingin menggunakan plugin, Anda dapat menambahkan gaya kustom secara manual ke widget WordPress Anda. Secara default, WordPress menambahkan kelas CSS ke berbagai elemen, termasuk widget.
Setiap widget di bilah sisinya memiliki kelas widget bernomor. Seperti suku cadang-1 suku cadang2 suku cadang3, dll. Dengan alat Elemen Inspeksi Google Chrome, Anda dapat menemukan kelas CSS untuk ekstensi yang ingin Anda sesuaikan.
Seperti yang Anda lihat pada tangkapan layar di atas, widget yang ingin kita sesuaikan memiliki kelas widget-2 yang ditambahkan oleh WordPress. Sekarang buka lembar gaya tema Anda dan tambahkan aturan gaya khusus Anda.
.widget-2 {
background-color: #858585;
color:#FFF;
}
.widget-2 .widget-title {
font-weight:bold;
}
Itu saja, kami harap artikel ini membantu Anda menambahkan gaya khusus ke widget WordPress. Bermain-main dengan CSS dan bereksperimen dengan warna yang berbeda. Gunakan pengujian split A/B untuk menentukan gaya kustom mana yang paling cocok untuk situs Anda.
Juga, jika Anda ingin cara yang lebih mudah untuk menyorot widget formulir pendaftaran dari bilah sisi, coba OptinMonster karena menawarkan banyak tata letak, pengujian A/B, dan banyak lagi.
Jika Anda menyukai artikel ini, berlangganan saluran kami YouTube untuk menonton video tutorial WordPress. Anda juga dapat menemukan kami di Twitter dan Google+.
