Instruksi langkah demi langkah generator Gutenberg WordPress

Saya pikir Anda akan setuju jika Anda mengatakan: Seluruh bisnis Gutenberg membingungkan.

Pertama, apakah sulit untuk menggunakan editor blok baru atau apa? Maksud saya, Anda tidak tahu ke mana semua alat favorit Anda pergi. Mungkin Anda butuh waktu lebih lama untuk menulis sekarang, bukan?

Mungkin menambahkan tautan (mitra atau tidak) memberinya kurva besar dan dia kecewa. Anda mungkin mengalami masalah dalam menambahkan gambar di samping teks Anda.

Mungkin Anda mencoba menambahkan lebih banyak kolom dan banyak hal tidak berjalan seperti yang diharapkan. Jika tidak, Anda mungkin tidak dapat dengan mudah menambahkan file PDF Anda atau melihat pesan "Update Error" yang ditakuti.

Jangan khawatir lagi; Itu dalam posisi yang tepat belum lama ini, tetapi sekarang saya menemukan Gutenberg menarik untuk digunakan. Ada kurva belajar, ya, tetapi pada akhir posting hari ini Anda akan melihat Gutenberg secara berbeda.

Apa itu editor Gutenberg?

Anda melihat Gutenberg, editor blok WordPress standar.

Jika Anda memiliki WordPress 5.0 dan lebih tinggi, Anda harus menemukan editor WordPress baru yang brilian bernama Gutenberg.

Dan seperti banyak pengguna lain, dia akan menggunakan editor revolusioner, tetapi dia ragu bahwa Gutenberg rumit.

Atau ketika Anda bertemu Gutenberg, beberapa hal tidak berhasil. Akhirnya, pengembang telah membuat tema dan plugin yang kompatibel dengan editor blok dan terus melakukannya.

Jadi dia dengan cepat kembali ke Editor Klasik, yang baik untuk kita. Namun, perlu diketahui bahwa WordPress tidak lagi didukung oleh Editor Klasik setelah 2022. Anda juga akan kehilangan manfaat tambahan yang ditawarkan Gutenberg.

Dalam hal fungsionalitas, Editor Klasik dan Gutenberg melakukan hal yang sama. Anda tahu, kedua alat membantu Anda membuat konten tanpa coding.

Namun, kami sangat terbiasa dengan editor WYSIWYG yang lama sehingga kami merasa agak aneh untuk beradaptasi dengan antarmuka pengguna baru Gutenberg, jika tidak sepenuhnya membingungkan. Setidaknya saya pikir begitu.

Tapi apa sebenarnya Gutenberg?

Gutenberg adalah editor WordPress standar baru. Ini berbeda dari editor gambar / teks konvensional. Gutenberg menggunakan blok konten seperti banyak pembangun halaman lainnya saat ini.

Ini menawarkan fitur yang lebih intuitif daripada Editor Klasik, sehingga Anda dapat membuat konten multimedia yang kaya saat bepergian. Sekarang Anda dapat dengan cepat membuat tata letak yang luar biasa saat bekerja dengan posting atau halaman WordPress.

Dan dengan beberapa plugin, Gutenberg dapat bersaing dengan pembuat situs WordPress seperti Brizy, Elementor, dan Divi.

Satu-satunya downside adalah bahwa pembangun halaman sering menawarkan lebih banyak fitur karena mereka terutama pembangun halaman! Pada saat yang sama, Gutenberg masih sangat muda, dan ia hanya bisa berharap bahwa editor blok akan tumbuh dengan cepat.

Dalam posting hari ini, kita akan bersenang-senang membuat posting WordPress dengan editor Gutenberg. Tujuan saya adalah untuk mencakup setiap detail dan fitur sehingga Anda dapat membuat konten seperti pro dengan Gutenberg.

Apakah kamu siap Dalam hal ini, kami akan membuat posting WordPress ini.

Cara membuat posting WordPress dengan Gutenberg

Jika Anda menjalankan situs WordPress, Anda mungkin membuat lebih banyak posting daripada halaman. Di bagian selanjutnya, kami membuat posting WordPress di Gutenberg dari awal. Saya harap Anda bersenang-senang seperti yang saya lakukan ketika saya mencoba Gutenberg.

Biarkan itu keluar dari jalan, arahkan ke Publikasi> Tambah baru seperti yang kita sorot pada tangkapan layar di bawah ini.

buat posting baru di Gutenberg

