Blok Gutenberg: Panduan Pengguna Utama dengan Pertimbangan Penting untuk 2022

Diterbitkan: 2020-12-04

Dengan rilis baru pada 6 Desember 2018, WordPress 5.0 Kirk memperkenalkan editor blok default alias Gutenberg. Editor konten baru ini membantu Anda membuat konten dengan pendekatan yang sama sekali berbeda. Ini menggantikan editor WordPress TinyMCE dan menghadirkan cara yang lebih visual untuk pembuatan konten dalam bentuk blok.

Gutenberg Editor menyediakan perpustakaan yang kaya dari elemen atau blok yang dibuat sebelumnya. Dan Anda dapat menggunakannya saat bekerja di situs WordPress. Di sana setiap bagian konten adalah blok yang dapat diseret. Dan blok ini adalah blok editor yang digunakan untuk membuat layout konten.

Apakah Anda telah memperbarui situs Anda ke WordPress 5.0 atau belum, Anda harus mempelajari cara menggunakan Blok Gutenberg untuk kemajuan Anda di masa mendatang. Di sini Anda akan mendapatkan ide komprehensif dan daftar semua Blok Gutenberg WordPress bersama dengan blok tiga puluh pihak yang populer.

Blok WordPress Gutenberg: Sahabat Terbaik Anda untuk Masa Depan

Blok Gutenberg pasti membuat proses pembuatan konten lebih optimal dan cerdas. Setelah Anda terbiasa dengan editor ini, itu akan sangat meminimalkan waktu pengembangan situs Anda.

Singkatnya, Gutenberg adalah editor gaya blok baru untuk platform WordPress. Ini secara bertahap mengubah cara Anda membuat posting, halaman, produk, dan hampir semua hal di situs Anda.

Bahkan, Anda dapat menangani semua jenis komponen dengan cara yang lebih terorganisir dengan Gutenberg. Seperti teks, gambar, video, tabel, dan lain-lain. Jika Anda baru mengenal Editor Gutenberg, ikuti tur panduan pemula ini untuk mendapatkan tip dan trik yang bermanfaat.

Catatan: Tampilan frontend blok sangat bergantung pada tema yang Anda gunakan di situs Anda.

Blok Gutenberg Default di WordPress

Gutenberg blocks

Untuk mempersiapkan masa depan, Anda harus tahu tentang nama-nama default Blok Gutenberg dan penggunaannya. Sebagai pengguna WordPress, Anda mungkin perlu diperkenalkan ke blok ini cepat atau lambat.

Jadi pada dasarnya blok Gutenberg diatur oleh kategori berikut:

  • Paling Banyak Digunakan
  • Blok umum
  • Memformat
  • tata letak
  • Widget
  • Sematkan
  • Dapat digunakan kembali

Dengan mengklik ikon “+” plus Anda dapat menambahkan blok baru di situs Anda. Di bagian atas daftar, Anda akan menemukan blok yang Paling Banyak Digunakan. Blok yang lebih sering Anda gunakan di situs Anda akan muncul di sini.

Gutenberg blocks
Cara membuat pencarian untuk blok di WordPress

Di bawahnya, blok dikelompokkan berdasarkan kategori. Klik pada judul untuk mengungkap blok.

Gutenberg blocks
Kategori blok

Selain itu, dari panel pengeditan kanan Anda dapat mengatur ukuran font, drop cap, mengubah teks dan warna latar belakang untuk blok tertentu.

Gutenberg blocks

Mari kita lihat bagaimana mereka benar-benar bekerja!

Blok Umum- Biasa Digunakan di Setiap Posting

Berikut adalah blok paling umum yang dibutuhkan siapa pun untuk posting mereka termasuk teks dan gambar. Anda memerlukan elemen dasar ini untuk menyesuaikan halaman atau posting di situs Anda.

common blocks
  1. Paragraph: Blok teks-saja sederhana untuk menambahkan satu paragraf konten.
  2. Gambar : Sisipkan satu gambar di mana saja di postingan Anda
  3. Judul : Tambahkan Tag Judul
  4. Galeri : Menampilkan sekelompok gambar dalam gaya galeri
  5. Daftar : Tambahkan daftar berpoin atau bernomor
  6. Kutipan : Sertakan kutipan dalam 2 gaya berbeda
  7. Audio : Mengunggah file audio di situs Anda
  8. Sampul : Menyisipkan file video atau audio dengan hamparan teks
  9. File : Tambahkan tautan ke file yang dapat diunduh
  10. Video : Unggah file video dan putar langsung di situs Anda

Pemformatan- Opsi Kustomisasi Ekstra

Blok ini digunakan untuk menambahkan beberapa opsi pemformatan tambahan untuk konten Anda seperti kode, ayat, dan jenis teks lain yang memerlukan pemformatan khusus.

