Gutenberg WordPress [Part1] – Kenali Antarmuka Editing Terkini Ini!

Memulai dengan WordPress untuk membuat website, Anda mungkin akan bertemu dengan editor Gutenberg. Apa sebenarnya Gutenberg di WordPress?

Gutenberg adalah editor yang memudahkan pengguna WordPress mengatur tampilan postingan dan halaman melalui sistem blok, tanpa harus menulis kode secara langsung.

Dengan editor ini, pengguna dapat mengatur berbagai elemen website secara visual. Jika Anda masih mencari referensi desain sebelum mulai menyusun halaman, Anda juga bisa melihat berbagai pilihan tema WordPress yang dapat digunakan sebagai titik awal.

Dalam artikel ini, kita akan membahas antarmuka Gutenberg serta fitur-fitur dasarnya. Gunakan daftar isi berikut untuk langsung menuju bagian yang ingin Anda pelajari.

Apa itu Gutenberg dan Gutentor di WordPress?

Gutenberg adalah editor bawaan di WordPress versi 5.0 ke atas, diciptakan dengan fitur block untuk memudahkan pengguna mengedit konten.

Block adalah dasar dari konten yang digunakan untuk membentuk halaman atau postingan. Setiap bagian konten, seperti teks, gambar, video, audio, tabel, diwakili oleh satu atau lebih block.

Anda bisa menambahkan, mengedit, dan mengatur block ini untuk membentuk tata letak dan struktur halaman.

Gutenberg mengambil alih dari Classic Editor, editor bawaan WordPress sebelumnya. Perbedaan utama antara keduanya adalah cara editing.

Classic Editor memungkinkan pengguna menulis konten tanpa membaginya menjadi block terpisah. Editor ini lebih sederhana dan lebih manual dibandingkan dengan Gutenberg.

Contohnya, di Classic Editor, untuk menambahkan elemen tombol, Anda harus membuatnya manual atau menambahkan plugin. Sedangkan Gutenberg sudah menyediakan fitur tersebut.”

Rekomendasi dan Saran:

Walaupun Gutenberg dianggap cukup mudah digunakan, terdapat sejumlah pengguna WordPress yang cenderung lebih menyukai Classic Editor. Jika Anda merasa tidak nyaman menggunakan Gutenberg, Anda dapat menonaktifkannya dengan memasang plugin Classic Editor atau Disable Gutenberg. Jika mengalami kesulitan dalam instalasi, Anda dapat membaca panduan cara memasang plugin WordPress.

Dalam menjelajahi Gutenberg, istilah Gutentor mungkin akan Anda temui. Gutentor adalah plugin WordPress yang merangkum fitur ekstra dan kontrol lebih mendalam dalam mengolah block-block Gutenberg.

Bisa dibilang, Gutentor adalah ekstensi dari Gutenberg. Menyuguhkan sejumlah block tambahan, variasi tata letak yang lebih, dan kemampuan modifikasi yang lebih unggul.

Sebagai contoh, Gutentor menghadirkan block tambahan seperti block testimonial, block slider, yang tak tersedia di Gutenberg. Untuk mendalami fitur Gutenberg dan Gutentor, lanjutkan membaca artikel ini!

Fitur Utama Gutenberg

Gutenberg menawarkan empat fitur inti yang mencakup (1) blok default; (2) blok pola; (3) blok yang dapat digunakan ulang; dan (4) pengeditan situs penuh. Berikut rincian singkatnya:

1. Blok Default

Blok Default adalah serangkaian blok dasar yang dihadirkan oleh Gutenberg.

Berbagai jenis konten dapat diolah dengan blok-blok ini, mulai dari paragraf, gambar, video, kutipan, daftar, dan lainnya.

Enam kategori utama Blok Default di Gutenberg adalah:

• Blok Teks – serangkaian fitur pengeditan untuk konten teks seperti judul, daftar, kutipan, paragraf, dan sejenisnya.
• Blok Media – fitur pengeditan untuk konten media seperti foto, video, dan audio.
• Blok Desain – fitur pengeditan untuk desain visual situs web, seperti tombol, kolom, pemisah halaman, dan pengaturan jarak.
• Blok Widget – fitur pengeditan untuk menambahkan widget atau aplikasi terpisah dalam situs web, seperti arsip, kalender, kolom komentar, dan pencarian.
• Blok Tema – fitur pengeditan untuk mengatur tema situs web, seperti pengaturan logo situs, judul situs, loop kueri, daftar posting, dan sejenisnya.
• Blok Embed – fitur pengeditan untuk menambahkan media eksternal ke dalam situs web, seperti video YouTube, utas Twitter, dan sejenisnya.

Dalam menciptakan postingan atau halaman, Anda dapat menambahkan dan mengedit blok-blok ini sesuai kebutuhan dengan mudah.

2. Pattern Block

