4 veidi, kā WordPress sistēmā ietīt tekstu ap attēlu

4 veidi, kā WordPress sistēmā ietīt tekstu ap attēlu

Vai jums ir nepieciešams eleganti izvietot tekstu ap attēlu? Uzziniet, kā to viegli izdarīt bez programmēšanas un dizaina pieredzes. Gutenberg redaktors piedāvā vairāk iespēju, kā WordPress apvilkt tekstu ap tekstu.

Jūs varat vienlaicīgi izveidot labi izskatīgu vietni un viegli rediģēt saturu. Izvēloties Gutenberg redaktoru savai WordPress vietnei, jūs iegūsiet vislabāko rīku no ilgtermiņa viedokļa. Jums būs vairāk iespēju dažādi ietīt tekstu ap attēliem. Gutenberg sniedz daudzas priekšrocības, piemēram, skaidrāku tīmekļa vietnes pirmkodu, ātrumu, drošību un lietojamību.

Lejupielādēt CitadelaWP WordPress tēmu un spraudņus

Vienreizējs maksājums. 90 dienu naudas atmaksas garantija.

Kā ietīt tekstu ap attēlu WordPress sistēmā?

Gutenberg redaktors un bloki padara vietnes saturu vieglāku, modernāku un viegli lasāmu. Mēs parādīsim jums vairāk veidu, kā ietīt tekstu ap attēlu arī WordPress lappušu, ziņu un pielāgoto ziņu tipos. Ir dažādi bloki, un tos var izmantot arī kombinācijās, kā daļu un funkciju kopumu, kas sniedz papildu iespējas apvijumam.

Ap attēliem ietītā teksta bloku varat izvēlēties atbilstoši apakšlapai un tās satura tipam. Varat izvēlēties vienu stilu prezentācijas lapai un citu - emuāra ierakstam. Apsveriet arī to, kāda veida saturs attēlo attēlu. Vai tas ir apraksta attēls vai vairāk reprezentatīvs vai pārdošanas medijs?

Apvīt tekstu ap attēlu - Bloķē atlasi

Ir 4 bloki, kurus varat izmantot, lai ap attēlu apvilktu teksta bloku. Mēs tos visus aprakstām:

Teksta un attēla iesaiņošana labākai lasīšanas pieredzei

Ir vairāki iemesli, kāpēc jums vajadzētu izmantot šo bloku. Visvairāk to novērtēsiet, ja rakstāt bloga ierakstus. Attēli ir neatņemama stāsta sastāvdaļa. Nav svarīgi, vai rakstāt ceļojumu blogu vai žurnālu par IT jaunumiem. Tāpēc, pievienojot attēlus satura iekšpusē, padomājiet par attēlu izlīdzināšanu. Lasītāji varēs labāk saprast, par ko jūs rakstāt.

Daudzos gadījumos ir nepieciešams ievietot attēlu un tekstu blakus. Kas ir svarīgi?

  • Tam ir jābūt jēgpilnam. Attēlam jābūt blakus pareizajam tekstam.
  • Tam ir jābūt labi izlīdzinātam.
  • Tam ir jāatbilst visam vietnes izkārtojumam.

Attēlu un punktu bloki

Teksta ietīšana ap attēlu klasiskajā WordPress redaktorā
Piemērs par ne pārāk jauku izskatu tekstu, kas ietīts attēlā

Kamēr Klasiskais redaktors jūs varētu arī novietot tekstu blakus attēlam, jūs nevarētu runāt par jauku izlīdzināšanu. Īpaši, ja attēls bija mazs un blakus tam novietojāt vairāk teksta. Teksts pārklāja attēlu, un tas neizskatījās skaisti.

Gutenberg redaktors un tās blokam Attēls ir lieliska funkcija - attēlu izmēru maiņa. Velciet punktus ap attēlu, lai automātiski mainītu tā izmēru un teksta izlīdzināšanu.

