4 Cara Membungkus Teks Di Sekitar Imej dalam WordPress

4 Cara Membungkus Teks Di Sekitar Imej dalam WordPress

Adakah anda perlu meletakkan teks di sekeliling imej dengan cara yang elegan? Ketahui cara melakukannya dengan mudah tanpa pengalaman pengekodan dan reka bentuk. Editor Gutenberg membawa lebih banyak pilihan untuk membungkus teks di sekitar teks dalam WordPress.

Anda boleh mencapai tapak web yang kelihatan baik dan rutin kandungan penyuntingan yang mudah secara serentak. Memilih editor Gutenberg untuk laman web WordPress anda memberikan anda alat terbaik dari pandangan jangka panjang. Anda akan mempunyai lebih banyak pilihan untuk membungkus teks pada imej secara berbeza. Gutenberg membawa banyak kelebihan seperti kod sumber laman web yang lebih jelas, kelajuan, keselamatan dan kebolehgunaan.

Muat turun Tema & Pemalam Citadela WordPress

Mulakan sekarang dengan percubaan tanpa risiko. Tiada kad kredit diperlukan.

Bagaimana untuk membungkus teks di sekeliling imej dalam WordPress?

Editor dan sekatan Gutenberg menjadikan kandungan tapak web lebih ringan, moden dan mudah dibaca. Kami menunjukkan kepada anda lebih banyak cara bagaimana untuk membungkus teks di sekeliling imej dalam WordPress Pages, Post dan jenis Post Custom juga. Terdapat blok yang berbeza, dan anda boleh menggunakannya juga dalam kombinasi, sebagai satu set bahagian dan ciri yang memberi anda pilihan tambahan untuk balut.

Anda boleh memilih blok untuk teks yang dibalut di sekeliling imej mengikut subhalaman dan jenis kandungannya. Anda boleh memilih satu gaya untuk halaman pembentangan dan satu lagi untuk catatan blog. Juga, pertimbangkan jenis kandungan yang mewakili imej. Adakah ia imej penerangan atau lebih mewakili atau media jualan?

Balut Teks Di Sekitar Imej – Pilihan Sekat

Terdapat 4 blok yang boleh anda gunakan untuk membalut blok teks di sekeliling imej. Kami menerangkan kesemuanya:

  • Blok imej dan blok Perenggan dapatkan lebih banyak di bawah
  • Blok Media & Teks temui lebih lanjut di bawah
  • Blok lajur dalam jawatan individu
  • Blok kluster dalam siaran individu (ciri tersedia hanya dengan pemalam Citadela Pro)

Balut teks dan imej untuk pengalaman membaca yang lebih baik

Terdapat beberapa sebab mengapa anda perlu menggunakan blok ini. Anda akan sangat menghargainya jika anda menulis catatan blog. Imej adalah sebahagian daripada cerita. Tidak kira sama ada anda menulis blog perjalanan atau majalah tentang berita IT. Jadi apabila menambah foto dalam kandungan anda, fikirkan tentang penjajaran imej. Pembaca akan dapat memahami dengan lebih baik perkara yang anda tulis.

Dalam kebanyakan kes, imej dan teks perlu disisipkan secara bersebelahan. Apa yang penting?

  • Ia perlu masuk akal. Imej mesti berada di sebelah teks yang betul.
  • Ia perlu diselaraskan dengan baik.
  • Ia mesti sesuai dengan keseluruhan susun atur tapak web.

Blok Imej dan Perenggan

Teks yang dililitkan pada imej dalam editor WordPress klasik
Contoh teks yang tidak kelihatan cantik yang membungkus imej

Semasa di Editor klasik anda juga boleh meletakkan teks di sebelah imej, anda tidak boleh bercakap tentang penjajaran yang bagus. Terutama jika imej kecil dan anda meletakkan lebih banyak teks di sebelahnya. Teks menindih imej dan ia tidak kelihatan bagus.

Editor Gutenberg dan blok Imejnya membawa ciri hebat - saiz semula imej. Seret titik di sekeliling imej untuk menukar saiz dan penjajaran teksnya secara automatik.

Balut teks di sekeliling Imej menggunakan Gutenberg Image and Paragraph Blocks
Ubah saiz imej dan pilih penjajaran

Blok Media & Teks – WordPress menyelaraskan teks di sebelah imej

Bagaimana untuk menyelaraskan teks di sebelah imej?

Mulakan sekarang

Mulakan sekarang dengan percubaan tanpa risiko. Tiada kad kredit diperlukan.

