Cum să adăugați suprapunere de text pe imagini în WordPress?

Imaginile cu o suprapunere de text arată grozav, transmit un mesaj și sunt utile în special pentru anteturi. Dar, să recunoaștem, nimeni nu vrea să codifice această caracteristică în editor și nici nimeni nu ar avea timp să creeze textul în imaginea însăși. Din fericire, există câteva procese foarte simple care necesită zero codare personalizată și sunt ușor de realizat cu editorul de blocuri Gutenberg, un instrument de editor de conținut încorporat al WordPress. În acest tutorial, vom trece peste câteva dintre aceste metode și, până la sfârșit, veți putea adăuga text suprapus peste imagini pe întregul site web WordPress.

Suprapunere text pe imagini

În primul rând, ce este o suprapunere de text? O suprapunere de text este orice tip de conținut scris care acoperă suprafața conținutului vizual, cum ar fi videoclipuri și imagini. Suprapunerile de text sunt folosite mai ales în anteturi și bannere din secțiunea eroi a site-urilor web. În loc să aibă doar un text simplu ca titlu, inclusiv o imagine cu text și suprapunere face ca site-ul web să arate mult mai bine din punct de vedere profesional și estetic. În plus, puteți lega textul suprapus la produsul sau pagina corespunzătoare de pe site-ul dvs. pentru a genera trafic.

Cum să adăugați suprapunere de text pe imagini în WordPress?

Înainte de versiunea 5.0, WordPress folosea un editor clasic simplu pentru a crea postări și pagini. Nu a fost posibil să adăugați butoane, tabele sau decorațiuni precum suprapuneri de text cu editorii clasici. Prin urmare, a trebuit să utilizați un plugin personalizat sau de generator de pagini de la dezvoltatori terți. Cu toate acestea, puteți face multe lucruri cu editorul de blocuri Gutenberg fără niciun plugin suplimentar. De exemplu, există mai multe modalități de a adăuga text suprapus pe imagini în WordPress cu editorul de blocuri Gutenberg. Această postare vă va ghida prin toți pașii și metodele pe care trebuie să le urmați pentru a adăuga text suprapus pe imagini de pe site-ul dvs. WordPress.

Deci, ce așteptăm? Să începem!!

Notă: așa cum explicăm cu Gutenberg, asigurați-vă că utilizați editorul de blocuri Gutenberg implicit pe site-ul dvs. și nu editorul vechi cu pluginul Editor clasic.

1. Adăugarea suprapunerii text prin bloc de imagine

• Când vă aflați în editorul de postări sau pagini, faceți clic pe pictograma de inserare a blocurilor (+) și selectați bloc de imagini pentru a adăuga o nouă imagine. O altă opțiune este să tastați /image și să apăsați tasta Enter.
• Aveți mai multe opțiuni pentru a insera o imagine. Selectați Încărcare pentru a adăuga o imagine de pe computer sau utilizați opțiunea Media Library dacă doriți să alegeți o imagine existentă pe site-ul dvs. WordPress. Alternativ, puteți utiliza și Insert from URL dacă doriți să adăugați direct o imagine dintr-un link.
• Faceți clic pe imaginea în care doriți să adăugați suprapunerea textului.
• În bara de instrumente de sus, faceți clic pe butonul „Adăugați text peste imagine”, așa cum se arată în captura de ecran de mai jos.

• După ce dați clic, veți observa unele modificări în editorul de blocuri din partea dreaptă a paginii (care se numește panou de documente). Derulați în jos pe panou până ajungeți la secțiunea „Suprapunere”, așa cum se arată în imaginea de mai jos. Aici aveți opțiunea de a face oricare dintre următoarele:
  • Adăugați o culoare de suprapunere solidă sau un gradient ca fundal pentru a vă asigura că textul iese în evidență mai vizibil. Pentru ambele opțiuni, aveți opțiunea de a alege una dintre culorile prestabilite din meniu, de a alege o culoare personalizată din paletă sau de a adăuga un anumit cod de culoare la alegere. Puteți face același lucru și pentru opțiunea de culoare gradient. Un gradient este practic o schemă de culori constând din cel puțin două combinații de culori. Cu alte cuvinte, culoarea suprapunerii se va schimba treptat și respectiv de la prima la a doua și mai mult (dacă este cazul).
  • Schimbați nivelurile de opacitate în funcție de cât de mult din imaginea de bază doriți să fie văzută. Vă recomandăm niveluri de opacitate între 30 și 60%, deoarece orice sub 30% poate lăsa suprapunerea aproape indistinguită, în timp ce depășirea 60% va face suprapunerea prea întunecată, ceea ce face dificilă vizualizarea clară a imaginii de fundal.

