10 Tips dan Trik Bermanfaat Untuk Editor WordPress Gutenberg

Diterbitkan: 2025-04-17

Editor Gutenberg telah mengubah cara orang menggunakan WordPress. Ini lebih visual, berbasis blok, dan fleksibel daripada editor klasik lama. Tetapi jika Anda baru mengenalnya, atau bahkan jika Anda telah menggunakannya untuk sementara waktu, beberapa hal masih bisa terasa sedikit rumit.

Kabar baiknya? Ada banyak tip dan trik bermanfaat yang dapat membuat segalanya lebih cepat, lebih mudah, dan lebih menyenangkan.

Dalam posting ini, kami berbagi 10 tips Gutenberg praktis. Ini akan membantu Anda membuat konten yang lebih baik dan menyelesaikan lebih banyak tanpa frustrasi biasa.

Evolusi Editor WordPress Gutenberg

Editor WordPress Gutenberg

Gutenberg pertama kali diperkenalkan di WordPress 5.0 pada bulan Desember 2018. Ini menggantikan editor klasik, yang telah ada selama bertahun -tahun. Gagasan utama di balik Gutenberg adalah memberi pengguna lebih banyak kontrol atas konten mereka menggunakan sistem berbasis blok.

Pada awalnya, banyak pengguna tidak yakin tentang perubahan itu. Antarmuka terasa berbeda. Butuh beberapa untuk membiasakan diri. Namun seiring waktu, Gutenberg meningkat banyak. Itu menjadi lebih cepat, lebih stabil, dan lebih fleksibel.

Dengan setiap pembaruan WordPress, Gutenberg memperoleh fitur baru. Anda sekarang dapat membangun seluruh tata letak halaman dengan blok. Anda dapat menggunakan kembali blok khusus. Anda bahkan dapat mendesain header, footer, dan templat menggunakan editor situs (untuk tema blok).

Hari ini, Gutenberg bukan hanya editor konten. Ini menjadi alat pengeditan situs penuh . Dan semakin baik dengan setiap rilis.

10 Tips dan Trik Bermanfaat Untuk Editor WordPress Gutenberg

Gutenberg menawarkan lebih dari sekadar blok konten dasar. Setelah Anda mempelajari beberapa tips pintar, Anda dapat bekerja lebih cepat dan membuat halaman yang lebih tampan tanpa menyentuh kode apa pun.

Berikut daftar trik bermanfaat yang dapat meningkatkan pengalaman Gutenberg Anda:

  1. Gunakan perintah slash untuk memasukkan blok dengan cepat
  2. Ubah blok apa pun menjadi blok yang dapat digunakan kembali
  3. Seret dan jatuhkan blok untuk mengatur ulang konten
  4. Gunakan tampilan daftar untuk navigasi blok yang mudah
  5. Blok grup untuk bergerak atau menata mereka bersama
  6. Blok kunci untuk mencegah perubahan yang tidak disengaja
  7. Gunakan pintasan keyboard untuk menghemat waktu
  8. Gunakan pola untuk tata letak siap pakai
  9. Salin dan tempel blok antar halaman
  10. Tambahkan CSS khusus ke blok tertentu

Sekarang, mari kita masuk ke detailnya!

01. Gunakan perintah slash untuk memasukkan blok dengan cepat

Katakanlah Anda sedang menulis posting blog, dan Anda ingin menambahkan gambar tepat setelah paragraf. Anda memindahkan kursor Anda ke bawah, menekan tombol Enter, dan kemudian ... Anda meraih mouse, klik ikon Little Plus, gulir melalui opsi blok, dan akhirnya pilih blok gambar. Kedengarannya akrab?

Sekarang, mari kita buat lebih pintar.

Alih -alih semua mengklik itu, cukup ketikkan slash maju ( /) tepat setelah memukul enter. Saat Anda melakukannya, daftar blok muncul. Ketik /image dan tekan enter lagi. Selesai. Anda hanya memasukkan blok gambar tanpa menyentuh mouse Anda.

