Pola Blok WordPress 101: Apa Itu? Dan Cara Menggunakannya

Diterbitkan: 2021-08-03

Ingin menghemat waktu dan membuat desain yang lebih profesional di editor blok WordPress? Jika demikian, belajar tentang pola blok WordPress mungkin yang Anda butuhkan.

Dengan pola blok, Anda dapat memasukkan desain yang sudah jadi, menyesuaikannya untuk memenuhi kebutuhan Anda, dan siap untuk digunakan. Ini adalah penghemat waktu yang hebat. Dan, jika Anda bukan seorang desainer, pola blok juga berguna karena memungkinkan Anda menggunakan desain yang lebih unik bahkan jika Anda tidak memiliki pengetahuan untuk membuat desain tersebut dari awal.

Dalam posting ini, kami akan membahas semua yang perlu Anda ketahui tentang pola blok WordPress:

  • Apa itu pola blok WordPress dan perbedaannya dengan blok yang dapat digunakan kembali.
  • Cara menggunakan pola blok di editor.
  • Di mana menemukan pola blok baru dan cara menggunakannya.
  • Cara membuat pola blok sendiri tanpa kode.
#WordPress #block pattern 101: apa itu dan bagaimana menggunakannya?
Klik Untuk Tweet

Apa itu pola blok WordPress?

Pola blok WordPress pada dasarnya hanyalah templat yang terbuat dari blok.

Mereka dapat berisi satu blok atau beberapa blok yang diatur dalam tata letak tertentu. Selain blok itu sendiri, pola blok juga akan menyertakan pengaturan untuk blok tersebut ( seperti mengonfigurasi tombol menjadi warna tertentu ).

Anda dapat menemukan pola blok untuk templat halaman penuh. Atau, yang lebih umum, Anda akan menemukan pola blok untuk bagian tertentu yang mungkin ingin Anda gunakan di halaman. Anda kemudian dapat mengumpulkan beberapa pola blok seperti Lego untuk membangun desain Anda.

Misalnya, Anda ingin membuat bagian yang memiliki latar belakang gambar, beberapa teks judul, dan tombol. Anda dapat mengatur ini secara manual menggunakan editor blok. Tetapi dengan pola blok, Anda dapat menyisipkan desain yang sudah jadi dengan tata letak itu dan kemudian menyesuaikannya agar sesuai dengan konten Anda.

Seperti yang saya sebutkan di atas, manfaat utama menggunakan pola blok WordPress adalah:

  1. Mereka menghemat waktu Anda.
  2. Mereka memudahkan untuk membuat desain yang lebih rumit, karena Anda mungkin tidak memiliki pengetahuan untuk membuat sendiri jenis desain tertentu.

Pola blok vs blok yang dapat digunakan kembali

Sekarang setelah Anda mengetahui apa itu pola blok WordPress, Anda mungkin berpikir bahwa pola tersebut sangat mirip dengan blok WordPress yang dapat digunakan kembali, yang merupakan fitur inti yang diperkenalkan sebelum pola blok.

Blok yang dapat digunakan kembali juga merupakan kumpulan dari satu atau lebih blok yang dapat Anda sisipkan dengan mudah ke dalam konten Anda.

Mereka serupa karena keduanya memungkinkan Anda memasukkan desain premade dengan cepat, tetapi mereka memiliki satu perbedaan besar:

  • Pola blok adalah titik awal untuk desain Anda . Anda dapat menggunakannya untuk mengimpor desain dasar yang ingin Anda gunakan, tetapi Anda akan menyesuaikannya setiap saat dan setiap contoh pola blok akan berbeda.
  • Blok yang dapat digunakan kembali akan sama di setiap instance . Setiap instance dari blok yang dapat digunakan kembali akan selalu sama dan jika Anda memperbarui desain blok yang dapat digunakan kembali di satu tempat, perubahan tersebut akan secara otomatis diterapkan ke setiap instance dari blok yang dapat digunakan kembali.

Berikut adalah contoh kapan Anda dapat menggunakan masing-masing:

Pertama, katakanlah Anda memiliki format khusus untuk memasukkan kutipan ke dalam konten Anda. Jadi, setiap kali Anda memasukkan kutipan, Anda ingin menggunakan susunan blok yang sama persis untuk menjaga semuanya tetap konsisten.

Jika setiap kutipan akan berbeda, Anda akan ingin menggunakan pola blok untuk ini. Anda dapat menyisipkan pola blok untuk mengatur pemformatan dasar dan kemudian menambahkan teks kutipan unik.

Sekarang, katakanlah Anda memiliki ajakan bertindak (CTA) bagi orang-orang untuk bergabung dengan daftar email Anda yang ingin Anda sertakan di akhir setiap posting blog. Anda ingin CTA ini sama persis di setiap instance dan Anda juga ingin kemampuan untuk memperbaruinya di masa mendatang.

Untuk kasus penggunaan ini, Anda ingin menggunakan blok yang dapat digunakan kembali. Blok yang dapat digunakan kembali akan memastikan bahwa setiap instance CTA Anda sama. Dan jika Anda ingin mengubah CTA, Anda hanya perlu memperbarui blok yang dapat digunakan kembali satu kali dan perubahan itu akan berlaku untuk setiap instance.

Cara menggunakan pola blok WordPress

Anda dapat menyisipkan pola blok melalui antarmuka yang sama yang Anda gunakan untuk menyisipkan blok.

Untuk memulai, buka editor untuk konten tempat Anda ingin menyisipkan pola blok. Kemudian, klik ikon plus di sudut kiri atas untuk membuka antarmuka penyisip konten.

Di bilah sisi yang muncul, klik pada tab Pola . Anda kemudian dapat menggunakan drop-down untuk menyaring berbagai jenis pola.

Saat Anda menemukan pola yang Anda sukai, yang perlu Anda lakukan hanyalah mengekliknya untuk memasukkannya ke dalam konten Anda:

Jelajahi pola blok WordPress

Setelah Anda memasukkan pola blok, Anda dapat mengedit semua blok individual seperti yang Anda lakukan jika Anda membuat desain secara manual:

Edit pola blok WordPress

Dan itu saja! Jika Anda ingin menyisipkan pola blok lain, Anda bisa mengulangi proses yang sama. Pola blok akan disisipkan di mana pun Anda menempatkan kursor di editor.

Cara menemukan dan menggunakan pola blok WordPress baru

Untuk membantu Anda menemukan pola blok baru, tim WordPress membuat perpustakaan pola blok resmi di WordPress. Anda dapat mengaksesnya dengan mengklik di sini.

Anda dapat menggunakan filter untuk menelusuri semua pola blok dan mengeklik hasil untuk mempratinjaunya. Jika Anda menemukan pola blok yang Anda suka, cukup klik tombol Salin Pola untuk menyalin pola ke clipboard Anda:

Perpustakaan Pola Blok

Sekarang, buka editor untuk bagian konten tempat Anda ingin menambahkan pola blok dan menempelkannya, sama seperti Anda menempelkan teks biasa – baik dengan mengklik kanan dan memilih tempel atau menggunakan pintasan keyboard seperti Ctrl + V (atau Cmd + V di Mac).

Dan hanya itu – Anda akan melihat pola blok penuh muncul di mana pun Anda menempelkannya:

Salin dan tempel pola blok dari perpustakaan

Selain perpustakaan pola blok resmi di WordPress.org, Anda juga dapat menemukan direktori pihak ketiga seperti ShareABlock dan perpustakaan template Gutenberg Hub (yang menggunakan pendekatan salin/tempel yang sama dengan perpustakaan resmi).

Anda juga dapat menemukan sejumlah plugin yang memungkinkan Anda memasukkan pola blok dan template, meskipun mereka mungkin menggunakan solusi kustom mereka sendiri daripada menggunakan fitur pola blok asli. Either way, hasil akhirnya adalah sama. Anda dapat menemukan beberapa opsi terbaik di posting kami di plugin template Gutenberg.

Cara membuat pola blok WordPress Anda sendiri tanpa kode