• Pentru a adăuga textul, faceți clic pe secțiunea „Type/pentru a alege un bloc” suprapusă pe imagine. Acest lucru va schimba acum editorul de blocuri pentru a afișa setările de editare specifice textului suprapus.
• Tastați textul pe care doriți să-l afișați peste imagine, așa cum se vede în captura de ecran de mai jos.

• Pentru a schimba culoarea textului, mergeți la secțiunea „Culoare” a editorului de blocuri. Aici aveți posibilitatea de a face următoarele modificări de culoare textului suprapus.
  • Schimbați culoarea textului. Vă recomandăm să selectați o culoare de text care să se potrivească bine cu culoarea de suprapunere și cu nivelul de opacitate ales.
  • Adăugați o culoare de fundal și/sau o culoare pentru link dacă ați legat textul la o altă pagină printr-un hyperlink.
• Pentru a schimba tipografia textului suprapus, derulați în jos editorul de blocuri până când ajungeți la setările „Tipografie” . Aici puteți selecta una dintre dimensiunile de text prestabilite dintr-un meniu vertical sau puteți introduce manual o dimensiune specifică făcând clic pe butonul „Dimensiune personalizată” . Am selectat dimensiunea textului ca „Uriaș”, care este una dintre dimensiunile de text prestabilite disponibile. Simțiți-vă liber să alegeți dimensiunea textului care vi se potrivește cel mai bine.

• Dacă doriți să modificați alinierea textului suprapus, să îl faceți aldine sau să adăugați un link către acesta, puteți face acest lucru cu ușurință selectând opțiunile din bara de instrumente de sus, așa cum se arată în imaginea de mai jos.
• În cele din urmă, în editorul de blocuri, veți găsi fila Avansat care vă permite să adăugați o clasă CSS la blocul dvs., oferindu-vă șansa de a scrie CSS personalizat și de a stila imaginea și de a suprapune pe blocul de imagine în funcție de nevoile dvs. specifice. Cu toate acestea, dacă nu aveți suficiente cunoștințe și cunoștințe despre dezvoltarea front-end, atunci folosirea funcțiilor prestabilite oferite de editorul de blocuri ar trebui să fie mai mult decât suficientă pentru a stila blocul de imagine după cum credeți de cuviință.

Notă: Culorile gradiente adaugă un aspect vibrant și artistic imaginilor, conținutului și site-ului dvs., în ansamblu. Prin urmare, pentru a profita la maximum de această funcție de suprapunere de culori din editorul de blocuri WordPress, vă recomandăm să învățați arta de a amesteca și potrivi diferite combinații de culori pentru a vedea ce funcționează cel mai bine cu marca dvs. și conținutul pe care îl aveți deja pe site-ul dvs. web. O altă opțiune ar fi să lucrați cu un designer, deoarece acesta va putea oferi recomandări artistice care sunt specifice aspectului vizual spre care doriți să se străduiască site-ul dvs.

Înrudit: Aflați cum să adăugați o suprapunere de imagini pe site-ul Weebly?

2. Adăugarea unei suprapuneri de text prin intermediul blocului de acoperire

Când adăugați o suprapunere de text folosind blocul de imagini, puteți observa că firul de pană al documentului (care se afișează în bara de stare de jos a editorului) se schimbă în blocul „Copertă”. Deoarece WordPress oferă și un bloc de acoperire, îl puteți folosi pentru a adăuga suprapunerea textului. De fapt, vă recomandăm să utilizați blocul „Cover”, care este potrivit pentru crearea secțiunilor de antet cu lățime completă.

• Începeți lucrurile făcând clic pe pictograma (+) „ Adăugați bloc” și selectând coperta pentru a adăuga un bloc de acoperire. De asemenea, puteți să tastați /cover și să apăsați tasta Enter.