Ini akan membawa Anda langsung ke editor Gutenberg yang ditunjukkan di bawah ini.

Editor WordPress Gutenberg

Cukup rapi, bukan? Sekarang mari kita menyingsingkan lengan baju kita dan mulai bekerja.

Tambahkan judul

Tambahkan judul baru untuk gutenberg

Anda tidak dapat menulis pos tanpa judul yang jelas. Hal yang baik adalah bahwa Gutenberg membuatnya sangat mudah untuk menambah judul.

Blok pertama yang Anda lihat adalah judul di bagian atas dokumen seperti yang ditunjukkan pada gambar di atas. Masukkan blok untuk membuat judul untuk posting Anda. Seperti A, B, C.

Perlu mengedit permalink? Anda dapat membuatnya dengan mudah judul Kunci dengan mengklik sunting Tombol seperti yang ditunjukkan di bawah ini.

Edit permalink di Gutenberg

Setelah Anda menambahkan judul Anda, tekan tombol Masuk Kunci untuk memulai baris baru. Yah, Gutenberg mempertahankan navigasi asli yang sangat Anda sukai di editor WordPress klasik.

Tambahkan bagian baru

blok penjualan baru di Gutenberg

Pukul itu Masuk Kunci menciptakan yang baru bagian Kunci seperti yang ditunjukkan di atas. Sebelum menulis teks, blok menawarkan Anda beberapa opsi. Lihat gambar bernomor di bawah ini untuk informasi lebih lanjut.

Opsi baru untuk memblokir bagian Gutenberg

Anda bisa:

  1. Konversi blok paragraf baru ke blok lain, mis. B. Gambar, header, sampul, galeri, WooCommerce, form, dll.
  2. Gunakan pintasan untuk mengonversi blok paragraf ke blok gambar
  3. Ubah blok paragraf menjadi blok heading, yaitu. H. H2, H3 dan H4
  4. Konversi blok paragraf ke blok penutup

Sebagai ilustrasi, saya menggambarkan bagian pertama untuk pengantar nanti. Setelah menambahkan teks, bilah alat pemformatan akan muncul (lihat di bawah).

toolbar format bagian gutenberg

Berkat bilah alat pemformatan, Anda dapat:

  • Konversi paragraf ke ayat, kutipan, judul, daftar, kode, dan teks yang telah diformat sebelumnya
  • Berani, Miring, potongan dan menggarisbawahi konten
  • Bungkus teks ke kiri, kanan, tengah, dan bungkus
  • Tambahkan tautan yang juga bisa dibuka di tab baru
  • Posting foto secara online (ya, itu ada!)
  • Sembunyikan pengaturan blokir
  • Gandakan blok
  • Masukkan blok sebelum atau setelah blok saat ini (dalam kasus kami ini adalah paragraf pertama sehingga kami tidak menambahkan apa pun sebelum dan sesudah). Jika mau, Anda dapat menambahkan gambar sampul sebelum paragraf pertama karena ini terdengar bagus
  • Edit blok sebagai HTML
  • Tambahkan blok saat ini ke blok yang dapat digunakan kembali sehingga Anda dapat menggunakannya di pos lain
  • Hapus blok seluruhnya

Anda selanjutnya dapat menyesuaikan blok paragraf menggunakan opsi yang tersedia di opsi Blokir Tab menu di sidebar seperti yang ditunjukkan di bawah ini.

Opsi bilah samping Gutenberg untuk kunci tumit

Beberapa catatan dalam foto di atas:

  1. pilih Blokir Klik di sini untuk melihat semua opsi dan pengaturan kunci
  2. Pilih ukuran font dan aktifkan Drop Cap di sini
  3. Tambahkan warna latar belakang ke bagian Anda. Saya mengaturnya menjadi biru untuk menggambarkan. Anda juga dapat menyesuaikan warna teks. Bagaimanapun, Anda dapat menambahkan warna khusus tanpa batas
  4. Anda dapat menambahkan kelas CSS khusus di sini, yang berarti Anda dapat menambahkan gaya CSS tambahan ke blok Anda
  5. Latar belakang biru dan drop cap telah diterapkan pada editor Gutenberg

Tab Dokumen di bilah sisi

Ada tab lain di menu bilah sisi. dia dokumen Tab seperti yang ditunjukkan di bawah ini.

Tab Dokumen Kunci di blok bagian

