Menambahkan Kelas CSS Tambahan ke Blok

Panduan berikut menjelaskan cara menggunakan fitur Kelas CSS Tambahan dari Editor WordPress.

Dalam panduan ini

1. Cara Kerjanya
2. Menambahkan Kelas CSS Tambahan
3. Panduan Menggunakan Kelas CSS Tambahan
   1. Menentukan Blok Tertentu pada Halaman Tertentu
   2. Mengubah Ikon Bullet dalam Daftar
   3. Memanfaatkan Kelas CSS Khusus yang Tersedia

Cara Kerjanya

Disarankan memiliki pengetahuan dasar tentang Kode CSS untuk menggunakan fitur berikut. Berikut cara kami untuk membantu Anda dengan CSS.

Pengaturan blok Lanjutan memungkinkan Anda menambahkan kelas CSS ke blok sehingga Anda dapat menulis CSS khusus untuk mengatur gaya blok sesuai keinginan.

Kelas CSS Tambahan dapat ditambahkan melalui bagian Lanjutan di pengaturan blok

Misalnya, jika ingin membuat teks rata kanan kiri pada blok tertentu saja, Anda dapat menambahkan kelas seperti kelas-rata-kanan-kiri-saya ke kolom Kelas CSS Tambahan di pengaturan blok paragraf. Lalu kunjungi Editor CSS Anda dan tulis gaya untuk kelas tersebut seperti:

p.my-justify-class {     
  text-align: justify; 
}

Menambahkan Kelas CSS Tambahan

Untuk menambahkan kelas CSS tambahan ke blok, klik blok yang sedang Anda edit. Lalu lihat pengaturan blok di sebelah kanan untuk pengaturan Lanjutan.

Jika Anda tidak melihat pengaturan blok di sebelah kanan, klik ikon roda gigi (⚙️) di pojok kanan atas untuk membuka pengaturan tersebut.

Setiap blok memiliki pengaturan Lanjutan tempat Anda dapat menambahkan kelas CSS tambahan

Anda dapat menentukan kelas Anda sebagai:

• Satu kata, seperti khusus
• Istilah yang terdiri atas beberapa kata dan setiap katanya dipisahkan oleh tanda hubung, seperti kelas-khusus

Anda juga dapat menambahkan beberapa kelas ke blok yang sama dengan memisahkan setiap kelas dengan spasi. Misalnya: kelas-khusus-1 kelas-khusus-2

Saat menentukan kelas Anda, berhati-hatilah agar tidak menggunakan kelas yang mungkin sudah ditentukan dalam kode situs web. Sebaiknya gunakan istilah unik yang belum digunakan dalam CSS situs.

Anda mungkin mengetahui bahwa saat menulis kode CSS, kami menentukan kelas dengan menulis titik sebelum kelas, misalnya .laman. Namun, jangan menulis titik sebelum kelas jika Anda menentukannya di pengaturan blok sebagai Kelas CSS Tambahan. Jika Anda melakukannya, kode tidak akan berfungsi.

Panduan Menggunakan Kelas CSS Tambahan

Menentukan Blok Tertentu pada Halaman Tertentu

Mungkin Anda ingin mengubah tampilan satu blok Media & Teks di situs Anda, tetapi ingin agar semua blok Media & Teks lain di situs Anda tidak berubah. Dalam contoh berikut, kami menentukan kelas blok-teks-media-khusus di pengaturan blok Lanjutan:

Kemudian, kami menambahkan CSS berikut ke situs kami melalui Sesuaikan → CSS Tambahan untuk memberikan warna gradasi pada latar belakang blok:

.special-media-text-block {
  background-image: linear-gradient(to bottom right, red, blue);
}

Berikut hasilnya:

Mengubah Ikon Bullet dalam Daftar

Anda dapat mengubah ikon yang digunakan pada daftar dari bulat hitam menjadi kotak, bulat kosong, angka romawi, dan lainnya!

Tentukan kelas seperti blok-daftar-bullet-kotak dengan cara:

Menambahkan kelas khusus ke blok daftar

Lalu tambahkan CSS berikut ke Editor CSS Anda:

.square-bullet-list-block {
     list-style-type: square;
}

dan hasilnya adalah:

Blok daftar dengan bullet kotak!

Perhatikan bahwa bergantung pada desain tema, Anda mungkin perlu menambahkan kelas seperti <li> ke CSS di atas untuk menentukan kelas yang tepat.

Memanfaatkan Kelas CSS Khusus yang Tersedia

Beberapa kelas telah ditentukan sebelumnya di WordPress, dan Anda dapat menambahkannya ke blok Anda untuk memberikan efek menarik.

Misalnya, berbingkai-lingkaran akan membuat gambar di blok gambar muncul dalam bentuk lingkaran:

Efek kelas berbingkai-lingkaran

Menghapus kelas juga akan menghilangkan efek lingkaran.

Di bawah ini adalah daftar beberapa kelas CSS lain yang tersedia, yang akan didukung beberapa blok, tetapi perlu diingat bahwa gaya tema dapat menimpa kelas yang sebelumnya. Untuk hasil terbaik, gunakan salah satu tema yang Disarankan.

• aligncenter
• alignright
• alignleft
• alignwide
• alignfull
• has-small-font-size
• has-large-font-size
• has-huge-font-size
• has-drop-cap