• Selectați Încărcare pentru a adăuga o imagine de pe computer sau din Biblioteca dvs. media dacă doriți să alegeți o imagine existentă pe site-ul dvs. WordPress.
• Tastați textul pe care doriți să-l suprapuneți deasupra imaginii, așa cum se arată în captura de ecran de mai jos. Puteți modifica culoarea și dimensiunea textului, din setările Culoare și Tipografie , așa cum sa menționat în metoda anterioară.

Notă: WordPress oferă și câteva modele predefinite pentru secțiunea antet. Puteți face clic pe pictograma „Toggle block inserter +” afișată în colțul din stânga sus al editorului și selectați „Patterns”. Selectați „Antete” din meniul derulant și inserați un model de bloc de copertă cu o configurație predefinită. Acest lucru este foarte util, deoarece puteți edita conținutul și actualiza rapid în loc să creați de la zero.

3. Adăugarea de text suprapus pe imaginile galeriei

De asemenea, este ușor să adăugați text suprapus pe imagini în galeria WordPress folosind blocul implicit „Galerie”.

• Faceți clic pe butonul de inserare a blocurilor (+) pentru a adăuga un nou bloc în pagina dvs.
• De data aceasta, selectați blocul galeriei . Alternativ, puteți să tastați /galerie și să apăsați Enter.

• Vi se vor oferi două opțiuni pentru a adăuga o imagine, Încărcare și Biblioteca media. Ca și în cazul metodelor anterioare menționate mai sus, selectați Încărcare dacă doriți să adăugați o imagine de pe dispozitivul dvs. sau alegeți Media Library dacă imaginea pe care doriți să o includeți în secțiunea galerie există deja pe site-ul dvs. web.
• Odată ce ați încărcat imaginile sau ați selectat o imagine din biblioteca media, acum puteți adăuga legende la fiecare imagine, care vor apărea ca text suprapus pe imaginile din galerie.

Notă: Un lucru important de reținut este că, dacă ați adăugat deja subtitrări la imaginile din galeria media înainte de a adăuga blocul de galerie, subtitrările vor apărea ca suprapunere de text pe blocul de galerie menționat. Dimpotrivă, dacă adăugați subtitrări imaginilor după crearea blocului de galerie, acestea nu vor apărea pe blocul de galerie. În acest caz, va trebui să adăugați manual subtitrările odată ce blocul de galerie a fost creat, sau să eliminați blocul de galerie și să adăugați blocul încă o dată, astfel încât să fie folosite subtitrările adăugate.

Alte opțiuni pentru adăugarea suprapunerii textului

Opțiunile de suprapunere a textului încorporate sunt de bază și arată simplu pe site-ul publicat. Puteți utiliza alternativ unul dintre următoarele tipuri de pluginuri pentru a crea suprapuneri.

• Pluginuri Slider precum Slider Revolution sau Kreatura Slider.
• Pluginuri pentru galerie
• Pluginuri pentru generatorul de pagini

Cu toate acestea, aceste pluginuri sunt grele și vă pot încetini cu ușurință site-ul. De asemenea, puteți încerca CSS personalizat pentru a crea suprapunerea imaginilor, așa cum se arată în această pagină demonstrativă. Dar, trebuie să cunoașteți abilitățile de codare și să petreceți mult timp în dezvoltare. Prin urmare, vă recomandăm să utilizați una dintre metodele implicite explicate mai sus pentru a adăuga text suprapus pe imagini în WordPress.

Cuvinte finale

Și iată-l. Adăugarea unei suprapuneri de text pe imagini în WordPress este o sarcină foarte simplă și ușoară folosind editorul de blocuri Gutenberg încorporat. În cele din urmă, adăugarea de text suprapus la imagini îmbunătățește prezentarea, designul, aspectul și estetica generală a site-ului dvs., lăsând astfel o primă impresie pozitivă vizitatorilor dvs. Ca întotdeauna, dacă aveți probleme sau îngrijorări cu privire la adăugarea de text peste imagini pe WordPress, nu ezitați să lăsați un comentariu mai jos și vom face tot posibilul pentru a vă ajuta.