formatting blocks
  1. Kode: Tulis semua jenis kode teknis dengan mudah
  2. Klasik: Menyediakan alat pengeditan editor WordPress klasik
  3. HTML Khusus: Masukkan kode HTML khusus dan pratinjau langsung di editor WordPress
  4. Diformat sebelumnya: Tambahkan teks yang menghormati spasi dan tab
  5. Pullquote: Tambahkan penekanan visual khusus pada kutipan dari teks Anda
  6. Tabel: Gunakan tabel untuk menampilkan data tabular
  7. Syair: Tulis puisi dan ekspresi sastra lainnya termasuk semua spasi dan jeda baris

Elemen Tata Letak- Tingkatkan Gaya Desain

Blok ini membantu Anda merepresentasikan konten situs dengan cara yang menarik. Itu membuat situs Anda lebih menarik bagi pengunjung Anda.

layout elements
  1. Tombol: Buat tombol dan masukkan tautan dengan latar belakang dan warna teks yang berbeda
  2. Kolom: Buat tata letak multi-kolom dan Anda dapat memasukkan jenis blok lain di setiap kolom
  3. Media & Teks: Menyisipkan teks dan file media secara berdampingan dalam satu blok; kolom yang berbeda
  4. Lebih lanjut: Bagi konten Anda menjadi 2 bagian termasuk blok "Baca Selengkapnya"
  5. Hentian halaman: Membagi konten situs Anda menjadi beberapa halaman
  6. Pemisah: Tambahkan garis horizontal pendek di pos Anda
  7. Spacer: Sertakan ruang kosong persegi panjang besar di antara dua blok di pos Anda
  8. Kolom Teks: Tambahkan teks & tampilkan dalam dua hingga empat kolom, seperti koran.

Widget- Tambahkan Beberapa Widget ke Halaman atau Posting Apa Pun

Blok ini memungkinkan Anda untuk menambahkan Widget WordPress di dalam konten Anda. Mereka lebih cenderung digunakan di sidebar dan footer.

widgets blocks
  1. Kode pendek: Masukkan konten khusus seperti formulir melalui kode pendek WordPress
  2. arsip: Menampilkan arsip bulanan posting Anda
  3. kalender: Menampilkan kalender bulanan posting Anda
  4. kategori: Daftar semua kategori posting Anda
  5. komentar terbaru: Sekilas 5 komentar terakhir (Bukan komentar lengkap)
  6. kiriman terbaru: Daftar kiriman terbaru Anda
  7. RSS: Tambahkan umpan RSS ke halaman atau pos mana pun
  8. Cari: Tambahkan pencarian WordPress ke halaman atau posting mana pun
  9. Tag Cloud: Daftar cloud dari tag posting Anda

Sematkan- Sisipkan Konten Dari Sumber Lain

Blok tersemat memungkinkan Anda untuk menyematkan gambar, video, tweet, audio, postingan Facebook, dan konten lainnya dari sumber eksternal.

embeds gutenberg blocks
  • Youtube
  • Indonesia
  • Facebook
  • Instagram
  • Vimeo
  • Soundcloud
  • Spotify
  • Flickr
  • animasi
  • Cloudup
  • Perguruan TinggiHumor
  • Gerakan harian
  • Lucu atau mati
  • hulu
  • Imgur
  • masalah
  • Pembuka
  • Meetup.com
  • awan campuran
  • photobucket
  • Poldaddy
  • Reddit
  • ReverbNation
  • Siaran layar
  • Scribd
  • Bagikan slide
  • SmugMug
  • Pembicara
  • TED
  • Tumblr
  • VideoTekan
  • WordPress
  • WordPress.tv

Blok yang dapat digunakan kembali:

Setelah Anda menekan “Tambahkan ke Blok yang Dapat Digunakan Kembali”, sebuah blok, itu menjadi dapat digunakan kembali untuk penggunaan lebih lanjut. Mungkin, Anda dapat menemukannya di bagian menu bersama.

HappyAddons Pro

Plugin Pihak Ketiga untuk Memperpanjang Daftar Blok dan Fungsionalitas Anda

Anda dapat menginstal plugin penting lainnya untuk memperluas daftar blokir Anda dengan atribut canggih dan kuat. Memilih plugin yang kaya fitur, mungkin mudah untuk menambahkan blok baru ke editor Anda. Dan Anda dapat melakukan banyak aktivitas fungsional tinggi yang tidak mungkin dilakukan dengan elemen blok default.

Misalnya, beberapa plugin galeri memungkinkan Anda menambahkan galeri dengan banyak efek lanjutan menggunakan blok.

