Pola Blok WordPress – Bagaimana Cara Menggunakannya Untuk Mendesain Halaman Anda?

Diterbitkan: 2022-05-26

Tahukah Anda apa itu pola blok WordPress sebenarnya? Atau ingin tahu cara menggunakannya untuk mendesain halaman Anda? Jika itu masalahnya, maka artikel tutorial ini cocok untuk Anda.

Sederhananya, Anda dapat memahami pola blok sebagai kumpulan blok yang telah dirakit sebelumnya yang dapat Anda gunakan untuk halaman Anda di WordPress. Juga, ada beberapa pola blok eksklusif untuk footer, header, halaman, dan sebagainya.

Oleh karena itu, pola blok WordPress adalah bagian konten yang dibuat sebelumnya yang dibuat dengan blok. Mereka membantu Anda dengan mudah mendesain halaman, posting, dan berbagai area situs Anda. Tidak diragukan lagi, Anda dapat menghemat banyak waktu menggunakan pola blok WordPress.

Apakah Anda ingin tahu cara menggunakan pola blok WordPress? Kami menyiapkan panduan tutorial mudah ini hanya untuk Anda! Mari kita mulai!.

DALAM ARTIKEL INI: sembunyikan
Memperkenalkan Pola Blok WordPress
Di Mana Anda Dapat Menemukan Pola Blok WordPress?
Bagaimana Cara Menggunakan Pola Blok WordPress untuk Mendesain Halaman Anda?
Metode 1: Dari Antarmuka Editor
Metode 2: Dari Direktori Pola Blok WordPress
Bagaimana Cara Membuat dan Mengirimkan Pola Blok WordPress Anda Sendiri?
Kesimpulan

Memperkenalkan Pola Blok WordPress

Mari kita lihat lebih dekat pola blok WordPress sebelum kita masuk ke cara menggunakannya untuk mendesain halaman Anda.

Seperti disebutkan sebelumnya, pola blok WordPress pada dasarnya adalah templat yang terdiri dari beberapa blok. Ini dapat mencakup dua atau lebih blok dan ditempatkan dengan cara tertentu agar sesuai dengan halaman, posting, sidebar, atau bagian lain dari situs web.

Pola Blok WordPress
Pola Blok WordPress

Misalnya, Anda dapat menemukan pola blok untuk ajakan bertindak, deskripsi produk, tabel harga, testimonial, tim, kontak, galeri, daftar fitur, dll. Juga, Anda bisa mendapatkan pola blok untuk header, footer, halaman 404, dll. .

Tujuan utama dari pola blok adalah untuk membantu pengguna WordPress mendesain halaman yang indah dengan lebih efisien. Alih-alih menggabungkan blok satu per satu, pola blok pra-gabungan memungkinkan Anda mendesain lebih mudah dan lebih cepat.

Selain itu, pola blok dilengkapi dengan pengaturan konfigurasi untuk blok yang telah dirakit sebelumnya. Dengan cara ini, Anda dapat dengan mudah menyesuaikan pola sesuai keinginan Anda dengan membuat beberapa penyesuaian kecil seperti mengubah warna, konten, dan detail lainnya.

Intinya, alasan utama untuk menggunakan pola blok WordPress untuk mendesain halaman Anda dapat disorot sebagai:

  • Daripada harus mendesain potongan individu secara berulang, Anda dapat menghemat waktu dengan menggunakan pola.
  • Sangat berguna untuk membuat desain halaman yang lebih kompleks sendiri.
  • Anda dapat menggunakan pola pra-dibuat yang dirancang secara profesional oleh pengembang.
  • Ini membantu Anda menjadi lebih produktif dengan memungkinkan Anda menggunakan kembali gaya konten tertentu yang sering Anda buat.
  • Pola sangat dapat dikonfigurasi dan Anda dapat menggunakannya dalam berbagai tema dan tata letak dalam tema tersebut.

Di Mana Anda Dapat Menemukan Pola Blok WordPress?

Sekarang, Anda mungkin bertanya-tanya di mana Anda dapat menemukan pola blok WordPress bukan?

Nah, Anda akan senang mengetahui bahwa inti WordPress hadir dengan beberapa pola blok. Anda dapat langsung menggunakannya dari antarmuka editor halaman untuk mendesain halaman Anda.