Berikut komentar untuk gambar di atas:

  1. Klik di sini untuk berubah dokumen lidah
  2. Di sini Anda dapat menjadwalkan pos dan mengatur visibilitas untuk Pribadi atau Publik, membuat pos di Menunggu ulasan Status, pilih format kontribusi dan buat kontribusi tetap
  3. Di bagian ini Anda dapat mengedit tautan permanen Anda
  4. Di sini Anda dapat memilih atau membuat kategori baru
  5. Tambahkan tag ke posting Anda
  6. Atur gambar yang dipilih
  7. Buat deklarasi manual
  8. Izinkan komentar, pingback, dan trackback

Seperti yang Anda lihat, Anda memiliki banyak pilihan untuk merancang blok paragraf (dan seluruh artikel) sesuai keinginan Anda. Ngomong-ngomong, blok yang berbeda memiliki pengaturan berbeda yang kita pelajari dalam sekejap.

Setelah bagian pertama, tekan tombol Masuk Tekan lagi untuk membuat baris baru (atau blok paragraf baru). Sekarang mari kita tambahkan gambar di bawah bagian pertama.

Tambahkan foto di Gutenberg

Tambahkan foto baru di Gutenberg

Mereka mengatakan bahwa sebuah gambar bernilai ribuan kata dan bahwa posting blog tanpa gambar itu menjemukan. Ada beberapa cara untuk menambahkan foto ke posting WordPress Anda dengan Gutenberg.

Jika sudah Masuk Baru saja, aktifkan blok paragraf baru. Karena Gutenberg intuitif, Anda dapat menambahkan gambar dengan mengeklik ikon plus (+), gambar atau sampul, seperti yang disorot pada gambar di bawah ini.

Tambahkan gambar baru di editor Gutenberg

Beberapa catatan

  1. Anda dapat menambahkan gambar dengan tanda tambah (+)
  2. Di sini Anda dapat dengan mudah menambahkan gambar
  3. Dengan opsi ini Anda dapat menambahkan satu tutupi Gambar (umumnya lebih besar dari foto lain. Anda juga dapat meletakkan teks pada gambar sampul)

Klik salah satu dari tanda plus (+). Kemudian klik gambar Tab seperti yang ditunjukkan di bawah ini.

Tambahkan foto di Gutenberg

klik gambar Tab dimuat gambar Kunci ditampilkan pada tangkapan layar di bawah ini.

blok gambar gutenberg

itu gambar Blok memungkinkan Anda untuk mengunggah gambar atau menambahkannya dari URL atau pustaka media. Anda dapat menambahkan teks alternatif (penting untuk SEO), subtitle dan deskripsi melalui pengaturan layar media atau melalui Blokir Panel samping seperti yang ditunjukkan pada gambar berikut.

Pengaturan media yang biasa …

Pengaturan media WordPress

… dan gambar Pengaturan penguncian.

pengaturan kunci gambar gutenberg

Apakah Anda belajar sesuatu di sini hari ini? Semoga kita bisa

Setelah menambahkan gambarnya, Gutenberg menambahkan blok paragraf baru tepat di bawah. Anda dapat menambahkan apa pun yang Anda inginkan, tetapi untuk tujuan ilustrasi saya menambahkan teks dan kemudian tombol di bawahnya.

Untuk menambahkan file yang dapat diunduh, mis. Pdf, gambar, video, dll.

Gutenberg membuatnya sangat mudah untuk menambahkan file yang dapat diunduh ke posting WordPress Anda atau situs WordPress.

Di yang baru bagian Kunci, klik tanda plus (+) dan navigasikan ke Blok umum dan tekan File Tab yang kami sorot di bawah ini.

Tambahkan file yang dapat diunduh di Gutenberg

Ini memulai blok berikut:

kunci file gutenberg

Dari File Blok tempat Anda dapat mengunggah file baru atau menambahkannya dari perpustakaan media Anda. Setelah Gutenberg menambahkan file Anda, tambahkan manis unduh Tombol otomatis seperti yang ditunjukkan pada gambar di bawah ini.

Tambahkan file di Gutenberg

Anda dapat bermain-main dengan pengaturan. Misalnya, Anda dapat menggunakan "Gutenberg Daftar Periksa PDF Gratis"Judul juga unduh Tombol. Anda dapat menambahkan kelas CSS ke blok dan memformatnya sesuka Anda.

Tambahkan penawaran untuk Gutenberg

