Rio Mastri Web Designer and Developer Logo

Panduan WordPress Block Editor: Tutorial Lengkap Cara Menggunakan Block Editor

Hampir semua update besar (mayor) WordPress sekarang berputar di sekitar Block Editor dan Full Site Editing, artinya cepat atau lambat Anda membaca panduan WordPress Block Editor ini atau di sumber lainnya, jika ingin website tetap relevan dan mudah dikembangkan.

Kalau setelah memahami dasar‑dasarnya Anda ingin langsung punya website bisnis yang rapi dan siap dipromosikan, Anda bisa berkolaborasi dengan kami yang menyediakan jasa pembuatan website WordPress berpengalaman menangani berbagai jenis bisnis dan kebutuhan.

Artikel ini adalah panduan praktis, bukan dokumentasi kaku. Harapannya, setelah membaca artikel ini Anda akan mengerti dasar-dasar cara menggunakan WordPress Block Editor untuk membuat satu halaman bisnis lengkap (landing page/jasa/profil), tahu trik menggunakan block patterns dan reusable blocks, dan paham kapan cukup DIY serta kapan sebaiknya menggandeng developer atau agency.

Dasar Block Editor dan Antarmukanya (UI)

Block editor merupakan proyek WordPress yang awalnya dikembangkan sebagai plugin dengan nama Gutenberg. Setelah diadopsi ke WordPress core, ia langsung menjadi pusat pengembangan hingga saat ini.

Banyak hal yang bisa Anda lakukan dengan editor blok tinimbang menggunakan editor klasik yang konsepnya adalah WYSIWYG. Karenanya, sangat disayangkan apabila sebagai pengguna WordPress, Anda tidak mengenal fitur ini dengan baik.

Apa itu WordPress Block Editor (Gutenberg)?

WordPress Block Editor (sering disebut Gutenberg) adalah editor visual baru WordPress yang menyusun konten dalam bentuk blok. Ini memungkinkan setiap paragraf, gambar, tombol, testimoni, hingga layout kolom adalah satu blok yang bisa diatur ulang dengan drag-and-drop. Berbeda dengan Classic Editor yang mirip textarea panjang.

Singkatnya sistem blok ini memudahkan Anda dalam membuat halaman bisnis website menjadi jauh lebih fleksibel tanpa harus menulis sebaris pun kode.

Beberapa manfaat utama:

  • Anda bisa mencoba layout berbeda (misalnya susunan hero -> manfaat -> testimoni -> CTA) tanpa bergantung penuh pada designer/developer.
  • Struktur blok yang jelas memudahkan tim marketing Anda atau admin melakukan update tanpa takut “merusak” keseluruhan desain.
  • Fitur WordPress seperti block patterns, reusable blocks, dan Full Site Editing semuanya dibangun di atas Block Editor, sehingga mempelajarinya sekarang adalah merupakan investasi jangka panjang bagi bisnis.

Dalam praktik proyek nyata, manfaat ini akan sangat terasa saat Anda melalui tahapan-tahapan pengembangan website dari perencanaan sampai website live.​​

Mengenal Elemen Penting Block Editor

Saat membuka editor untuk post/halaman baru, biasanya Anda akan melihat:

  • Canvas utama: area putih tempat blok-blok konten Anda disusun.
  • Block inserter (+): tombol “+” di kiri atas atau di dalam canvas untuk menambahkan blok baru (Paragraph, Heading, Image, Buttons, dan lain sebagainya).
  • Sidebar Settings (kanan): berisi dua tab utama, Post/Page settings (title, excerpt, featured image, slug, categories, tags) dan Block settings (opsi khusus untuk blok yang sedang dipilih).
  • Toolbar blok (di atas blok): muncul saat blok dipilih; berisi opsi format, alignment, transform (ganti tipe blok), dan lainnya.
  • List View: panel yang menampilkan struktur semua blok dalam bentuk daftar; sangat membantu untuk halaman panjang dan layout kompleks.
  • Outline: panel di sebelah List View yang berisi jumlah karakter, kata, waktu baca, dan struktur artikel.

Tips: biasakan membuka List View saat membuat halaman, karena dari sana Anda bisa menyeret blok ke atas/bawah dengan mudah dan melihat struktur halaman tanpa harus scroll panjang.

Garis Besar Pembagian WordPress Block Editor
Source: WordPress

Jika Anda kebetulan memahami pemrograman, khususnya yang berkaitan dengan WordPress custom, Anda bisa melihat tutorial resmi yang disediakan oleh WordPress tentang bagaimana teknis cara membangun blok kustom WordPress di halaman Build your first block yang cukup mudah diikuti.

Bagaimana Cara Menggunakan Block Editor?

Bagian ini fokus pada cara menggunakan block editor langkah demi langkah untuk membuat satu halaman bisnis sederhana. Anggap saja kita membuat halaman “Layanan Jasa [Bisnis Anda]”.