Selain itu, Anda juga dapat menemukan berbagai pola blok yang indah langsung dari direktori pola blok WordPress di WordPress.org.

Pola Blok WordPress
Pola Blok WordPress

Pola blok ini dikirimkan oleh kontributor di seluruh dunia, seperti tema dan plugin WordPress. Tim peninjau di WordPress.org meninjau setiap pola blok yang dikirimkan dan kemudian menyetujuinya.

Bahkan Anda dapat membuat pola blok yang indah dan mengirimkannya ke direktori WordPress.org. Kami akan menunjukkan cara melakukannya di artikel ini, jadi tetaplah bersama kami sampai akhir.

Dengan itu, mari kita lanjutkan ke cara menggunakan pola blok WordPress untuk mendesain halaman Anda.


Bagaimana Cara Menggunakan Pola Blok WordPress untuk Mendesain Halaman Anda?

Pada dasarnya, ada 2 metode mudah untuk menggunakan pola blok WordPress untuk mendesain halaman Anda. Jadi, mari kita periksa metode ini satu per satu.

Metode 1: Dari Antarmuka Editor

Metode pertama adalah menggunakan pola blok WordPress langsung dari antarmuka editor.

Di sini, kami akan memandu Anda melalui cara menggunakan pola blok WordPress dari antarmuka editor untuk membuat halaman Anda langkah demi langkah.

Langkah 1: Buat Halaman Baru

Untuk mendesain halaman, pertama-tama Anda harus membuat halaman baru. Jadi, setelah Anda masuk ke dasbor WordPress Anda, navigasikan ke 'Halaman' di navigasi kiri dasbor Anda. Kemudian, klik opsi 'Tambah Baru' .

Tambahkan Halaman Baru di WordPress
Tambahkan Halaman Baru

Dengan itu, sekarang Anda akan dibawa ke antarmuka editor halaman. Beri nama halaman ' Gunakan Pola Blok WordPress ' misalnya.

Beri nama Halaman dan Klik + Ikon
Beri nama Halaman dan Klik + Ikon

Setelah itu, Anda dapat melihat ikon '+' di sudut kiri atas. Klik untuk membuka penyisip konten.

Langkah 2: Jelajahi Pola Blok

Saat mengkliknya, Anda akan melihat 2 sub-opsi di bilah sisi yang muncul. Mereka adalah Blok dan Pola. Sekarang, alihkan ke tab 'Pola' .

Beralih ke Tab Pola dan Klik Tombol Jelajahi
Beralih ke Tab Pola dan Klik Tombol Jelajahi

Setelah itu, klik opsi 'Jelajahi' untuk menjelajahi berbagai pola blok yang tersedia di antarmuka Anda.

Kategori Kotak Pencarian dan Pola
Kategori Kotak Pencarian dan Pola

Setelah itu, Anda akan melihat halaman seperti gambar di atas. Anda dapat menggunakan menu sebelah kanan untuk menelusuri beberapa kategori pola. Seperti Featured, Buttons, Columns, Gallery, Header, Text, dan sebagainya. Anda juga dapat mencari pola blok tertentu berdasarkan nama di kotak pencarian.

Langkah 3: Mengintegrasikan Pola Blok

Setelah itu, mari kita integrasikan beberapa pola blok ke halaman kita. Untuk saat ini, mari navigasikan ke menu 'Header' dan periksa pola header yang tersedia.

Arahkan ke Menu Header & Klik Pola Pilihan Anda
Arahkan ke Menu Header & Klik Pola Pilihan Anda

Di antara berbagai pola yang tersedia, Anda dapat memilih salah satu yang Anda suka. Di sini kita telah memilih pola header ' Media dan teks dalam wadah tinggi penuh '.

Anda cukup mengklik pola yang Anda pilih untuk mengintegrasikannya.

Pola Header Terintegrasi ke Halaman Anda
Pola Header Terintegrasi ke Halaman Anda

Sekarang, Anda hanya akan melihat pola header sudah terintegrasi ke halaman Anda seperti yang ditunjukkan pada gambar di atas. Anda selanjutnya dapat menyesuaikan pola dengan pilihan Anda yang akan segera kami buat.

