4 būdai, kaip apvynioti tekstą aplink paveikslėlį "WordPress

4 būdai, kaip apvynioti tekstą aplink paveikslėlį "WordPress

Ar reikia elegantiškai išdėstyti tekstą aplink paveikslėlį? Sužinokite, kaip tai padaryti lengvai, neturint kodavimo ir dizaino patirties. "Gutenberg" redaktorius suteikia daugiau galimybių apvynioti tekstą aplink tekstą "WordPress".

Vienu metu galite sukurti gerai atrodančią svetainę ir lengvai redaguoti turinį. Pasirinkę "Gutenberg" redaktorių savo "WordPress" svetainei gausite geriausią įrankį žvelgiant iš ilgalaikės perspektyvos. Turėsite daugiau galimybių kitaip apvynioti tekstą aplink paveikslėlius. Gutenberg suteikia daug privalumų, pavyzdžiui, aiškesnį svetainės pirminį kodą, greitį, saugumą ir patogumą.

Atsisiųsti CitadelaWP WordPress temą ir įskiepius

Vienkartinis mokėjimas. 90 dienų pinigų grąžinimo garantija.

Kaip apvynioti tekstą aplink paveikslėlį "WordPress"?

Dėl "Gutenberg" redaktoriaus ir blokų svetainės turinys tampa lengvesnis, modernesnis ir lengvai skaitomas. Parodysime daugiau būdų, kaip apvynioti tekstą aplink paveikslėlį "WordPress Pages", "Post" ir "Custom Post" tipuose. Yra įvairių blokų, juos taip pat galite naudoti kartu, kaip dalių ir funkcijų rinkinį, kuris suteikia papildomų apvyniojimo galimybių.

Aplink paveikslėlį esančio teksto bloką galite pasirinkti pagal tinklalapio ir jo turinio tipą. Vieną stilių galite pasirinkti pristatymo puslapiui, o kitą - tinklaraščio įrašui. Taip pat atsižvelkite į turinio, kuriame vaizduojamas paveikslėlis, rūšį. Ar tai yra aprašymo vaizdas, ar labiau reprezentacinė arba pardavimo medţiaga?

Apvynioti tekstą aplink paveikslėlį - blokų parinkimas

Yra 4 blokai, kuriuos galite naudoti teksto blokui aplink paveikslėlį apvynioti. Aprašome visus juos:

Apvyniokite tekstą ir paveikslėlį, kad geriau skaitytumėte

Yra keletas priežasčių, kodėl turėtumėte naudoti šį bloką. Labiausiai jį įvertinsite, jei rašote tinklaraščio įrašus. Vaizdai yra neatsiejama istorijos dalis. Nesvarbu, ar rašote kelionių tinklaraštį, ar žurnalą apie IT naujienas. Taigi pridėdami nuotraukas į turinio vidų, pagalvokite apie vaizdų lygiavimą. Skaitytojai galės geriau suprasti, apie ką rašote.

Daugeliu atvejų vaizdą ir tekstą reikia įterpti vieną šalia kito. Kas svarbu?

  • Tai turi būti prasminga. Vaizdas turi būti šalia tinkamo teksto.
  • Jis turi būti gražiai suderintas.
  • Jis turi atitikti visą svetainės išdėstymą.

Paveikslėlių ir pastraipų blokai

Klasikiniame "WordPress" redaktoriuje aplink paveikslėlį suvyniotas tekstas
Nelabai gražiai atrodančio teksto, kuriuo apgaubtas paveikslėlis, pavyzdys

Nors Klasikinis redaktorius taip pat galite patalpinti tekstą šalia paveikslėlio, negalite kalbėti apie gražų lygiavimą. Ypač jei paveikslėlis buvo mažas, o šalia jo įdėjote daugiau teksto. Tekstas uždengdavo vaizdą ir tai neatrodė gražiai.

Gutenbergo redaktorius ir jo blokas "Image" suteikia puikią funkciją - paveikslėlio dydžio keitimą. Vilkite taškus aplink paveikslėlį, kad automatiškai pakeistumėte jo dydį ir teksto lygiavimą.

Apvyniokite tekstą aplink paveikslėlį naudodami "Gutenberg" paveikslėlių ir pastraipų blokus
Pakeiskite vaizdo dydį ir pasirinkite lygiavimą