Blok Media & Teks ialah ciri yang hebat. Blok Media & Teks menyelesaikan isu ini dan memastikan penjajaran sempurna teks ke imej tanpa gangguan komposisi dan reka letak. Itulah sebab anda harus menggunakan blok ini.

Ia juga menambah baik reka bentuk tapak web pada peranti mudah alih. Blok pembalut ini membantu tema WordPress merangkumi reka letak mudah alih yang berbeza. Pada telefon pintar, setiap bahagian tapak web mestilah jelas kelihatan dan boleh dibaca. Bagaimanakah rupa blok Media & Teks pada telefon mudah alih dan jadual mengendalikan fungsi "Timbunan pada mudah alih" yang akan kita lihat di bawah.

Dalam masa yang singkat, anda akan dapat menggunakan blok Media & Teks dalam tema WordPress baharu kami yang dipanggil Citadela. Ketahui lebih lanjut tentang tema Citadela dalam artikel berasingan.

Bagaimana untuk menambah blok Media & Teks dalam editor blok?

Menambah blok Media & Teks semudah menambah blok lain. Ia adalah blok teras yang bermakna anda tidak perlu memuat turun atau memasang apa-apa.

Menggunakan ikon "+" di panel atas atau di mana-mana dalam editor dan memilih blok Media & Teks.

Tambah blok Media dan Teks dengan mengklik pada "+"
Menambah blok Media & Teks dengan mengklik pada "+"

Pilihan terakhir ialah taip "/" dan tulis "media" selepas itu. WordPress secara automatik akan menunjukkan kepada anda blok terpilih yang sepadan dengan apa yang anda cari.

Tambah blok Media dan Teks menggunakan slash
Menambah blok media & teks menggunakan garis miring “/”

Bagaimanakah blok Media & Teks berfungsi?

Blok Media & Teks pada asasnya mengumpulkan 2 jenis kandungan yang berbeza menjadi satu. Yang pertama ialah medium cth imej atau video yang boleh anda tambah melalui:

  • Muat naik
  • Perpustakaan Media
  • Seret & Lepas
Pilihan muat naik blok Media dan Teks
Lihat betapa mudahnya anda boleh memuat naik imej menggunakan seret & lepas

Yang kedua ialah ruang untuk kandungan teks. Anda boleh menulis di sana perenggan teks, senarai titik tumpu atau tajuk. Anda juga boleh menambah di sana Blok butang yang kita bincangkan tadi.

Kawasan teks blok Media dan Teks
Dalam kawasan teks anda boleh menambah pelbagai jenis kandungan

Blok Media & Teks sentiasa menjajarkan imej dan teks bersebelahan tidak kira berapa banyak teks yang anda tulis. Bagaimanakah ia berfungsi? Imej melaraskan sendiri secara automatik berdasarkan ketinggian kandungan dalam lajur teks.

Penjajaran imej dalam blok Media dan Teks
Contoh penjajaran imej dan teks

Tetapan Sekat Media & Teks

Tetapan blok umum

1. Bar alat atas

Bar alat di atas blok menawarkan beberapa pilihan. Jika tema aktif anda menyokongnya, anda boleh menetapkan blok Media & Teks sebagai lebar atau lebar penuh. Anda juga boleh memilih di mana anda ingin meletakkan imej atau video dengan mengklik pada:

  • Tunjukkan media di sebelah kiri
  • Tunjukkan media di sebelah kanan
Menukar penjajaran imej dan teks
Dengan mengklik pada ikon bar alat anda boleh menukar penjajaran imej & teks serta kedudukannya

Di bahagian atas bar alat terdapat juga ikon untuk mengedit medium di mana anda boleh menetapkan Teks Alt, Tajuk, Kapsyen atau Penerangan. Ketahui lebih lanjut tentang mengedit imej dalam artikel kami Bekerja dengan blok Imej WordPress.

2. Bar sisi kanan

Bar sisi kanan menawarkan tetapan tambahan untuk blok Media & Teks. Anda boleh menambah di sini Teks alternatif, menetapkan warna latar belakang atau menambah Kelas CSS Tambahan. Anda juga boleh mendayakan fungsi "Timbunan pada mudah alih".

Tetapan warna latar belakang
Perubahan warna latar belakang yang licin

Apakah Stack pada mudah alih?

Terima kasih kepada fungsi ini imej dan teks dipaparkan dengan baik pada peranti mudah alih. Jika anda melumpuhkan "Timbunan pada mudah alih", imej dan teks akan kekal bersebelahan dan ia sukar dibaca dalam versi responsif.

Jika anda mendayakan fungsi ini, pada telefon bimbit kandungan di sebelah kiri akan dipaparkan di atas kandungan yang berada di sebelah kanan.