Di luar itu, Anda juga akan menemukan banyak plugin yang hanya berfokus pada penambahan blok baru. Di sini kami telah mencantumkan beberapa Plugin WordPress teratas yang dapat Anda gunakan untuk menambahkan blok baru bersama dengan yang default.

  1. Addons Ultimate untuk Gutenberg – Plugin Gratis dengan 15+ Blok Gutenberg
  2. CoBlocks – Pembuat Halaman Gutenberg Blocks
  3. Dapat ditumpuk – Blok Gutenberg
  4. Blok Ultimate – Blok Gutenberg Kustom
  5. Gutenberg Tingkat Lanjut – 20+ Blok Baru untuk Gutenberg
  6. Blok Kadence – Alat Pembuat Halaman Gutenberg
  7. Galeri Envira – Blok WordPress untuk Galeri Foto
  8. Blok Atom – Koleksi Blok Gutenberg

Addons Ultimate untuk Gutenberg – Plugin Gratis dengan 15+ Blok Gutenberg

Ultimate Addons for Gutenberg

Ini adalah salah satu add-on populer di antara banyak pengguna Gutenberg. The Ultimate Addons for Gutenberg adalah paket lengkap blok unik dan kreatif. Oleh karena itu, Anda dapat meningkatkan editor Anda untuk membuat halaman dan posting yang indah menggunakan plugin ini.

Ini mencakup lebih dari 15 blok Gutenberg, termasuk yang berikut:

  • Multi Buttons: Tambahkan beberapa tombol yang dapat disesuaikan dalam satu blok responsif.
  • Judul Lanjutan: Sertakan judul dan subjudul yang trendi dan menarik dengan pemisah
  • Kotak Info: Menyisipkan gambar atau ikon dengan judul dan deskripsi
  • Daftar Harga: Buat daftar harga seperti menu restoran dengan mudah
  • Kesaksian: Tambahkan ulasan klien dengan menggunakan blok ini

Yang paling luar biasa, plugin ini hadir dengan dukungan bawaan untuk tema Astra. Dan Astra sepenuhnya kompatibel dengan Gutenberg.

CoBlocks – Pembuat Halaman Gutenberg Blocks

coblocks-gutenberg-blocks

CoBlocks memiliki kumpulan kreatif blok bangunan halaman WordPress untuk editor Gutenberg yang baru. Ini akan meningkatkan pengalaman pembuatan halaman Anda dengan Gutenberg. Plugin WordPress yang ringan ini akan membantu Anda membuat halaman web yang indah.

Ini mendukung 20+ blok interaktif sekarang:

  • Blok Akordeon
  • Blok Peringatan
  • Blok Profil Penulis
  • Blok Tombol
  • Blok Galeri Korsel
  • Klik untuk Blok Tweet
  • Blok Galeri Kolase
  • Blok Pemisah Dinamis
  • Blok Acara (Baru!)
  • Fitur Blok
  • Blok Makanan & Minuman
  • Blok Formulir
  • Blok Gif
  • Blok Inti GitHub

dan lain-lain.

Anda dapat membangun seluruh situs web dengan fitur CoBlocks. Selain itu, ini memungkinkan Anda mendesain halaman web dengan elemen tipografi yang memikat.

Dapat ditumpuk – Blok Gutenberg

stakable-gutenberg-blocks

Stackable dirancang khusus untuk Editor Blok WordPress baru. Ini mendukung 23 blok bangunan halaman berkualitas untuk Gutenberg dan 50+ tata letak Blok dan desain bagian / blok yang telah ditentukan sebelumnya. Ini memberikan opsi desain web yang canggih dan fleksibel untuk membuat perjalanan pengembangan web Anda lancar.

Beberapa Stackable Block yang populer adalah sebagai berikut:

  • Blok Kontainer
  • Blok Kotak Fitur
  • Blok Kartu
  • Blok Tajuk
  • Hitung Blok
  • Blok Anggota Tim
  • Blok Pemberitahuan

Tingkatkan kemampuan desain Anda dengan tata letak desain yang dapat disesuaikan dan beragam ini.

Blok Ultimate- Blok Gutenberg Kustom

Ultimate-gutenberg-blocks

Plugin blok Gutenberg ini dirancang khusus untuk blogger dan pemasar. Jadi, Anda dapat membuat konten yang lebih baik dan menarik dengan Gutenberg dengan mudah.

Saat ini, Ultimate Blocks mendukung sekitar 20 blok untuk membuat perjalanan pengembangan Anda lebih menarik. Beberapa fitur penting diberikan di bawah ini:

  • Filter Konten
  • hitung mundur
  • Penggeser Gambar
  • Konten Bertab
  • Kotak Bergaya
  • Beralih Konten

Anda dapat bergabung dengan grup Facebook interaktif mereka untuk bantuan lebih lanjut.

Gutenberg Tingkat Lanjut – 20+ Blok Baru untuk Gutenberg

Advanced Gutenberg

Advanced Gutenberg menjadikan editor Gutenberg default lebih kuat untuk membangun situs web profesional dengan sangat mudah. Ini menyediakan 20+ blok dan opsi baru untuk menyesuaikan situs WordPress Anda dengan lancar.

