Membuat Custom Post Layout dengan Gutenberg

Ssejak resmi dirilis sebagai default editor di WordPress 5.0 awal Desember lalu, Gutenberg membuat jagad WordPress agak gempar. Kegemparan bukan hanya terjadi di kalangan blogger pengguna self hosted, tapi juga di kalangan developer dan jutaan pengguna WordPress lainnya di luar sana. 

  • Topic: Gutenberg, WordPress
  • Length: Medium
  • Difficulty: Beginner

Sebetulnya perubahan ini tidak terjadi semena-mena, Gutenberg sendiri sudah diperkenalkan sebagai plugin bulan Juli 2018 silam, pihak WordPress sudah memberi kita waktu untuk beradaptasi. Cuma ya itu, perubahan memang tidak bisa menyenangkan hati setiap orang.

Meskipun sudah terbiasa dengan page builder seperti Divi dan Elementor, terus terang saya sendiri lebih suka classic editor. Tapi, sedikit banyak saya bisa mengerti dengan keputusan WordPress. Di tengah gencaran visual editor dan page builder yang bermunculan seperti kecambah, WordPress tentu harus menyesuaikan.

Nah, sebagai blogger, siapkah kita beradaptasi dengan perubahan ini? 

Untuk Anda yang belum familiar dengan Gutenberg block editor dan masih belum punya bayangan hal-hal keren apa saja yang bisa dilakukan, mari kita ngobrol lebih jauh.

Classic Editor

Gutenberg Editor

Fitur-Fitur Gutenberg

Pada dasarnya Gutenberg nyaris sama dengan visual editor atau page builder. Walau fitur-fiturnya tidak seliar Divi atau Elementor, tapi bagi Anda yang selama ini menggunakan theme non-visual editor dan merasa terkungkung (((terkungkung))) dengan layout yang terbatas, Gutenberg jelas sebuah jalan terang.

Ada beberapa fitur yang bisa Anda manfaatkan agar tampilan blog lebih estetis.

1. Block Editor

Disebut block editor karena konten dibagi dalam blok-blok, dibagi berdasarkan tipe konten, format, dan layout. Misalnya, paragraf, list, tab, image, kolom, dll. Memang, tidak semewah visual editor pada umumnya, tapi masih lebih baik daripada hanya diberi harapan, tapi enggak dilamar-lamar. *Eh gimana?

Anda bahkan bisa membuat post template dari blok-blok ini sehingga post yang satu sama dengan post yang lain. Oh ya, meski menyerupai visual editor, tapi format tampilan seperti jenis dan besar huruf tetap sama dengan theme yang Anda gunakan. 

N

Yes

  • Memindahkan posisi blok konten. 
  • Mudah mengubah jenis konten. Misalnya, dari paragraf ke list atau ke image.
  • Membuat template post.
M

No

  • Tidak bisa mengubah jenis dan besar huruf.
  • Fitur pengaturan terbatas.

2. Parallax Effect

Aha, ini dia. Parallax effect and bring your image to the next level. Tidak semua theme -terutama non-page builder– dilengkapi dengan fitur efek parallax. Sekarang, bahkan Anda yang menggunakan WordPress.com bisa memasukkan efek parallax ke dalam post

Contoh:

Contoh Parallax Effect

Scroll down & up

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Ada lagi yang lebih seru. Jika di page builder seperti Divi, kita tidak bisa menggunakan overlay (warna transparan di atas background image) bersamaan dengan efek parallax, di Gutenberg justru sebaliknya. Kita bisa menggunakan overlay dengan warna dan opacity terserah kita.

Tip: Overlay dipergunakan untuk mengatur kontras antara tulisan dengan background agar tulisan masih bisa jelas terbaca.

3. Kolom

Kolom membuat layout blog post lebih dinamis. Anda bisa menggunakannya untuk, misalnya, transisi antarbab atau membedakan antara bab dengan subbab. Anda juga bisa menggunakan layout 2 atau 3 kolom untuk list yang poinnya pendek-pendek. 

Contoh 2 kolom

Proin lectus sem, pellentesque eu consequat sed, pulvinar ut risus. Pellentesque ut rutrum mauris. Nunc id ante libero. Vestibulum luctus lectus nec neque tempor quis congue purus consequat.

Contoh 2 kolom

Proin lectus sem, pellentesque eu consequat sed, pulvinar ut risus. Pellentesque ut rutrum mauris. Nunc id ante libero. Vestibulum luctus lectus nec neque tempor quis congue purus consequat.

Contoh 3 kolom

  • Poin 3 kolom.
  • Poin 3 kolom.
  • Poin 3 kolom.

Contoh 3 kolom

  1. Poin 3 kolom.
  2. Poin 3 kolom.
  3. Poin 3 kolom.

Contoh 3 kolom

Proin lectus sem, pellentesque eu consequat sed, pulvinar ut risus.

4. Tabel

Bahkan di page builder, membuat tabel biasa adalah pekerjaan yang bikin ngesang. Fitur ini memang sudah ada di classic editor, tapi untuk membuat tabel diperlukan kesabaran luar binasa karena tampilannya kerap berantakan. Nah, di Gutenberg membuat tabel justru lebih mudah, kita hanya perlu menambahkan blok >> table >> masukkan jumlah kolom >> masukkan jumlah baris >> masukkan konten.

 

5. Tombol

Tergantung theme yang Anda gunakan, di classic editor tombol hanya bisa ditambahkan dengan shortcode atau tidak ada sama sekali. Sekarang Anda bisa menambahkannya dengan mudah. 

Selain penggunaan tombol biasa, Anda juga bisa membuat Call to Action (CTA) menggunakan fitur media & text + tombol. Misalnya, Anda ingin menampilkan produk, jasa, buku, or whatever.

Hasilnya kira-kira seperti ini:

Buku Life on Radio

Proin lectus sem, pellentesque eu consequat sed, pulvinar ut risus. Pellentesque ut rutrum mauris. Nunc id ante libero. Vestibulum luctus lectus nec neque tempor quis congue purus consequat.

Gimana, sudah merasa sedikit tercerahkan dan siap menggunakan Gutenberg agar tampilan blog post Anda lebih menarik secara visual? Oh ya, saya punya beberapa tip lainnya:

  • Bagi Anda yang menggunakan wordpress.com, Anda masih bisa menggunakan classic editor dan Gutenberg secara bergantian di dashboard.
  • Bagi Anda pengguna WordPress self hosted tapi masih sayang dengan classic editor, bisa instal plugin classic editor.
  • Classic editor akan available sampai tahun 2022, waktu yang cukup untuk kita menyesuaikan diri.
  • Bagi Anda yang sudah move on dan menggunakan Gutenberg, jangan lupa WordPress-nya terus di-update karena ada beberapa pacthing vulnerability.

Teknologi terus berubah setiap detik. Kita tidak punya banyak pilihan selain menyesuaikan diri agar tetap survive di dunia yang kejam ini. (Naon sih, Chan?) Iya, saya tahu bahwa terjadi gelombang no-update-update club di kalangan blogger saking sudah merasa terlalu nyaman dengan classic editor. Tapi seperti kata Joe Candra,  yang bikin nyaman itu berbahaya karena akan sakit hati kalau ditinggal pas sayang-sayangnya. 

Salam,
~eL

Share This