Žiniasklaidos ir teksto blokas - "WordPress" sulygiuoja tekstą šalia vaizdo

Kaip sulygiuoti tekstą šalia paveikslėlio?

Pradėkite dabar

Vienkartinis mokėjimas. 90 dienų pinigų grąžinimo garantija.

Žiniasklaidos ir teksto blokas yra fantastiška funkcija. "Media & Text" blokas išsprendžia šią problemą ir užtikrina puikų teksto ir paveikslėlio suderinimą, netrikdydamas kompozicijos ir išdėstymo. Dėl šios priežasties turėtumėte naudoti šį bloką.

Ji taip pat pagerina svetainių dizainą mobiliuosiuose įrenginiuose. Šis įvyniojamasis blokas padeda "WordPress" temai aprėpti skirtingus mobiliųjų įrenginių išdėstymus. Išmaniajame telefone kiekviena svetainės dalis turi būti aiškiai matoma ir įskaitoma. Kaip atrodys medijos ir teksto blokas mobiliuosiuose telefonuose ir lentelė tvarko funkciją "Stack on mobile", kurią apžvelgsime toliau.

Per trumpą laiką galėsite naudoti medijos ir teksto bloką mūsų naujoje "WordPress" temoje, pavadintoje Citadela. Daugiau apie Citadela temą sužinosite atskirame straipsnyje.

Kaip pridėti medijos ir teksto bloką blokų redaktoriuje?

Žiniasklaidos ir teksto bloką pridėti taip pat paprasta, kaip ir bet kurį kitą bloką. Tai pagrindinis blokas, todėl jums nereikia nieko atsisiųsti ar įdiegti.

Naudodami piktogramą "+" viršutiniame skydelyje arba bet kurioje redaktoriaus vietoje ir pasirinkdami Žiniasklaidos ir teksto bloką.

Žiniasklaidos ir teksto bloką pridėkite paspaudę "+".
Adding Media & Text block by clicking on “+”

Last option is to type “/“ and write “media” afterwards. WordPress will automatically shows you selected blocks matching what you searched for.

Žiniasklaidos ir teksto bloko pridėjimas naudojant pasvirąjį brūkšnį
Adding media & text block using slash “/”

Kaip veikia medijos ir teksto blokas?

Media & Text block basically groups 2 different types of content into one. The first one is medium e.g. image or video that you can add via:

  • Įkelti
  • Žiniasklaidos biblioteka
  • Drag & Drop
Žiniasklaidos ir teksto blokų įkėlimo parinktys
Look how easy you can upload an image using drag & drop

Second one is space for text content. You can write there paragraphs of text, bullet lists or title. You can also add there Mygtukų blokas that we were talking about earlier on.

Žiniasklaidos ir teksto bloko teksto sritis
In text area you can add different types of content

Media & Text block always align image and text side-by-side no matter how much text you write. How does it work? Image automatically adjusts itself based on content height in the text column.

Vaizdo išlyginimas medijos ir teksto bloke
Example of image and text alignment

Žiniasklaidos ir teksto blokų nustatymai

Bendrieji bloko nustatymai

1. Top toolbar

Toolbar above block offers several options. If your active theme supports that, you can set Media & Text block as wide or full width. You can also choose where you want to place image or video by clicking on:

  • Show media on left
  • Show media on right
Vaizdo ir teksto lygiavimo keitimas
By clicking on toolbar icons you can change image & text alignment and position of them

In the top toolbar there is also an icon to edit medium where you can set Alt Text, Title, Caption or Description. Learn more about editing images in our article Working with WordPress Image block.

2. Right sidebar

Right sidebar offers additional setting for Media & Text block. It’s possible to add here Alternative text, set background color or add Additional CSS Class. You can also enable there function “Stack on mobile”.

Fono spalvos nustatymai
Smooth background color change

What is Stack on mobile?

Thanks to this function image and text is nicely displayed on mobile devices. If you disable “Stack on mobile”, image and text will stay side-by-side and it will be hardly readable in responsive version.

If you enable this function, on mobile phone content on the left hand side will be displayed above content that is on the right hand side.