Aptiniet tekstu ap attēlu, izmantojot Gutenberg attēlu un punktu blokus
Mainiet attēla izmēru un izvēlieties izlīdzināšanu

Mediju un teksta bloks - WordPress izlīdzina tekstu blakus attēlam

Kā izlīdzināt tekstu blakus attēlam?

Sākt tagad

Vienreizējs maksājums. 90 dienu naudas atmaksas garantija.

Multivides un teksta bloks ir fantastiska funkcija. Mediju un teksta bloks atrisina šo problēmu un nodrošina perfektu teksta izlīdzināšanu ar attēlu, netraucējot kompozīciju un izkārtojumu. Tas ir iemesls, kāpēc jums vajadzētu izmantot šo bloku.

Tas uzlabo vietnes dizainu arī mobilajās ierīcēs. Šis ietīšanas bloks palīdz WordPress tēmai aptvert dažādus mobilo ierīču izkārtojumus. Viedtālrunī katrai vietnes daļai jābūt skaidri redzamai un salasāmai. Kā multivides un teksta bloks izskatīsies mobilajos tālruņos, un tabula apstrādā funkciju "Sakraut mobilajā ierīcē", ko aplūkosim tālāk.

Pēc neilga laika jūs varēsiet izmantot Media & Text bloku mūsu jaunajā WordPress tēmā ar nosaukumu Citadela. Uzziniet vairāk par Citadela tēmu atsevišķā rakstā.

Kā bloku redaktorā pievienot mediju un teksta bloku?

Mediju un teksta bloka pievienošana ir tikpat vienkārša kā jebkura cita bloka pievienošana. Tas ir bloka kodols, kas nozīmē, ka jums nav nepieciešams neko lejupielādēt vai instalēt.

Izmantojot ikonu "+" augšējā panelī vai jebkurā redaktora vietā un izvēloties bloku Media & Text.

Pievienot multivides un teksta bloku, noklikšķinot uz "+".
Mediju un teksta bloka pievienošana, noklikšķinot uz "+"

Pēdējā iespēja ir ierakstīt "/" un pēc tam rakstīt "media". WordPress automātiski parādīs atlasītos blokus, kas atbilst meklētajai informācijai.

Mediju un teksta bloka pievienošana, izmantojot slīpsvītru
Mediju un teksta bloka pievienošana, izmantojot slīpsvītru "/"

Kā darbojas mediju un teksta bloks?

Mediju un teksta bloks būtībā apvieno 2 dažādus satura veidus vienā. Pirmais ir medijs, piemēram, attēls vai videoklips, ko varat pievienot, izmantojot:

  • Augšupielādēt
  • Mediju bibliotēka
  • Velciet un nometiet
Multivides un teksta bloku augšupielādes opcijas
Paskatieties, cik viegli varat augšupielādēt attēlu, izmantojot vilkšanu un nomešanu.

Otrā ir vieta teksta saturam. Tajā var rakstīt teksta rindkopas, punktu sarakstus vai virsrakstus. Varat arī pievienot Pogu bloks par ko mēs runājām iepriekš.

Mediju un teksta bloka teksta apgabals
Teksta apgabalā varat pievienot dažāda veida saturu.

Multivides un teksta bloks vienmēr izlīdzina attēlu un tekstu blakus neatkarīgi no tā, cik daudz teksta rakstāt. Kā tas darbojas? Attēls automātiski pielāgojas atkarībā no teksta slejas satura augstuma.

Attēlu izlīdzināšana blokā Mediji un teksts
Attēlu un teksta izlīdzināšanas piemērs

Mediju un teksta bloku iestatījumi

Vispārīgie bloka iestatījumi

1. Augšējā rīkjosla