Gambar ini menunjukkan trik slash dari editor Gutenberg

Trik ini bukan hanya untuk gambar. Coba /heading , /quote , /table , atau bahkan /columns . Setelah Anda terbiasa, Anda akan merasa seperti mengetik perintah ke alat penulisan supercharged.

Cepat, halus, dan menjaga aliran tulisan Anda tetap hidup. Tidak ada lagi fokus yang melanggar. Cukup ketik dan bangun saat Anda pergi.

02. Ubah blok apa pun menjadi blok yang dapat digunakan kembali

Pernah menulis ajakan bertindak atau kotak pendaftaran buletin yang ingin Anda gunakan kembali di beberapa posting? Salin-mencelupkannya setiap saat tidak ideal. Anda mengubah satu, lupa untuk memperbarui yang lain, dan boom - situs Anda berakhir dengan lima versi berbeda dari hal yang sama.

Di sinilah blok yang dapat digunakan kembali berguna.

Katakanlah Anda telah merancang bagian CTA yang sempurna. Mungkin itu adalah tajuk, kalimat pendek, dan tombol. Pilih semua blok itu, klik menu tiga titik (⋮), dan pilih "Tambahkan ke blok yang dapat digunakan kembali." Beri nama seperti "post footer cta" dan simpan.

Blok yang dapat digunakan kembali

Sekarang, setiap kali Anda menulis posting baru, cukup cari blok yang dapat digunakan kembali. Masukkan dalam satu klik. Dan inilah bagian terbaiknya - jika Anda pernah memperbarui blok itu, itu berubah di mana pun Anda menggunakannya.

Tidak ada lagi ketidakkonsistenan. Tidak ada lagi waktu yang terbuang.

Ini seperti memiliki templat khusus Anda sendiri, siap kapan pun Anda membutuhkannya.

03. Seret dan jatuhkan blok untuk mengatur ulang konten

Terkadang, konten Anda tidak mengalir seperti yang Anda pikirkan.

Mungkin gambar itu terlihat lebih baik di atas teks. Mungkin kutipan terasa lebih kuat di akhir. Mengatur ulang konten di Gutenberg semudah menyeret dan menjatuhkan blok.

Begini cara kerjanya.

Arahkan ke atas blok apa pun. Anda akan melihat pegangan enam titik di sisi kiri. Raih, dan seret blok di mana pun Anda inginkan. Ingin memindahkan bagian lengkap yang terbuat dari beberapa blok? Kelompokkan mereka terlebih dahulu, lalu seret seluruh grup dalam satu gerakan halus.

Gambar ini menunjukkan ujung enam titik editor WordPress Gutenberg

Ini memberi Anda kontrol penuh atas tata letak - tanpa memotong, menempel, atau berurusan dengan kode yang berantakan.

Rasanya seperti bekerja dengan blok bangunan. Pindahkan barang -barang sampai semuanya pas.

Sederhana. Visual. Instan.

04. Gunakan tampilan daftar untuk navigasi blok yang mudah

Pernah membangun posting blog yang panjang dengan banyak gambar, teks, tombol, dan mungkin beberapa kolom? Pada titik tertentu, menggulir ke atas dan ke bawah untuk menemukan blok tertentu berubah menjadi sakit kepala.

Di situlah tampilan daftar menghemat hari.

Klik ikon kecil dengan tiga garis bertumpuk di sudut kiri atas editor. Ini membuka panel yang menunjukkan setiap blok di pos Anda, secara berurutan. Anda akan melihat garis besar dan terstruktur - seperti daftar konten untuk blok konten Anda.

Daftar Tampilan Trik Editor WordPress Gutenberg

