Cara Mengubah Ukuran Blok di WordPress

Editor Blok Gutenberg, diperkenalkan secara resmi di WordPress 5.0, memberi pengguna kesempatan untuk sepenuhnya menyesuaikan konten dan situs WordPress mereka. Tidak lagi dibatasi oleh kebutuhan untuk membuat di alat WYSIWYG seperti TinyMCE Classic Editor, Gutenberg menyediakan blok individual untuk setiap elemen konten postingan atau halaman. Dengan kontrol atas pengaturan untuk setiap blok tertentu, pengguna dapat mendesain konten WordPress dengan lebih mudah daripada sebelumnya. Dan salah satu cara paling sederhana untuk membuat desain menonjol adalah dengan membuatnya melampaui pengaturan default. Jadi kita akan melihat cara mengubah ukuran blok di WordPress sehingga Anda dapat mulai berpikir (dan mendesain) di luar kebiasaan.

Sebagian besar pengubahan ukuran di editor blok masih terbatas pada area konten situs karena sifat responsif blok. Jika Anda telah mengatur area konten halaman Anda ke lebar penuh, Anda akan bekerja di dalam ruang itu. Jika Anda memiliki area konten posting yang diatur ke dari 580px atau 1200px, misalnya, Anda akan bekerja di sana. Metode yang kami gunakan untuk mengajari Anda cara mengubah ukuran blok di WordPress semuanya didasarkan pada gagasan bahwa Anda akan tetap berada di dalam batas wadah blok tertentu.

Cara Mengubah Ukuran Blok di Editor

Beberapa—tetapi tidak semua—blok memiliki opsi pengubahan ukuran bawaan. Ini adalah yang termudah untuk diubah ukurannya karena alasan yang jelas. Namun, tergantung pada bloknya, opsi pengubahan ukuran akan berada di tempat yang berbeda.

Contoh #1: Blok Gambar

Mengklik blok akan memunculkan menu konteks, dan opsi pengubahan ukuran di sini sebenarnya adalah opsi spasi. Namun, perataan lebar lebar dan lebar penuh akan mengubah ukuran blok gambar menjadi lebar wadah (lebar) atau lebar seluruh halaman (penuh).

Anda juga dapat mengubah ukuran blok gambar menggunakan pengaturan blok di bilah sisi kanan. Bagian Ukuran Gambar yang diberi nama tepat memiliki sejumlah pilihan yang dapat digunakan untuk mengubah ukuran blok.

WordPress memiliki dropdown untuk mengubah ukuran cepat, dan Anda dapat memilih preset dari thumbnail , medium , large , dan full size. Memilih ukuran penuh akan bervariasi pada tema Anda apakah itu benar-benar ditampilkan sepenuhnya atau sesuai dengan area konten.

Anda juga dapat secara khusus menyesuaikan lebar dan tinggi dengan piksel. Di bawahnya Anda dapat menyesuaikan berdasarkan persentase. Persentase didasarkan pada nilai numerik di bidang lebar dan tinggi . Bukan ukuran gambar prasetel yang Anda pilih dari menu tarik-turun.

Dan terakhir, Anda dapat mengeklik gambar itu sendiri untuk memunculkan batas biru dengan jangkar putih melingkar . Anda dapat menyeret ini untuk mengubah ukuran blok.

Anda cukup mengeklik dan menyeret jangkar mana pun untuk menskalakan gambar. Melakukannya akan menyesuaikan ukuran di bidang tinggi dan lebar di menu pengaturan blok.

Contoh #2: Blok Acara

Untuk Blok Acara, pengaturan pengubahan ukuran hanya ada di menu konteks di editor itu sendiri. (Blok Acara adalah plugin terpisah oleh Automattic yang akan Anda instal, dan itu bukan bagian dari editor inti Gutenberg.)

Seperti beberapa opsi blok gambar, opsi pengubahan ukuran di sini adalah opsi jarak secara teknis. Namun dua pilihan tersebut adalah Align Center dan Wide Width. Anda dapat memilih satu untuk dipusatkan di wadah atau menjadi lebar penuh di layar.

Menyesuaikan ketinggian blok di editor itu sendiri agak sulit, tetapi berhasil. Jika Anda cukup menekan enter/return di bidang blok kosong, Anda dapat memperluas ketinggian dengan memasukkan blok paragraf kosong tambahan.

Ini adalah solusi yang kurang ideal. Tapi itu cepat dan bekerja dalam keadaan darurat — terutama mengingat tidak adanya opsi penyesuaian ketinggian nyata untuk Blok Acara.

Contoh 3#: Menggunakan Kolom untuk Mengubah Ukuran Blok di WordPress

Jika blok yang perlu Anda ubah ukurannya tidak disertai dengan opsi pengubahan ukuran di panel pengaturan atau menu konteksnya, menggunakan kolom editor blok adalah cara lain Anda dapat mengubah ukuran blok apa pun. Cukup cari blok Kolom dengan menekan salah satu tombol + untuk menambahkan blok baru.

Di dalam blok Kolom, Anda dapat menambahkan blok lain yang Anda inginkan. Dalam opsi pencarian, Pola editor blok juga muncul. Ini adalah template yang dapat Anda masukkan ke dalam posting atau halaman Anda dengan konten yang sudah berukuran dan ditempatkan, menunggu konten Anda untuk menggantikan placeholder.

