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?
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.
Ini akan membawa Anda langsung ke editor Gutenberg yang ditunjukkan di bawah ini.
Cukup rapi, bukan? Sekarang mari kita menyingsingkan lengan baju kita dan mulai bekerja.
Tambahkan judul
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.
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
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.
Anda bisa:
- Konversi blok paragraf baru ke blok lain, mis. B. Gambar, header, sampul, galeri, WooCommerce, form, dll.
- Gunakan pintasan untuk mengonversi blok paragraf ke blok gambar
- Ubah blok paragraf menjadi blok heading, yaitu. H. H2, H3 dan H4
- 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).
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.
Beberapa catatan dalam foto di atas:
- pilih Blokir Klik di sini untuk melihat semua opsi dan pengaturan kunci
- Pilih ukuran font dan aktifkan Drop Cap di sini
- 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
- Anda dapat menambahkan kelas CSS khusus di sini, yang berarti Anda dapat menambahkan gaya CSS tambahan ke blok Anda
- 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.
Berikut komentar untuk gambar di atas:
- Klik di sini untuk berubah dokumen lidah
- 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
- Di bagian ini Anda dapat mengedit tautan permanen Anda
- Di sini Anda dapat memilih atau membuat kategori baru
- Tambahkan tag ke posting Anda
- Atur gambar yang dipilih
- Buat deklarasi manual
- 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
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.
Beberapa catatan
- Anda dapat menambahkan gambar dengan tanda tambah (+)
- Di sini Anda dapat dengan mudah menambahkan gambar
- 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.
klik gambar Tab dimuat gambar Kunci ditampilkan pada tangkapan layar di bawah ini.
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 …
… dan gambar Pengaturan penguncian.
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.
Ini memulai blok berikut:
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.
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.
Ini akan kutipan Harap blokir posting Anda karena kami menyorot pada tangkapan layar di bawah ini.
Perhatikan bahwa pengaturan blok kutipan di sidebar kanan di atas?
Untuk menambah anggaran Anda, tulis blok. Ini hasil saya.
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.
Kemudian salin dan tempel URL video dari YouTube dan klik Sematkan Tombolnya seperti yang ditunjukkan pada gambar di bawah ini.
Begitu saya tiba Sematkan Pada tombol, Gutenberg secara otomatis mengkonversi tautan ke video, seperti yang disorot di bawah ini.
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.
Ini mengarahkan Anda ke kuda jantan Kunci seperti dijelaskan di bawah ini.
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.
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.
Secara default, Gutenberg menambahkan dua kolom. Lihat gambar di bawah dan ingat bahwa saya sudah menambahkan konten ke kolom.
Apa yang menangkap saya
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.
Anda harus melihatnya Media dan teks Kunci seperti yang ditunjukkan di bawah ini.
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 🙂
Oh itu backend! Mari saya tunjukkan bagian depan. Di sini:
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.
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.
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).
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.