Anda dapat mengklik blok apa pun dari daftar untuk melompat ke sana. Anda juga dapat menyeret dan drop blok langsung dari tampilan daftar. Perlu memilih blok yang ada di dalam grup atau kolom? Tampilan Daftar memungkinkan Anda menemukannya secara instan, tidak ada lagi perburuan.

Ini sangat berguna saat bekerja dengan tata letak yang kompleks atau blok bersarang.

05. Blok grup untuk bergerak atau menata mereka bersama

Bayangkan ini, Anda telah membangun bagian dengan tajuk, paragraf, tombol, dan mungkin warna latar belakang. Tampak hebat. Tapi sekarang Anda ingin memindahkan semuanya ke tempat lain di halaman. Satu blok pada satu waktu? Tidak. Terlalu lambat.

Hanya mengelompokkan mereka.

Pilih semua blok yang ingin Anda pertahankan. Kemudian klik menu tiga titik dan pilih "Grup." Sekarang blok -blok itu dibungkus di dalam satu wadah tunggal.

Blok grup editor WordPress Gutenberg

Anda dapat memindahkannya sebagai satu unit. Tambahkan latar belakang ke grup. Sesuaikan padding. Ubah penyelarasan. Bahkan duplikat seluruh bagian dalam satu klik.

Grup membuat tata letak yang kompleks menjadi sederhana. Mereka juga menjaga hal -hal terorganisir, terutama ketika Anda sedang mengerjakan halaman arahan atau bagian khusus.

06. Blok kunci untuk mencegah perubahan yang tidak disengaja

Anda memiliki desain Anda seperti yang Anda inginkan. Semuanya berbaris dengan sempurna. Tapi kemudian, saat mengedit, Anda secara tidak sengaja menghapus blok atau menggeser sesuatu dari tempatnya. Menjengkelkan, kan?

Inilah perbaikannya: Kunci blok Anda .

Klik pada blok apa pun, buka pengaturan (menu tiga titik), dan pilih "Lock." Anda dapat mencegah gerakan, mencegah penghapusan, atau keduanya. Dengan cara ini, tidak ada orang, termasuk Anda, dapat mengacaukannya tanpa membuka kunci terlebih dahulu.

Blok kunci editor Gutenberg

Ini sangat berguna ketika Anda bekerja dengan tata letak yang dapat digunakan kembali dan halaman bersama atau hanya ingin melindungi kerja keras Anda sendiri.

07. Gunakan pintasan keyboard untuk menghemat waktu

Mengklik Kerja, Tapi Pintasan Keyboard? Itu efisiensi tingkat berikutnya.

Alih -alih memindahkan mouse Anda setiap beberapa detik, pelajari beberapa kombo cepat dan Anda akan terbang melalui konten Anda. Misalnya:

  • Ctrl + Shift + D (CMD pada Mac): Duplikat blok
  • Ctrl + Alt + T: Masukkan blok di atas
  • Ctrl + Alt + Y: Masukkan blok di bawah ini
  • Shift + Alt + Z: Lepaskan blok
  • / (Maju Slash): Buka Blok Inserter secara instan

Ada lebih banyak, tetapi bahkan hanya sedikit yang dapat menghemat menit Anda, terutama jika Anda membangun posting atau halaman panjang secara teratur.

Ini seperti mengetahui kode cheat rahasia. Dan begitu jari -jari Anda mengingatnya, Anda akan bertanya -tanya bagaimana Anda pernah bekerja tanpa mereka.

08. Gunakan pola untuk tata letak siap pakai

Merancang halaman dari awal bisa terasa luar biasa. Anda tahu apa yang Anda inginkan, tetapi sampai di sana blok demi blok membutuhkan waktu. Di situlah pola masuk.

Pola adalah tata letak blok yang dirancang sebelumnya. WordPress termasuk banyak secara default - seperti bagian pahlawan, testimonial, CTA, dan banyak lagi. Anda hanya memilih satu dan memasukkannya ke halaman Anda. Selesai.

