4 moduri de a încheia text în jurul imaginii în WordPress

Trebuie să plasați text în jurul imaginii într-un mod elegant? Aflați cum să faceți asta cu ușurință, fără experiență de codare și design. Editorul Gutenberg oferă mai multe opțiuni pentru a include text în jurul textului în WordPress.

Puteți obține un site web arătos și o rutină ușoară de editare a conținutului simultan. Alegerea editorului Gutenberg pentru site-ul dvs. WordPress vă oferă cel mai bun instrument dintr-o perspectivă pe termen lung. Veți avea mai multe opțiuni pentru a încheia textul în jurul imaginilor în mod diferit. Gutenberg aduce multe avantaje precum codul sursă mai clar al site-ului, viteza, securitatea și gradul de utilizare.

Cum să înfășurăm textul în jurul imaginii în WordPress?

Editorul și blocurile Gutenberg fac conținutul site-ului web mai ușor, modern și ușor de citit. Vă arătăm mai multe modalități de încadrare a textului în jurul imaginii și în tipurile de Pagini WordPress, Postare și Postări personalizate. Există diferite blocuri și le puteți folosi și în combinație, ca un set de piese și caracteristici care vă oferă opțiuni suplimentare pentru înfășurare.

Puteți selecta blocul pentru textul înfășurat în jurul imaginii în funcție de subpagină și tipul de conținut al acesteia. Ai putea alege un stil pentru pagina de prezentare și altul pentru o postare pe blog. De asemenea, luați în considerare tipul de conținut care reprezintă imaginea. Este o imagine de descriere sau mai reprezentativ sau media de vânzare?

Înfășurați textul în jurul imaginii – Blocați selecția

Există 4 blocuri pe care le puteți folosi pentru a înfășura un bloc de text în jurul unei imagini. Le descriem pe toate:

• Blocul imagine și blocul Paragraf găsiți mai multe mai jos
• Blocul Media și Text găsiți mai multe mai jos
• Blocarea coloanelor în post individual
• Bloc de cluster în postare individuală (funcție disponibilă numai cu Plugin Citadela Pro)

Încheiere text și imagine pentru o experiență de lectură mai bună

Există mai multe motive pentru care ar trebui să utilizați acest bloc. Veți aprecia cel mai mult dacă scrieți postări pe blog. Imaginile sunt parte integrantă a poveștii. Nu contează dacă scrii blog de călătorie sau revistă despre știri IT. Deci, atunci când adăugați fotografii în conținutul dvs., gândiți-vă la alinierea imaginilor. Cititorii vor putea înțelege mai bine despre ce scrieți.

În multe cazuri, este necesar să inserați imaginea și textul unul lângă altul. Ce este important?

• Trebuie să aibă sens. Imaginea trebuie să fie lângă textul potrivit.
• Trebuie să fie bine aliniat.
• Trebuie să se potrivească întregului aspect al site-ului web.

Blocuri Imagine și Paragraf

În timp ce în Editor clasic ai putea plasa si text langa imagine, nu ai putea vorbi despre o aliniere frumoasa. Mai ales dacă imaginea era mică și pui mai mult text lângă ea. Textul a acoperit imaginea și nu arăta frumos.

Editor Gutenberg și blocul său Image aduce o caracteristică grozavă - redimensionarea imaginii. Trageți puncte în jurul imaginii pentru a schimba automat dimensiunea și alinierea textului.

Bloc media și text – WordPress aliniază textul lângă imagine

• Împachetați textul și imaginile cu blocul Media și Text
• Cum să adăugați blocul Media și Text în editor
• Cum funcționează acest bloc
• Setări pentru blocuri media și text
• Ce face "Stack pe mobil” Rău
• Bonus: Cum se justifică textul în WordPress

Cum să aliniezi textul lângă imagine?

Blocarea Media și Text este o caracteristică fantastică. Blocul Media & Text rezolvă această problemă și asigură alinierea perfectă a textului la imagine, fără a perturba compoziția și aspectul. Acesta este motivul pentru care ar trebui să utilizați acest bloc.

Îmbunătățește designul site-ului web și pe dispozitivele mobile. Acest bloc de împachetare ajută tema WordPress să acopere diferite aspecte mobile. Pe smartphone, fiecare parte a site-ului trebuie să fie clar vizibilă și lizibilă. Cum va arăta blocul Media și Text pe telefoanele mobile și pe mânerele de masă „Stack on mobile” pe care o vom analiza mai jos.

În scurt timp, veți putea folosi blocul Media și Text în noua noastră temă WordPress numită Citadela. Aflați mai multe despre tema Citadela într-un articol separat.

Cum se adaugă blocul Media și Text în editorul de blocuri?

Adăugarea blocului Media și Text este la fel de ușoară ca și adăugarea oricărui alt bloc. Este un bloc de bază care înseamnă că nu trebuie să descărcați sau să instalați nimic.

Folosind pictograma „+” din panoul de sus sau oriunde în editor și selectând blocul Media și Text.

Ultima opțiune este să tastați „/“ și să scrieți „media” după aceea. WordPress vă va afișa automat blocurile selectate care se potrivesc cu ceea ce ați căutat.

Cum funcționează blocul Media și Text?

Blocul Media și Text grupează practic 2 tipuri diferite de conținut într-unul singur. Primul este mediu, de exemplu, imagine sau videoclip pe care îl puteți adăuga prin:

• Încărcați
• Biblioteca media
• Trage si lasa

