4 načini za ovijanje besedila okoli slike v WordPressu

4 načini za ovijanje besedila okoli slike v WordPressu

Ali morate besedilo elegantno namestiti okoli slike? Naučite se, kako to preprosto narediti brez izkušenj s kodiranjem in oblikovanjem. Urejevalnik Gutenberg prinaša več možnosti za ovijanje besedila okoli besedila v WordPressu.

Hkrati lahko dosežete dobro oblikovano spletno mesto in enostavno urejanje vsebine. Z izbiro urejevalnika Gutenberg za spletno mesto WordPress dobite najboljše orodje z dolgoročnega vidika. Imeli boste več možnosti za drugačno ovijanje besedila okoli slik. Gutenberg prinaša številne prednosti, kot so bolj pregledna izvorna koda spletnega mesta, hitrost, varnost in uporabnost.

Prenos CitadelaWP WordPress tema in vtičniki

Enkratno plačilo. 30-dnevno jamstvo za vračilo denarja.

Kako oviti besedilo okoli slike v WordPressu?

Zaradi urejevalnika Gutenberg in blokov je vsebina spletnega mesta lažja, sodobnejša in lažje berljiva. Prikazali vam bomo več načinov, kako besedilo oviti okoli slike tudi v WordPressovih tipih strani, objav in objav po meri. Obstajajo različni bloki, ki jih lahko uporabite tudi v kombinaciji, kot skupek delov in funkcij, ki vam dajejo dodatne možnosti za ovijanje.

Blok za ovito besedilo okoli slike lahko izberete glede na podstran in njeno vrsto vsebine. En slog lahko izberete za predstavitveno stran, drugega pa za objavo v blogu. Upoštevajte tudi vrsto vsebine, ki predstavlja sliko. Ali gre za opisno sliko ali bolj predstavitveni ali prodajni medij?

Ovijanje besedila okoli slike - Izbor blokov

Za ovijanje bloka besedila okoli slike lahko uporabite 4 bloke. Opisali smo jih vse:

Ovijte besedilo in sliko za boljšo bralno izkušnjo

Obstaja več razlogov za uporabo tega bloka. Najbolj ga boste cenili, če pišete prispevke na blogu. Slike so sestavni del zgodbe. Ni pomembno, ali pišete blog o potovanjih ali revijo o novostih s področja informacijske tehnologije. Zato pri dodajanju fotografij znotraj vsebine pomislite na poravnavo slik. Bralci bodo lahko bolje razumeli, o čem pišete.

V številnih primerih je treba vstaviti sliko in besedilo drug ob drugem. Kaj je pomembno?

  • Imeti mora smisel. Slika mora biti ob pravem besedilu.
  • Lepo mora biti poravnana.
  • Ujemati se mora s celotno postavitvijo spletnega mesta.

Bloki slik in odstavkov

Besedilo, ovito okoli slike v klasičnem urejevalniku WordPress
Primer ne preveč lepo izgledajočega besedila, ki je ovilo sliko

Medtem ko je v Klasični urejevalnik besedilo lahko postavite tudi ob sliko, o lepem poravnavanju pa ne morete govoriti. Še posebej, če je bila slika majhna in ste poleg nje postavili več besedila. Besedilo je prekrivalo sliko in ni bilo videti lepo.

Urejevalnik Gutenberg in njegov blok Slike prinašata odlično funkcijo - spreminjanje velikosti slik. Povlecite pike okoli slike in samodejno spremenite njeno velikost in poravnavo besedila.

Ovijanje besedila okoli slike z uporabo blokov slik in odstavkov Gutenberg
Spremenite velikost slike in izberite poravnavo

Blok Mediji in besedilo - WordPress poravna besedilo ob sliki

Kako poravnati besedilo ob sliki?

Začnite zdaj

Enkratno plačilo. 30-dnevno jamstvo za vračilo denarja.

Blok Mediji in besedilo je fantastična funkcija. Blok Media & Text rešuje to vprašanje in zagotavlja popolno poravnavo besedila s sliko, ne da bi se pri tem porušila kompozicija in postavitev. To je razlog, zakaj bi morali uporabljati ta blok.