Klik ikon Plus untuk menambahkan blok baru. Kemudian beralih ke tab Pola . Anda akan menemukan kategori seperti teks, gambar, kolom, header - Anda sebut saja. Pilih satu, dan seluruh tata letak muncul secara instan.

Pola Editor Gutenberg

Anda dapat mengedit teks, mengganti gambar, dan mengubah gaya. Tapi strukturnya sudah ada.

Ini seperti memiliki seorang desainer memberi Anda kit starter. Bagian yang tampak hebat. Tidak ada stres. Tidak ada kecemasan halaman kosong.

09. Salin dan Tempel Blok Antar Halaman

Membangun sesuatu yang bagus di satu halaman dan menginginkan hal yang sama di yang lain? Jangan mulai dari awal. Cukup salin dan tempel blok.

Lebih mudah dari yang Anda pikirkan.

Klik pada blok (atau kelompok blok), lalu tekan Ctrl + C (atau CMD + C pada Mac). Buka halaman atau posting Anda yang lain. Klik ke mana Anda ingin pergi, dan tekan Ctrl + V. Boom - semuanya muncul, begitu saja.

Semua pemformatan, gaya, tombol, gambar - semuanya datang.

Dan ya, bahkan berfungsi di seluruh tab browser. Jadi Anda dapat membuka dua posting berdampingan dan memindahkan konten di antara mereka dalam hitungan detik.

10. Tambahkan CSS khusus ke blok tertentu

Terkadang, gaya bawaan tidak memotongnya. Anda menginginkan sesuatu yang lebih unik. Di sinilah CSS kustom ikut berperan.

Gutenberg memungkinkan Anda menerapkan CSS khusus ke blok individual, sehingga Anda dapat membuat bagian tertentu dari konten Anda menonjol tanpa mempengaruhi seluruh halaman.

Inilah cara melakukannya:

  • Pilih blok yang ingin Anda sesuaikan.
  • Di pengaturan blok di sebelah kanan, temukan bagian lanjutan .
  • Di bawah kelas CSS tambahan (ES) , tambahkan nama kelas khusus (misalnya, my-custom-style ).
  • Kemudian, buka wordpress customizer Anda atau bagian CSS khusus dalam tema Anda dan tambahkan gaya menggunakan kelas itu (misalnya, .my-custom-style { color: red; } ).
Beginilah cara Anda dapat menambahkan CSS tambahan menggunakan editor Gutenberg

Dengan cara ini, Anda tidak bermain -main dengan gaya global, tetapi lebih menyesuaikannya hanya untuk blok itu.

Sempurna ketika Anda menginginkan tombol, tajuk, atau bagian tertentu untuk memiliki tampilan yang berbeda tanpa mempengaruhi sisa konten Anda.

Kesimpulan

Dengan tips dan trik ini, Anda sedang dalam perjalanan untuk menguasai editor WordPress Gutenberg. Dari mempercepat alur kerja Anda dengan perintah slash hingga menambahkan gaya khusus dengan mudah, Gutenberg menawarkan banyak fleksibilitas untuk pembuat konten.

Ingat, kuncinya adalah bereksperimen dan menemukan alat yang paling cocok untuk gaya Anda. Baik Anda membuat posting sederhana atau tata letak yang kompleks, fitur -fitur ini akan membantu Anda menghemat waktu, tetap teratur, dan menambahkan sentuhan pribadi ke situs Anda.

Jika Anda ingin membandingkan Gutenberg dengan Elementor, Anda dapat memeriksa posting blog kami di Elementor vs Gutenberg untuk mengetahui siapa yang memimpin.

Ingin berbagi umpan balik Anda terkait dengan posting blog ini? Harap lakukan menggunakan kotak komentar di bawah ini. Kami ingin mengetahui umpan balik Anda. Hati-hati di jalan!

Berlangganan blog Wedevs

Kami mengirim buletin mingguan, tidak ada spam yang pasti