Sampai sekarang, editor blok inti WordPress tidak mengizinkan Anda membuat pola blok sendiri kecuali Anda tahu cara membuat kode, yang sedikit mengecewakan.

Untungnya, seperti yang Anda harapkan dari WordPress, ada plugin yang memperbaikinya.

Favorit pribadi saya adalah plugin Block Pattern Builder gratis Justin Tadlock. Pada dasarnya, plugin ini memungkinkan Anda membuat desain sendiri menggunakan editor blok dan kemudian menyimpannya sebagai pola blok. Jadi Anda dapat mendesain pola Anda menggunakan editor, menyimpannya sebagai pola, lalu menyisipkannya dengan mudah seperti pola lainnya.

Sejujurnya, agak aneh fitur ini tidak ada di software inti WordPress, tetapi itu bukan masalah besar karena Anda dapat menyelesaikannya hanya dengan menginstal plugin gratis.

Untuk memulai, instal dan aktifkan plugin Block Pattern Builder gratis dari WordPress.org. Saya menggunakan plugin yang disebutkan di atas dari Justin Tadlock, tetapi ada plugin bernama identik dari BlockMeister yang tampaknya menawarkan fungsionalitas yang sama dengan sedikit lebih banyak fitur.

Kemudian, buka editor reguler dan buat desain yang ingin Anda simpan. Setelah Anda selesai melakukannya, pilih semua blok yang ingin Anda sertakan dalam pola blok Anda dan klik ikon tiga titik . Kemudian, pilih opsi Add to Block Patterns :

Buat pola blok baru

Anda kemudian dapat memberinya nama:

Beri nama pola Anda

Dan hanya itu – Anda sekarang dapat memasukkannya seperti pola blok lainnya. Secara default, itu akan berada di bagian "Tidak Dikategorikan":

Masukkan pola blok Anda sendiri

Selain bekerja dari editor, Anda juga akan mendapatkan tab Pola Blok khusus di dasbor WordPress Anda untuk mengelola dan membuat pola blok.

Mulailah dengan pola blok hari ini

Pola blok WordPress adalah alat yang sangat berguna untuk mendapatkan lebih banyak dari editor blok, jadi penting untuk memahami cara kerjanya.

Pelajari semua tentang pola #WordPress #block - cara kerjanya dan di mana menemukannya
Klik Untuk Tweet

Menggunakan pola blok cukup mudah – Anda dapat memasukkannya seperti blok. Dan setelah Anda memasukkannya, Anda dapat mengedit blok dalam pola seperti jika Anda membuat desainnya sendiri.

Untuk memberi Anda lebih banyak fleksibilitas, ada beberapa cara untuk mengakses pola blok baru:

  1. Anda dapat menggunakan Perpustakaan Pola Blok resmi di WordPress.org atau salah satu situs web perpustakaan pihak ketiga. Yang perlu Anda lakukan hanyalah menyalin dan menempel antara perpustakaan dan editor WordPress.
  2. Anda dapat menggunakan salah satu plugin template Gutenberg yang kami kumpulkan. Plugin ini tidak semuanya menggunakan fitur pola blok asli tetapi mereka melayani tujuan dan fungsi yang sama persis.
  3. Anda dapat mendesain pola blok Anda sendiri menggunakan editor dan plugin seperti Block Pattern Builder. Setelah Anda menyimpan desain Anda, Anda dapat dengan mudah menggunakannya kembali di masa mendatang.

Untuk mempelajari beberapa cara lain untuk meningkatkan cara Anda bekerja di editor blok, lihat panduan kami tentang cara mendapatkan hasil maksimal dari editor blok dan koleksi plugin blok terbaik kami.

Apakah Anda masih memiliki pertanyaan tentang pola blok WordPress? Beri tahu kami di komentar dan kami akan mencoba membantu.

Panduan gratis

5 Tips Penting untuk Mempercepat
Situs WordPress Anda

Kurangi waktu pemuatan Anda bahkan hingga 50-80%
hanya dengan mengikuti tips sederhana.

Unduh panduan gratis