Cara Menggunakan Editor Gutenberg Lengkap di WordPress

Mau tahu lebih dalam mengenai cara menggunakan editor Gutenberg? Tak perlu khawatir, baca artikel ini hingga selesai saja. Karena di artikel ini Anda akan mempelajari berbagai fitur dari editor Gutenberg dan cara memanfaatkannya. Mari kita mulai!

Menggunakan Editor Gutenberg

Editor WordPress

Sejak versi 5.0, WordPress (WP) menjadikan Gutenberg sebagai default editor. Sehingga, semua pengguna WP tentu harus tahu cara menggunakan editor Gutenberg.

Gutenberg sendiri menawarkan fitur yang lebih modern dari editor sebelumnya yaitu classic editor. Contohnya seperti fitur block yang mempermudah pengguna WP untuk memasukkan berbagai jenis konten ke dalam artikel.

Lalu apa itu Editor Gutenberg?

Gutenberg yaitu editor WordPress dengan konsep Block Based User Interface (UI). Jadi pembuatan konten di editor ini memakai sistem blok.

Editor Gutenberg dirilis bertepatan dengan peluncuran WordPress versi terbaru (v5.0) yaitu pada bulan Desember 2018. Bila Anda memakai WordPress dari sebelum tahun 2018, tentu Anda harus beradaptasi dengan berbagai fitur editor Gutenberg.

Sebelum membahas cara menggunakan editor Gutenberg lebih dalam, mari lihat lebih dulu perbandingan tampilannya dengan Classic Editor. Bila Anda punya website WordPress versi lama maka setelah update ke versi terbaru maka editornya akan berubah jadi Gutenberg.

Ada perbedaan yang cukup signifikan antara kedua jenis editor ini. Tampilan classic editor terlihat seperti Microsoft Word. Tapi, editor Gutenberg memakai pendekatan berbeda yang mengandalkan elemen block.

Lewat blok pada editor Gutenberg, Anda dapat memasukkan berbagai jenis konten, seperti :

  • gambar,
  • paragraf,
  • kode HTML,
  • dan lainnya.

Anda pun bisa mengatur posisi setiap blok dengan cara menggesernya atau drag & drop.

Lalu, apakah Anda sudah tak dapat memakai classic editor lagi? Tenang, Anda masih dapat memakai classic editor untuk posting artikel. Anda hanya perlu menonaktifkan Gutenberg dengan memasang plugin classic editor.

Tampilan Dasar Editor Gutenberg

Sebelum menggunakan editor Gutenberg Anda harus tahu tampilannya dulu. Tampilan Gutenberg editor terdiri dari 3 bagian utama yaitu :

1. Kolom Konten

Kolom Konten (a) berfungsi untuk menampung konten yang Anda buat. Pada bagian paling atas, ada kotak bertuliskan tambahkan judul yang dapat Anda isi dengan judul kontennya.

Lalu, tepat di bagian bawahnya, ada tulisan tipe / untuk memilih sebuah blok. Di sini Anda bisa langsung mengisi blok kontennya dengan apapun, mulai dari :

  • tulisan,
  • gambar,
  • video,
  • dan lainnya.

Ketika bikin konten, sebagian besar waktu Anda akan dihabiskan di sini.

2. Sidebar

Di kotak Sidebar (b) Anda bisa melakukan penyesuaian terhadap konten Anda secara keseluruhan, atau melakukan penyesuaian pada masing-masing blok. Ada 2 tab yang dapat Anda pilih di sidebar, yaitu Pos dan Blok.

Pada tab Pos, Anda dapat mengatur berbagai informasi terkait konten Anda secara keseluruhan. Contohnya, : Opsi di tab Pos yang perlu Anda perhatikan yaitu :

  • URL, Kategori, Tag: Anda dapat mengubah URL, Kategori, Tag konten Anda.
  • Gambar andalan : Anda dapat mengunggah gambar untuk dijadikan “cover” konten Anda.
  • Kutipan : Anda bisa menuliskan rangkuman singkat konten Anda yang nantinya dapat muncul di beranda (homepage) website Anda.
  • Diskusi : Anda dapat mengaktifkan atau menonaktifkan kolom komentar di konten Anda.
  • Sidebar : Anda bisa menentukan lokasi sidebar.
  • Header : Anda bisa menonaktifkan header.

Isi dari tab Pos akan selalu sama, tak seperti tab blok. Sebab, isi tab blok akan berubah mengikuti blok yang Anda pilih. Contohnya jika Anda sedang mengklik blok :

  • paragraf (1)
  • gambar (2).