Dengan cara yang sama, mari kita jelajahi pola 'Galeri' . Dan, di sini kami telah memilih pola galeri ' Gambar offset dengan deskripsi '. Seperti sebelumnya, cukup klik pada pola yang Anda pilih untuk mengintegrasikannya.

Arahkan ke Galeri dan Klik Pola Galeri Pilihan Anda
Arahkan ke Galeri dan Klik Pola Galeri Pilihan Anda

Pada integrasi yang berhasil, Anda akan melihat halaman seperti yang ditunjukkan di bawah ini. Dengan itu, Anda telah memanfaatkan pola galeri.

Pola Galeri Terintegrasi ke Halaman Anda
Pola Galeri Terintegrasi ke Halaman Anda

Demikian pula, ada berbagai pola lain yang tersedia. Yang perlu Anda lakukan adalah menjelajahi pola yang diperlukan dan mengintegrasikannya dengan cara yang sama seperti di atas.

Langkah 4: Menyesuaikan Pola Blok

Setelah Anda menggunakan pola blok WordPress tertentu, Anda mungkin ingin menyesuaikannya dengan pilihan Anda.

Jadi, mari kita sesuaikan pola Header yang telah kita integrasikan sebelumnya.

Anda cukup mengklik pola header di halaman Anda untuk mengakses kemungkinan penyesuaian.

Kemungkinan Kustomisasi Pola Header
Kemungkinan Kustomisasi Pola Header

Setelah Anda melakukannya, Anda akan menemukan berbagai pengaturan di sisi kanan editor Anda.

Menyesuaikan Warna Teks dan Warna Latar Belakang
Menyesuaikan Warna Teks dan Warna Latar Belakang

Dengan opsi warna, Anda dapat menempatkan warna pilihan Anda di teks dan latar belakang.

Selanjutnya, Anda cukup mengklik gambar untuk mengakses tombol 'Ganti' . Dan unggah gambar pilihan Anda dari Perpustakaan Media .

Ganti Gambar Default dengan Gambar Perpustakaan Media
Ganti Gambar Default dengan Gambar Perpustakaan Media

Demikian pula, Anda cukup mengklik judul dan mengedit teks. Bagaimana kami telah berubah menjadi ' Travel Diaries! ' di sini.

Menyesuaikan Teks Judul Pola
Menyesuaikan Teks Judul Pola

Selanjutnya, Anda juga dapat mengubah level heading, warna, tipografi, ukuran, dan lainnya.

Demikian juga, Anda dapat mempersonalisasi gaya tombol, warna, gaya batas dan radius, dan banyak lagi.

Menyesuaikan Tombol dalam Pola
Menyesuaikan Tombol dalam Pola

Dengan cara ini, Anda dapat menyesuaikan pola blok WordPress dengan pilihan Anda menggunakan semua kemungkinan penyesuaian yang disediakan.

Dengan cara yang sama, Anda dapat mempersonalisasi berbagai pola lain yang telah Anda integrasikan untuk mendesain halaman Anda. Ini sangat sederhana.

Langkah 5: Pratinjau Halaman

Setelah Anda selesai dengan kustomisasi, di sudut kanan atas, Anda dapat melihat tombol 'Pratinjau' . Cukup klik untuk melihat pratinjau halaman yang baru saja Anda rancang menggunakan pola.

Klik Tombol Pratinjau dan Publikasikan
Klik Tombol Pratinjau dan Publikasikan

Setelah Anda setuju dengan halaman yang Anda rancang, Anda dapat mengklik tombol 'Terbitkan' untuk menampilkan halaman yang Anda rancang.

Dengan cara ini, Anda dapat membuat tata letak desain yang indah di situs web Anda dengan pola blok WordPress langsung dari antarmuka editor dalam waktu singkat.

Dengan itu, mari kita lanjutkan ke metode selanjutnya untuk menggunakan pola blok WordPress.


Metode 2: Dari Direktori Pola Blok WordPress

Demikian pula, jika Anda tidak dapat menemukan pola yang Anda cari di antarmuka editor, maka ada metode lain untuk Anda. Yaitu dengan menggunakan pola blok WordPress langsung dari direktori pola blok WordPress.