1. Tentukan tujuan halaman

Sebelum menulis, jawab dulu satu pertanyaan:

“Halaman ini ingin saya gunakan untuk apa?”

Beberapa tujuan umum:

  • Mengumpulkan lead (form konsultasi / WhatsApp).
  • Menjual satu jasa inti (paket layanan utama).
  • Menjelaskan profil bisnis secara meyakinkan.

Tujuan ini akan menentukan urutan blok di halaman dan seberapa maksimal Anda menonjolkan elemen seperti social proof atau penjelasan proses kerja.

2. Susun kerangka layout landing page

Sebelum mulai menulis teks apa saja, yang harus Anda persiapkan adalah kerangka layout landing page yang optimal. Berikut adalah kerangka sederhana yang terbukti efektif untuk website bisnis:

Panduan WordPress Block Editor untuk struktur kerangka layout landing page sederhana
Source: Shopify (Visualisasi struktur kerangka layout landing page sederhana)

Hero section

  • Heading kuat (masalah/solusi utama).
  • Subheading pendek yang menjelaskan manfaat.
  • Satu tombol utama (CTA). Misalnya “Konsultasi Gratis” atau “Hubungi Kami”.

Section manfaat utama

  • 3–5 bullet list mengenai manfaat spesifik, bukan fitur teknis.

Social proof

  • Testimoni, logo klien, atau hasil kerja (portofolio).

Penjelasan layanan

  • Apa yang Anda kerjakan/jual, untuk siapa, dan bagaimana prosesnya.

FAQ singkat

  • Jawab 3 – 5 pertanyaan yang sering dikeluhkan atau yang menyangkut keberatan umum.

CTA penutup yang kuat

Kerangka ini bisa Anda wujudkan dengan kombinasi blok: Heading, Paragraph, Image, Columns, Group, dan Buttons.

3. Praktik: menyusun halaman dengan blok

Langkah praktis di editor:

  1. Buat halaman baru dan beri judul yang jelas (misalnya “Jasa Laundry di [Kota]”).
  2. Di hero section:
    • Tambahkan Heading block untuk judul besar.
    • Tambahkan Paragraph block untuk penjelasan singkat.
    • Tambahkan Buttons block dengan satu CTA utama (misalnya link ke WhatsApp).
  3. Untuk manfaat:
    • Gunakan Columns block (2 atau 3 kolom).
    • Di setiap kolom, kombinasikan icon/image kecil + Heading level 3 + Paragraph.
  4. Untuk social proof:
    • Gunakan Group block berisi beberapa Quote block atau kombinasi Image + Paragraph untuk testimoni.
  5. Untuk penjelasan layanan:
    • Gunakan struktur Heading (H2/H3) + Paragraph.
    • Jika proses kerja Anda bertahap, gunakan List block (numbered/bulleted).
  6. Untuk FAQ sederhana:
    • Satu blok Heading, lalu beberapa Paragraph atau Details block (jika sudah tersedia di tema/plugin Anda).

Setelah beberapa kali mencoba, Anda akan mulai punya pola sendiri untuk membuat halaman bisnis dengan Block Editor yang bisa diterapkan ulang ke halaman lain tanpa mulai dari nol setiap kali.

Memaksimalkan Patterns, SEO, dan Full Site Editing

Mengapa harus menggunakan WordPress untuk mengembangkan bisnis? Bagaimana WordPress bisa menjadi penting untuk bisnis? Apakah WordPress bisa menjadi kunci utama dalam mengembangkan bisnis?

Banyak pertanyaan serupa lainnya yang akan muncul di pikiran Anda. Namun, tanpa memahami fitur-fitur seperti yang akan dibahas pada poin ini, semua pertanyaan akan dijawab dengan kata “tidak.” Oleh karena itu, Anda harus bisa memaksimalkan semua fitur-fitur penting yang ada.

Block Patterns & Reusable Blocks

Saat Anda menemukan kombinasi blok yang sering dipakai (misalnya testimoni, box harga, atau CTA section), jangan terus-menerus buat ulang secara manual.

Dua fitur yang perlu Anda manfaatkan untuk menghindari pekerjaan repetitif ini adalah:

  • WordPress block patterns: layout siap pakai yang bisa di-insert lalu diedit isinya. Banyak tema modern dan plugin block library menyediakan patterns untuk hero, pricing, CTA, dan sebagainya.
  • Reusable blocks: blok yang Anda simpan dan bisa dipakai berulang di banyak halaman. Jika Anda update konten reusable block, semua halaman yang memakainya ikut ter-update (khusus pola yang disinkronisasi).
WordPress Block Pattern
Source: Full Site Editing (WordPress Block Pattern)

Contoh yang biasanya sangat berguna untuk website bisnis:

  • Section testimoni pelanggan.
  • Box CTA “Booking Konsultasi”.
  • Box pricing paket layanan.