Di sini, Anda akan mendapatkan blok unik seperti:

  • Manajer kolom
  • Slider posting terbaru
  • Blok tab
  • Blok ikon
  • Blok gambar tingkat lanjut
  • Blok Keikutsertaan Email
  • Dan masih banyak lagi

Namun demikian, mereka memiliki dokumentasi elaboratif dan forum yang dipersonalisasi untuk memberikan dukungan kepada penggunanya.

Kadence Block- Gutenberg Page Builder ToolKit

kadence-gutenberg-blocks

Dengan plugin ini, Anda dapat menambahkan blok dan opsi khusus ke editor Gutenberg Anda. Mungkin, ini dapat memperluas kemampuan pengeditan Gutenberg sehingga Anda dapat membuat tata letak khusus dan konten yang lebih menarik.

Kadence mendukung blok berikut ini:

  • Tata Letak Baris
  • Galeri Lanjutan
  • Membentuk
  • Judul Lanjutan
  • Tombol Tingkat Lanjut
  • tab
  • Akordeon
  • Testimonial
  • ikon
  • Spacer / Pembagi
  • Kotak Info
  • Daftar Ikon

Terlepas dari ini, itu membuat Anda berguna untuk membangun semua jenis tata letak dengan mudah. Itu hanya mungkin dengan plugin WordPress Page Builder yang populer.

Galeri Envira – Blok WordPress Terbaik untuk Galeri Foto

envira-gutenberg-blocks

Envira adalah plugin yang sepenuhnya dioptimalkan dan kuat untuk menyisipkan galeri di situs WordPress Anda tanpa mengorbankan kecepatan situs. Dengan plugin galeri ini, Anda dapat menyertakan album, tag, integrasi media sosial, template galeri/tata letak galeri, tautan dalam, pagination, e-niaga, pemeriksaan gambar, dan banyak lagi.

Setelah mengaktifkan plugin ini, Anda akan menemukan opsi baru di bawah Common Blocks. Dari sana Anda dapat mencari berbagai jenis gaya galeri sesuai kebutuhan Anda. Plugin ini sepenuhnya kompatibel dengan plugin WooCommecre sehingga Anda dapat dengan mudah menggunakannya untuk situs fotografi mana pun untuk menjual foto.

Blok Atom – Koleksi Blok Gutenberg

Atomic Blocks – Gutenberg Block Collection

Blok Atom menghadirkan satu set blok Gutenberg baru dan berkelas. Tim Array Themes yang berbakat juga bekerja di balik koleksi blok yang trendi ini.

Saat ini, Blok Atom memiliki 15 blok Gutenberg, dengan lebih banyak lagi di jalan:

  • Bagian & Blok Tata Letak
  • Blok Kolom Lanjut
  • Blok Buletin
  • Blok Harga
  • Blokir Kotak Pos
  • Blok Kontainer
  • Blok Kesaksian
  • Blok Pemberitahuan Sebaris
  • Blok Akordeon
  • Bagikan Ikon Blok
  • Blok Ajakan Bertindak
  • Blok Tombol yang Dapat Disesuaikan
  • Spacer & Pembagi Blok
  • Blok Profil Penulis
  • Jatuhkan Cap Blok

Setelah menginstal plugin, Anda akan mendapatkan bagian Blok Atom baru di antarmuka Gutenberg. Anda dapat memeriksa demo langsung dari semua blok sebelum menggunakannya di situs web Anda. Membangun halaman dengan editor blok dan Atomic Blocks memberi Anda kendali penuh untuk merancang dan meluncurkan situs apa pun yang Anda inginkan dengan cepat!

7 Plugin Blok Gutenberg Terbaik untuk Memperkaya Outlook Konten Anda

Namun, Anda mungkin menemukan beberapa plugin yang lebih berguna dengan blok hebat untuk membuat konten yang indah dengan cara yang dioptimalkan. Jangan lupa untuk berbagi pemikiran Anda dengan kami!

Blok Gutenberg Memulai Era Baru Desain Situs

Editor Gutenberg terutama dibangun di atas konsep blok. Blok ini telah memperkenalkan cara yang sama sekali baru untuk mengedit posting dan konten halaman di Editor WordPress. Melalui blok ini, Anda dapat menambahkan beberapa jenis konten ke posting dan halaman Anda dengan mudah.

Di blog ini, kami mencoba berbagi semua informasi tentang Blok Gutenberg. Jadi, Anda dapat dengan mudah memperbarui diri Anda dengan tata letak desain revolusioner dari Editor WordPress baru.

Anda juga dapat memberi tahu kami kisah Anda dan mengajukan pertanyaan apa pun yang terkait dengan WordPress di bagian komentar di bawah.

HappyAddons Pro