Rīkjosla virs bloka piedāvā vairākas opcijas. Ja jūsu aktīvā tēma to atbalsta, varat iestatīt mediju un teksta bloku kā platu vai pilnu platumu. Varat arī izvēlēties, kur vēlaties izvietot attēlu vai videoklipu, noklikšķinot uz:

  • Rādīt multivides kreisajā pusē
  • Rādīt multivides labajā pusē
Attēlu un teksta izlīdzināšanas maiņa
Noklikšķinot uz rīkjoslas ikonām, varat mainīt attēlu un teksta izlīdzināšanu un pozīciju.

Augšējā rīkjoslā ir arī ikona rediģēt mediju, kurā varat iestatīt Alt Text, Title, Caption vai Description. Uzziniet vairāk par attēlu rediģēšanu mūsu rakstā Darbs ar WordPress attēlu bloku.

2. Labā sānu josla

Labajā sānjoslā ir pieejami papildu iestatījumi blokam Media & Text. Šeit ir iespējams pievienot alternatīvu tekstu, iestatīt fona krāsu vai pievienot papildu CSS klasi. Varat arī aktivizēt funkciju "Stack on mobile".

Fona krāsas iestatījumi
Gluda fona krāsas maiņa

Kas ir kaudze mobilajā ierīcē?

Pateicoties šai funkcijai, attēls un teksts ir labi redzams mobilajās ierīcēs. Ja izslēgsiet funkciju "Stack on mobile", attēls un teksts paliks blakus, un responsīvajā versijā tas būs grūti salasāms.

Ja iespējosiet šo funkciju, mobilajā tālrunī kreisajā pusē esošais saturs tiks rādīts virs labajā pusē esošā satura.

Kūka uz mobilo funkciju WordPress wrap tekstu ap attēlu
Tīmekļa vietnes priekšskatījums mobilajā ierīcē ar iespējotu funkciju "Stack on mobile"

Teksta izlīdzināšana

Mediju un teksta bloka daļa kopā ar attēlu vai video ir arī teksta saturs. Tas var būt viens no šādiem satura veidiem:

1. Punkts

Augšējā rīkjoslā varat iestatīt teksta izlīdzināšanu, tekstu padarīt treknrakstā, slīprakstā vai pievienot URL saiti.

Rindkopas formatēšana blokā Media un Teksts
Teksta formatēšanas opcijas

Sānu joslā labajā pusē varat izvēlēties fonta lielumu, fonta krāsu vai rindkopas krāsu. Interesanta funkcija ir "Drop Cap", kas izceļ teksta pirmo rakstzīmi. Tā ir jauka funkcija bloku ziņojumos, lai padarītu tekstu interesantāku.

"Drop Cap" funkcija
Teksta izcelšana ar funkciju "Drop Cap"

2. Virsraksts

Virsraksts ir ļoti līdzīgs rindkopai. Varat arī konfigurēt tās izskatu, padarīt to treknrakstā vai slīprakstā un ievietot URL saiti. Atšķirība ir tāda, ka varat izvēlēties virsraksta veidu - H2, H3, H4.

Mediju un teksta bloka virsrakstu opcijas
Virsrakstu opcijas

Citi virsrakstu izmēri un izlīdzināšanas iestatījumi ir pieejami sānjoslā labajā pusē.

3. Saraksts

Ja pievienojat saturam sarakstu bloku, tas var būt ar punktiem, numurēts saraksts vai daudzlīmeņu saraksts. Varat arī tekstu padarīt treknrakstā, slīprakstā un pievienot URL saiti.

Saraksta opcijas blokā Media un Text
Teksta apgabala saraksta opcijas

4. Pogu bloks

Šo bloku, kas pievieno pogu saturam, var pielāgot vietnes dizainam. Pogas krāsu un stilu vai fona krāsu var konfigurēt sānjoslā labajā pusē.

Pogas opcijas blokā Media un Text
Pogas stila opcijas

Neaizmirstiet izlasīt rakstu par Pogu bloks. 

Bloku veidu pārslēgšana

