4 načina za omotavanje teksta oko slike u WordPressu

Trebate li postaviti tekst oko slike na elegantan način? Naučite kako to učiniti jednostavno bez iskustva kodiranja i dizajna. Gutenbergov uređivač donosi više opcija za prelamanje teksta oko teksta u WordPressu.

Možete postići web stranicu koja dobro izgleda i jednostavnu rutinu uređivanja sadržaja istovremeno. Odabir Gutenberg uređivača za vaše WordPress web mjesto pruža vam najbolji alat dugoročno gledano. Imat ćete više opcija za drugačije omotavanje teksta oko slika. Gutenberg donosi mnoge prednosti poput jasnijeg izvornog koda web stranice, brzine, sigurnosti i upotrebljivosti.

Kako omotati tekst oko slike u WordPressu?

Gutenbergov uređivač i blokovi čine sadržaj web stranice lakšim, modernijim i čitljivim bez napora. Pokazujemo vam više načina kako omotati tekst oko slike na WordPress stranicama, postovima i prilagođenim vrstama postova. Postoje različiti blokovi, a možete ih koristiti iu kombinaciji, kao skup dijelova i značajki koje vam daju dodatne mogućnosti za omot.

Možete odabrati blok za omotani tekst oko slike prema podstranici i vrsti sadržaja. Možete odabrati jedan stil za prezentacijsku stranicu, a drugi za post na blogu. Također, razmislite o vrsti sadržaja koji predstavlja sliku. Je li to opisna slika ili reprezentativniji ili prodajni medij?

Prelomi tekst oko slike – Blokiraj odabir

Postoje 4 bloka koja možete koristiti za omotavanje bloka teksta oko slike. Opisujemo ih sve:

• Blok slika i blok odlomaka potražite više u nastavku
• Blok medija i teksta pronađite više u nastavku
• Blok stupaca u pojedinačnom postu
• Blok klastera u pojedinačnoj objavi (značajka dostupna samo s Citadela Pro dodatak)

Prelomi tekst i sliku za bolje iskustvo čitanja

Postoji nekoliko razloga zašto biste trebali koristiti ovaj blok. Najviše ćete cijeniti ako pišete postove na blogu. Slike su sastavni dio priče. Nije važno pišete li putopisni blog ili časopis o IT vijestima. Dakle, kada dodajete fotografije u svoj sadržaj, razmislite o poravnanju slike. Čitatelji će moći bolje razumjeti ono o čemu pišete.

U mnogim slučajevima potrebno je umetnuti sliku i tekst jedan pored drugog. Što je važno?

• Mora imati smisla. Slika mora biti pored desnog teksta.
• Mora biti lijepo poravnat.
• Mora odgovarati cijelom izgledu web stranice.

Blokovi slika i odlomaka

Dok je u Klasični urednik možete također staviti tekst pored slike, ne možete govoriti o lijepom poravnanju. Pogotovo ako je slika mala i pored nje stavite više teksta. Tekst je prekrivao sliku i nije izgledalo lijepo.

urednik Gutenberga i njegov blok slika donose sjajnu značajku – promjenu veličine slike. Povucite točke oko slike kako biste automatski promijenili njezinu veličinu i poravnanje teksta.

Blok medija i teksta – WordPress poravnava tekst uz sliku

• Prelamanje teksta i slika s blokom Media & Text
• Kako dodati blok medija i teksta u editor
• Kako ovaj blok radi
• Postavke bloka medija i teksta
• Što znači "Složite na mobitel” značiti
• Bonus: Kako opravdati tekst u WordPressu

Kako poravnati tekst pored slike?

Blok medija i teksta je fantastična značajka. Blok Media & Text rješava ovaj problem i osigurava savršeno poravnanje teksta sa slikom bez narušavanja kompozicije i izgleda. To je razlog zašto biste trebali koristiti ovaj blok.

Također poboljšava dizajn web stranice na mobilnim uređajima. Ovaj blok za omatanje pomaže WordPress temi da pokrije različite mobilne izglede. Na pametnom telefonu svaki dio web stranice mora biti jasno vidljiv i čitljiv. Kako će Media & Text block izgledati na mobilnim telefonima i stolnim ručkama “Stack on mobile” funkcija koju ćemo pogledati u nastavku.

Ubrzo ćete moći koristiti blok medija i teksta u našoj novoj WordPress temi pod nazivom Citadela. Saznajte više o temi Citadela u zasebnom članku.

Kako dodati blok medija i teksta u uređivač blokova?

Dodavanje bloka medija i teksta jednostavno je kao dodavanje bilo kojeg drugog bloka. To je temeljni blok koji znači da ne morate ništa preuzimati ili instalirati.

Upotrebom ikone “+” na gornjoj ploči ili bilo gdje u uređivaču i odabirom bloka Mediji i tekst.

Posljednja opcija je upisati “/“ i nakon toga napisati “media”. WordPress će vam automatski prikazati odabrane blokove koji odgovaraju onome što ste tražili.

Kako funkcionira blok medija i teksta?

Blok medija i teksta u osnovi grupira 2 različite vrste sadržaja u jedan. Prvi je srednji, npr. slika ili video koje možete dodati putem:

• Učitaj
• Mediateka
• Povuci i ispusti

Drugi je prostor za tekstualni sadržaj. Tamo možete pisati odlomke teksta, popise s grafičkim oznakama ili naslov. Također možete dodati tamo Blok gumba o kojoj smo ranije govorili.