Jadi, mari kita periksa cara menggunakan pola blok WordPress dari direktori pola blok WordPress untuk mendesain halaman Anda langkah demi langkah. Ikuti kami saat kami memandu Anda.

Langkah 1: Buka WordPress.org dan Navigasikan ke Pola

Untuk memanfaatkan pola dari pola blok WordPress secara langsung, pertama-tama buka situs resmi WordPress.org.

Sekarang, Anda akan melihat berbagai opsi di bilah navigasi seperti plugin, tema, pola, belajar, dll.

Buka WordPress.org dan Navigasikan ke Opsi Pola
Buka WordPress.org dan Navigasikan ke Opsi Pola

Untuk itu, Anda perlu mengklik opsi 'Pola' .

Langkah 2: Jelajahi Pola

Setelah itu, Anda akan dibawa ke halaman seperti yang ditampilkan pada gambar di bawah ini. Dari sini, Anda sekarang dapat menjelajahi berbagai pola blok yang tersedia di repositori.

Jelajahi Pola
Jelajahi Pola

Umumnya pola dikategorikan sebagai Buttons, Columns, Featured, Gallery, Header, dan sebagainya. Anda juga dapat mencari jenis pola yang Anda cari dari kotak pencarian.

Sampai sekarang, di sub-bagian Kolom, kami menjelajahi dan memilih pola ' Dua Kolom dengan Gambar dan Deskripsi Paragraf '.

Langkah 3: Klik pada Opsi Pola Salin

Jadi setelah Anda menemukan pola yang Anda cari, cukup klik dua kali untuk melihat pratinjau polanya.

Dan di kiri atas, Anda dapat melihat opsi 'Copy Pattern' . Klik untuk menyalin polanya.

Klik Opsi Salin Pola dari Pola Terpilih Anda
Klik pada Opsi Pola Salin dari Pola Pilihan Anda

Atau, Anda cukup mengarahkan mouse ke pola. Dengan itu, Anda akan melihat opsi 'Salin' . Cukup, klik untuk menyalin polanya.

Langkah 4: Tempel Pola di Halaman

Setelah itu, sekarang Anda harus kembali ke editor halaman WordPress Anda.

Kembali ke Editor Halaman WordPress Anda
Kembali ke Editor Halaman WordPress Anda

Sekarang, Anda perlu menempelkan pola yang baru saja Anda salin dari direktori WordPress di editor halaman Anda . Dan dengan demikian, Anda akan melihat perubahan seperti yang ditunjukkan pada gambar di bawah ini.

Tempel Pola yang Disalin ke Editor Halaman Anda
Tempel Pola yang Disalin ke Editor Halaman Anda

Langkah 5: Menyesuaikan Pola

Setelah itu, Anda dapat menyesuaikan pola lebih lanjut dengan pilihan Anda. Sama seperti pada metode sebelumnya, Anda dapat menyesuaikan pola dengan cara yang sama.

Jadi, mari kita membuat beberapa penyesuaian dan beralih ke pola untuk menjadikannya pilihan kita.

Anda cukup mengklik dua kali blok pola untuk mengakses kemungkinan penyesuaian di sisi kanan.

Klik Dua Kali Kolom untuk Mengakses Kemungkinan Kustomisasi
Klik Dua Kali Kolom untuk Mengakses Kemungkinan Kustomisasi

Anda dapat dengan mudah mengubah teks pola sesuai pilihan Anda dengan mengedit antarmuka pola secara langsung.

Menyesuaikan Teks Pola
Menyesuaikan Teks Pola

Selanjutnya, dari pengaturan kustomisasi sisi kanan, Anda dapat dengan mudah membuat perubahan pada teks. Seperti menyesuaikan warna teks, warna background, ukuran tipografi, tampilan teks, letter case, dan lain sebagainya.

Demikian pula, Anda dapat mengubah warna default kolom sesuai pilihan Anda. Yang perlu Anda lakukan hanyalah mengklik kolom yang ingin Anda ubah warnanya.

Menyesuaikan Warna Pola untuk Pilihan Anda
Menyesuaikan Warna Pola untuk Pilihan Anda

