Cara Lengkap Membuat Postingan Baru di Wordpress Untuk Pemula

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

Editor ini dirilis pada bulan Desember 2018, bertepatan dengan peluncuran WordPress versi terbaru. Jika Anda menggunakan WordPress dari sebelum tahun 2018, tentu Anda perlu beradaptasi dengan fitur-fitur editor yang baru ini.

Sebelum membahas lebih dalam mengenai Gutenberg, mari lihat terlebih dahulu perbandingan tampilan Classic Editor dengan Gutenberg Block Editor.

Tampilan classic editor terlihat seperti Microsoft Word atau LibreOffice. Namun, editor Gutenberg menggunakan pendekatan berbeda yang mengandalkan elemen “block”.

Melalui blok, Anda bisa memasukkan berbagai jenis konten. Mulai dari gambar dan paragraf, hingga kode HTML. Anda juga dapat mengatur posisi setiap blok dengan cara menggesernya (drag & drop).

Lalu, apakah Anda sudah tidak bisa menggunakan classic editor lagi?

Tenang, Anda masih bisa menggunakan classic editor kok. Anda hanya perlu menonaktifkan Gutenberg.

Tapi tunggu dulu. Sebelum mempelajari cara menggunakan editor Gutenberg, Anda perlu berkenalan dulu dengan berbagai fitur menarik editor Gutenberg yang akan kita bahas di artikel ini.

Tampilan Dasar Editor Gutenberg

Pertama-tama, tentu Anda harus berkenalan dengan tampilannya terlebih dahulu. Jadi, tampilan Gutenberg terdiri dari tiga bagian utama:

1. Kolom konten – Di sinilah tempat Anda membuat konten. Mulai dari judul, tulisan, gambar, hingga video Anda akan dimasukkan di sini.
2. Sidebar – Di kotak ini Anda bisa melakukan penyesuaian terhadap konten Anda secara keseluruhan, atau melakukan penyesuaian pada masing-masing blok.
3. Toolbar – Bagian ini berisi beberapa opsi, seperti tombol undo dan redo, navigasi blok, dan tombol publish.

Agar lebih jelas, yuk lihat bagiannya satu per satu!

Wordpress Kolom Konten

Sesuai dengan namanya, kolom ini berfungsi untuk menampung konten yang Anda buat. Pada bagian paling atas, ada kotak bertuliskan Add title yang bisa Anda isi dengan judul kontennya.

Lalu, tepat di bagian bawahnya, ada tulisan Start writing or type/to choose a block. Di sini Anda dapat langsung mengisi blok kontennya dengan apapun. Baik itu tulisan, gambar, atau video.

Saat membuat konten, sebagian besar waktu Anda akan dihabiskan di sini. Tapi bukan berarti sidebar dan toolbar tidak penting. Karena, masing-masing bagian punya fitur yang pasti Anda butuhkan. Nah, selanjutnya kita akan bahas tentang sidebar dan toolbar.

Sidebar

Seperti yang Anda lihat, ada dua tab yang bisa Anda pilih di sidebar, yaitu Document dan Block.

Pada tab document, Anda bisa mengatur berbagai informasi terkait konten Anda secara keseluruhan. Contohnya, pada opsi Permalink, Anda bisa mengubah URL konten Anda. Pada opsi Categories dan Tag, Anda juga bisa mengubah kategori dan tag kontennya.

Opsi lain di tab document yang perlu Anda perhatikan adalah:

• Featured Image – Di sini Anda bisa mengunggah gambar untuk dijadikan “cover” konten Anda.
• Excerpt – Pada bagian ini, Anda dapat menuliskan rangkuman singkat konten Anda yang nantinya bisa muncul di home page website Anda.
• Discussion – Di sini Anda bisa mengaktifkan atau menonaktifkan kolom komentar di konten Anda.
• Post Settings – Pada bagian ini, Anda bisa melakukan beberapa hal, seperti menentukan lokasi sidebar, hingga menonaktifkan header dan footer.

Isi dari tab document akan selalu sama, tidak seperti tab block. Karena, isi tab block akan berubah mengikuti blok yang Anda pilih. Contohnya, berikut adalah isi tab block jika Anda sedang mengklik blok paragraph:

Sedangkan ini adalah isi tab block jika Anda sedang mengklik blok image:

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

Toolbar

Pada bagian toolbar, opsi-opsi yang ditampilkan cukup sederhana. Berikut penjelasannya:

• Add block – Dengan mengklik tombol ini, Anda bisa menambah blok pada kolom konten.
• Undo –  Tombol ini berfungsi untuk mengembalikan tulisan atau konten yang terhapus.
• Redo –  Kebalikan dari Undo. Tombol ini berfungsi untuk mengembalikan versi terbaru konten Anda.
• Content structure – Tombol ini akan menampilkan jumlah kata, heading, paragraf, dan blok yang ada di konten Anda.
• Block navigation –  Tombol ini akan menampilkan “daftar isi” konten Anda berdasarkan blok.
• Edit – Pada bagian ini, Anda bisa mengubah mode kursor Anda menjadi mode edit atau mode select. Mode edit berguna untuk mengedit konten, sedangkan mode select berfungsi untuk mengatur posisi blok.
• Save draft – Tombol ini berfungsi untuk menyimpan konten Anda dalam bentuk draft.
• Preview – Fungsi tombol ini adalah untuk melihat pratinjau konten Anda.
• Publish – Tombol ini berfungsi untuk mempublikasikan konten Anda.

Cara Lengkap Menggunakan Editor Gutenberg 

Sebenarnya cara menggunakan editor Gutenberg cukup sederhana. Untuk mengaksesnya, Anda cukup membuat artikel atau halaman baru dengan klik Post > Add New atau Pages > Add New.

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

1. Menambah Blok Baru 

Klik tombol “+” untuk menambah blok baru. Lalu, pilih tipe blok yang Anda inginkan. Contohnya seperti paragraph, image, html, table, code, embed, widgets, layout elements, dan lain-lain.

Cara lain untuk menambah blok adalah dengan mengetik “/nama blok”. Contohnya, misalkan Anda ingin menambah blok gambar, maka Anda bisa coba mengetik /image.

Untuk mempermudah pencarian jenis blok, Gutenberg membagi blok-bloknya ke dalam beberapa kategori, seperti common blocks, formatting, layout elements, widgets, embeds, dan reusable.

Anda juga bisa mencari bloknya secara manual melalui kolom Search for a block.

Kesulitan mencari blok-blok yang sering Anda gunakan? Tenang, blok-blok tersebut akan masuk ke dalam kategori Most used.

Oke, sekarang Anda sudah tahu cara menambah blok. Selanjutnya, kita akan membahas tentang blok-blok yang paling umum digunakan, seperti paragraph, image, button, dan HTML.

2. Membuat Tulisan

Ketika Anda ingin membuat tulisan, Anda hanya perlu membuat blok paragraph:

Lalu Anda bisa langsung mengisinya dengan berbagai tulisan. Sederhana sekali, bukan?

Di bagian atas blok terdapat beberapa tombol formatting. Contohnya seperti alignment (mengatur posisi teks), bold (memberi cetak tebal pada teks), italic (membuat teks menjadi miring), dan link (memasukkan link pada teks).

Tepat di sebelah tombol link, ada tombol drop down yang menampilkan beberapa tombol tambahan:

Tombol-tombol tersebut juga berfungsi untuk formatting, seperti highlight (menyorot kata atau kalimat tertentu), strikethrough (mencoret teks), dan underline (menggaris bawahi teks).

Lalu, bagaimana jika Anda ingin menulis heading?

Nah, jenis blok yang digunakan berbeda. Jadi, Anda tidak menggunakan blok paragraph, tapi blok heading.

Sama seperti blok paragraph, Anda bisa menemukan blok heading di kategori Common Blocks. Tombol-tombol yang ditampilkan pun kurang lebih sama seperti blok paragraph.

Bedanya, di blok heading Anda bisa memilih tingkatan heading yang Anda buat. Mulai dari heading 2 hingga heading 4.

Untuk mengatur tingkatan heading 1 hingga heading 6, Anda bisa masuk ke tab block sidebar.

3. Memasukkan Gambar

Blok lain yang bisa Anda pilih di kategori Common Blocks adalah Image, alias blok gambar.

Saat memilih blok image, Anda akan dihadapkan pada tiga pilihan, yaitu

• Upload – Gambar yang diambil berasal dari komputer Anda.
• Media Library – Anda mengambil gambar yang sebelumnya pernah Anda upload.
• Insert from URL – Anda mengambil gambar dari internet dengan memasukkan URLnya.

Ini adalah contoh blok gambar yang sudah terisi:

Di bagian atas bloknya, ada tiga tombol yang bisa Anda gunakan:

• Alignment – Mengatur posisi gambarnya.
• Replace – Mengganti gambarnya dengan gambar lain (baik melalui upload, media library, atau insert from URL)
• Link – Memasukkan link ke dalam gambarnya.