Mediju un teksta blokā ir iespējams konvertēt vienu satura bloka tipu citā. Varat arī mainīt bloku Media & Text uz attēlu bloku, un teksta daļa tiks dzēsta.

Bloku veidu pārslēgšana
Multivides un teksta bloka pārveidošana citā blokā

Teksta saturā ir iespējams mainīt rindkopu bloku uz virsrakstu vai sarakstu bloku.

Rindkopas bloka konvertēšana
Rindkopas bloka pārveidošana citā blokā

Bonuss: Kā attaisnot tekstu WordPress

Pamatota teksta izmantošanai ir gan pozitīvas, gan negatīvas iezīmes. Pamatots teksts parasti ir atrodams grāmatās vai laikrakstos, bet tīmekļa vietnēs to vairs neizmanto. Kāpēc?

Pirms vairākiem gadiem bija Justify funkcija integrēta tieši iekšpusē WordPress Classic redaktors. Justificētais teksts radīja redzamības problēmas dažādās pārlūkprogrammās vai mobilajās ierīcēs. Tas ir saistīts arī ar sarežģītu pamatotā teksta lasāmību. Tāpēc šī funkcija tika novecojusi un izņemta.

Šī konkrētā funkcionalitāte nepastāv arī jaunajā bloku (Gutenberg) redaktorā.

Tātad, kā jūs attaisnot tekstu, ja jūs patiešām vēlaties?

Risinājums ir dažu soļu laikā pievienot vienkāršu CSS kodu:

  1. Labajā pusē sānjoslā ir iestatījums Papildu CSS klase rindkopas bloka sānjoslā.
  2. Ierakstiet tur klases nosaukumu "attaisnot"
  3. Publicēt lapu vai rakstu
  4. Ja to priekšskatāt, noklikšķiniet uz Pielāgot galvenajā augšējā joslā.
  5. Kreisajā pusē ir jauna sānjjosla ar iestatījumiem.
  6. Noklikšķiniet uz Papildu CSS
  7. Ievietojiet šādu CCS kodu:
p.justify {
    text-align: justify;
}
Teksta attaisnošana ar pielāgotu CSS
Veids, kā attaisnot tekstu blokā, izmantojot pielāgotu kodu

Paveikts. No šī brīža ir teksts jūsu Media & Text Block pamatots.

Pateicoties redaktoram Gutenberg, WordPress ir kļuvis ērtāk lietojams bez trešo pušu lapu konstruktoriem. Tas ir lieliski noderīgs jūsu tīmekļa vietnei no ilgtermiņa viedokļa, kā arī, veidojot vai pārveidojot tīmekļa vietni. Gutenberg bloki sniedz lielu stila klāstu, tomēr jūs varētu atrast roku WordPress kods teksta ietīšanas ap attēliem.

Lejupielādēt CitadelaWP WordPress tēmu un spraudņus

Vienreizējs maksājums. 90 dienu naudas atmaksas garantija.

Kāds ir jūsu viedoklis par mediju un teksta bloku? Vai jūs to jau izmantojat? Kā jums patīk ar to strādāt? Pastāstiet mums komentāros zemāk.