Dan cukup tempatkan warna pilihan Anda dari pengaturan kustomisasi seperti yang ditunjukkan pada gambar di atas.

Demikian juga, Anda dapat mengganti gambar default pola dengan gambar pilihan Anda.

Ganti Gambar Default dan Sesuaikan
Ganti Gambar Default dan Sesuaikan

Selanjutnya, Anda dapat menyesuaikan gaya default gambar, mempersonalisasi ukuran gambar, menyesuaikan dimensi gambar, dan banyak lagi. Selain itu, Anda juga dapat menghapus blok apa pun dalam pola yang menurut Anda tidak perlu untuk halaman Anda.

Setelah itu, mari kita sesuaikan bagian tombol dari polanya.

Menyesuaikan Bagian Tombol dari Pola
Menyesuaikan Bagian Tombol dari Pola

Anda dapat mengubah gaya tombol, teks dan warna latar belakang, radius batas, pengaturan lebar, tipografi, dan sebagainya.

Mengikuti proses yang sama, Anda dapat memutar dan memutar setiap sudut dan celah pola untuk mempersonalisasikannya.

Langkah 6: Pratinjau Halaman

Setelah Anda selesai menyesuaikan, cari tombol 'Pratinjau' di sudut kanan atas. Cukup klik untuk melihat pratinjau halaman yang baru saja Anda buat menggunakan pola.

Klik Pratinjau dan Publikasikan Halaman
Klik Pratinjau dan Publikasikan Halaman

Setelah Anda puas dengan halaman yang Anda rancang, klik tombol ' Terbitkan' untuk membuat halaman Anda aktif.

Dengan begitu, Anda dapat dengan cepat membuat tata letak desain halaman yang elegan untuk situs web Anda. Semua dengan bantuan pola blok WordPress dari perpustakaan pola blok WordPress. Bukankah itu cukup keren?


Bagaimana Cara Membuat dan Mengirimkan Pola Blok WordPress Anda Sendiri?

Sekarang setelah Anda mengetahui cara menggunakan pola blok untuk mendesain halaman Anda, Anda mungkin bertanya-tanya apakah Anda juga dapat berkontribusi untuk membuat pola blok apa pun.

Nah, Anda akan senang mengetahui bahwa Anda dapat melakukannya. Tapi apakah itu sulit? Benar-benar tidak!

Kami akan membahas cara membuat pola blok Anda sendiri dan mengirimkannya ke repositori di bagian ini. Ikuti bersama kami saat kami memandu Anda melalui langkah-langkah berikut:

Langkah 1: Buat Akun Anda di WordPress.org

Jadi, untuk membuat dan mengirimkan pola blok, Anda harus memiliki akun di WordPress.org. Jika tidak, hal pertama yang perlu Anda lakukan adalah membuat akun Anda.

Anda dapat dengan mudah membuat akun dengan menavigasi ke opsi 'Daftar' di situs web resmi WordPress.org.

Klik Opsi Daftar untuk Membuat Akun Anda
Klik pada Opsi Daftar untuk Membuat Akun Anda

Dan selanjutnya, isi informasi yang diperlukan untuk membuat akun. Ini sangat sederhana.

Setelah Anda membuat akun, Anda dapat dengan mudah masuk dan selanjutnya membuat pola blokir Anda.

Langkah 2: Buat dan Kirim Pola Blok Anda di Repositori

Untuk membuat pola blok, pertama, navigasikan ke menu 'Pola' di situs web resmi WordPress.org.

Arahkan ke Pola dan Klik Buat Opsi Pola Baru
Arahkan ke Pola dan Klik Buat Opsi Pola Baru

Setelah itu, Anda dapat melihat opsi 'Buat pola baru ' seperti yang ditunjukkan pada gambar di atas. Klik di atasnya. Dengan itu, Anda akan melihat halaman editor baru di mana Anda dapat membuat pola Anda.

Antarmuka Pembuatan Pola
Antarmuka Pembuatan Pola

Sekarang, mari kita beri nama yang cocok untuk polanya. Misalnya, ' Pola Dua Kolom dengan Gambar Ganda dan Deskripsi '. Setelah itu, Anda cukup mengklik ikon '+' untuk memasukkan blok yang diperlukan.