Di tab block sidebar, Anda bisa menemukan beberapa opsi tambahan, seperti:

• Styles – Anda bisa mengatur format gambarnya menjadi kotak atau bulat.
• Image settings – Di sini Anda bisa mengatur berbagai aspek gambarnya, mulai dari alt text dan ukuran gambar, hingga dimensi gambarnya.

4. Menambah Tombol

Ini adalah salah satu fitur yang tidak akan Anda temukan di classic editor, yaitu menambah tombol (Buttons).

Blok buttons bisa Anda temukan di kategori Layout Elements. Berikut adalah contohnya:

Untuk mengubah posisinya, Anda jangan mengklik tombolnya, tapi klik lah bloknya. Baru kemudian opsi untuk mengubah posisi tombolnya akan muncul:

Jika Anda ingin mengatur style, warna, dan link tombolnya, Anda bisa ubah konfigurasinya di tab block sidebar.

5. Menggunakan Kode HTML

Apakah Anda sudah terbiasa mengedit konten dalam bentuk kode HTML? Tidak usah khawatir, Anda masih bisa melakukannya kok di Gutenberg.

Anda tinggal menggunakan blok Custom HTML yang ada di kategori Formatting.

Masukkan kode HTML ke dalam kolom bertuliskan Write HTML. Lalu klik tombol Preview untuk melihat hasil akhirnya.

Contohnya, misalkan Anda memasukkan kode ini ke dalam kolomnya:

Maka hasil inilah yang akan muncul jika Anda mengklik tombol Preview:

6. Melampirkan Konten dari Platform Lain

Anda juga bisa melampirkan konten dari platform lain. Contohnya seperti video dari YouTube, postingan dari Instagram, atau bahkan lagu dari Spotify.

Anda hanya perlu memilih blok yang ada di kategori Embeds.

Contohnya, jika Anda ingin melampirkan sebuah postingan dari Instagram, maka akan muncul blok seperti ini:

Nah, sekarang Anda tinggal memasukkan URL postingannya, lalu klik Embed. Begini contoh hasilnya:

7. Membuat Tabel

Untuk membuat tabel di Gutenberg, cukup klik blok Table yang ada di kategori Formatting.

Masukkan jumlah tabel dan kolom yang Anda inginkan, lalu klik Create Table. Inilah contoh hasilnya:

Jika Anda ingin mengatur tampilan tabelnya, ada beberapa opsi yang bisa Anda gunakan di tab block sidebar. Contohnya seperti menambah bagian header di opsi Table settings atau mengganti warna tabelnya di opsi Color settings.

8. Menyesuaikan Susunan Blok

Jika Anda ingin menyesuaikan susunan setiap blok, caranya sangat mudah. Anda cukup pilih blok yang ingin Anda ubah posisinya, lalu tombol bertitik 6 yang ada di sebelah kiri blok. Setelah itu Anda bisa menggeser bloknya kemanapun Anda mau.

Untuk memperjelas caranya, berikut ilustrasinya:

7+ Ekstra Tips untuk Menggunakan Editor Gutenberg

Setelah memahami dasar-dasar penggunaan Gutenberg, sekarang waktunya mempelajari fungsi Gutenberg yang lebih kompleks.

Tapi, jangan khawatir, sebetulnya cara pengaplikasian tips-tips di bawah cukup mudah kok. Yuk disimak satu per satu!

1. Memberi Kolom Tambahan

Anda mungkin ingin memasukkan dua jenis konten yang berbeda di satu baris yang sama. Contohnya, gambar di sebelah kiri dan tulisan di sebelah kanan:

Cara membuatnya gampang kok. Saat menambah blok baru, pilihlah blok Columns yang ada di kategori Layout Elements.

Setelah itu, Anda perlu memilih tipe kolom bloknya. Ini akan menentukan posisi dan jumlah kolom.

Misalkan Anda memilih opsi paling kiri, berarti bloknya akan terbagi menjadi dua kolom. Pada masing-masing kolom, Anda bisa langsung menambahkan konten dengan mengklik tombol “+”

2. Melakukan Kustomisasi Blok

Saat mempelajari tampilan dasar editor Gutenberg, Anda sudah tahu bahwa Anda bisa melakukan kustomisasi blok melalui tab block sidebar.

Tapi, bagaimana cara menggunakannya?

Mari kita ambil contoh. Misalkan Anda baru membuat satu blok paragraph dengan isi seperti ini:

Agar blok paragraph-nya berbeda, Anda ingin membuatnya terlihat gelap. Oleh karena itu, Anda masuk ke tab block sidebar, mengklik tombol Color Settings, lalu mengubah background color nya menjadi hitam dan text color nya menjadi putih.

