17 Tips CSS Menghemat Waktu Untuk Pengguna WordPress
Diterbitkan: 2023-03-13WordPress menawarkan kemungkinan tak terbatas untuk mendesain dan menyesuaikan situs web Anda. Pada artikel ini, kami akan membagikan beberapa tips praktis CSS khusus untuk pengguna WordPress, mulai dari menata header hingga mengubah font Anda.
Meskipun WordPress menawarkan banyak tema dan templat siap pakai, terkadang Anda perlu mengambil tindakan sendiri dan melakukan penyesuaian dengan CSS.
Jika Anda pernah menanyakan pertanyaan-pertanyaan ini saat Anda bekerja di situs WordPress Anda:
- “Bagaimana cara menghapus tombol 'baca selengkapnya'?”
- “Bagaimana cara mengubah warna tautan ini?”
- “Bagaimana cara membuat tautan ini tidak dapat diklik tetapi tetap mempertahankan teksnya di halaman?”
…lalu baca terus untuk mempelajari beberapa trik CSS yang berharga untuk situs web Anda.
Dalam tutorial ini, kita akan membahas:
- Kiat CSS WordPress
- Pusatkan elemen secara horizontal dan vertikal
- Ubah warna tautan
- Hapus tautan
- Nonaktifkan tautan (tautan tetap terlihat tetapi pengguna tidak dapat mengekliknya)
- Ubah warna tautan saat mengarahkan kursor
- Tautan gaya
- Gaya tombol
- Mengubah font suatu bagian
- Buat header yang lengket
- Buat header lengket dengan efek bayangan
- Tambahkan warna latar belakang ke suatu bagian
- Mengubah warna latar belakang tubuh
- Mengubah warna kata atau frasa tertentu
- Buat batas di sekitar gambar
- Buat efek hover pada gambar
- Gaya formulir
- Buat tata letak responsif
- Tingkatkan Keterampilan CSS Anda ke Tingkat Berikutnya
Kiat CSS WordPress
Dua hal yang perlu Anda ketahui untuk menerapkan tips ini adalah:
- Cara kerja CSS
- Bagaimana cara menambahkan CSS ke WordPress
Catatan: CSS tidak beresiko, jadi jika Anda membuat kesalahan, Anda cukup menghapus kode Anda atau memodifikasinya… tidak akan merusak apa pun :)
Mari kita langsung ke beberapa tips praktis CSS beserta contohnya sehingga Anda dapat mencobanya di situs WordPress Anda sendiri:
Pusatkan elemen secara horizontal dan vertikal
Untuk memusatkan elemen (seperti gambar, teks, atau div) secara horizontal dan vertikal, gunakan kode CSS berikut:
.element {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Dalam kode ini, properti position: relative digunakan untuk memposisikan elemen relatif terhadap posisi leluhur terdekatnya. top: 50% dan left: 50% memindahkan elemen ke tengah wadahnya. Terakhir, properti transform: translate(-50%, -50%) memusatkan elemen secara horizontal dan vertikal dengan memindahkannya kembali 50% dari lebar dan tingginya.
Ubah warna tautan
.item-class{
color : blue;
}
Anda dapat menggunakan warna seperti putih, hitam, biru, merah… tetapi Anda mungkin ingin menggunakan warna tertentu.
Dalam hal ini, Anda dapat melakukannya seperti ini:
.item-class{
color : #F7F7F7;
}
Jika Anda ingin membuat palet warna untuk desain situs web Anda, coba gunakan alat Paletton. Ini sangat membantu!
Catatan: Jika ingin menggabungkan elemen caranya cukup mudah.
Misalnya, Anda ingin menonaktifkan klik dan mengembalikan tautan menjadi hitam.
Anda dapat menggunakan kode ini:
.item-class{
pointer-events : none;
color : black;
}
Hapus tautan
.item-class{
display : none;
}
Catatan: Kadang-kadang Anda mungkin perlu memberi tanda a setelah kelas Anda agar dapat berfungsi, seperti ini:
.item-class a{
display : none;
}
Coba tambahkan a atau bereksperimen tanpa a untuk melihat apakah kode Anda berfungsi atau tidak. Cukup tambahkan CSS Anda, simpan, dan periksa frontend Anda.
Nonaktifkan tautan (tautan tetap terlihat tetapi pengguna tidak dapat mengekliknya)
Catatan: Selalu lebih baik untuk memodifikasi HTML untuk melakukan hal ini, tetapi jika CSS mungkin lebih mudah atau satu-satunya solusi yang mungkin, gunakan kode ini:
.item-class{
pointer-events: none;
}
Ubah warna tautan saat mengarahkan kursor
Anda dapat membuat tautan berubah warna ketika pengguna mengarahkan kursor ke tautan tersebut dengan menggunakan kode CSS berikut:
a:hover {
color: red;
}
Dalam kode ini, pemilih a:hover menargetkan semua link pada halaman yang sedang diarahkan oleh pengguna. Properti color: red mengubah warna teks menjadi merah.
Tautan gaya
Untuk menata tautan di situs web Anda, gunakan kode CSS berikut:
a {
color: #0077cc;
text-decoration: none;
border-bottom: 1px solid #0077cc;
transition: all 0.2s ease-in-out;
}
a:hover {
color: #005299;
border-bottom: 1px solid #005299;
}
Dalam kode ini, pemilih a digunakan untuk mengatur gaya semua link pada halaman. Properti color mengatur warna link, dan properti text-decoration menghilangkan garis bawah default. Properti border-bottom menambahkan efek garis bawah yang halus. Properti transition menciptakan efek transisi yang mulus saat pengguna mengarahkan kursor ke tautan. Pemilih a:hover digunakan untuk memberi gaya pada tautan saat pengguna mengarahkan kursor ke tautan tersebut.
Gaya tombol
Gunakan kode berikut untuk menata tombol:
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
Dalam kode ini, berbagai properti digunakan untuk menata tombol, termasuk properti background-color dan color untuk tampilan tombol, properti padding untuk ukuran tombol, dan properti cursor untuk mengubah penunjuk tetikus saat mengarahkan kursor ke tombol.
Mengubah font suatu bagian
Ubah font bagian situs web Anda menggunakan kode CSS berikut:
.section {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}
Dalam kode ini, properti font-family mengatur font menjadi Arial atau font sans-serif serupa, properti font-size mengatur ukuran font menjadi 16 piksel, dan properti line-height mengatur jarak antar baris teks menjadi 1,5 kali ukuran font.
Buat header yang lengket
Jika Anda ingin membuat header yang tetap berada di bagian atas halaman saat pengguna menggulir, Anda dapat menggunakan kode CSS berikut:
.header {
position: fixed;
top: 0;
left:0;
width: 100%;
background-color: #333;
color: #fff;
z-index: 9999;
}
Dalam kode ini, properti position: fixed memperbaiki header ke bagian atas viewport, dan properti top: 0 memposisikannya di bagian paling atas halaman. Properti width: 100% memastikan header menjangkau seluruh lebar viewport. background-color , color digunakan untuk menata gaya header, dan properti z-index: 9999 memastikan bahwa header muncul di atas semua elemen lain pada halaman.
Buat header lengket dengan efek bayangan
Untuk membuat header tempel dengan efek bayangan yang tetap berada di bagian atas halaman saat pengguna menggulir, gunakan kode CSS ini:
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #fff;
z-index: 999;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.content {
padding-top: 100px;
}
Dalam kode ini, properti position: fixed digunakan untuk memasang header di bagian atas halaman. Properti top: 0 dan left: 0 memposisikan header di sudut kiri atas halaman. Properti width: 100% mengatur lebar header menjadi lebar penuh halaman. Properti background-color mengatur warna latar belakang header, dan properti z-index memastikan bahwa header muncul di atas elemen lain pada halaman. Terakhir, properti box-shadow menambahkan efek bayangan halus pada header. Pemilih .content digunakan untuk menambahkan padding ke bagian atas halaman sehingga konten tidak tercakup oleh header tetap.
EBUKU GRATIS
Peta jalan langkah demi langkah Anda menuju bisnis pengembang web yang menguntungkan. Dari mendapatkan lebih banyak klien hingga melakukan penskalaan secara gila-gilaan.
EBUKU GRATIS
Rencanakan, bangun, dan luncurkan situs WP Anda berikutnya tanpa hambatan. Daftar periksa kami membuat prosesnya mudah dan dapat diulang.
Tambahkan warna latar belakang ke suatu bagian
Apakah Anda ingin menambahkan warna latar belakang ke bagian situs web Anda? Kemudian gunakan kode CSS berikut:
.section {
background-color: #f2f2f2;
padding: 20px;
}
Dalam kode ini, properti background-color: #f2f2f2 menyetel warna latar belakang menjadi abu-abu terang, dan properti padding: 20px menambahkan 20 piksel ruang di sekitar konten dalam bagian tersebut.
Mengubah warna latar belakang tubuh
Tambahkan kode ini untuk mengubah warna latar belakang badan situs web Anda:
body {
background-color: #f5f5f5;
}
Dalam kode ini, properti background-color mengatur warna latar belakang menjadi abu-abu terang.
Mengubah warna kata atau frasa tertentu
Untuk mengubah warna kata atau frasa tertentu dalam satu blok teks, Anda dapat menggunakan kode CSS berikut:
p span {
color: red;
}
Dalam kode ini, pemilih p span menargetkan setiap elemen span yang muncul dalam elemen p . Anda kemudian dapat menggabungkan kata atau frasa yang ingin Anda targetkan dengan elemen span di HTML Anda, seperti ini:
<p>Lorem ipsum dolor sit amet, <span>consectetur adipiscing elit</span>. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Hal ini akan menyebabkan frasa “consectetur adipiscing elit” diberi warna merah.
Buat batas di sekitar gambar
Berikut cara menambahkan batas di sekitar gambar:
img {
border: 2px solid #ccc;
}
Dalam kode ini, properti border mengatur lebar, gaya, dan warna border. Nilai 2px mengatur lebar batas menjadi 2 piksel, solid mengatur gaya menjadi garis solid, dan #ccc mengatur warna menjadi abu-abu terang.
Buat efek hover pada gambar
Gunakan cuplikan kode ini untuk membuat efek hover pada gambar:
img:hover {
opacity: 0.8;
}
Dalam kode ini, pemilih img:hover menargetkan gambar ketika pengguna mengarahkan kursor ke gambar tersebut. Properti opacity mengatur transparansi gambar. Dalam hal ini, nilainya diatur ke 0,8, membuat gambar sedikit transparan saat pengguna mengarahkan kursor ke atasnya.
Gaya formulir
Gaya formulir di situs web Anda dengan kode CSS berikut:
form {
background-color: #f2f2f2;
padding: 20px;
border-radius: 5px;
}
form label {
display: block;
margin-bottom: 10px;
}
form input[type="text"], form input[type="email"], form textarea {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: none;
border-radius: 3px;
box-shadow: 0 0 5px #ccc;
}
form input[type="submit"] {
background-color: #4CAF50;
border: none;
color: #fff;
padding: 10px 20px;
border-radius: 3px;
cursor: pointer;
}
Dalam kode ini, berbagai properti digunakan untuk menata gaya suatu formulir, termasuk properti background-color , padding , dan border-radius untuk keseluruhan tampilan formulir. Pemilih form label digunakan untuk memberi gaya pada label yang terkait dengan setiap bidang formulir. form input[type="text"], form input[type="email"], form textarea digunakan untuk mengatur gaya berbagai bidang input dalam formulir. Pemilih form input[type="submit"] digunakan untuk mengatur gaya tombol kirim.
Buat tata letak responsif
Jika Anda ingin membuat layout responsif yang menyesuaikan dengan berbagai ukuran layar, gunakan kode CSS berikut:
@media (max-width: 768px) {
/* Styles for screens smaller than 768px */
.container {
width: 100%;
}
.menu {
display: none;
}
.mobile-menu {
display: block;
}
}
@media (min-width: 769px) {
/* Styles for screens larger than 768px */
.container {
width: 768px;
margin: 0 auto;
}
.menu {
display: block;
}
.mobile-menu {
display: none;
}
}
Dalam kode ini, aturan @media digunakan untuk menentukan gaya berbeda untuk ukuran layar berbeda. Aturan @media pertama menargetkan layar dengan lebar maksimum 768 piksel, dan aturan @media kedua menargetkan layar dengan lebar minimum 769 piksel. Berbagai penyeleksi dalam setiap aturan @media digunakan untuk menyesuaikan tata letak dan tampilan halaman berdasarkan ukuran layar.
Satu lagi tip CSS…
Anda mungkin menemukan kode Anda tidak berfungsi meskipun Anda melakukan semuanya dengan benar. Ini mungkin karena sudah ada kode CSS yang mengatakan sesuatu yang berbeda dari kode Anda.
Untuk menimpanya, cukup tambahkan !important seperti ini:
.item-class{
pointer-events: none !important;
}
Ini hanyalah beberapa contoh cara praktis menggunakan CSS untuk menyempurnakan situs WordPress Anda.
Dengan CSS, kemungkinan untuk menyesuaikan tampilan situs web Anda hampir tidak terbatas. Dengan mempelajari dan menerapkan tips ini, Anda dapat membuat situs web yang tidak hanya menarik secara visual tetapi juga dioptimalkan untuk pengalaman pengguna yang lebih baik.
Tingkatkan Keterampilan CSS Anda ke Tingkat Berikutnya
Baik Anda seorang pemula atau pengembang web atau desainer web profesional berpengalaman, jika Anda ingin mempelajari lebih dalam penggunaan CSS dengan WordPress, tutorial CSS tambahan berikut akan membantu Anda memperluas pengetahuan dan keterampilan Anda:
- 10 Tips Sederhana Belajar CSS Untuk WordPress – Tips praktis untuk pemula yang ingin belajar CSS khusus untuk digunakan dengan WordPress. Ini mencakup semuanya, mulai dari memahami sintaksis CSS hingga menggunakan kerangka kerja CSS.
- Mempelajari dan Merujuk CSS untuk WordPress – Panduan komprehensif untuk mempelajari dan mereferensikan CSS khusus untuk digunakan dengan WordPress. Ini mencakup topik-topik seperti menggunakan Penyesuai WordPress, memahami pemilih CSS, dan bekerja dengan tema anak.
- 7 Situs Terbaik untuk Menemukan Cuplikan dan Inspirasi CSS – Mencari inspirasi untuk kode CSS Anda? Artikel ini mencantumkan tujuh situs web yang menawarkan cuplikan CSS dan contoh yang dapat Anda gunakan di situs WordPress Anda sendiri.
- Cara Menata Gambar di Situs WordPress Anda dengan CSS – Gambar adalah bagian penting dari situs web mana pun, dan artikel ini menawarkan tip tentang cara menatanya menggunakan CSS. Anda akan mempelajari cara menambahkan batas, mengubah ukuran dan perataan gambar, dan banyak lagi.
- Cara Menambahkan CSS Khusus ke Situs WordPress Anda – Artikel ini memandu Anda melalui proses menambahkan CSS khusus ke situs WordPress Anda, menggunakan Penyesuai dan plugin bawaan.
- Plugin CSS Gratis Untuk Mengedit Langsung Situs WordPress Anda – Artikel ini mencantumkan beberapa plugin CSS gratis yang memungkinkan Anda mengedit langsung situs WordPress Anda, sehingga lebih mudah untuk melihat efek perubahan CSS Anda secara real-time.
- 14 Alat Animasi CSS Keren Untuk WordPress – Jika Anda ingin menambahkan beberapa animasi ke situs WordPress Anda menggunakan CSS, artikel ini mencantumkan beberapa alat keren yang dapat Anda gunakan untuk melakukannya.
- Tambahkan Tata Letak Batu dan Kotak ke Situs WordPress Anda Menggunakan CSS – Artikel ini menjelaskan cara menggunakan CSS untuk menambahkan tata letak batu dan kotak ke situs WordPress Anda, menciptakan desain yang lebih menarik secara visual.
- 25 Tips Ahli untuk Pengkodean CSS yang Lebih Bersih untuk WordPress – Jika Anda ingin meningkatkan kebersihan dan keterbacaan kode CSS Anda, artikel ini menawarkan 25 tips ahli untuk melakukan hal itu.
- 25 Tips Pro untuk Meningkatkan Alur Kerja CSS Anda – Tips untuk meningkatkan alur kerja CSS Anda, mulai dari menggunakan praprosesor CSS hingga menggunakan alat pengembang browser untuk men-debug kode Anda.
Klik tautannya untuk mempelajari lebih lanjut dan mulai meningkatkan situs WordPress Anda hari ini.
Kontributor
Terima kasih kepada anggota WPMU DEV, Antoine dari Incensy, yang telah menyumbangkan ide untuk postingan ini dan beberapa contoh CSS yang digunakan di atas. Lihat profil mitra Agensi Incensy untuk lebih jelasnya.