Di bawah ini kami menambahkan penawaran karena lucu dan menarik serta membantu Anda memahami intinya. Klik tanda plus (+) pada baris baru dan arahkan ke Blok umum dan tekan kutipan Tab seperti yang ditunjukkan di bawah ini.

Tambahkan penawaran di Gutenberg

Ini akan kutipan Harap blokir posting Anda karena kami menyorot pada tangkapan layar di bawah ini.

konfigurasi blok kutipan gutenberg

Perhatikan bahwa pengaturan blok kutipan di sidebar kanan di atas?

Untuk menambah anggaran Anda, tulis blok. Ini hasil saya.

Kutipan Gutenberg

Itu terlihat bagus, bukan?

Menambahkan posting media di Gutenberg

Gutenberg hadir dengan berbagai blok untuk memasukkan video dan media lain dari lebih dari 30 situs seperti YouTubeVimeo Facebook, SoundCloud, WordPress, Slideshare, dll.

Untuk memasukkan konten, klik tanda tambah (+) dan pergi ke Tertanam, dan pilih situsnya. Sebagai contoh, saya ingin YouTube seperti yang ditunjukkan di bawah ini.

Masukkan gutenberg youtube

Kemudian salin dan tempel URL video dari YouTube dan klik Sematkan Tombolnya seperti yang ditunjukkan pada gambar di bawah ini.

youtube gutenberg embedding block

Begitu saya tiba Sematkan Pada tombol, Gutenberg secara otomatis mengkonversi tautan ke video, seperti yang disorot di bawah ini.

Video YouTube tertanam di Gutenberg

Navigasi yang lancar sampai akhir. Sekarang mari kita tambahkan tombol terpisah yang memungkinkan Anda untuk membuat Panggilan untuk Bertindak (CTA).

Bagaimana cara menambahkan tombol di Gutenberg

Anda seharusnya tidak memiliki masalah menambahkan blok pada saat ini. Cukup klik tanda plus (+) dan pilih blokir Anda. Sangat mudah.

Bagaimana cara menambahkan tombol?

Klik tanda plus (+) pada baris baru (atau blok) dan arahkan ke Elemen desain dan klik kuda jantan Tab seperti yang ditunjukkan di bawah ini.

Tambahkan tombol di editor Gutenberg

Ini mengarahkan Anda ke kuda jantan Kunci seperti dijelaskan di bawah ini.

Tambahkan tombol di editor Gutenberg

Seperti yang dapat Anda lihat pada gambar di atas, Anda dapat mengedit teks tombol dan menambahkan tautan. Anda juga dapat menyesuaikan tombol dari menu bilah sisi di sebelah kanan layar.

Setelah beberapa klik, saya mengerti.

Gutenberg Button, hlm.

BTW, jika Anda menggunakan kombinasi warna yang sulit dibaca untuk tombol Anda, Gutenberg akan segera memberi tahu AndaBagus sekali

Cara menambahkan kolom di Gutenberg

Mari kita tambahkan beberapa kolom dengan tombol yang bagus. Saya ingin menambahkan dua kolom, jadi berhati-hatilah.

Anda harus melakukannya. Klik tanda plus (+) dan arahkan ke Elemen desain dan klik kolom Tab seperti yang ditunjukkan pada gambar di bawah ini.

Tab Editor Kolom Gutenberg

Secara default, Gutenberg menambahkan dua kolom. Lihat gambar di bawah dan ingat bahwa saya sudah menambahkan konten ke kolom.

Kolom Gutenberg di editor WordPress

Apa yang menangkap saya

Antarmuka penyangga Gutenberg

Tidak buruk dalam beberapa detik kerja. Namun, Anda mungkin tidak dapat membuat kolom. Mungkin ide yang baik untuk menampilkan gambar di sebelah teks.

Apakah ada kunci? Ya ada!

Cara menambahkan gambar di sebelah teks di Gutenberg

Apakah Anda ingin menambahkan foto di sebelah teks? Dalam hal ini, Anda akan menyukai bagian selanjutnya.

Klik tanda plus (+) seperti biasa dan arahkan ke Elemen desain dan klik Media dan teks Seperti yang ditunjukkan di bawah ini.

Gutenberg Blokir Teks dan Media

Anda harus melihatnya Media dan teks Kunci seperti yang ditunjukkan di bawah ini.

Blok teks dan media Gutenberg

Kemudian unggah gambar / video / media Anda, atau tambahkan satu dari perpustakaan media. Kemudian tambahkan teks Anda ke sisi tengah seperti yang ditunjukkan pada gambar di bawah ini.

