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

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

Gutenberg adalah alat editor yang memudahkan pengguna WordPress mendesain website, khususnya postingan dan halaman, hanya dengan drag and drop (seret dan lepas).

Jadi, bahkan pengguna WordPress yang tidak mengerti coding dapat dengan mudah mengatur website. Kustomisasi desain WordPress sendiri pun menjadi mudah.

Dalam tulisan ini, kita akan menjelajahi Gutenberg dan apa saja fitur-fiturnya. Gunakan daftar isi di bawah untuk menavigasi ke bagian yang Anda inginkan!

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 ulasan mengenai apa itu Gutenberg WordPress, perbedaannya dengan Classic Editor, serta fitur-fitur dasarnya. Memang, Gutenberg memiliki fitur dan pengaturan yang lebih kaya.

Ini membantu para pendatang baru WordPress yang mungkin belum kuat dalam coding untuk mengembangkan website berbasis WordPress dengan lebih mudah.

Setelah memahami Gutenberg WordPress, Anda bisa langsung mencoba menggunakan Block Editor Gutenberg untuk membuat website.

Namun, belajar menggunakan WordPress untuk membangun website memang membutuhkan waktu. Untuk menciptakan website profesional, Anda juga perlu memiliki kemampuan desain dan sistem yang solid.

 

Jika menginginkan website dengan fungsi dan tampilan canggih seperti contoh-contoh dari Tim Tonjoo seperti Astra Isuzu, Futureskills, atau Rey, Anda bisa langsung menghubungi melalui kontak Tonjoo. Ayo, mari berkolaborasi!

 

---

Baca artikel terkait WordPress, Plugin, dan pengembangan website lainnya di blog Tonjoo.com

---

Last updated on October 15, 2023 by Hanif

Updated on August 10, 2024 by Hanif Mufid