Bisa dilihat, opsi pengaturan yang muncul berbeda. Hal ini berlaku juga bila Anda mengklik jenis blok yang lain.

3. Toolbar

Saat menggunakan editor Gutenberg tampilan ini yang banyak dipakai. Pada bagian toolbar, opsi-opsi yang ditampilkan cukup sederhana, seperti :

  • Tambah Blok : dengan mengklik tombol ini, Anda bisa menambah blok pada kolom konten.
  • Batalkan : tombol ini berfungsi untuk mengembalikan tulisan atau konten yang terhapus.
  • Ulangi : tombol ini berfungsi untuk mengembalikan versi terbaru konten Anda.
  • Kerangka : tombol ini akan menampilkan jumlah kata, heading, paragraf, dan blok yang ada di konten Anda.
  • Tampilan Daftar : tombol ini akan menampilkan “daftar isi” konten Anda berdasarkan blok.
  • Sunting : Anda dapat mengubah mode kursor jadi mode edit (untuk mengedit konten) atau mode select (untuk mengatur posisi blo).
  • Simpan konsep : tombol ini berfungsi untuk menyimpan konten Anda dalam bentuk draft.
  • Pratinjau : fungsi tombol ini adalah untuk melihat pratinjau konten Anda.
  • Terbitkan : tombol ini berfungsi untuk mempublikasikan konten Anda.

Penggunaan Dasar Editor Gutenberg

Sebenarnya cara menggunakan editor Gutenberg cukup sederhana. Untuk mengaksesnya, Anda cukup membuat artikel atau halaman baru dengan klik Pos >> Tambah Baru.

Setelah tiba di halaman editor Gutenberg, Anda tinggal mengikuti langkah-langkah yang ada di bawah :

a. Menambah Blok Baru

Menggunakan editor Gutenberg dasar yang pertama yaitu tambah blok baru. Caranya klik tombol “+” pada toolbar (c) untuk menambah blok baru. Kemudian, pilih tipe blok yang Anda mau, seperti :

  • paragraf,
  • gambar,
  • html,
  • tabel,
  • kode,
  • sematan,
  • widget,
  • dan lain-lain.

Cara lain untuk menambah blok yaitu dengan mengetik “/nama blok”. Misalkan Anda mau menambah blok gambar, maka Anda bisa coba mengetik /gambar.

Untuk mempermudah pencarian jenis blok, Gutenberg membagi blok-bloknya ke dalam beberapa kategori blok, seperti :

  • Teks
  • Media
  • Desain
  • Widget
  • Tema
  • Sematan

Anda pun dapat mencari bloknya secara manual melalui kolom Cari (Search).

b. Membuat Tulisan

Saat mau membuat tulisan, Anda hanya perlu membuat blok paragraph. Lalu Anda dapat langsung mengisinya dengan berbagai tulisan sesuai keinginan.

Selengkapnya untuk membuat tulisan menggunakan editor Gutenberg bisa baca di artikel “Cara Membuat Postingan dan Page di WordPress”.

Membuat Postingan dan Page

c. Menambah Tombol

Ini merupakan salah satu fitur yang tak akan Anda temukan di classic editor, yakni menambah tombol. Cara menggunakan editor Gutenberg untuk tambah tombol, yaitu :

  • klik icon “+” pada toolbar (c);
  • scrool dan cari blok Tombol pada kategori blok Desain atau ketik “tombol” pada kolom search;
  • bila ketemu klik blok tersebut;
  • isi tulisan yang Anda inginkan;
  • untuk mengubah posisinya, Anda jangan mengklik tombolnya, namun klik bloknya;
  • setelah itu akan muncul opsi untuk mengubah posisi tombolnya;
  • bila mau mengatur style, warna, dan link tombolnya, Anda dapat mengubah konfigurasinya di tab blok sidebar.
d. Memakai Kode HTML

Apakah Anda sudah terbiasa melakukan pengeditan konten dalam bentuk kode HTML? Tak usah khawatir, Anda masih dapat melakukannya di Gutenberg.

Cara menggunakan editor Gutenberg untuk bentik kode HTML, yaitu :

  • klik icon “+” pada toolbar (c);
  • scrool dan cari blok HTML Khusus pada kategori blok Widget atau ketik “HTML” pada kolom search;
  • bila ketemu klik blok tersebut;
  • masukkan kode HTML ke dalam kolom bertuliskan “Tulis HTML”;
  • lalu klik tombol Pratinjau untuk melihat hasil akhirnya.