Izboljša tudi zasnovo spletnega mesta na mobilnih napravah. Ta zavijalni blok pomaga temi WordPress pokriti različne mobilne postavitve. Na pametnem telefonu mora biti vsak del spletnega mesta dobro viden in berljiv. Kako bo blok Mediji in besedilo videti na mobilnih telefonih in tabela obvladuje funkcijo "Zlaganje na mobilni telefon", ki si jo bomo ogledali v nadaljevanju.

V kratkem času boste lahko uporabljali blok Mediji in besedilo v naši novi temi WordPressa z imenom Citadela. Več o temi Citadela si preberite v ločenem članku.

Kako dodati blok Mediji in besedilo v urejevalniku blokov?

Dodajanje bloka Mediji in besedilo je enako enostavno kot dodajanje katerega koli drugega bloka. To je osnovni blok, kar pomeni, da vam ni treba prenesti ali namestiti ničesar.

Uporabite ikono "+" na zgornji plošči ali kjer koli v urejevalniku in izberite blok Mediji in besedilo.

Dodajte medijski in besedilni blok s klikom na "+".
Dodajanje bloka Mediji in besedilo s klikom na "+"

Zadnja možnost je, da vnesete "/" in nato napišete "media". WordPress vam bo samodejno prikazal izbrane bloke, ki ustrezajo iskani vsebini.

Dodajanje medijev in besedilnega bloka s poševnico
Dodajanje medijev in besedilnega bloka s poševnico "/"

Kako deluje blok Mediji in besedilo?

Blok Mediji in besedilo v bistvu združuje 2 različni vrsti vsebine v eno. Prva je medij, npr. slika ali videoposnetek, ki ga lahko dodate prek:

  • Naložite
  • Knjižnica za medije
  • Povlecite in spustite
Možnosti nalaganja medijev in besedilnih blokov
Oglejte si, kako preprosto lahko naložite sliko z vlečenjem in spuščanjem

Drugi je prostor za besedilno vsebino. Vanj lahko napišete odstavke besedila, sezname z alinejami ali naslove. Dodate lahko tudi Blok gumbov o katerem smo govorili prej.

Območje besedila v bloku Mediji in besedilo
V besedilno področje lahko dodate različne vrste vsebine.

V bloku Mediji in besedilo sta slika in besedilo vedno poravnana drug ob drugem, ne glede na to, koliko besedila napišete. Kako deluje? Slika se samodejno prilagodi glede na višino vsebine v stolpcu z besedilom.

Poravnava slik v bloku Mediji in besedilo
Primer poravnave slike in besedila

Nastavitve medijev in besedilnih blokov

Splošne nastavitve bloka

1. Zgornja orodna vrstica

Orodna vrstica nad blokom ponuja več možnosti. Če vaša aktivna tema to podpira, lahko blok Mediji in besedilo nastavite na široko ali po vsej širini. Izberete lahko tudi, kam želite umestiti sliko ali videoposnetek, tako da kliknete na :

  • Prikaži medije na levi strani
  • Prikaži medije na desni strani
Spreminjanje poravnave slik in besedila
S klikom na ikone v orodni vrstici lahko spremenite poravnavo slik in besedila ter njihov položaj.

V zgornji orodni vrstici je tudi ikona za urejanje medija, kjer lahko nastavite Alt Text, Title, Caption ali Description. Več o urejanju slik si lahko preberete v našem članku Delo z blokom slik WordPress.

2. Desna stranska vrstica

Desna stranska vrstica ponuja dodatne nastavitve za blok Mediji in besedilo. Tu lahko dodate alternativno besedilo, nastavite barvo ozadja ali dodate dodatni razred CSS. Omogočite lahko tudi funkcijo "Stack on mobile".

Nastavitve barve ozadja
Gladko spreminjanje barve ozadja

Kaj je Stack v mobilnih napravah?

Zaradi te funkcije sta slika in besedilo lepo prikazana na mobilnih napravah. Če funkcijo "Stack on mobile" onemogočite, bosta slika in besedilo ostala drug ob drugem in bosta v odzivni različici težko berljiva.

Če omogočite to funkcijo, bo v mobilnem telefonu vsebina na levi strani prikazana nad vsebino na desni strani.

