Daftar isi
Apakah Anda perlu menempatkan teks di sekitar gambar dengan cara yang elegan? Pelajari cara melakukannya dengan mudah tanpa pengalaman coding dan desain. Editor Gutenberg menghadirkan lebih banyak opsi untuk membungkus teks di sekitar teks di WordPress.
Anda dapat mencapai situs web yang terlihat bagus dan rutinitas konten pengeditan yang mudah secara bersamaan. Memilih editor Gutenberg untuk situs web WordPress Anda memberi Anda alat terbaik dari pandangan jangka panjang. Anda akan memiliki lebih banyak opsi untuk membungkus teks di sekitar gambar secara berbeda. Gutenberg membawa banyak keuntungan seperti kode sumber situs web yang lebih jelas, kecepatan, keamanan, dan kegunaan.
Bagaimana cara membungkus teks di sekitar gambar di WordPress?
Editor dan blok Gutenberg membuat konten situs web lebih ringan, modern, dan mudah dibaca. Kami menunjukkan kepada Anda lebih banyak cara bagaimana membungkus teks di sekitar gambar di WordPress Pages, Posting dan jenis Posting Kustom juga. Ada blok yang berbeda, dan Anda juga dapat menggunakannya dalam kombinasi, sebagai satu set bagian dan fitur yang memberi Anda opsi tambahan untuk bungkusnya.
Anda dapat memilih blok untuk teks yang dibungkus di sekitar gambar sesuai dengan subhalaman dan jenis kontennya. Anda dapat memilih satu gaya untuk halaman presentasi dan satu lagi untuk postingan blog. Juga, pertimbangkan jenis konten yang mewakili gambar. Apakah itu gambar deskripsi atau lebih representatif atau media jualan?
Bungkus Teks Di Sekitar Gambar – Memblokir Pilihan
Ada 4 blok yang dapat Anda gunakan untuk membungkus blok teks di sekitar gambar. Kami menjelaskan semuanya:
- Blok gambar dan blok Paragraf temukan lebih banyak di bawah
- Blok Media & Teks temukan lebih banyak di bawah
- Blok kolom di pos individu
- Blok gugus di pos individual (fitur hanya tersedia dengan Plugin Citadela Pro)
Bungkus teks dan gambar untuk pengalaman membaca yang lebih baik
Ada beberapa alasan mengapa Anda harus menggunakan blok ini. Anda akan sangat menghargainya jika Anda menulis posting blog. Gambar adalah bagian integral dari cerita. Tidak masalah jika Anda menulis blog atau majalah perjalanan tentang berita IT. Jadi saat menambahkan foto di dalam konten Anda, pikirkan tentang perataan gambar. Pembaca akan dapat lebih memahami apa yang Anda tulis.
Dalam banyak kasus, perlu menyisipkan gambar dan teks secara berdampingan. Apa yang penting?
- Itu harus masuk akal. Gambar harus berada di sebelah teks yang tepat.
- Itu harus diselaraskan dengan baik.
- Itu harus sesuai dengan tata letak seluruh situs web.
Blok Gambar dan Paragraf
Sementara di Editor klasik Anda juga dapat menempatkan teks di sebelah gambar, Anda tidak dapat berbicara tentang perataan yang bagus. Terutama jika gambarnya kecil dan Anda meletakkan lebih banyak teks di sebelahnya. Teks menutupi gambar dan tidak terlihat bagus.
Editor Gutenberg dan blok Gambarnya menghadirkan fitur hebat – pengubahan ukuran gambar. Seret titik di sekitar gambar untuk mengubah ukuran dan perataan teks secara otomatis.
Blok Media & Teks – WordPress menyelaraskan teks di sebelah gambar
- Bungkus teks dan gambar dengan blok Media & Teks
- Bagaimana cara menambahkan blok Media & Teks di editor
- Bagaimana blok ini bekerja
- Pengaturan blok Media & Teks
- Apa artinya “Tumpuk di seluler” berarti
- Bonus: Cara membenarkan teks di WordPress
Bagaimana cara menyelaraskan teks di sebelah gambar?
Mulai sekarang
Mulailah sekarang dengan uji coba bebas risiko. Tidak diperlukan kartu kredit.
Blok Media & Teks adalah fitur yang fantastis. Blok Media & Teks memecahkan masalah ini dan memastikan penyelarasan teks yang sempurna ke gambar tanpa gangguan komposisi dan tata letak. Itulah alasan Anda harus menggunakan blok ini.
Ini juga meningkatkan desain situs web di perangkat seluler. Blok pembungkus ini membantu tema WordPress untuk mencakup tata letak seluler yang berbeda. Pada smartphone, setiap bagian dari website harus terlihat jelas dan terbaca. Bagaimana tampilan blok Media & Teks pada ponsel dan tabel menangani fungsi "Stack on mobile" yang akan kita lihat di bawah.
Dalam waktu singkat Anda akan dapat menggunakan blok Media & Teks di tema WordPress baru kami yang disebut Citadela. Pelajari lebih lanjut tentang tema Citadela di artikel terpisah.
Bagaimana cara menambahkan blok Media & Teks di editor blok?
Menambahkan blok Media & Teks semudah menambahkan blok lainnya. Ini adalah blok inti yang berarti Anda tidak perlu mengunduh atau memasang apa pun.
Menggunakan ikon "+" di panel atas atau di mana saja di editor dan memilih blok Media & Teks.
Opsi terakhir adalah mengetik “/“ dan menulis “media” setelahnya. WordPress akan secara otomatis menampilkan blok yang dipilih yang cocok dengan apa yang Anda cari.
Bagaimana cara kerja blok Media & Teks?
Blok Media & Teks pada dasarnya mengelompokkan 2 jenis konten yang berbeda menjadi satu. Yang pertama adalah media misalnya gambar atau video yang dapat Anda tambahkan melalui:
- Mengunggah
- Perpustakaan Media
- Seret dan jatuhkan
Yang kedua adalah ruang untuk konten teks. Anda dapat menulis paragraf teks, daftar peluru, atau judul di sana. Anda juga dapat menambahkan di sana Blok tombol yang kita bicarakan sebelumnya.
Blok Media & Teks selalu menyelaraskan gambar dan teks berdampingan tidak peduli berapa banyak teks yang Anda tulis. Bagaimana cara kerjanya? Gambar secara otomatis menyesuaikan diri berdasarkan ketinggian konten di kolom teks.
Pengaturan Blok Media & Teks
Pengaturan blok umum
1. Bilah alat atas
Toolbar di atas blok menawarkan beberapa opsi. Jika tema aktif Anda mendukungnya, Anda dapat menyetel blok Media & Teks sebagai lebar atau lebar penuh. Anda juga dapat memilih di mana Anda ingin menempatkan gambar atau video dengan mengklik:
- Tampilkan media di sebelah kiri
- Tampilkan media di sebelah kanan
Di bilah alat atas juga terdapat ikon untuk mengedit media tempat Anda dapat mengatur Teks Alt, Judul, Keterangan, atau Deskripsi. Pelajari lebih lanjut tentang mengedit gambar di artikel kami Bekerja dengan blok Gambar WordPress.
2. Bilah samping kanan
Sidebar kanan menawarkan pengaturan tambahan untuk blok Media & Teks. Dimungkinkan untuk menambahkan teks Alternatif di sini, mengatur warna latar belakang, atau menambahkan Kelas CSS Tambahan. Anda juga dapat mengaktifkan fungsi "Stack on mobile" di sana.
Berkat fungsi ini, gambar dan teks ditampilkan dengan baik di perangkat seluler. Jika Anda menonaktifkan "Stack on mobile", gambar dan teks akan tetap berdampingan dan sulit dibaca dalam versi responsif.
Jika Anda mengaktifkan fungsi ini, pada konten ponsel di sebelah kiri akan ditampilkan di atas konten yang ada di sebelah kanan.
Perataan teks
Bagian dari blok Media & Teks bersama dengan gambar atau video juga konten teks. Itu bisa menjadi salah satu dari jenis konten berikut:
1. Paragraf
Di bilah alat atas Anda dapat mengatur perataan teks, membuat teks tebal, miring, atau menambahkan tautan URL.
Di sidebar di sisi kanan Anda dapat memilih ukuran font, warna font atau warna paragraf. Fitur yang menarik adalah “Drop Cap” yang akan menyorot karakter pertama dari teks. Ini adalah fitur yang bagus di posting blok untuk membuat teks lebih menarik.
2. Judul
Tajuk sangat mirip dengan Paragraf. Anda juga dapat mengonfigurasi tampilannya, membuat huruf tebal atau miring, dan menyisipkan tautan URL. Perbedaannya adalah Anda dapat memilih jenis tajuk – H2, H3, H4.
Ukuran heading dan pengaturan perataan lainnya tersedia di sidebar di sisi kanan.
3. Daftar
Jika Anda menambahkan blok Daftar ke konten Anda, itu bisa berupa poin-poin, daftar bernomor atau daftar multi level. Anda juga dapat membuat teks tebal, miring, dan menambahkan tautan URL.
4. Blok tombol
Blok yang menambahkan tombol ke konten ini dapat disesuaikan dengan desain situs web. Warna dan gaya tombol atau warna latar belakang dapat dikonfigurasi di sidebar di sisi kanan.
Jangan lupa baca artikel tentang Blok tombol.
Beralih di antara jenis blok
Di blok Media & Teks dimungkinkan untuk mengonversi satu jenis blok konten ke jenis blok lainnya. Anda juga dapat mengubah Blok Media & Teks menjadi Blok gambar dan bagian teks akan dihapus.
Dalam konten teks, dimungkinkan untuk mengubah blok Paragraf menjadi blok Tajuk atau Daftar.
Bonus: Cara membenarkan teks di WordPress
Menggunakan teks yang dibenarkan memiliki sisi positif dan negatifnya. Teks yang dibenarkan biasanya dapat ditemukan di buku atau surat kabar tetapi tidak lagi digunakan di situs web. Mengapa?
Beberapa tahun yang lalu fungsi Justify terintegrasi langsung di dalam editor WordPress Classic. Teks yang dibenarkan digunakan untuk menyebabkan masalah visibilitas di berbagai browser atau perangkat seluler. Ini juga terkait dengan keterbacaan yang sulit dari teks yang dibenarkan. Oleh karena itu, fungsi ini tidak digunakan lagi dan dihapus.
Fungsi khusus ini tidak ada di editor blok baru (Gutenberg).
Jadi bagaimana Anda membenarkan teks jika Anda benar-benar menginginkannya?
Solusinya adalah menambahkan kode CSS sederhana dalam beberapa langkah:
- Ada pengaturan untuk blok Paragraf Kelas CSS Tambahan di sidebar di sisi kanan
- Tulis di sana nama kelas „membenarkan“
- Publikasikan halaman atau artikel
- Jika Anda mempratinjaunya, klik Kustomisasi di bilah atas utama
- Di sisi kiri ada sidebar baru dengan pengaturan
- Klik pada CSS Tambahan
- Masukkan kode CCS berikut:
p.justifikasi { perataan teks: justifikasi; }
Selesai. Mulai sekarang, teks di Blok Media & Teks Anda dibenarkan.
WordPress menjadi lebih bermanfaat tanpa pembuat halaman pihak ketiga, berkat editor Gutenberg. Ini memiliki nilai yang sangat baik untuk situs web Anda dari sudut pandang jangka panjang dan saat membuat atau mendesain ulang situs web. Balok Gutenberg memberikan variasi gaya yang besar namun Anda mungkin menemukan tangan Kode WordPress untuk membungkus teks di sekitar gambar.
Apa pendapat Anda tentang blok Media & Teks? Apakah Anda sudah menggunakannya? Bagaimana Anda suka bekerja dengannya? Beri tahu kami di komentar di bawah.
Secara umum saya suka sistem blok tetapi kecuali saya melewatkan sesuatu, ini adalah langkah mundur. Saat ini saya sedang mencari untuk hanya mengapungkan gambar ke kiri atau ke kanan dan mendapatkan teks untuk dibungkus karena seharusnya sangat mudah dilakukan tetapi tampaknya WordPress tidak ingin hal itu terjadi. Mengapa tidak? Menggunakan blok media dan gambar hanya berfungsi jika panjang teksnya tepat. Halaman seperti ini misalnya tidak ingin dibuat ulang dengan spasi ganjil di antara paragraf jika panjang teks tidak tepat untuk ukuran gambar.
http://www.thorntonincraven.co.uk/our-village/welcome-to-the-village/
Halo yang disana,
Terima kasih atas umpan balik anda. Kedengarannya seperti ide yang sangat bagus, oleh karena itu saya ingin meminta Anda memberi kami satu menit dari waktu Anda untuk menjawab 4 pertanyaan sederhana: https://aitthemes.typeform.com/to/vc7arn yang dapat membantu tim kami membuat produk yang lebih baik dengan fitur unik lebih cepat.
Terima kasih banyak atas waktu dan pengertian Anda.
Salam paling baik!
Zlatko
tim AIT
Ya, saya tidak bisa membungkus teks. Kombinasi blok teks ini tampaknya tidak berguna.
Ide ini menyebalkan karena satu-satunya cara untuk menyisipkan gambar ke dalam blog – saya tidak bisa membungkus teks dengan baik dan ukurannya tidak sama, apa pun yang saya lakukan. Ide bagus untuk situasi TERTENTU, tetapi tidak untuk semuanya. Kadang-kadang Anda hanya menginginkan gambar dengan paragraf yang membungkusnya, daripada mengatakan sesuatu tentang gambar itu.
Bagaimana cara menambahkan pembungkus dan menggunakan konten dengan lebar penuh yar dengan serius cara menutupi penuh dengan kemudian mengambil wadah di dalamnya.. pembangun sangat membingungkan bagaimana cara menambahkan bungkus wadah editor yang sangat buruk yar
Halo yang disana,
terima kasih atas pujian Anda. Jangan ragu untuk melihat halaman blog kami https://www.ait-themes.club/blog/ di mana Anda akan menemukan banyak tip berguna tentang cara menulis postingan yang menarik dan bermanfaat.
Salam paling baik!
Zlatko
tim AIT
Halo Abdur,
Terima kasih banyak atas umpan balik Anda, itu sangat dihargai oleh tim kami!
Salam.
Zlatko
tim AIT
Saya mengalami kesulitan yang sama seperti beberapa orang lain di utas ini. di masa lalu, saya dapat dengan mudah membungkus teks di sekitar gambar seperti di halaman "tentang kami" tempat kami memiliki foto dan bio. mungkin saya menggunakan editor lama. Saya tidak ingat. tetapi, saya sekarang mencoba memperbarui situs kami dengan foto dan bio baru dan tidak dapat menemukan cara untuk membungkus teks dengan mudah seperti pada kombinasi bio/gambar kami sebelumnya. Saya mencoba beralih ke editor klasik, tetapi situs tersebut memperingatkan saya bahwa saya memiliki bagian "editor blok baru" dan saya harus tetap menggunakan mode pengeditan yang lebih baru. bisakah Anda memberi tahu saya cara membuat biografi dan gambar baru kami terlihat seperti posting kami sebelumnya? Terima kasih.
Hai,
Jika Anda ingin menonaktifkan Gutenberg dan melanjutkan dengan editor WordPress klasik, harap pertimbangkan plugin oleh tim inti WordPress yang memungkinkan Anda melakukannya dengan “Plugin Editor Klasik”.
Salam!
Zlatko
tim AIT
Bagi mereka yang hanya menginginkan teks sederhana yang membungkus gambar, Anda dapat melakukan ini dengan memasukkan Blok Teks Klasik (berdasarkan bagian pertama Blok saat Anda mengeklik Telusuri. Anda dapat menggunakan editor klasik dalam satu blok dan ya , yang memungkinkan Anda untuk menyisipkan gambar dan kemudian memilih opsi pembungkus Masalah terpecahkan 🙂
TERIMA KASIH SEO Guy London!!! Solusi sederhana tetapi saya telah mengabaikannya!
Dan kemudian… cukup gunakan opsi Convert to Blocks.
Karena ini berfungsi, Editor Blok memiliki kemampuan tetapi tidak dapat menemukan cara mengaturnya dengan benar. Sementara itu fudge ini bekerja.
Masalah yang sama di sini. Versi baru ini sangat buruk– tidak ada cara untuk membungkus teks dengan benar atau bahkan memperkecil foto, kecuali jika Anda hanya ingin memangkas.
Saya dapat membungkus teks saya di sekitar gambar di editor blok WordPress. Tampilannya persis seperti yang saya inginkan di "Pratinjau". Namun, ketika saya menerbitkan blog saya dan WordPress mengirimkannya melalui email ke pengikut saya, mereka menerimanya dengan gambar di atas dan teks di bawah gambar. Ini juga terjadi di komputer desktop, tidak hanya di ponsel kecil. Saya ingin itu dibungkus, bukan ditumpuk.
Halo yang disana,
Terima kasih telah menulis. Blok tidak akan membungkus teks di sekitar gambar di WordPress seperti yang Anda harapkan. Silakan lihat petunjuk berikut karena mungkin bermanfaat bagi Anda: https://motopress.com/blog/how-to-wrap-text-around-images-in-gutenberg/
Salam!
Zlatko
tim AIT
Saya melakukan semua itu, dan blog saya dibungkus dengan sempurna di Pratinjau. Ketika saya menerbitkannya, itu terlihat bagus di halaman blog saya. Namun ketika WordPress mengirimkannya melalui email ke pengikut saya, dan mereka membuka email itu, mereka tidak melihatnya terbungkus. Foto ada di atas teks. Ini terlihat sangat tidak profesional. Saya tidak pernah mengalami masalah dengan Editor Klasik lama. Sekarang saya menggunakan Editor Blok, saya tidak dapat kembali ke Editor Klasik meskipun ada opsi Klasik untuk diklik.
Halo yang disana,
Terima kasih telah menulis.
Kami ingin meminta Anda untuk memeriksa basis pengetahuan dan/atau dokumentasi kami dengan tutorial video:
https://www.ait-themes.club/ait-themes-documentation/
Atau jangan ragu untuk memposting pertanyaan teknis langsung di sistem tiket dukungan khusus kami. Silakan masuk ke akun Anda di https://system.ait-themes.club/support/add-question.
Dukungan Pelanggan diberikan selama hari kerja dari pukul 08.00 hingga 17.00 Waktu Eropa Tengah.
Selain itu, ada plugin yang memungkinkan Anda menggunakan editor sebelumnya. Anda harus menginstal dan mengaktifkan "Editor klasik".
Sungguh-sungguh!
Zlatko
tim AIT
Saya tidak setuju ini lebih unggul daripada pengeditan klasik, karena opsinya lebih terbatas. Saya menemukan bahwa blok ini, karena menggunakan font yang berbeda dan lebih lebar dari blok teks, secara visual menggelegar. Mampu membungkus teks dengan lancar di sekitar gambar sambil mempertahankan font dan ukuran serta pengaturan margin yang sama menghadirkan profesionalisme halaman majalah. Ini hanyalah salah satu contoh mengapa saya sangat kecewa dengan versi wordpress ini.
Hai Terence
Terima kasih atas pendapat Anda. Sudahkah Anda mencoba versi uji coba Citadela kami? Kami memiliki beberapa blok unik yang dapat membantu Anda menyesuaikan teks dan gambar. Bagaimanapun, Anda dapat menguji versi lengkap – semua fitur, gratis.
Semoga harimu menyenangkan.