Pattern Block adalah kumpulan layout block yang sudah dirancang sebelumnya, memudahkan penambahan ke berbagai bagian situs web. Ini memungkinkan penciptaan tata letak yang kompleks dan menarik secara instan.

Misalnya, ada pola dengan blok gambar, teks, dan tombol yang sudah disusun dengan format tertentu. Hanya dengan blok pola ini, tampilan konsisten di seluruh elemen situs web dapat segera tercipta.

Memanfaatkan pattern block, pembuatan halaman menjadi lebih cepat. Beberapa jenis blok pola di Gutenberg antara lain:

• Featured
• Posts
• Teks
• Galeri
• Call to Action
• Banner/Spanduk
• Header
• Footer
• Testimoni

3. Reusable Block

Reusable Block memungkinkan pembuatan dan pengelolaan blok-blok untuk digunakan kembali di berbagai halaman atau postingan.

Jadi, jika ada blok khusus yang ingin digunakan di banyak tempat, buatlah sebagai reusable block. Setiap kali blok tersebut diperlukan, cukup tambahkan reusable block ke halaman atau postingan baru.

Misalnya, jika Anda telah membuat format blok untuk sebuah tombol, fitur blok daur ulang memungkinkan penyimpanan format ini. Saat dibutuhkan, blok ini hanya perlu digunakan, tanpa perlu pengaturan ulang.

4. Full Site Editing/Pengeditan Situs Penuh

Full Site Editing adalah fitur yang memudahkan pengeditan seluruh situs WordPress secara visual melalui Gutenberg tanpa memerlukan kode atau fitur rumit.

Fitur ini memungkinkan pengaturan tata letak, pengeditan header, footer, sidebar, dan bagian lain dari situs langsung dari editor Gutenberg.

Hal ini memberikan fleksibilitas dalam membangun dan mengedit situs WordPress tanpa perlu coding, sehingga mudah diakses oleh pengguna baru sekalipun.

Fitur Utama Gutentor

Sebagaimana disebutkan sebelumnya, Gutentor adalah tambahan khusus untuk Gutenberg WordPress, memperluas kemampuan editor blok dengan sejumlah fitur tambahan.

Berikut adalah beberapa fitur Gutentor yang menonjol: design library, advanced typography, dan termasuk juga advanced option. Berikut rinciannya:

1. Design Library

Gutentor menawarkan perpustakaan template dengan beragam pilihan desain halaman siap pakai. Keuntungannya, Anda tak perlu repot merancang sendiri.

Pilihlah template yang sesuai dengan halaman yang ingin Anda buat, seperti halaman beranda, layanan, atau portofolio.

2. Video Pop-up & Background

Gutentor juga memungkinkan penambahan video sebagai latar belakang atau pop-up dengan fitur blok khusus, memudahkan interaksi pengguna dengan situs Anda.

3. Advanced Typography & colours

Jika ingin bereksplorasi dengan font unik dan warna-warna berbeda, Gutentor menyediakan opsi untuk Anda.

Tersedia tiga opsi tipografi utama: default, sistem, dan Google, masing-masing dengan pilihan lebih lanjut. Misalnya, pada opsi sistem, Anda dapat memilih Helvetica, Tahoma, Georgia, dan sebagainya.

4. Kontrol Responsif

Gutentor membawa kemudahan dalam mengontrol tampilan responsif, dengan opsi untuk mengatur tinggi, lebar, posisi, dan opsi desain lainnya.

5. Opsi Lanjutan

Di luar empat fitur sebelumnya, Gutentor juga menawarkan opsi tambahan untuk mendukung pengeditan yang lebih kompleks, seperti kustomisasi SVG, bentuk & desain gambar, opsi animasi, dan opsi batas.

Siap Menyelami Gutenberg dan Gutentor?

Itu tadi penjelasan mengenai Gutenberg WordPress, perbedaannya dengan Classic Editor, serta fitur-fitur dasar yang dapat membantu Anda mengatur konten dan tampilan website.

Setelah memahami dasar penggunaan Gutenberg, Anda bisa melanjutkan dengan tutorial menggunakan Block Editor Gutenberg untuk mencoba membuat dan mengatur blok pada halaman website.

Namun, untuk membangun website profesional, kemudahan editor saja belum tentu cukup. Anda mungkin membutuhkan desain yang lebih spesifik, fitur khusus, atau tampilan yang disesuaikan dengan identitas bisnis.

Jika kebutuhan Anda sudah melampaui kemampuan pengaturan standar Gutenberg, Tonjoo dapat membantu melalui layanan jasa pembuatan tema WordPress custom. Anda juga bisa melihat contoh hasil pekerjaan Tonjoo, seperti Astra Isuzu, Futureskills, sebelum menghubungi tim kami untuk mendiskusikan kebutuhan website Anda.

Updated on October 12, 2026 by Admin Tonjoo