e. Menyesuaikan Susunan Blok

Bila Anda mau menyesuaikan susunan setiap blok, caranya sangat mudah. Berikut cara menggunakan editor Gutenberg untuk menyusun blok yaitu :

  • pilih blok yang mau Anda ubah posisinya;
  • kemudian klik tombol bertitik 6 yang ada di sebelah kiri blok;
  • setelah itu Anda dapat menggeser bloknya kemanapun Anda inginkan.

Penggunaan Gutenberg yang Lebih Kompleks

Setelah memahami dasar-dasar pemakaian editor Gutenberg, sekarang waktunya Anda mempelajari fungsinya yang lebih kompleks.

a. Memberi Kolom Tambahan

Anda mungkin mau memasukkan 2 jenis konten yang berbeda di satu baris yang sama. Misalnya, gambar di sebelah kiri dan tulisan di sebelah kanan. Cara menggunakan editor Gutenberg untuk membuat kolom yaitu :

  • klik icon “+” pada toolbar (c);
  • scrool dan cari blok Kolom pada kategori blok Desain atau ketik “Kolom” di search;
  • bila ketemu klik blok tersebut;
  • kemudian, Anda harus memilih tipe kolom bloknya (pemilihan ini akan menentukan posisi dan jumlah kolom);
  • misalnya Anda memilih opsi paling kiri 50/50, berarti bloknya akan terbagi jadi 2 kolom;
  • lalu Anda dapat langsung menambahkan konten dengan mengklik tombol “+” pada masing-masing kolom.
b. Melakukan Kustomisasi Blok

Saat mempelajari tampilan dasar editor Gutenberg, Anda sudah tahu bila Anda dapat melakukan kustomisasi blok lewat tab block sidebar. Tapi, bagaimana cara menggunakan editor Gutenberg untuk kustomisasi?

Misalnya, Anda baru membuat satu blok paragraf lalu mau custom seperti :

  1. Agar blok terlihat gelap
  • klik blok berisi paragraf tersebut;
  • masuk ke tab blok sidebar (b);
  • klik tombol Warna;
  • kemudian mengubah warna latar belakang jadi hitam dan warna teksnya jadi putih.
  1. Agar blok jadi animasi
  • klik blok berisi paragraf tersebut;
  • masuk ke tab blok sidebar (b);
  • lalu menambahkan animasi pada opsi Animation.
c. Mengedit Konten dalam Bentuk Kode

Apakah Anda lebih senang mengedit konten dalam bentuk kode? Atau mungkin Anda mau mengecek source code konten? Tenang, Gutenberg punya opsi untuk itu.

Cara menggunakan editor Gutenberg dalam bentuk kode, yaitu :

  • klik tombol tiga titik yang ada di pojok kanan atas layar [di bagian toolbar (c)];
  • lalu klik Penyunting kode;
  • hasilnya, sekarang Anda akan melihat seluruh kontennya berubah jadi kode.
d. Merapikan Blok dengan Block Manager

Ada banyak sekali blok yang dapat Anda pakai di Gutenberg. Saking banyaknya, Anda mungkin kesulitan untuk menemukan blok-blok penting yang paling sering Anda pakai.

Mungkin Anda mau menonaktifkan blok-blok tertentu yang sangat jarang dipakai. Anda dapat melakukannya dengan mengakses block manager. Cara menggunakan editor Gutenberg untuk merapikan blok mudah sekali, yaitu :

  • klik tombol tiga titik yang ada di pojok kanan atas layar [di bagian toolbar (c)];
  • kemudian, klik Block Manager;
  • Anda akan melihat daftar block yang tersedia.
  • lalu, hilangkan ceklis di blok yang mau Anda nonaktifkan.
e. Mengaktifkan Mode yang Berbeda

Ada beberapa mode yang dapat Anda aktifkan di Gutenberg. Mode-mode ini bisa mempengaruhi tampilan dasar Gutenberg Anda :

  • Bilah perkakas atas : memindahkan opsi editing blok ke bagian toolbar.
  • Mode spotlight : membuat Anda lebih fokus ketika mengedit blok. Karena warna blok yang Anda pilih akan jadi lebih terang dibanding blok di sekitarnya.
  • Modus layar penuh : melihat kolom konten secara layar penuh.

Untuk mengaktifkan ketiga mode ini, Anda harus klik tombol tiga titik di pojok kanan atas layar [toolbar (c)]. Kemudian beri centang pada mode yang mau Anda aktifkan.

