Cara Menambahkan Kelas CSS Kustom ke WordPress (3 cara mudah)

Mereka yang tahu CSS tahu bahwa kelas CSS adalah waktu yang sangat besar saat menata seluruh situs. Tetapi jika Anda tidak membuat kode, Anda mungkin tidak pernah menyadari betapa kuatnya mereka. Hari ini, kami mengubahnya.

Dalam posting ini, saya akan menunjukkan kepada Anda 3 cara mudah untuk menambahkan kelas CSS ke WordPress - bahkan jika Anda belum pernah menulis satu baris kode. Anda juga akan belajar bagaimana melakukannya dengan cara tanpa kode menggunakan pembuat situs web WordPress yang kuat, Divi.

Apa itu kelas CSS, dan bagaimana mereka membantu?

CSS ( Cascading Style Sheets ) adalah kode yang mengontrol desain dan penampilan elemen, seperti warna, jarak, dan font, di situs web. Kelas CSS adalah label yang dapat digunakan kembali yang Anda tetapkan ke beberapa elemen sehingga Anda dapat menata semuanya sekaligus alih -alih mengulangi proses yang sama untuk setiap elemen.

Tanpa kelas CSS, Anda harus menata setiap elemen secara manual, yang memakan waktu-terutama ketika bekerja di situs WordPress yang lebih besar dengan beberapa halaman. Tetapi seperti yang sering terjadi, sebagian besar situs web termasuk elemen dan motif berulang, seperti tombol pada halaman harga atau kotak fitur di berbagai bagian.

Elemen -elemen ini terlihat serupa karena, di backend, mereka berbagi grup kelas yang sama. Jadi ketika Anda menerapkan CSS ke satu elemen dari grup kelas umum, setiap elemen di dalamnya secara otomatis mewarisi pengaturan gaya yang sama. Di ujung depan, ini memberi mereka penampilan yang sama secara visual. Kelas CSS menghemat waktu, menjaga desain konsisten, dan membuat pengeditan di masa depan lebih mudah - karena Anda hanya perlu memperbarui kelas alih -alih mengubah setiap elemen satu per satu.

Cara Menambahkan Kelas CSS ke WordPress

Anda dapat menambahkan kelas CSS ke situs web WordPress dalam berbagai cara, tergantung pada kemahiran Anda dalam menggunakan CSS. Saya akan menunjukkan kepada Anda bagaimana melakukannya menggunakan WordPress Customizer dan plugin seperti CSS khusus sederhana tetapi kedua metode ini mengharuskan Anda untuk menulis CSS.

Lewati metode ketiga jika Anda lebih tertarik pada metode no-kode.

1. Menggunakan WordPress Customizer

Katakanlah halaman WordPress Anda memiliki banyak tombol. Mereka saat ini terlihat polos, dan Anda ingin mereka menonjol, jadi Anda berencana untuk menambahkan perbatasan biru tua dan latar belakang langit biru.

Menambahkan CSS ke setiap tombol akan membutuhkan waktu yang cukup banyak karena Anda harus mengulangi prosesnya delapan kali. Tetapi dengan kelas CSS, Anda dapat dengan mudah menetapkan kelas CSS yang sama untuk setiap tombol dan menulis CSS hanya sekali. Mari kita beri nama kelas CSS kami ' Custom-A' . Pada jendela Editor Halaman WordPress Anda, klik tombol apa pun> Pengaturan (Ikon Gear)> Toggle Opsi Lanjutan . Sekarang, tulis nama kelas di kelas CSS tambahan.

Ulangi proses untuk setiap tombol dan simpan. Untuk menambahkan kode gaya ke tombol -tombol ini, Anda harus menavigasi ke WordPress Customizer> CSS tambahan.

Untuk membuat perbatasan biru tua dan langit latar belakang biru, Anda akan menempelkan CSS Anda di sini.

Perhatikan bahwa nama kelas CSS yang kami pilih datang sebelum aturan styling dalam kode. Ini memastikan bahwa kode diterapkan ke setiap elemen yang memiliki nama kelas ini ditetapkan.

Setelah Anda menekan Publikasikan dan Pratinjau Halaman Anda, Tombol Gaya Akan Terlihat Seperti Ini:

Itu sederhana - jika Anda tahu CSS.

WordPress Customizer juga bagus untuk membuat perubahan kecil. Namun, masalahnya adalah bahwa CSS yang ditambahkan ada terikat dengan tema, yang berarti mungkin hilang jika Anda mengganti tema. Jadi, jika Anda suka menguji berbagai tema di situs web Anda, Anda harus memperbarui kode setiap kali Anda beralih ke tema yang berbeda, yang tidak menyenangkan. Dalam hal ini, memasang plugin untuk menjaga gaya kelas CSS Anda aman adalah pilihan yang jauh lebih baik.

2. Menggunakan plugin seperti CSS khusus sederhana