Tumpukan pada fungsi mudah alih untuk teks balut WordPress di sekeliling imej
Pratonton tapak web pada peranti mudah alih dengan ciri yang didayakan "Timbunan pada mudah alih"

Penjajaran teks

Sebahagian daripada blok Media & Teks adalah bersama-sama dengan imej atau video serta kandungan teks. Ia boleh menjadi salah satu daripada jenis kandungan berikut:

1. Perenggan

Dalam bar alat atas anda boleh menetapkan penjajaran teks, menjadikan teks tebal, condong atau menambah pautan URL.

Memformat perenggan dalam blok Media dan Teks
Pilihan pemformatan untuk teks

Di bar sisi di sebelah kanan anda boleh memilih saiz fon, warna fon atau warna perenggan. Ciri menarik ialah "Drop Cap" yang akan menyerlahkan aksara pertama teks. Ia adalah ciri yang bagus dalam siaran blok untuk menjadikan teks lebih menarik.

Ciri "Drop Cap".
Menyerlahkan teks dengan fungsi "Drop Cap".

2. Tajuk

Tajuk sangat serupa dengan Perenggan. Anda juga boleh mengkonfigurasi rupanya, membuat tebal atau condong dan memasukkan pautan URL. Perbezaannya ialah anda boleh memilih jenis tajuk - H2, H3, H4.

Pilihan tajuk untuk blok Media dan Teks
Pilihan tajuk

Saiz tajuk dan tetapan penjajaran lain tersedia di bar sisi di sebelah kanan.

3. Senaraikan

Jika anda menambah blok Senarai pada kandungan anda, ia boleh menjadi titik tumpu, senarai bernombor atau senarai berbilang peringkat. Anda juga boleh membuat teks tebal, condong dan menambah pautan URL.

Senaraikan pilihan dalam blok Media dan Teks
Senaraikan pilihan kawasan teks anda

4. Blok butang

Blok yang menambah butang pada kandungan ini boleh dilaraskan kepada reka bentuk tapak web. Warna butang dan gaya atau warna latar belakang boleh dikonfigurasikan dalam bar sisi di sebelah kanan.

Pilihan butang dalam blok Media dan Teks
Pilihan untuk gaya butang

Jangan lupa baca artikel tentang Blok butang. 

Bertukar antara jenis blok

Dalam blok Media & Teks adalah mungkin untuk menukar satu jenis blok kandungan kepada yang lain. Anda juga boleh menukar blok Media & Teks kepada blok Imej dan bahagian teks akan dipadamkan.

Bertukar antara jenis blok
Menukar blok Media & Teks kepada blok lain

Dalam kandungan teks adalah mungkin untuk menukar blok Perenggan kepada Tajuk atau blok Senarai.

Menukar blok Perenggan
Menukar blok Perenggan kepada blok lain

Bonus: Bagaimana untuk mewajarkan teks dalam WordPress

Menggunakan teks yang dibenarkan mempunyai positif dan negatifnya. Teks yang dibenarkan biasanya boleh didapati dalam buku atau akhbar tetapi ia tidak digunakan di tapak web lagi. kenapa?

Beberapa tahun yang lalu ialah fungsi Justify disepadukan betul-betul di dalam editor WordPress Classic. Teks dibenarkan yang digunakan untuk menyebabkan masalah keterlihatan dalam pelbagai penyemak imbas atau peranti mudah alih. Ia juga berkaitan dengan kebolehbacaan yang sukar bagi teks yang dibenarkan. Oleh itu fungsi ini telah ditamatkan dan dialih keluar.

Fungsi tertentu ini tidak wujud dalam editor blok baharu (Gutenberg).

Jadi bagaimana anda mewajarkan teks jika anda benar-benar mahu?

Penyelesaian ialah menambah kod CSS mudah dalam beberapa langkah:

  1. Terdapat tetapan untuk blok Perenggan Kelas CSS Tambahan di bar sisi di sebelah kanan
  2. Tulis di sana nama kelas „mewajarkan
  3. Terbitkan halaman atau artikel
  4. Jika anda Pratonton, klik pada Sesuaikan di bar atas utama
  5. Di sebelah kiri terdapat bar sisi baharu dengan tetapan
  6. Klik pada CSS Tambahan
  7. Masukkan kod CCS berikut:
p.justify { text-align: justify; }
Wajarkan teks dengan CSS tersuai
Cara mewajarkan teks dalam blok menggunakan kod tersuai

Selesai. Mulai sekarang adalah wajar teks dalam Blok Media & Teks anda.