f. Memakai Gutenberg Keyboard Shortcuts

Bila tak mau direpotkan dengan tombol-tombol di tampilan editor Gutenberg, Anda dapat memanfaatkan keyboard shortcuts. Hanya dengan menekan tombol di keyboard memungkinkan Anda untuk melakukan perintah.

Contoh sederhananya :

  • Anda dapat menyimpan konten dengan menekan tombol Ctrl + S tanpa harus menekan tombol Save.
  • Anda tinggal menekan Shift + Alt + H pada keyboard, untuk melihat daftar lengkap keyboard shortcut.
g. Memakai Reusable Blocks

Blok pakai ulang (reusable blocks) yaitu suatu fitur yang memungkinkan Anda untuk menyimpan blok yang dibuat. Sehingga, Anda dapat memakainya lagi kedepannya.

Misalnya Anda mau memakai blok Anda di postingan lain. Cara menggunakan editor Gutenberg untuk membuat blok tersebut jadi reusable block, yaitu :

  • klik tanda titik tiga pada bloknya;
  • lalu klik Buat blok Pakai Ulang;.
  • setelah itu, beri nama pada reusable block-nya;
  • klik Save.

Bila Anda mau memakai blok itu lagi, caranya :

  • tambah blok baru;
  • kemudian di kategori Reusable, pilih reusable block yang baru saja Anda simpan.
h. Menambah Variasi Blok

Variasi blok yang dapat Anda pilih memang banyak. Namu, mungkin Anda mau menambah varian bloknya lagi. Anda bisa memakai plugin untuk dapat lebih banyak variasi blok.

Plugin blok yang paling populer untuk Gutenberg yaitu Otter Blocks. Dengan plugin ini, Anda bisa memakai blok-blok baru, seperti :

  • slider block,
  • pricing block,
  • testimonial block, dan
  • Google Maps block.

Selain Otter Blocks, Anda pun dapat mencoba untuk memakai plugin blok lain, seperti :

  • Advanced Gutenberg,
  • Stackable,
  • dan sebagainya.

Yuk Buat Konten Menggunakan Editor Gutenberg!

Cara menggunakan editor Gutenberg tak sulit, bukan? Anda tinggal membiasakannya saja. Bila mau menguasainya dengan cepat, mulailah dengan bikin konten di Gutenberg.

Jangan lupa untuk mencoba berbagai fitur yang ada di dalam editor Gutenberg. Sehingga Anda bisa memahami fungsi fitur dari editor Gutenberg satu per satu.

Sekian info mengenai cara menggunakan editor Gutenberg, kami harap artikel kali ini bermanfaat untuk kalian. Kami berharap artikel kelola WordPress ini dibagikan biar semakin banyak yang mendapatkan manfaat.

Leave a Reply

Memperbaiki Permalink Website
Cara Memperbaiki Permalink Website yang Rusak
Reset Website WordPress
Cara Reset Website WordPress dengan Mudah
Membuat Custom Login
Cara Membuat Custom Login di Website WordPress
Cara Setting Robots TXT di Website
Bahasa Pemrograman CMS cPanel Domain Hosting Web Siap
Fitur di cPanel Hosting
Fitur di cPanel Hosting Website
Domain Tingkat Atas
Jenis Domain Tingkat Atas Terbaik yang Ada Sekarang
Keunggulan Domain Berbayar
Keunggulan Domain Berbayar bagi Bisnis yang Perlu Diketahui

Dasar SEO

Pengenalan SEO Riset Keyword

Optimasi Lanjutan

Copywriting Error Website Tips SEO

Teknik SEO

SEO Off Page SEO OnPage SEO Teknikal

Tools SEO

Tools Google Tools Riset KK Tools SEO Lain
Bisnis Jualan Link PPC Program Afiliasi Publisher Sumber Lain
Mendapatkan Uang dari Website
Cara Mendapatkan Uang dari Website yang Kita Punya
Jualan Online via Website
Jualan Online via Website yang Mudah Dilakukan
Platform SeedBacklink
Platform Seedbacklink Solusi Promosi Website dan Income Online
Plugin Toko Online Terbaik
Plugin Toko Online Terbaik Saat Ini
Theme Woocommerce Terbaik
Theme WooCommerce Terbaik untuk Toko Online
Plugin AdSense Terbaik
Plugin AdSense Terbaik untuk Memasang Iklan di Website
Theme Portofolio Terbaik
Theme Portofolio Terbaik untuk Web Agency dan Freelance