19 domāja par “4 Ways to Wrap Text Around Image in WordPress

  1. Kopumā man patīk bloku sistēma, taču, ja vien es kaut ko neizlaižu, šis ir solis atpakaļ. Pašlaik es cenšos vienkārši pludināt attēlu pa kreisi vai pa labi un iegūt tekstu, lai wrap, jo patiešām būtu tik viegli izdarīt, bet šķiet, WordPress vienkārši nevēlas, lai notiktu. Kāpēc ne? Multivides un attēla bloka izmantošana darbojas tikai tad, ja teksts ir pareizā garumā. Piemēram, šādu lapu nevēlas pārveidot ar neparastu atstarpi starp rindkopām, ja teksts nav tieši pareizā garumā attēla izmēram.

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

    1. Sveiki,

      liels paldies par jūsu atsauksmēm. Tā izklausās pēc ļoti labas idejas, tāpēc es vēlētos lūgt, lai jūs veltītu mums minūti sava laika un atbildētu uz 4 vienkāršiem jautājumiem: https://aitthemes.typeform.com/to/vc7arn, kas var palīdzēt mūsu komandai ātrāk izstrādāt labākus produktus ar unikālām funkcijām.

      Liels paldies par jūsu laiku un sapratni.

      Mīļie sveicieni!
      Zlatko
      AIT komanda

    2. Jā, es nevaru iegūt teksta ietīšanu. Šī teksta bloku kombinācija šķiet bezjēdzīga.

  2. Šī ideja ir apnicis kā vienīgais veids, kā ievietot bildes blogā - es nevaru iegūt tekstu, lai wrap skaisti, un tas nav vienāda izmēra neatkarīgi no tā, ko es daru. Laba ideja noteiktās situācijās, bet ne visās. Dažreiz jūs vienkārši vēlaties attēlu ar ap to ietītu rindkopu, nevis pateikt kaut ko par attēlu.

  3. Kā pievienot iesaiņojumu un izmantot saturu pilnā platumā yar nopietni, kā aptvert pilnu ar tad ņem konteineru tajā.. celtnieks ir ļoti mulsinoši, kā pievienot konteineru iesaiņojumu ļoti slikts redaktors yar

  4. Sveiki,

    paldies par komplimentiem. Meklējiet mūsu bloga lapu https://www.ait-themes.club/blog/, kur atradīsiet daudz noderīgu padomu, kā rakstīt pievilcīgus un noderīgus ierakstus.

    Mīļie sveicieni!
    Zlatko
    AIT komanda

  5. Sveiki, Abdur,

    Liels paldies par jūsu atsauksmēm, mūsu komanda tās ļoti novērtē!

    Ar sveicieniem.
    Zlatko
    AIT komanda

  6. Man ir tādas pašas grūtības kā vairākiem citiem cilvēkiem šajā pavedienā. agrāk, Man bija iespēja viegli wrap tekstu ap attēlu, piemēram, mūsu "par mums" lapā, kur mums ir bildes un bios. varbūt man bija, izmantojot veco redaktoru. Es neatceros. bet tagad es mēģinu atjaunināt mūsu vietni ar jaunām bildēm un biogrāfijām un nevarēju atrast veidu, kā viegli ietīt tekstu, kā tas bija mūsu iepriekšējās biogrāfiju un bilžu kombinācijās. Es mēģināju pārslēgties uz klasisko redaktoru, bet vietne mani brīdināja, ka man ir "jaunā bloka redaktora" sadaļas, un man bija jāpaliek pie jaunākā rediģēšanas režīma. vai jūs varat man pateikt, kā panākt, lai mūsu jaunās biogrāfijas un bildes izskatītos tāpat kā mūsu iepriekšējie ieraksti? paldies.

    1. Sveiki tur,

      Ja vēlaties atspējot Gutenberg un turpināt izmantot klasisko WordPress redaktoru, apsveriet WordPress kodola komandas spraudni, kas ļauj to izdarīt ar "Classic Editor Plugin".

      Sirsnīgi sveicieni!
      Zlatko
      AIT komanda

  7. Tiem, kuri vēlas tikai vienkāršu teksta ietīšanu ap attēlu, to var izdarīt, ievietojot klasisko teksta bloku (atrodas Bloku pirmajā daļā, kad noklikšķināt uz Pārlūkot. Jūs varat izmantot klasisko redaktoru vienā blokā, un, jā, tas ļauj jums ievietot attēlu un pēc tam izvēlēties ietīšanas opciju. Problēma atrisināta 🙂

    1. Un pēc tam... vienkārši izmantojiet opciju Konvertēt uz blokiem.
      Tā kā tas darbojas, bloku redaktoram ir šī iespēja, bet nevar atrast, kā to pareizi iestatīt. Pagaidām šis fudge darbojas.

  8. Tās pašas problēmas šeit. Šī jaunā versija ir briesmīga - nav iespējams pareizi ietīt tekstu vai pat samazināt fotoattēlu, ja vien nevēlaties to tikai apgriezt.

  9. Es varu ietīt savu tekstu ap attēlu WordPress bloka redaktorā. Tas izskatās tieši tā, kā es vēlos, lai tas izskatās "Priekšskatījums". Tomēr, kad es publicēju savu emuāru un WordPress to nosūta e-pastā saviem sekotājiem, viņi to saņem ar attēlu augšā un tekstu zem attēla. Tas notiek arī galddatoros, ne tikai mazajos mobilajos tālruņos. Es gribu, lai tas ir iesaiņots, nevis sakrauts.

    1. Sveiki,

      Paldies, ka rakstījāt. Bloks neaptin tekstu ap attēlu WordPress, kā jūs sagaidītu. Lūdzu, aplūkojiet šādus norādījumus, jo tie varētu jums noderēt: https://motopress.com/blog/how-to-wrap-text-around-images-in-gutenberg/.

      Sirsnīgi sveicieni!
      Zlatko
      AIT komanda

      1. Es to visu daru, un mans emuārs ir lieliski iesaiņots Preview programmā. Kad es to publicēju, tas izskatās lieliski mana emuāra lapā. Bet, kad WordPress to nosūta e-pastā maniem sekotājiem un viņi atver šo e-pastu, viņi to neredz iesaiņotu. Fotogrāfijas atrodas virs teksta. Tas izskatās ļoti neprofesionāli. Ar veco klasisko redaktoru man nekad nebija šādas problēmas. Tagad, kad izmantoju bloka redaktoru, tas neļauj man atgriezties pie klasiskā redaktora, lai gan ir iespēja Classic, uz kuras var noklikšķināt.

        1. Sveiki,

          Paldies, ka rakstījāt.
          Lūdzam pārbaudīt mūsu zināšanu bāzi un/vai dokumentāciju ar video pamācībām:
          https://www.ait-themes.club/ait-themes-documentation/
          Vai arī varat uzdot tehniskus jautājumus tieši mūsu speciāli izveidotajā atbalsta biļešu sistēmā. Lūdzu, autorizējieties savā kontā https://system.ait-themes.club/support/add-question.
          Klientu atbalsts tiek sniegts darba dienās no 8.00 līdz 17.00 pēc Centrāleiropas laika.

          Turklāt ir spraudnis, kas ļauj izmantot iepriekšējo redaktoru. Jums vajadzētu instalēt un aktivizēt "Classic Editor".

          Ar cieņu!
          Zlatko
          AIT komanda

  10. Es nepiekrītu, ka tas ir pārāks par klasisko rediģēšanu, jo iespējas ir ierobežotākas. Man šķiet, ka šis bloks, jo tajā tiek izmantoti dažādi fonti un tas ir platāks nekā teksta bloks, ir vizuāli pārsteidzošs. Iespēja vienmērīgi aptīt tekstu ap attēlu, saglabājot to pašu fontu, izmēru un malas iestatījumus, piešķir žurnāla lapai profesionalitāti. Šis ir tikai viens piemērs tam, kāpēc esmu dziļi vīlies šajā WordPress versijā.

    1. Sveiki, Terenss

      paldies par jūsu viedokli. Vai esat izmēģinājis mūsu Citadela izmēģinājuma versiju? Mums ir daži unikāli bloki, kas varētu palīdzēt jums pielāgot tekstu un attēlus. Jebkurā gadījumā jūs varat izmēģināt pilnu versiju - visas funkcijas, bez maksas.

      Jauku dienu.

Komentāri ir slēgti.