Beginilah hasilnya:

Bloknya jadi terlihat lebih unik bukan?

Tapi, kemudian Anda ingin membuat bloknya terlihat lebih menarik lagi. Jadi Anda memberi animasi pada bloknya dengan cara masuk ke tab block sidebar, lalu menambahkan animasi pada opsi Animation. Inilah hasil akhirnya:

3. Mengedit Konten dalam Bentuk Kode

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

Anda hanya perlu klik tombol tiga titik yang ada di pojok kanan atas layar, lalu klik Code editor:

Hasilnya, sekarang Anda akan melihat seluruh kontennya berubah menjadi kode:

4. Merapikan Blok dengan Block Manager

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

Nah, mungkin Anda ingin menonaktifkan blok-blok tertentu yang sangat jarang Anda gunakan. Anda bisa melakukannya dengan mengakses block manager.

Caranya mudah sekali. Anda tinggal klik tombol tiga titik yang ada di pojok kanan atas layar. Lalu, klik Block Manager:

Anda akan melihat daftar block yang tersedia. Kemudian, hilangkan ceklis di blok yang ingin Anda nonaktifkan.

5. Mengaktifkan Mode yang Berbeda

Ada tiga mode yang bisa Anda aktifkan di Gutenberg. Ketiga mode ini dapat mempengaruhi tampilan dasar Gutenberg Anda:

• Top toolbar – Memindahkan opsi editing blok ke bagian toolbar.
• Spotlight mode – Membuat Anda lebih fokus saat mengedit blok. Karena warna blok yang Anda pilih akan menjadi lebih terang dibanding blok di sekitarnya.
• Fullscreen mode – Melihat kolom konten secara layar penuh.

Untuk mengaktifkan ketiga mode ini, Anda perlu klik tombol tiga titik di pojok kanan atas layar, lalu beri centang pada mode yang ingin Anda aktifkan.

6. Menggunakan Gutenberg Keyboard Shortcuts

Jika Anda tidak ingin direpotkan dengan tombol-tombol di tampilan editor Gutenberg, Anda bisa memanfaatkan keyboard shortcuts.

Sesuai dengan namanya, keyboard shortcut memungkinkan Anda untuk melakukan perintah hanya dengan menekan tombol di keyboard. Contoh sederhananya, Anda bisa menyimpan konten Anda dengan menekan tombol “Ctrl + S” tanpa harus menekan tombol Save.

Nah, untuk melihat daftar lengkap keyboard shortcut di Gutenberg, Anda tinggal menekan “Shift + Alt + H” pada keyboard Anda:

7. Menggunakan Reusable Blocks

Reusable blocks adalah suatu fitur yang memungkinkan Anda untuk menyimpan blok yang Anda buat. Sehingga, Anda bisa menggunakannya lagi kedepannya.

Contohnya, misalkan Anda ingin menggunakan blok Anda di postingan lain. Untuk membuat blok tersebut menjadi reusable block, Anda perlu klik tombol More options pada bloknya, lalu klik Add to reusable block.

Setelah itu, beri nama pada reusable block-nya dan klik Save.

Jika Anda ingin menggunakan blok itu lagi, Anda tinggal tambah blok baru. Lalu, di kategori Reusable, pilih reusable block yang baru saja Anda simpan.

8. Menambah Variasi Blok

Variasi blok yang bisa Anda pilih memang banyak. Tapi, mungkin Anda ingin menambah varian bloknya lagi. Nah, Anda bisa menggunakan plugin untuk mendapat lebih banyak variasi blok.

Plugin blok yang paling populer untuk Gutenberg adalah Otter Blocks. Dengan plugin ini, Anda bisa menggunakan blok-blok baru, seperti slider block, pricing block, testimonial block, dan Google Maps block.

Selain Otter Blocks, Anda juga bisa coba menggunakan plugin blok lain, seperti Advanced Gutenberg atau Stackable. Kabar baiknya, plugin-plugin ini bisa Anda gunakan secara gratis!

 Wordpress Cara Lengkap

Yuk Buat Konten Dengan Gutenberg!

Cara menggunakan editor Gutenberg tidak sulit, bukan? Anda tinggal membiasakannya saja. Jika ingin menguasainya dengan cepat, mulailah dengan membuat konten di Gutenberg

Jangan lupa untuk mencoba berbagai fitur yang ada di dalamnya. Sehingga Anda dapat memahami fungsi fiturnya satu per satu.