Dengan cara ini, tim Anda cukup fokus pada pesan dan strategi, bukan mengatur layout dari awal setiap kali ingin digunakan.

Optimasi SEO dengan WordPress Block Editor

WordPress Block Editor sebenarnya cukup SEO-friendly asalkan Anda menerapkan dasar optimasi SEO pada sisi on-page dan off-page yang benar. Beberapa hal penting:

  1. Gunakan heading hierarchy yang benar: satu H1 (judul halaman), section utama dengan H2, dan subbagian pakai H3 untuk menjaga struktur informasi tetap logis dan mudah dibaca mesin pencari maupun manusia.
  2. Slug URL: buat pendek dan deskriptif, misalnya /pilihan-tepat-laundry-pakaian atau /cara-memilih-jasa-laundry.
  3. Tema yang ringan dan SEO-friendly: memilih tema seperti GeneratePress, akan membantu Block Editor bekerja lebih cepat dan stabil.
  4. Internal linking: di dalam panduan ini, pastikan Anda menautkan ke:
    • Artikel troubleshooting (misalnya halaman khusus “Pakaian Segunung Gak Kelar-kelar? Ini Solusinya”).
    • Halaman jasa laundry full, laundry setrika, atau cuci jemur.

Untuk merapikan struktur URL lama saat migrasi dari Classic Editor atau page builder ke halaman baru berbasis blok, gunakan teknik redirect yang benar seperti yang telah kami dijelaskan di cara redirect URL WordPress tanpa plugin agar ranking dan traffic tetap aman.

Gambar/screenshot sebaiknya diisi alt text dengan deskripsi yang natural, misalnya “contoh cara pemilihan laundry pakaian untuk halaman jasa”, bukan sekadar “screenshot‑1”. Plugin SEO seperti Slim SEO, Rank Math, atau SEOPress dapat membantu memonitor apakah meta title, meta description, dan penggunaan keyword sudah optimal, mengikuti checklist seperti SEO checklist untuk WordPress atau panduan on-page SEO WordPress.

Kapan Perlu Full Site Editing (FSE)?

Block Editor standar dipakai untuk mengedit konten halaman/post. Full Site Editing (FSE) memperluas konsep ini ke seluruh bagian website: header, footer, template blog, arsip, dan sebagainya.

Tampilan WordPress Full Site Editing
Source: Verpex (Full Site Editing)

Untuk pemilik website bisnis:

  • Cukup Block Editor saja, jika:
    • Website masih sederhana (1–5 halaman utama).
    • Anda hanya ingin mengatur konten, bukan struktur template.
  • Mulai beralih ke FSE & block theme, jika:
    • Anda ingin kontrol lebih leluasa atas desain global tanpa builder berat.
    • Ingin header/footer, layout blog, dsb. serba blok dan mudah diatur.

Saat Anda siap berpindah ke block theme agar bisa memanfaatkan FSE, ikuti panduan lengkap cara mengganti tema WordPress supaya perubahan berjalan aman tanpa merusak tampilan dan fungsi website.

Dengan kata lain: kuasai dulu Panduan WordPress Block Editor untuk konten halaman. Begitu nyaman, barulah pertimbangkan FSE untuk upgrade level kontrol desain.

Apakah Panduan WordPress Block Editor Ini Cukup?

Kalau Anda sampai di bagian ini, kemungkinan besar:

  1. Anda sudah jauh lebih paham cara menggunakan block editor untuk menyusun halaman bisnis yang rapi.
  2. Anda melihat Block Editor bukan lagi “musuh baru”, tapi alat yang bisa membuat website lebih konsisten, cepat, dan mudah dikelola tim.

Langkah berikutnya yang bisa Anda ambil:

  1. Ingin latihan sendiri dulu?
    • Download checklist gratis: struktur halaman bisnis + daftar blok yang direkomendasikan untuk hero, manfaat, testimoni, dan CTA.
  2. Setelah halaman bisnis siap, ingin memaksimalkan setiap lead?
    • Mulailah menyiapkan sistem follow‑up dengan email marketing WordPress agar setiap orang yang mengisi form/WhatsApp bisa di‑follow up otomatis.
  3. Ingin lompat lebih cepat tanpa trial-and-error panjang?
    • Jadwalkan sesi konsultasi singkat untuk:
      • Mengecek apakah website Anda siap pindah ke Block Editor/FSE.
      • Mendiskusikan kebutuhan migrasi dari Classic/Elementor.
      • Merancang layout halaman bisnis yang lebih meyakinkan.

Dengan kombinasi panduan ini, sedikit latihan, dan dukungan teknis yang tepat saat dibutuhkan, Anda tidak hanya “ikut tren Gutenberg”, tapi benar-benar memanfaatkannya untuk menghasilkan lebih banyak lead dan penjualan dari website bisnis Anda.

Leave a Comment