Al doilea este spațiul pentru conținutul textului. Puteți scrie acolo paragrafe de text, liste cu marcatori sau titlu. Puteți adăuga și acolo Bloc de butoane despre care vorbeam mai devreme.

Blocul Media și Text aliniază întotdeauna imaginea și textul unul lângă altul, indiferent cât de mult text ați scrie. Cum functioneazã? Imaginea se ajustează automat în funcție de înălțimea conținutului din coloana de text.

Setări Media & Text Block

Setări generale pentru blocuri

1. Bara de instrumente de sus

Bara de instrumente de deasupra blocului oferă mai multe opțiuni. Dacă tema dvs. activă acceptă acest lucru, puteți seta blocul Media și text ca lățime largă sau completă. De asemenea, puteți alege unde doriți să plasați imaginea sau videoclipul făcând clic pe:

• Afișați media în stânga
• Afișați media în dreapta

În bara de instrumente de sus există, de asemenea, o pictogramă pentru a edita mediul, unde puteți seta Alt Text, Titlu, Legendă sau Descriere. Aflați mai multe despre editarea imaginilor în articolul nostru Lucrul cu blocul de imagini WordPress.

2. Bara laterală dreaptă

Bara laterală din dreapta oferă setări suplimentare pentru blocul Media și Text. Este posibil să adăugați aici text alternativ, să setați culoarea de fundal sau să adăugați o clasă CSS suplimentară. De asemenea, puteți activa funcția „Stiva pe mobil”.

Ce este Stack pe mobil?

Datorită acestei funcții, imaginea și textul sunt afișate frumos pe dispozitivele mobile. Dacă dezactivați „Stiva pe mobil”, imaginea și textul vor rămâne una lângă alta și vor fi greu de citit în versiunea receptivă.

Dacă activați această funcție, conținutul de pe telefonul mobil din partea stângă va fi afișat deasupra conținutului din partea dreaptă.

Alinierea textului

O parte a blocului Media și Text este împreună cu imaginea sau videoclipul și conținutul text. Poate fi unul dintre următoarele tipuri de conținut:

1. Paragraf

În bara de instrumente de sus, puteți seta alinierea textului, puteți face textul bold, italic sau adăugați link-ul URL.

În bara laterală din partea dreaptă puteți alege dimensiunea fontului, culoarea fontului sau culoarea paragrafului. Caracteristica interesantă este „Drop Cap” care va evidenția primul caracter al textului. Este o caracteristică frumoasă în postările bloc pentru a face textul mai interesant.

2. Titlu

Titlul este foarte asemănător cu Paragraf. Puteți, de asemenea, să configurați aspectul acestuia, să faceți aldine sau cursive și să introduceți linkul URL. Diferența este că puteți alege tipul de titlu – H2, H3, H4.

Alte dimensiuni de titlu și setări de aliniere sunt disponibile în bara laterală din partea dreaptă.

3. Lista

Dacă adăugați List block la conținutul dvs., acesta poate fi marcator, listă numerotată sau listă cu mai multe niveluri. De asemenea, puteți face textul îngroșat, cursiv și puteți adăuga link URL.

4. Bloc de butoane

Acest bloc care adaugă un buton la conținut poate fi ajustat la designul site-ului. Culoarea și stilul butoanelor sau culoarea de fundal pot fi configurate în bara laterală din partea dreaptă.

Nu uitați să citiți articolul despre Bloc de butoane. 

Comutarea între tipurile de blocuri

În blocul Media & Text este posibil să convertiți un tip de bloc de conținut în altul. De asemenea, puteți schimba blocul Media și Text în Blocul Imagine și partea de text va fi ștearsă.

În conținutul text, este posibil să schimbați blocul Paragraf în blocul Titlu sau Listă.

Bonus: Cum se justifică textul în WordPress

Folosirea unui text justificat are aspecte pozitive și negative. Textul justificat poate fi găsit de obicei în cărți sau ziare, dar nu mai este folosit pe site-uri web. De ce?

În urmă cu câțiva ani, funcția Justify a fost integrată chiar în editorul WordPress Classic. Text justificat folosit pentru a cauza probleme de vizibilitate în diverse browsere sau dispozitive mobile. Este, de asemenea, legat de lizibilitatea dificilă a textului justificat. Prin urmare, această funcție a fost depreciată și eliminată.

Această funcționalitate particulară nu există nici în noul editor de blocuri (Gutenberg).

Deci cum justificați textul dacă doriți cu adevărat?

Soluția este să adăugați cod CSS simplu în câțiva pași:

1. Există o setare pentru blocul Clasă de Paragraf CSS suplimentară în bara laterală din partea dreaptă
2. Scrie acolo numele clasei „justifica„
3. Publicați pagina sau articolul
4. Dacă îl previzualizați, faceți clic pe Personalizare în bara de sus principală
5. În partea stângă există o nouă bară laterală cu setări
6. Faceți clic pe CSS suplimentar
7. Introduceți următorul cod CCS:

p.justify { text-align: justifica; }

Terminat. De acum înainte, textul din Blocul dvs. Media și Text este justificat.

WordPress a devenit mai utilizabil fără generatori de pagini terți, datorită editorului Gutenberg. Are o valoare excelentă pentru site-ul dvs. din punct de vedere pe termen lung și atunci când creați sau reproiectați un site web. Blocurile Gutenberg oferă o gamă largă de stil, oricum ați găsi mâna Cod WordPress pentru împachetarea textului în jurul imaginilor.

Ce părere aveți despre blocul Media & Text? L-ai folosit deja? Cum îți place să lucrezi cu el? Anunțați-ne în comentariile de mai jos.