Stack na mobilni funkciji za WordPress ovijanje besedila okoli slike
Predogled spletnega mesta na mobilni napravi z omogočeno funkcijo "Stack on mobile"

Poravnava besedila

Del bloka Media & Text je skupaj s sliko ali videom tudi besedilna vsebina. Lahko je ena od naslednjih vrst vsebine:

1. Odstavek

V zgornji orodni vrstici lahko nastavite poravnavo besedila, krepko in poševno besedilo ali dodate povezavo URL.

Oblikovanje odstavka v bloku Mediji in besedilo
Možnosti oblikovanja besedila

V stranski vrstici na desni strani lahko izberete velikost pisave, barvo pisave ali barvo odstavka. Zanimiva funkcija je "kapica", ki bo poudarila prvi znak besedila. To je lepa funkcija v blokovskih objavah, ki naredi besedilo bolj zanimivo.

Funkcija "Drop Cap"
Označevanje besedila s funkcijo "Drop Cap"

2. Naslov

Naslov je zelo podoben odstavku. Nastavite lahko tudi njegov videz, krepko ali poševno pisavo in vstavite povezavo URL. Razlika je v tem, da lahko izberete vrsto naslova - H2, H3, H4.

Možnosti naslovov za blok Mediji in Besedilo
Možnosti naslovov

Druge velikosti naslovov in nastavitve poravnave so na voljo v stranski vrstici na desni strani.

3. Seznam

Če v vsebino dodate blok Seznam, je lahko v obliki točk, oštevilčenega seznama ali večnivojskega seznama. Besedilo lahko naredite tudi krepko, poševno in dodate povezavo URL.

Možnosti seznama v bloku Mediji in besedilo
Možnosti seznama območja besedila

4. Blok gumbov

Ta blok, ki vsebini doda gumb, lahko prilagodite zasnovi spletnega mesta. Barvo in slog gumba ali barvo ozadja lahko nastavite v stranski vrstici na desni strani.

Možnosti gumba v bloku Mediji in besedilo
Možnosti za slog gumba

Ne pozabite prebrati članka o Blok gumbov. 

Preklapljanje med vrstami blokov

V bloku Mediji in besedilo je mogoče pretvoriti eno vrsto bloka vsebine v drugo. Prav tako lahko blok Mediji in besedilo spremenite v blok Slika, pri čemer se besedilni del izbriše.

Preklapljanje med vrstami blokov
Pretvarjanje bloka Mediji in besedilo v drug blok

V besedilni vsebini lahko blok Odstavek spremenite v blok Naslov ali Seznam.

Pretvarjanje bloka odstavkov
Pretvarjanje bloka odstavka v drugega

Bonus: Kako upravičiti besedilo v WordPressu

Uporaba utemeljenega besedila ima svoje pozitivne in negativne strani. Utemeljeno besedilo običajno najdemo v knjigah ali časopisih, na spletnih straneh pa se ne uporablja več. Zakaj?

Pred nekaj leti je bila funkcija Justify integrirana prav znotraj urejevalnika WordPress Classic. Utemeljeno besedilo je povzročalo težave z vidljivostjo v različnih brskalnikih ali mobilnih napravah. To je povezano tudi s težavno berljivostjo utemeljenega besedila. Ta funkcija je bila zato zastarela in odstranjena.

Ta posebna funkcionalnost ne obstaja niti v novem urejevalniku blokov (Gutenberg).

Kako torej upravičiti besedilo, če si to res želite?

Rešitev je dodajanje preproste kode CSS v nekaj korakih:

  1. Na desni strani stranske vrstice je nastavitev za Dodatni razred CSS bloka Odstavek.
  2. Tam napišite ime razreda "upravičiti"
  3. Objava strani ali članka
  4. Če ga predogledate, kliknite Prilagodi v glavni zgornji vrstici
  5. Na levi strani je nova stranska vrstica z nastavitvami
  6. Kliknite na Dodatno CSS
  7. Vstavite naslednjo kodo CCS:
p.justify {
    text-align: justify;
}
Utemeljitev besedila s CSS po meri
Način utemeljitve besedila v bloku z uporabo kode po meri