Krovinys ant mobiliojo ryšio funkcijos WordPress apvynioti tekstą aplink paveikslėlį
Website preview on mobile device with enabled feature “Stack on mobile”

Teksto lyginimas

Part of Media & Text block is together with image or video also text content. It can be one of the following content types:

1. Paragraph

In top toolbar you can set text alignment, make text bold, italic or add URL link.

Žiniasklaidos ir teksto bloko pastraipos formatavimas
Formatting options for text

In sidebar on the right hand side you can choose font size, font color or paragraph color. Interesting feature is “Drop Cap” that will highlight first character of the text. It’s a nice feature in block posts to make text more interesting.

"Drop Cap" funkcija
Highlighting text with “Drop Cap” function

2. Heading

Heading is very similar to Paragraph. You can also configure it’s look, make bold or italic and insert URL link. Difference is that you can choose heading type – H2, H3, H4.

Žiniasklaidos ir teksto bloko antraštės parinktys
Heading options

Other heading sizes and alignment settings are available in sidebar on the right hand side.

3. List

If you add List block to your content, it can be bullet points, numbered list or multi level list. You can also make text bold, italic and add URL link.

Žiniasklaidos ir teksto bloko sąrašo parinktys
List options of your text area

4. Button block

This block that adds button to content can be adjusted to website design. Button color and style or background color can be configured in sidebar on the right hand side.

Žiniasklaidos ir teksto bloko mygtukų parinktys
Options for button style

Don’t forget to read article about Mygtukų blokas. 

Blokų tipų perjungimas

In Media & Text block it is possible to convert one content block type to another. You can also change Media & Text block to Image block and text part will be deleted.

Blokų tipų perjungimas
Converting Media & Text block to another block

In text content it’s possible to change Paragraph block to Heading or List block.

Pastraipos bloko konvertavimas
Converting Paragraph block to another one

Premija: Kaip pateisinti tekstą "WordPress

Using justified text has its positives and negatives. Justified text can be usually found in books or newspapers but it’s not used on websites anymore. Why?

Prieš kelerius metus buvo Justify funkcija integruota tiesiai WordPress Classic redaktoriaus viduje. Justifikuotas tekstas sukeldavo matomumo problemų įvairiose naršyklėse ar mobiliuosiuose įrenginiuose. Tai taip pat susiję su sudėtingu išlyginto teksto įskaitomumu. Todėl ši funkcija buvo atšaukta ir pašalinta.

Šis konkretus funkcionalumas neegzistuoja ir naujajame blokų ("Gutenberg") redaktoriuje.

Taigi kaip pateisinti tekstą, jei tikrai norite?

Sprendimas - keliais veiksmais pridėti paprastą CSS kodą:

  1. Šoninėje juostoje dešinėje pusėje yra nustatymas Papildoma CSS klasė pastraipos bloko nustatymas
  2. Parašykite ten klasės pavadinimą "pateisinti"
  3. Paskelbti puslapį arba straipsnį
  4. Jei ją peržiūrėsite, pagrindinėje viršutinėje juostoje spustelėkite Tinkinti
  5. Kairėje pusėje yra nauja šoninė juosta su nustatymais
  6. Spustelėkite Additional CSS
  7. Įterpkite šį CCS kodą:
p.justify {
    text-align: justify;
}
Teksto pagrindimas naudojant pasirinktinį CSS
Teksto pagrindimo būdas bloke naudojant pasirinktinį kodą

Atlikta. Nuo šiol yra tekstas jūsų Žiniasklaida ir teksto blokas pateisinamas.

Dėl "Gutenberg" redaktoriaus "WordPress" tapo patogesnis naudoti be trečiųjų šalių puslapių kūrėjų. Jis turi puikią vertę jūsų svetainei ilgalaikiu požiūriu ir kuriant ar pertvarkant svetainę. Gutenberg blokai suteikia didelį stiliaus diapazoną, tačiau galite rasti ranką WordPress kodas, skirtas teksto aplink paveikslėlius apvyniojimui.

Atsisiųsti CitadelaWP WordPress temą ir įskiepius

Vienkartinis mokėjimas. 90 dienų pinigų grąžinimo garantija.