Saya bermain dengan itu Media dan teks Saya crash, dan berikut ini terjadi pada saya. Pastikan saya juga berhasil menekan tombol di sana 🙂

Blok media dan teks lengkap

Oh itu backend! Mari saya tunjukkan bagian depan. Di sini:

Blok teks media Gutenberg

Terlihat sangat profesional, bukan? Anda dapat membayangkan berapa banyak yang dapat Anda raih dengan editor Gutenberg.

Gutenberg Third Party Blocks

Pengembang WordPress tertarik untuk membuat tema dan plugin yang kompatibel dengan editor Gutenberg. Beberapa contoh adalah WooCommerce, Jetpack dan Yoast SEO.

Misalnya, Anda dapat menempelkan blok WooCommerce ke dalam posting WordPress Anda. Pertama, instal dan aktifkan WooCommerce.

Kemudian klik tanda tambah (+) pada baris baru dan arahkan ke WooCommerce dan pilih blok yang diinginkan seperti yang ditunjukkan di bawah ini.

Blok Gutenberg Woocommerce

Tahukah Anda apa artinya itu? Ini berarti Anda dapat membuat media kaya dan posting dan halaman hebat dalam hitungan menit.

Blok penting lainnya

Kami sudah memiliki lebih dari 2.000 kata, dan jika kami terus seperti ini, kami akhirnya menulis buku elektronik lengkap. Doa saya adalah agar Anda sekarang dapat menggunakan Gutenberg dengan mudah.

Keluar dari jalan di sini adalah daftar blok lain yang tersedia.

  • peternak – Anda dapat menambahkan konten dari widget Anda ke posting blog
  • kode pendek – Anda masih dapat menggunakan kode pendek WordPress asli
  • klasik – Blok besar dengan konten masa lalu Anda
  • lebih lanjut – Blok itu sebelumnya dikenal sebagai Baca lebih lanjut Hari
  • Sandaran samping, partisi, jarak
  • HTML khusus, frekuensi ekstraksi, tabel
  • galeri y Audio / video HTML5
  • Dan masih banyak lagi, tergantung pada tema dan aksesori yang Anda gunakan

Juga: Membuat situs WordPress mirip dengan membuat posting yang disimpan selama beberapa menit, jadi kami tidak akan membahasnya hari ini.

Trik cepat dan pintasan keyboard Gutenberg

Gutenberg menyertakan beberapa trik dan pintasan keyboard yang membuatnya lebih mudah. Misalnya, jika Anda mengetik "/" di blok paragraf, daftar blok ditampilkan.

Anda bahkan dapat memilih blok tertentu dengan mengetikkan judul blok setelah garis miring terbalik (/). Misalnya, jika Anda Memasuki "/ gambar" akan menampilkan blok gambar di bawah blok terkait gambar lainnya. Lihat gambar di bawah untuk detail lebih lanjut.

Singkatan reaksi Gutenberg

Pintasan keyboard: Ketuk untuk melihat semua pintasan yang tersedia SHIFT + ALL + H. masuk Windows y OPT + CTRL + H. di Mac

Di bagian atas dokumen, Anda dapat melihat struktur dokumen dengan mengklik ikon (i) (lihat gambar di bawah).

Struktur dokumen Gutenberg

Menyenangkan Sangat halus.

Oh, dan omong-omong, kesalahan "Perbarui Kesalahan" biasanya terjadi karena koneksi internet yang tidak stabil 🙂

Gutenberg adalah editor konten yang hebat antara Anda dan saya. Selama Anda siap untuk mempelajari tali; Anda bisa mendapat banyak manfaat dari editor WordPress di masa depan.

Gutenberg masih relatif muda dan dapat mengharapkan pertumbuhan dalam hal kemudahan penggunaan dan fungsionalitas. Ini akan menjadi kekuatan besar untuk memiliki beberapa hari ke depan. Pembuat halaman harus berhati-hati, jika tidak mereka akan kehabisan bisnis 🙂

Kami berharap panduan langkah demi langkah kami dari editor Gutenberg telah membantu Anda menempatkan segala sesuatunya dalam perspektif. Kami percaya bahwa Anda sekarang dapat menggunakan editor blokir untuk membuat konten seperti pro.

Bagikan kekhawatiran, pemikiran, dan pertanyaan Anda di bagian komentar di bawah ini.

Pos terkait

Back to top button