Blok medija i teksta uvijek poravnava sliku i tekst jednu pored druge bez obzira na to koliko teksta pišete. Kako radi? Slika se automatski prilagođava na temelju visine sadržaja u tekstualnom stupcu.

Postavke bloka medija i teksta

Opće postavke bloka

1. Gornja alatna traka

Alatna traka iznad bloka nudi nekoliko opcija. Ako vaša aktivna tema to podržava, možete postaviti blok medija i teksta kao širok ili pune širine. Također možete odabrati gdje želite postaviti sliku ili video klikom na:

• Prikaži medije lijevo
• Prikaži medije desno

Na gornjoj alatnoj traci također se nalazi ikona za uređivanje medija gdje možete postaviti zamjenski tekst, naslov, naslov ili opis. Saznajte više o uređivanju slika u našem članku Rad s WordPress blokom slika.

2. Desna bočna traka

Desna bočna traka nudi dodatne postavke za blok medija i teksta. Ovdje je moguće dodati alternativni tekst, postaviti boju pozadine ili dodati dodatnu CSS klasu. Tamo također možete omogućiti funkciju "Stack on mobile".

Što je Stack na mobitelu?

Zahvaljujući ovoj funkciji slika i tekst se lijepo prikazuju na mobilnim uređajima. Ako onemogućite "Stack on mobile", slika i tekst ostat će jedan pored drugog i bit će teško čitljivi u responzivnoj verziji.

Ako omogućite ovu funkciju, na mobilnom telefonu sadržaj s lijeve strane bit će prikazan iznad sadržaja koji je s desne strane.

Poravnanje teksta

Dio bloka Media & Text je zajedno sa slikom ili videom također tekstualni sadržaj. To može biti jedna od sljedećih vrsta sadržaja:

1. Stavak

Na gornjoj alatnoj traci možete postaviti poravnanje teksta, učiniti tekst podebljanim, kurzivom ili dodati URL vezu.

Na bočnoj traci s desne strane možete odabrati veličinu fonta, boju fonta ili boju odlomka. Zanimljiva značajka je "Drop Cap" koja će istaknuti prvi znak teksta. To je zgodna značajka u blok postovima kako bi tekst bio zanimljiviji.

2. Naslov

Naslov je vrlo sličan paragrafu. Također možete konfigurirati njegov izgled, podebljati ili kurziv i umetnuti URL vezu. Razlika je u tome što možete odabrati vrstu naslova – H2, H3, H4.

Ostale veličine naslova i postavke poravnanja dostupne su na bočnoj traci s desne strane.

3. Popis

Ako svom sadržaju dodate blok popisa, to mogu biti grafičke oznake, numerirani popis ili višerazinski popis. Također možete učiniti tekst podebljanim, kurzivom i dodati URL vezu.

4. Blok gumba

Ovaj blok koji dodaje gumb sadržaju može se prilagoditi dizajnu web stranice. Boja gumba i stil ili boja pozadine mogu se konfigurirati na bočnoj traci s desne strane.

Ne zaboravite pročitati članak o Blok gumba. 

Prebacivanje između vrsta blokova

U bloku Media & Text moguće je pretvoriti jednu vrstu bloka sadržaja u drugu. Također možete promijeniti blok medija i teksta u blok slike i tekstualni dio će biti izbrisan.

U tekstualnom sadržaju moguće je promijeniti blok paragrafa u blok naslova ili popisa.

Bonus: Kako opravdati tekst u WordPressu

Korištenje obostranog teksta ima svoje pozitivne i negativne strane. Opravkani tekst obično se može pronaći u knjigama ili novinama, ali se više ne koristi na web stranicama. Zašto?

Prije nekoliko godina funkcija Justify integrirana je unutar WordPress Classic uređivača. Opravkani tekst koji se koristi za probleme s vidljivošću u raznim preglednicima ili mobilnim uređajima. Također je povezano s teškom čitljivošću obostranog teksta. Ova je funkcija stoga zastarjela i uklonjena.

Ova posebna funkcionalnost ne postoji niti u novom uređivaču blokova (Gutenberg).

Dakle, kako opravdati tekst ako stvarno želite?

Rješenje je dodavanje jednostavnog CSS koda u nekoliko koraka:

1. Postoji postavka za dodatnu CSS klasu paragrafa na bočnoj traci s desne strane
2. Napišite tamo naziv klase „opravdati“
3. Objavite stranicu ili članak
4. Ako ga pretpregledate, kliknite na Prilagodi na glavnoj gornjoj traci
5. S lijeve strane nalazi se nova bočna traka s postavkama
6. Kliknite Dodatni CSS
7. Umetnite sljedeći CCS kod:

p.justify { text-align: justify; }

Gotovo. Od sada je tekst u vašem bloku medija i teksta poravnat.

Zahvaljujući uređivaču Gutenberg, WordPress je postao upotrebljiviji bez alata za izradu stranica trećih strana. Ima izvrsnu vrijednost za vašu web stranicu s dugoročnog gledišta i prilikom izrade ili redizajna web stranice. Gutenbergovi blokovi daju veliki raspon stila kako god vam se moglo pri ruci WordPress kod za omatanje teksta oko slika.

Kakvo je vaše mišljenje o bloku Media & Text? Jeste li ga već koristili? Kako vam se sviđa raditi s njim? Javite nam u komentarima ispod.