Kokia jūsų nuomonė apie medijos ir teksto bloką? Ar jau naudojate jį? Kaip jums patinka su juo dirbti? Praneškite mums žemiau esančiuose komentaruose.

19 pagalvojo apie „4 Ways to Wrap Text Around Image in WordPress

  1. Apskritai man patinka blokų sistema, tačiau, jei tik kažko nepraleidžiu, tai yra žingsnis atgal. Šiuo metu noriu paprasčiausiai perkelti vaizdą į kairę arba į dešinę ir gauti tekstą, kad jis būtų apvyniotas, nes tai tikrai turėtų būti labai paprasta, bet atrodo, kad WordPress tiesiog nenori, kad tai įvyktų. Kodėl? Medijos ir paveikslėlio bloko naudojimas veikia tik tada, jei tekstas yra tinkamo ilgio. Tokio puslapio, pavyzdžiui, kaip šis, nesinori perdaryti su keistais tarpais tarp pastraipų, jei tekstas nėra būtent tokio ilgio, kokio reikia paveikslėlio dydžiui.

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

    1. Sveiki,

      labai ačiū už jūsų atsiliepimus. Tai skamba kaip labai gera idėja, todėl norėčiau paprašyti jūsų skirti mums minutę savo laiko ir atsakyti į 4 paprastus klausimus: https://aitthemes.typeform.com/to/vc7arn, kurie gali padėti mūsų komandai greičiau sukurti geresnius produktus su unikaliomis funkcijomis.

      Labai ačiū už jūsų laiką ir supratimą.

      Nuoširdžiausi linkėjimai!
      Zlatko
      AIT komanda

  2. Ši idėja yra vienintelis būdas įterpti nuotraukas į tinklaraštį - negaliu gražiai apvynioti teksto ir jis nėra vienodo dydžio, kad ir ką daryčiau. Gera idėja tam tikrais atvejais, bet ne visur. Kartais norisi tik paveikslėlio su aplink jį apvyniotomis pastraipomis, o ne ką nors pasakyti apie paveikslėlį.

  3. Kaip pridėti apvalkalą ir naudoti turinį per visą plotį yar rimtai, kaip padengti visą su tada imtis konteinerio.. statybininkas yra labai paini, kaip pridėti konteinerio apvalkalą labai blogas redaktorius yar

  4. Sveiki,

    ačiū už komplimentus. Kviečiame apsilankyti mūsų tinklaraščio puslapyje https://www.ait-themes.club/blog/, kur rasite daug naudingų patarimų, kaip rašyti patrauklius ir naudingus įrašus.

    Nuoširdžiausi linkėjimai!
    Zlatko
    AIT komanda

  5. Sveiki, Abdur,

    Labai dėkojame už jūsų atsiliepimus, mūsų komanda juos labai vertina!

    Geriausi linkėjimai.
    Zlatko
    AIT komanda

  6. Praeityje galėjau lengvai apvynioti tekstą aplink paveikslėlį, pavyzdžiui, mūsų puslapyje "apie mus", kuriame yra nuotraukų ir biografijų. galbūt aš naudojau seną redaktorių. Neprisimenu. tačiau dabar bandau atnaujinti svetainę, papildydamas ją naujomis nuotraukomis ir biografijomis, ir neradau būdo, kaip lengvai apvynioti tekstą, kaip ankstesniuose biografijų ir nuotraukų deriniuose. Bandžiau pereiti prie klasikinio redaktoriaus, bet svetainė mane įspėjo, kad turiu "naujojo bloko redaktoriaus" skyrių ir turiu likti prie naujesnio redagavimo režimo. ar galite man pasakyti, kaip padaryti, kad mūsų naujos biografijos ir nuotraukos atrodytų taip, kaip mūsų ankstesni įrašai? ačiū.

    1. Sveiki,

      Jei norite išjungti "Gutenberg" ir toliau naudoti klasikinį "WordPress" redaktorių, apsvarstykite "WordPress" pagrindinės komandos įskiepį, kuris leidžia tai padaryti su "Classic Editor Plugin".

      Geriausi linkėjimai!
      Zlatko
      AIT komanda

  7. Tiems, kurie nori tik paprasto teksto, apjuosiančio paveikslėlį, galite tai padaryti įterpdami klasikinį teksto bloką (esantį pirmoje blokų dalyje, kai spustelėsite Naršyti. Galite naudoti klasikinį redaktorių viename bloke ir taip, tai leidžia įterpti vaizdą ir tada pasirinkti apvyniojimo parinktį. Problema išspręsta 🙂

    1. Ačiū London SEO Guy!!! Paprastas sprendimas, bet aš nepastebėjau!

    2. Tada... tiesiog naudokite parinktį Konvertuoti į blokus.
      Kadangi tai veikia, blokų redaktorius turi tokią galimybę, tačiau nerandu, kaip ją tinkamai nustatyti. Tuo tarpu ši gudrybė veikia.

  8. Čia ta pati bėda. Naujoji versija yra siaubinga - nėra galimybės tinkamai apvynioti tekstą ar net sumažinti nuotrauką, nebent norite ją tiesiog apkarpyti.

  9. "WordPress" blokų redaktoriuje galiu apvynioti tekstą aplink paveikslėlį. Jis atrodo taip, kaip noriu, kad atrodytų "Peržiūroje". Tačiau kai paskelbiu savo tinklaraštį ir "WordPress" išsiunčia jį el. paštu savo sekėjams, jie gauna jį su paveikslėliu viršuje ir tekstu po paveikslėliu. Taip nutinka ir stacionariuose kompiuteriuose, ne tik mažuose mobiliuosiuose telefonuose. Noriu, kad jis būtų apvyniotas, o ne sukrautas.

    1. Sveiki,

      Ačiū, kad rašote. Blokas neapvynioja teksto aplink paveikslėlį WordPress sistemoje, kaip tikėjotės. Peržiūrėkite šias instrukcijas, nes jos jums gali būti naudingos: https://motopress.com/blog/how-to-wrap-text-around-images-in-gutenberg/

      Geriausi linkėjimai!
      Zlatko
      AIT komanda

      1. Visa tai darau, o mano tinklaraštis puikiai įkeliamas į "Preview". Kai jį paskelbiu, jis puikiai atrodo mano tinklaraščio puslapyje. Tačiau kai "WordPress" siunčia jį el. paštu mano sekėjams ir jie atidaro tą el. laišką, jo nemato. Nuotraukos yra teksto viršuje. Tai atrodo labai neprofesionaliai. Niekada neturėjau tokios problemos su senuoju klasikiniu redaktoriumi. Dabar, kai naudoju blokų redaktorių, jis neleidžia man grįžti į klasikinį redaktorių, nors yra klasikinio redaktoriaus parinktis, kurią galima spustelėti.

        1. Sveiki,

          Ačiū, kad rašote.
          Norėtume paprašyti jūsų patikrinti mūsų žinių bazę ir (arba) dokumentaciją su vaizdo pamokomis:
          https://www.ait-themes.club/ait-themes-documentation/
          Arba galite pateikti techninius klausimus tiesiogiai mūsų specialioje palaikymo bilietų sistemoje. Prisijunkite prie savo paskyros adresu https://system.ait-themes.club/support/add-question.
          Klientų aptarnavimo paslaugos teikiamos darbo dienomis nuo 8 iki 17 val. Vidurio Europos laiku.

          Be to, yra įskiepis, kuris leidžia naudoti ankstesnį redaktorių. Turėtumėte įdiegti ir įjungti "Classic editor".

          Nuoširdžiai!
          Zlatko
          AIT komanda

  10. Nesutinku, kad tai yra pranašesnis už klasikinį redagavimą, nes galimybės yra labiau ribotos. Manau, kad šis blokas, kadangi jame naudojami skirtingi šriftai ir jis yra platesnis nei teksto blokas, vizualiai trikdo. Galimybė sklandžiai apvynioti tekstą aplink paveikslėlį, išlaikant tą patį šriftą, dydį ir paraštės nustatymus, suteikia žurnalo puslapiui profesionalumo. Tai tik vienas iš pavyzdžių, kodėl esu giliai nusivylęs šia wordpress versija.

    1. Sveiki, Terensas

      thank you for your opinion. Have you tried our Citadela trial version? We have some unique blocks that might help you with adjusting text and images. Anyway, you can test full version – all features, for free.

      Geros dienos.

Komentarai nepriimami.