WordPress telah menjadi lebih boleh digunakan tanpa pembangun halaman pihak ketiga, terima kasih kepada editor Gutenberg. Ia mempunyai nilai yang sangat baik untuk tapak web anda dari sudut pandangan jangka panjang dan semasa membuat atau mereka bentuk semula tapak web. Blok Gutenberg memberikan pelbagai gaya namun anda mungkin dapati Kod WordPress untuk membungkus teks di sekeliling imej.

Muat turun Tema & Pemalam Citadela WordPress

Mulakan sekarang dengan percubaan tanpa risiko. Tiada kad kredit diperlukan.

Apakah pendapat anda tentang blok Media & Teks? Adakah anda sudah menggunakannya? Bagaimanakah anda suka bekerja dengannya? Beritahu kami dalam ulasan di bawah.

19 memikirkan "4 Ways to Wrap Text Around Image in WordPress"

  1. Secara amnya saya suka sistem blok tetapi melainkan saya kehilangan sesuatu ini adalah langkah ke belakang. Saya sedang mencari untuk mengapungkan imej ke kiri atau kanan dan mendapatkan teks untuk dibalut kerana sepatutnya sangat mudah dilakukan tetapi nampaknya WordPress tidak mahu perkara itu berlaku. Kenapa tidak? Menggunakan media dan blok imej hanya berfungsi jika teks adalah panjang yang betul. Halaman seperti ini misalnya tidak mahu dibuat semula dengan jarak ganjil antara perenggan jika teks tidak betul-betul panjang yang sesuai untuk saiz imej.

    http://www.thorntonincraven.co.uk/our-village/welcome-to-the-village/

    1. Apa khabar di sana,

      terima kasih banyak atas maklum balas anda. Kedengarannya idea yang sangat bagus, oleh itu saya ingin meminta anda memberi kami satu minit masa anda untuk menjawab 4 soalan mudah: https://aitthemes.typeform.com/to/vc7arn yang boleh membantu pasukan kami membuat produk yang lebih baik dengan ciri unik lebih cepat.

      Terima kasih banyak atas masa dan pemahaman anda.

      Salam hormat!
      Zlatko
      pasukan AIT

    2. Ya, saya tidak boleh mendapatkan teks untuk dibungkus. Gabungan blok teks ini nampaknya tidak berguna.

  2. Idea ini adalah satu-satunya cara untuk memasukkan gambar ke dalam blog – saya tidak dapat membungkus teks dengan baik dan saiznya tidak sama tidak kira apa yang saya lakukan. Idea yang baik untuk situasi TERTENTU, tetapi bukan untuk semuanya. Kadang-kadang anda hanya mahukan gambar dengan perenggan yang membungkusnya, dan bukannya mengatakan sesuatu tentang gambar itu.

  3. Bagaimana untuk menambah pembungkus dan menggunakan kandungan dalam lebar penuh yar serius bagaimana untuk menutup penuh dengan kemudian mengambil bekas di dalamnya.. pembina sangat mengelirukan bagaimana menambah bekas bungkus bungkus editor yang sangat buruk yar

  4. Apa khabar di sana,

    terima kasih atas pujian anda. Jangan ragu untuk menyemak halaman blog kami https://www.ait-themes.club/blog/ di mana anda akan menemui banyak petua berguna cara menulis siaran yang menarik dan berguna.

    Salam hormat!
    Zlatko
    pasukan AIT

  5. Hello Abdur,

    Terima kasih banyak atas maklum balas anda, ia amat dihargai oleh pasukan kami!

    Selamat sejahtera.
    Zlatko
    pasukan AIT

  6. Saya mengalami kesukaran yang sama seperti beberapa orang lain di thread ini. pada masa lalu, saya dapat dengan mudah membungkus teks di sekeliling imej seperti dalam halaman "tentang kami" di mana kami mempunyai gambar dan bio. mungkin saya menggunakan editor lama. saya tak ingat. tetapi, saya kini cuba mengemas kini tapak kami dengan gambar dan bio baharu dan tidak dapat mencari cara untuk membungkus teks dengan mudah seperti pada gabungan bio/gambar kami sebelum ini. Saya cuba menukar kepada editor klasik, tetapi tapak itu memberi amaran kepada saya bahawa saya mempunyai bahagian "editor blok baharu" dan saya terpaksa kekal dengan mod pengeditan yang lebih baharu. bolehkah anda beritahu saya bagaimana untuk membuat biografi dan gambar baharu kami kelihatan seperti siaran kami yang terdahulu? terima kasih.

    1. hai,

      Jika anda ingin melumpuhkan Gutenberg dan meneruskan dengan editor WordPress klasik, sila pertimbangkan pemalam oleh pasukan teras WordPress yang membolehkan anda melakukannya dengan "Pemalam Editor Klasik".

      Selamat sejahtera!
      Zlatko
      pasukan AIT

  7. Bagi mereka yang hanya mahukan teks ringkas yang membungkus imej, anda boleh melakukannya dengan memasukkan Blok Teks Klasik (berdasarkan bahagian pertama Blok apabila anda mengklik Semak Imbas. Anda boleh menggunakan editor klasik dalam satu blok dan ya , yang membolehkan anda memasukkan imej dan kemudian memilih pilihan pembalut. Masalah selesai 🙂

    1. TERIMA KASIH London SEO Guy!!! Penyelesaian yang mudah tetapi saya telah terlepas pandang!

    2. Dan kemudian… hanya gunakan pilihan Tukar kepada Blok.
      Memandangkan ini berfungsi, Editor Blok mempunyai keupayaan tetapi tidak dapat mencari cara untuk menyediakannya dengan betul. Sementara itu, fudge ini berfungsi.

  8. Masalah yang sama di sini. Versi baharu ini sungguh mengerikan– tiada cara untuk membalut teks dengan betul atau malah menjadikan foto lebih kecil, melainkan anda hanya mahu memangkas.

  9. Saya dapat membungkus teks saya di sekeliling gambar dalam editor blok WordPress. Ia kelihatan seperti yang saya mahu ia kelihatan dalam "Pratonton." Walau bagaimanapun, apabila saya menerbitkan blog saya dan WordPress menghantar e-mel kepada pengikut saya, mereka menerimanya dengan gambar di atas dan teks di bawah gambar. Ini berlaku pada komputer meja juga, bukan hanya pada telefon bimbit kecil. Saya mahu ia dibungkus, bukan disusun.

    1. Apa khabar di sana,

      Terima kasih kerana menulis. Blok tidak akan membungkus teks di sekeliling imej dalam WordPress seperti yang anda jangkakan. Sila lihat arahan berikut kerana anda mungkin mendapati ia berguna: https://motopress.com/blog/how-to-wrap-text-around-images-in-gutenberg/

      Selamat sejahtera!
      Zlatko
      pasukan AIT

      1. Saya melakukan semua itu, dan blog saya dibungkus dengan sempurna dalam Pratonton. Apabila saya menerbitkannya, ia kelihatan hebat di halaman blog saya. Tetapi apabila WordPress menghantar e-mel kepada pengikut saya, dan mereka membuka e-mel itu, mereka tidak melihatnya dibungkus. Foto berada di atas teks. Ia kelihatan sangat tidak profesional. Saya tidak pernah mengalami masalah itu dengan Editor Klasik lama. Sekarang saya menggunakan Editor Blok, ia tidak akan membenarkan saya kembali ke Editor Klasik walaupun terdapat pilihan Klasik untuk diklik.

        1. Apa khabar di sana,

          Terima kasih kerana menulis.
          Kami ingin meminta anda menyemak pangkalan pengetahuan dan/atau dokumentasi kami dengan tutorial video:
          https://www.ait-themes.club/ait-themes-documentation/
          Atau sila hantar soalan teknikal secara terus dalam sistem tiket sokongan khusus kami. Sila log masuk ke akaun anda di https://system.ait-themes.club/support/add-question.
          Sokongan Pelanggan disediakan semasa hari bekerja dari 8 pagi hingga 5 petang Waktu Eropah Tengah.

          Di samping itu, terdapat pemalam yang membolehkan anda menggunakan editor sebelumnya. Anda harus memasang dan mengaktifkan "Editor klasik".

          Ikhlas!
          Zlatko
          pasukan AIT

  10. Saya tidak bersetuju ini lebih baik daripada penyuntingan klasik, kerana pilihannya lebih terhad. Saya mendapati bahawa blok ini, kerana ia menggunakan fon yang berbeza dan lebih luas daripada blok teks, secara visual mengganggu. Mampu membungkus teks dengan lancar di sekeliling imej sambil mengekalkan fon dan saiz serta tetapan margin yang sama membawa profesionalisme halaman majalah. Ini hanyalah satu contoh mengapa saya sangat kecewa dengan versi wordpress ini.

    1. Hai Terence

      terima kasih atas pendapat anda. Pernahkah anda mencuba versi percubaan Citadela kami? Kami mempunyai beberapa blok unik yang mungkin membantu anda melaraskan teks dan imej. Bagaimanapun, anda boleh menguji versi penuh - semua ciri, secara percuma.

      Semoga hari anda indah.

Ruangan komen telah ditutup.