Sejak awal, blok Kolom memungkinkan Anda memilih ukuran kolom itu sendiri. Ini dipecah menjadi 6 orientasi yang berbeda, masing-masing dengan persentase berbeda dari halaman yang digunakan untuk masing-masing kolom.

Ini bukan satu-satunya konfigurasi yang dapat Anda gunakan. Anda dapat menggunakan tombol + biru di dalam blok untuk menambahkan kolom baru kapan saja. Setiap kolom individu memiliki panel pengaturan sendiri di mana Anda dapat menyesuaikan lebarnya sendiri dengan persentase.

Mungkin perlu beberapa eksperimen untuk mendapatkan ukuran yang tepat untuk desain Anda. Namun, setelah selesai, Anda dapat memiliki beberapa konten yang dirancang dengan baik dan ditempatkan dengan baik di halaman depan Anda. Ingatlah bahwa kolom kosong apa pun yang Anda miliki di editor blok juga akan muncul sebagai kolom kosong di bagian depan.

Dengan menyesuaikan lebar, penempatan, dan jumlah kolom yang berbeda, blok Anda dapat diubah ukurannya dan ditempatkan di hampir semua cara.

Perlu Lebih Banyak Pilihan Ukuran? Pertimbangkan Pembuat Halaman yang Lebih Lanjut

Kami menyadari bahwa beberapa metode ini untuk mengubah ukuran blok dapat terasa membatasi. Jika Anda menemukan bahwa mereka terlalu membatasi untuk Anda, mungkin sudah waktunya untuk melihat ke pembuat halaman yang lebih maju.

Divi kami sendiri, misalnya, memiliki opsi Ukuran dan Transformasi untuk setiap modul (blok) yang memberi Anda kendali lebih besar atas bentuk, ukuran, dan jarak daripada yang dimungkinkan di Gutenberg. Sebagian besar pembuat halaman tingkat lanjut juga melakukannya, jadi jika Anda menemukan bahwa opsi Gutenberg terlalu membatasi, memeriksa sesuatu seperti Divi mungkin merupakan langkah terbaik berikutnya.

Cara Mengubah Ukuran Blok di WordPress Menggunakan CSS

Setiap blok memiliki bagian CSS di panel pengaturan di bawah Pengaturan Lanjutan . Di samping pengaturan lanjutan khusus blok lainnya, masing-masing memiliki bidang untuk Kelas CSS Tambahan (es) . Anda dapat menetapkan pemilih apa pun yang Anda inginkan ke blok individual ini, apakah mereka sudah ada di situs Anda atau jika Anda membuatnya khusus untuk blok ini.

Biasanya, kami menyarankan menggunakan ID CSS alih-alih Kelas untuk masing-masing blok, tetapi itu tidak didukung oleh editor blok (setidaknya secara default). Jadi, Anda hanya ingin menggunakan beberapa Kelas untuk mengikuti blok individual daripada ID. Kelas benar-benar dimaksudkan untuk mencakup kategori besar jenis elemen, sedangkan ID dimaksudkan untuk elemen individu. Dalam hal ini, kami sarankan menggunakan konvensi penamaan yang jelas untuk menjaga semuanya tetap lurus dalam kode Anda.

Terlepas dari itu, Anda cukup memasukkan kelas ke dalam bidang teks. Jangan sertakan titik/titik di depan nama Kelas pada kolom ini .

Sekarang, Anda harus menavigasi ke Appearance – Customize dan temukan bagian CSS tambahan di bagian paling bawah. Tulis atau tempel kode CSS untuk mengubah ukuran blok sesuai keinginan Anda.

Sebaiknya hindari menggunakan pengukuran dalam piksel (px) karena bersifat mutlak. Sebaiknya, Anda akan menggunakan vw (lebar area pandang) , vh (tinggi area pandang), atau % (persentase) untuk menyesuaikan blok. Ini akan masing-masing skala mengacu pada perangkat dan/atau konten lain di sekitarnya.

.block-1 {
	height:35vh;
	max-height:50vh;
}

.block-2 {
	width: 100vw;
}

.block-3 {
	max-width:80vw;
}

Perlu diingat bahwa % dan vw/vh juga berbeda, meskipun fungsinya sama. Mereka semua berfungsi berdasarkan persentase, tetapi itu relatif terhadap jangkar yang berbeda.

Pengukuran persentase dalam kaitannya dengan wadah di mana elemen tersebut dipegang. Jadi, jika bagian atau baris tempat elemen berada tidak mengarah ke tepi layar, bahkan pengaturan lebar:100% tidak akan mencapai batas.

Namun, menggunakan vh/vw akan, karena relatif terhadap area pandang perangkat itu sendiri, bukan elemen situs. Dengan menggunakan height:80vh , Anda selalu dapat memastikan bahwa blok ini menempati 80% dari tinggi layar, terlepas dari apakah itu ditampilkan di perangkat seluler, desktop, atau tablet.

Kesimpulan

Editor blok di WordPress memberi pengguna sejumlah besar opsi penyesuaian yang sebelumnya tidak tersedia (di dalam editor itu sendiri). Mengetahui cara mengubah ukuran blok di WordPress sangat penting untuk dapat memanfaatkan editor blok sepenuhnya. Dan dengan pengeditan situs penuh sekarang dalam repertoarnya, ini adalah salah satu keterampilan yang hanya akan lebih berguna seiring berjalannya waktu.

Apa saja tips dan trik yang dapat Anda bagikan tentang mengubah ukuran blok di WordPress?

Gambar unggulan artikel oleh 3rieart / shutterstock.com