Setelah Anda menginstal plugin CSS khusus sederhana, opsi CSS khusus akan ditambahkan ke bagian Penampilan . Sekarang Anda hanya perlu menambahkan kode CSS Anda dan memperbarui CSS khusus untuk mencerminkan perubahan. (Anda masih perlu menetapkan nama kelas untuk elemen yang ingin Anda miliki gaya umum.)

Plugin seperti ini menjaga CSS khusus Anda tetap utuh, bahkan jika Anda mengubah tema Anda nanti. Ini juga sedikit lebih terorganisir daripada WordPress Customizer. Namun, kedua metode tidak dapat diukur karena dapat dengan mudah berantakan ketika Anda menyimpan CSS khusus untuk beberapa grup elemen dari seluruh situs web Anda.

Itu sebabnya, untuk gaya di seluruh lokasi, pendekatan yang disarankan adalah membuat tema anak dan memperbarui stylesheetnya. Dengan cara ini, semua perubahan Anda tetap aman dalam tema anak Anda, bahkan setelah pembaruan tema.

Meskipun efektif (dan direkomendasikan oleh coders), metode ini dapat dengan cepat menjadi teknis karena masih membutuhkan pekerjaan manual-Anda harus menata setiap elemen (atau beberapa elemen menggunakan kelas CSS), yang memakan waktu dan tidak ramah pemula. Anda juga harus melacak nama kelas - bayangkan Anda ingin mengedit kelas tombol tertentu, dan Anda menggulir melalui string kode yang tak ada habisnya.

Jadi bagaimana jika Anda bisa skala gaya tanpa menulis satu baris kode? Di situlah pembangun halaman drag-and-drop modern seperti Divi masuk.

3. Menggunakan pembangun situs web no-kode seperti Divi

Keindahan menggunakan pembuat situs web no-kode modern seperti Divi adalah bahwa Anda tidak perlu menulis CSS (atau kode apa pun) untuk menerapkan gaya yang konsisten di situs Anda. Dengan antarmuka visual, Anda dapat menetapkan gaya ke bagian, baris, kolom, dan modul hanya dengan memilih dan menyesuaikan pengaturan desain.

Di Divi, Anda membuat preset alih -alih kelas CSS. Selama bertahun-tahun, Divi menawarkan preset berbasis modul yang memungkinkan Anda menyimpan dan menggunakan kembali gaya untuk modul seperti tombol, uraian, dan gambar. Tapi kami telah meluncurkan sesuatu yang lebih menakjubkan - preset grup opsi yang memungkinkan Anda melangkah lebih jauh.

Sebelum preset grup opsi, Anda hanya diizinkan untuk menerapkan preset di seluruh modul. Misalnya, preset uraian hanya dapat digunakan dalam uraian lain. Sekarang, Anda bahkan dapat berbagi pengaturan di seluruh modul.

Alih -alih menyesuaikan satu elemen pada satu waktu, preset grup opsi memungkinkan Anda menyimpan gaya untuk pengaturan bersama - seperti latar belakang, perbatasan, atau gaya teks - dan menerapkannya pada beberapa elemen yang berbeda sekaligus. Misalnya, jika bagian dan kolom keduanya menggunakan warna latar belakang, Anda dapat menyimpan pengaturan gaya itu sebagai preset dan menerapkannya di semua elemen yang relevan untuk membuat desain kohesif.

Divi menyederhanakan membangun dan menyimpan gaya sebagai preset melalui fitur drag-and-drop tanpa pengkodean, membuat perubahan desain di seluruh situs lebih cepat dan lebih mudah diakses-terutama untuk non-coders.

Unduh Divi 5

Mari kita lihat apa yang saya maksud lebih detail di bawah ini

Preset grup opsi Divi membuat penambahan kelas CSS lebih mudah

Preset kelompok opsi Divi mengambil konsep kelas CSS dan menyederhanakannya untuk non-coders. Alih -alih menulis dan menugaskan kelas secara manual, Anda sekarang dapat menggunakan pembangun visual Divi untuk menerapkan gaya desain bersama di berbagai elemen dengan hanya beberapa klik.

Preset ini bekerja pada tingkat opsi, artinya mereka menargetkan pengaturan desain spesifik seperti warna latar belakang, perbatasan, atau jarak yang dibagikan di berbagai jenis elemen. Jadi, misalnya, pengaturan latar belakang bagian dapat diterapkan pada kolom, baris, dan bahkan elemen teks.

Ini adalah cara yang lebih cepat, lebih mudah, dan lebih intuitif untuk menjaga desain situs web Anda konsisten. Begini caranya:

• Gaya yang dapat digunakan kembali di seluruh elemen: Anda tidak perlu menyesuaikan setiap elemen secara manual. Simpan gaya grup opsi sebagai preset dan terapkan pada elemen apa pun.
• Pembaruan Global dengan edit tunggal: Modifikasi preset sekali, dan semua elemen menggunakan preset itu akan diperbarui secara otomatis. Ini membuat penyesuaian desain cepat dan efisien di seluruh situs web Anda.
• Gabungkan banyak preset: Lapisan dan aduk preset yang berbeda (misalnya, perbatasan, bayangan, gaya teks) pada elemen apa pun untuk kombinasi desain yang fleksibel dan kreatif tanpa memulai dari awal.
• Kustomisasi preset default untuk gaya dasar: Simpan preset sebagai default untuk secara otomatis menerapkannya pada semua elemen yang relevan.

Pelajari lebih lanjut tentang preset grup opsi

Cara menggunakan Divi untuk menambahkan kelas CSS ke WordPress tanpa coding

Sekarang setelah Anda tahu apa preset grup opsi Divi dan bahwa Anda tidak perlu tahu pengkodean untuk bekerja dengan mereka, saya ingin menunjukkan kepada Anda cara kerjanya di dalam pembangun divi. Apa yang perlu Anda lakukan untuk membuat, menyimpan, dan menerapkan preset grup ke pengaturan opsi seperti latar belakang, perbatasan, shadow kotak, dll. Sebagai contoh kami, mari kita sesuaikan halaman harga.

Mengubah latar belakang tombol

Misalkan saya ingin mengubah latar belakang tombol menjadi ungu agar sesuai dengan warna halaman. Jadi, saya akan menyesuaikan tombol kolom pertama dan menyimpan pengaturan sebagai preset tombol lampu utama . (Warna hitam dalam pengaturan UI menunjukkan Anda mengedit preset pengaturan. Jika Anda telah memilih mode gelap, itu akan menjadi sebaliknya.)

Sekarang, untuk menerapkan pengaturan yang sama ke dua tombol lainnya, saya hanya akan mengubah tombol preset ke lampu primer.

Mengubah Bayangan Kolom

Mari kita tambahkan bayangan kotak ke semua kolom. Saya akan menambahkan bayangan kotak ke kolom pertama dan menyimpannya sebagai preset Shadow Box Shadow.

Untuk menerapkan bayangan yang sama pada dua kolom lainnya, saya akan mengubah box shadow preset menjadi bayangan .

Memodifikasi preset teks

Anda juga dapat memodifikasi gaya untuk elemen teks, seperti H1 dan H2S. Inilah cara memperbarui kolom H3 Preset berfungsi:

Setelah menabung, begitulah halaman harga akan terlihat:

Meskipun saya telah membuat perubahan kecil untuk menunjukkan cara kerjanya, Anda dapat membayangkan kemungkinan. Dengan preset grup opsi Divi, mengedit gaya kustom grup sesederhana mengklik tombol. Tapi itu hanya puncak gunung es. Anda juga bisa:

• Atur preset default untuk grup opsi sehingga elemen dasar seperti judul atau tombol mewarisi gaya Anda secara otomatis di seluruh situs. Setelah Anda memahami cara kerja preset default, Anda tidak akan pernah kembali menggunakan metode lama.
• Preset grup opsi layer di atas preset elemen untuk menambah penekanan ekstra - seperti menerapkan latar belakang bersama dan kemudian menumpuk gaya bayangan atau perbatasan untuk membuat elemen tertentu menonjol.

Kami telah menulis seluruh panduan tentang semua yang harus Anda ketahui tentang preset grup opsi Divi. Baca artikel lengkapnya untuk mendapatkan ide desain dan saran tentang cara menyederhanakan desain web berbasis kelas dengan Divi.

Pelajari lebih lanjut tentang preset grup opsi

Divi adalah pengubah permainan untuk sistem desain berbasis kelas

Preset Grup Opsi Divi membawa kekuatan kelas CSS kepada semua orang. Baik Anda merancang solo atau berkolaborasi dengan tim, preset mempercepat alur kerja Anda, skala indah seiring tumbuhnya situs Anda, dan membuat gaya yang konsisten mudah. Mereka lebih cepat, lebih efisien, dan jauh lebih intuitif daripada alur kerja CSS tradisional.

Mulailah dengan Divi 5 Hari Ini

Divi 5 dalam mode pembaruan penuh. Kami meluncurkan fitur baru setiap minggu, seperti preset grup opsi, itu ide yang baik untuk mengetahui tentang unit canggih, variabel desain CSS, dan banyak lagi yang mengubah cara Anda mendekati merancang situs web mana pun.

Pelajari lebih lanjut tentang Divi 5

Divi 5 adalah kerangka desain yang kuat dengan alat -alat kuat seperti Divi Dash, Situs Divi Quick, dan Divi Ai - dibangun untuk membantu Anda membuat situs web khusus, profesional tanpa menyentuh satu baris kode. Tidak ada yang membatasi Anda, siap untuk melakukan test drive ke masa depan desain situs web?

Unduh Divi 5