Beri nama Pola dan Klik + Ikon untuk Menambahkan Blok
Beri nama Pola dan Klik + Ikon untuk Menambahkan Blok

Untuk saat ini, mari kita masukkan blok Kolom . Selanjutnya, Anda dapat memilih jumlah kolom yang Anda inginkan untuk pola Anda.

Memasukkan Blok & Wawasan Dua Kolom ke Antarmuka Kustomisasi
Memasukkan Blok & Wawasan Dua Kolom ke Antarmuka Kustomisasi

Karena di sini kita akan membuat pola dua kolom, kita telah memilih blok dua kolom 50/50 . Selain itu, Anda dapat menyesuaikan kolom dengan pilihan Anda dari opsi pengaturan di sisi kanan.

Selanjutnya, Anda dapat mengklik ikon '+' pada kolom dan menambahkan sub-blok di dalamnya.

Klik pada Ikon + untuk Menambahkan Sub Blok & Sisipkan Blok Gambar
Klik pada Ikon + untuk Menambahkan Sub Blok & Sisipkan Blok Gambar

Jadi, mari kita masukkan blok Image . Setelah Anda melakukannya, Anda dapat mengunggah gambar yang sesuai yang ditemukan di repositori WordPress.org dari perpustakaan media. Namun, perhatikan bahwa Anda tidak dapat mengunggah gambar Anda sendiri dalam pola .

Selanjutnya, Anda dapat menyisipkan blok Paragraf untuk membuat bagian deskripsi dalam pola Anda.

Sisipkan Blok Paragraf di Kolom Kedua
Sisipkan Blok Paragraf di Kolom Kedua

Demikian pula, Anda dapat menambahkan blok lain di kolom yang sama dengan mengklik ikon ' + ' di blok tersebut.

Klik Ikon + untuk Menambahkan Sub Blok di Kolom
Klik Ikon + untuk Menambahkan Sub Blok di Kolom

Dengan cara yang sama, Anda dapat menambahkan blok paragraf lain di kolom pertama.

Selanjutnya, Anda dapat membuat penyesuaian yang diperlukan untuk pola Anda. Cukup klik dua kali seluruh kolom untuk mengakses penyesuaian.

Klik pada Blok Seluruh Kolom untuk Mengakses Kustomisasi
Klik pada Blok Seluruh Kolom untuk Mengakses Kustomisasi

Sekarang, Anda dapat mengubah teks dan warna latar belakang, gaya batas, radius, padding, dan banyak pengaturan lainnya.

Gaya Pola dan Klik Simpan Opsi Draf
Gaya Pola dan Klik Simpan Opsi Draf

Setelah selesai, Anda cukup mengklik opsi 'Simpan Draf' di bagian atas.

Terakhir, Anda dapat mengklik tombol 'Kirim' di sudut kanan atas untuk mempublikasikan pola Anda.

Klik Tombol Kirim di Atas
Klik Tombol Kirim di Atas

Ini sangat mudah. Setelah pola Anda disetujui, Anda akan menemukannya di direktori pola resmi WordPress.


Kesimpulan

Itu saja yang ada untuk itu, teman-teman! Kita telah sampai pada akhir perjalanan artikel ini.

Kami harap artikel ini memberi Anda gambaran tentang pola blok WordPress dan bagaimana menggunakannya untuk mendesain halaman Anda. Mengikuti metode di atas, Anda dapat dengan mudah menggunakan pola blok WordPress untuk mendesain halaman Anda secara elegan dalam waktu singkat. Dan juga, buat satu jika Anda mau.

Jika Anda bingung tentang cara menggunakan pola blok WordPress, jangan ragu untuk meninggalkan komentar di bawah. Kami akan menghubungi Anda sesegera mungkin.

Juga, silakan berbagi artikel ini dengan teman dan keluarga Anda jika Anda menikmatinya.

Anda mungkin juga tertarik dengan artikel kami yang lain seperti tema blok WordPress terbaik untuk pengeditan situs lengkap. Juga, pastikan untuk memeriksa artikel ini tentang plugin blok Gutenberg terbaik untuk WordPress juga.

Terakhir, jangan lupa untuk menyukai dan mengikuti kami di Facebook dan Twitter untuk artikel terkait lainnya.