Opravljeno. Od zdaj naprej je besedilo v vašem mediju in besedilnem bloku upravičeno.

WordPress je z urejevalnikom Gutenberg postal bolj uporaben brez gradnikov strani tretjih oseb. Z dolgoročnega vidika in pri ustvarjanju ali preoblikovanju spletnega mesta ima odlično vrednost za vašo spletno stran. Bloki Gutenberg dajejo velik razpon slogov, kakor koli se vam zdi, da je roka WordPressova koda za ovijanje besedila okoli slik.

Prenos CitadelaWP WordPress tema in vtičniki

Enkratno plačilo. 30-dnevno jamstvo za vračilo denarja.

Kakšno je vaše mnenje o bloku Mediji in besedilo? Ste ga že uporabili? Kako vam je všeč delo z njim? Povejte nam v spodnjih komentarjih.

19 razmišljanje o »4 Ways to Wrap Text Around Image in WordPress«

  1. Na splošno mi je sistem blokov všeč, vendar je to korak nazaj, razen če sem kaj spregledal. Trenutno iščem preprosto plavajočo sliko levo ali desno in besedilo, ki se zavije, saj bi moralo biti res tako enostavno narediti, vendar se zdi, da WordPress preprosto ne želi, da se to zgodi. Zakaj ne? Uporaba medijev in slikovnega bloka deluje le, če je besedilo prave dolžine. Stran, kot je na primer ta, ne želi biti predelana z nenavadnim razmikom med odstavki, če besedilo ni ravno prave dolžine za velikost slike.

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

    1. Pozdravljeni,

      Najlepša hvala za vaše povratne informacije. Sliši se kot zelo dobra zamisel, zato bi vas rad prosil, da nam posvetite minuto svojega časa in odgovorite na 4 preprosta vprašanja: https://aitthemes.typeform.com/to/vc7arn, ki lahko naši ekipi pomagajo hitreje izdelati boljše izdelke z edinstvenimi funkcijami.

      Najlepša hvala za vaš čas in razumevanje.

      Lep pozdrav!
      Zlatko
      Ekipa AIT

  2. Ta ideja je kot edini način vstavljanja slik v blog popolnoma neuporabna - besedila ne morem lepo zaviti in ni enako veliko, ne glede na to, kaj počnem. Dobra zamisel za določene primere, vendar ne za vse. Včasih želite samo sliko in odstavke, ki se ovijajo okoli nje, namesto da bi povedali nekaj o sliki.

  3. Kako dodati ovitek in uporabiti vsebino v polni širini yar resno, kako pokriti polno z nato vzeti zabojnik v njem.. graditelj je zelo zmeden, kako dodati zabojnik ovoj zelo slab urednik yar

  4. Pozdravljeni,

    hvala za vaše pohvale. Oglejte si našo spletno stran https://www.ait-themes.club/blog/, kjer boste našli veliko koristnih nasvetov, kako napisati privlačne in uporabne objave.

    Lep pozdrav!
    Zlatko
    Ekipa AIT

  5. Pozdravljeni Abdur,

    Najlepša hvala za vaše povratne informacije, naša ekipa jih zelo ceni!

    Lep pozdrav.
    Zlatko
    Ekipa AIT

  6. Imam enake težave kot več drugih ljudi na tej niti. v preteklosti sem lahko zlahka ovijal besedilo okoli slike, kot na naši strani "o nas", kjer imamo slike in življenjepise. morda sem uporabljal stari urejevalnik. Zdaj poskušam posodobiti našo spletno stran z novimi slikami in življenjepisi in nisem našel načina za enostavno ovijanje besedila, kot je bilo na naših prejšnjih kombinacijah biografij in slik. Poskušal sem preklopiti na klasični urejevalnik, vendar me je spletna stran opozorila, da imam razdelke "novega urejevalnika blokov", in sem moral ostati pri novejšem načinu urejanja. mi lahko poveste, kako naj naše nove biografije in slike izgledajo kot naše prejšnje objave? hvala.

    1. Pozdravljeni,

      Če želite onemogočiti Gutenberg in nadaljevati s klasičnim urejevalnikom WordPressa, upoštevajte vtičnik osnovne ekipe WordPressa, ki vam to omogoča s "Classic Editor Plugin".

      Lep pozdrav!
      Zlatko
      Ekipa AIT

  7. Tisti, ki želijo le preprosto besedilo, ki ovija sliko, lahko to storijo tako, da vstavijo blok Klasično besedilo (ki se nahaja v prvem delu blokov, ko kliknete na Prebrskaj. V enem bloku lahko uporabljate klasični urejevalnik in da, ta vam omogoča vstavljanje slike in nato izbiro možnosti ovijanja. Problem je rešen 🙂

    1. Nato pa... preprosto uporabite možnost Pretvori v bloke.
      Ker to deluje, ima urejevalnik blokov to možnost, vendar ne najdem, kako jo pravilno nastaviti. Do takrat pa ta rešitev deluje.

  8. Enake težave tudi tukaj. Ta nova različica je grozljiva - ni načina za pravilno ovijanje besedila ali celo zmanjševanje fotografije, razen če jo želite samo obrezati.

  9. V urejevalniku blokov v WordPressu lahko besedilo ovijem okoli slike. V predogledu je videti tako, kot želim, da je videti. Vendar ko objavim svoj blog in ga WordPress pošlje po e-pošti mojim sledilcem, ga prejmejo s sliko na vrhu in besedilom pod sliko. To se dogaja tudi na namiznih računalnikih, ne le na majhnih mobilnih telefonih. Želim, da je besedilo zavito, ne pa zloženo.

    1. Pozdravljeni,

      Hvala za prijavo. Blok ne bo ovijal besedila okoli slike v WordPressu, kot bi pričakovali. Prosimo, da si ogledate naslednja navodila, saj vam bodo morda v pomoč: https://motopress.com/blog/how-to-wrap-text-around-images-in-gutenberg/

      Lep pozdrav!
      Zlatko
      Ekipa AIT

      1. Vse to počnem, moj blog pa se odlično zavije v predogled. Ko ga objavim, je na strani bloga videti odlično. Ko pa ga WordPress pošlje po e-pošti mojim sledilcem in ti odprejo to e-pošto, ga ne vidijo ovitega. Fotografije so na vrhu besedila. Videti je zelo neprofesionalno. Pri starem klasičnem urejevalniku nikoli nisem imel te težave. Zdaj, ko uporabljam urejevalnik blokov, mi ne dovoli, da bi se vrnil v klasični urejevalnik, čeprav je na voljo možnost Classic, ki jo lahko kliknem.

        1. Pozdravljeni,

          Hvala za prijavo.
          Vljudno vas prosimo, da preverite našo bazo znanja in/ali dokumentacijo z videoposnetki:
          https://www.ait-themes.club/ait-themes-documentation/
          Lahko pa tehnična vprašanja objavite neposredno v našem namenskem sistemu za podporo. Prijavite se v svoj račun na https://system.ait-themes.club/support/add-question.
          Podpora strankam je na voljo med delovnimi dnevi od 8.00 do 17.00 po srednjeevropskem času.

          Poleg tega obstaja vtičnik, ki vam omogoča uporabo prejšnjega urejevalnika. Namestiti in aktivirati morate "Klasični urejevalnik".

          Iskreno!
          Zlatko
          Ekipa AIT

  10. Ne strinjam se, da je to boljše od klasičnega urejanja, saj so možnosti bolj omejene. Menim, da je ta blok, ker uporablja različne pisave in je širši od besedilnega bloka, vizualno moteč. Možnost gladkega ovijanja besedila okoli slike ob ohranjanju enakih nastavitev pisave in velikosti ter robov prinaša profesionalnost strani v reviji. To je samo en primer, zakaj sem globoko razočaran nad to različico Wordpressa.

    1. Pozdravljen, Terence

      hvala za vaše mnenje. Ste preizkusili našo preskusno različico Citadela? Imamo nekaj edinstvenih blokov, ki vam lahko pomagajo pri prilagajanju besedila in slik. Vsekakor lahko brezplačno preizkusite polno različico - vse funkcije.

      Prijeten dan.

Komentarji so zaprti.