Doriți să adăugați text imaginilor dvs. WordPress? Acele titluri și citate atractive pe care le vedeți stratificate peste fotografii pot face cu adevărat conținutul dvs. să iasă în evidență. Se numește suprapunere de text și este o modalitate excelentă de a face imaginile dvs. mai captivante.
Dacă v-ați întrebat cum să creați aceste suprapuneri de text, ați putea crede că aveți nevoie de software sau abilități speciale de design. Veste bună – nu aveți nevoie!
Am testat tot felul de metode și am găsit mai multe modalități simple de a adăuga text la imagini direct în WordPress. Nu este necesară experiență de design și nici software suplimentar de cumpărat.
Gata să înveți cum? Vă vom arăta trei moduri simple de a adăuga text peste o imagine în WordPress. Până la sfârșitul acestui ghid, veți crea suprapuneri de text cu aspect profesional pentru site-ul dvs. cu încredere.

Când să Adăugați Text Peste Imagini în WordPress
Imaginile pot spori semnificativ atractivitatea site-ului dvs. WordPress, făcându-l mai interesant vizual, ajutând în același timp la spargerea secțiunilor lungi de text.
Cu toate acestea, există momente când o imagine singură nu spune întreaga poveste. În acele cazuri, adăugarea de suprapuneri de text poate oferi context suplimentar, ajutând publicul să înțeleagă de ce imaginea este relevantă pentru conținut.
Indiferent dacă administrați un blog WordPress sau un magazin online, suprapunerile de text pot transforma imaginile obișnuite în anteturi sau bannere care atrag atenția.
În această postare, avem trei modalități prietenoase pentru începători de a adăuga text deasupra unei imagini în WordPress. Dacă preferați să săriți direct la o anumită metodă, atunci puteți folosi linkurile de mai jos:
- Metoda 1: Adăugați text deasupra unei imagini folosind blocul Cover
- Metoda 2: Adăugați text peste o imagine folosind blocul Imagine
- Method 3: Create a Custom Page Layout with Text on Top of an Image
Metoda 1: Adăugați text deasupra unei imagini folosind blocul Cover
O modalitate de a adăuga text peste o imagine în WordPress este prin utilizarea blocului Cover. Puteți folosi acest bloc pentru a afișa orice imagine și apoi a scrie text peste imagine. Acest lucru face ca blocul Cover să fie perfect pentru crearea de imagini eroice, anteturi și bannere.
Pentru a adăuga un bloc Copertă la o pagină sau postare, pur și simplu faceți clic pe butonul plus „+ Adăugare bloc” din editorul de blocuri Gutenberg.
Acum puteți tasta „Copertă” și selecta blocul corect când apare.

Aici puteți alege blocul implicit Copertă.
Dar puteți opta și pentru opțiunea cu șablon, cu imaginea și textul de tip placeholder. Cu a doua opțiune, puteți pur și simplu înlocui imaginea și textul existent cu ale dvs.
Pentru a înlocui imaginea implicită, pur și simplu faceți clic pentru a selecta imaginea. Odată ce ați făcut acest lucru, faceți clic pe butonul „Înlocuire”.

Dacă doriți să utilizați o imagine care se află deja în biblioteca media WordPress, atunci pur și simplu faceți clic pe „Deschide biblioteca media”. Puteți apoi alege o imagine existentă.
Dacă doriți să încărcați o imagine nouă, faceți clic pe „Încărcare” în schimb.

Aceasta deschide o fereastră unde puteți alege orice fișier de pe computerul dvs.
După ce alegeți o imagine, puteți utiliza setările blocului pentru a crea efecte interesante și atrăgătoare.
De exemplu, puteți face ca imaginea să fie fixată în loc pe măsură ce vizitatorul derulează pagina sau puteți adăuga o suprapunere de culoare peste imagine.

Dacă utilizați un strat de suprapunere, atunci îi puteți schimba opacitatea folosind glisorul „Opacitate”. Setarea de opacitate controlează transparența imaginii de fundal.
Când ești mulțumit de aspectul imaginii, ești gata să adaugi text.
Implicit, blocul Copertă are un bloc Titlu și un bloc Paragraf unde puteți adăuga text peste imagine.

Pentru a adăuga text, pur și simplu faceți clic pentru a selecta blocul Antet sau Paragraf. Apoi, continuați și introduceți textul pe care doriți să îl utilizați.
Când adăugați text peste imagini, asigurați-vă că textul dvs. este lizibil pentru toți vizitatorii. Un contrast bun între text și fundal ajută pe toată lumea să vă citească conținutul mai ușor. Pentru a afla mai multe, consultați ghidul nostru despre cum să îmbunătățiți accesibilitatea pe site-ul dvs. WordPress.
Acestea fiind spuse, s-ar putea să doriți să stilizați textul pentru a fi mai ușor de citit.
Dacă lucrați cu un bloc de Titlu, atunci puteți încerca și diferitele stiluri de titlu pentru a vedea care este cel mai ușor de citit.

Puteți, de asemenea, să vă ajutați textul să iasă în evidență folosind o culoare contrastantă.
Pentru a alege o altă culoare, selectați fila „Bloc” din meniul din dreapta. Apoi, faceți clic pe „Culoare” pentru a extinde această secțiune.
Odată ce ați făcut acest lucru, faceți clic pe „Text”. Aceasta deschide o fereastră pop-up unde puteți alege o nouă culoare pentru tot textul din bloc.

De obicei, textul mai mare este mai ușor de citit.
Pentru a face textul mai mare, dă clic pe câmpul de lângă „Dimensiune” și apoi tastează un număr mai mare în acest câmp.

Odată ce ești mulțumit de aspectul blocului Trup (Cover), poți publica sau actualiza pagina ca de obicei. Acum, dacă vizitezi site-ul tău WordPress, vei vedea textul tău deasupra imaginii.
Metoda 2: Adăugați text peste o imagine folosind blocul Imagine
Blocul Cover este excelent pentru crearea de bannere și anteturi. Cu toate acestea, puteți adăuga și text peste un bloc standard de imagini WordPress.
Pentru a începe, va trebui să adăugați un bloc de imagini pe pagina sau postarea dvs. Pentru a face acest lucru, pur și simplu faceți clic pe butonul plus „+ Adăugare bloc” din editorul de blocuri WordPress.
Apoi puteți tasta „Imagine” și selecta blocul corect pentru a-l adăuga la postarea dvs.

Puteți apoi fie să încărcați o imagine de pe computer, fie să faceți clic pe „Biblioteca media” pentru a alege o imagine din biblioteca media WordPress.
După ce ați ales imaginea, puteți schimba punctul focal, adăuga o suprapunere și schimba opacitatea urmând același proces descris mai sus.
Puteți încerca, de asemenea, diferiți glisoare „Fundal fix” și „Fundal repetat” pentru a vedea ce funcționează cel mai bine pentru blocul dvs. de imagini.
Când ești mulțumit de aspectul imaginii, dă clic pe butonul „Adaugă text peste imagine”.

Aceasta adaugă o zonă unde puteți introduce textul dvs.
În funcție de imaginea dvs., vizitatorii ar putea avea dificultăți în a citi textul suprapus. Aici, ar putea ajuta să faceți textul aldine sau să îi schimbați culoarea urmând același proces descris mai sus.

Puteți, de asemenea, să măriți textul.
Pentru a face acest lucru, găsiți secțiunea „Dimensiune” în meniul din dreapta. Puteți apoi continua și face clic pe diferitele numere pentru a face textul mai mare sau mai mic.

Când sunteți mulțumit de aspectul textului și al imaginii, continuați și previzualizați site-ul web. Apoi, faceți clic pe „Salvare schiță”, „Actualizare” sau „Publicare” pentru a salva modificările.
Dacă utilizați o temă WordPress de tip bloc, atunci puteți folosi Metodele 1 și 2 pentru a adăuga text peste o imagine în orice parte a temei dvs. folosind Editorul Complet al Site-ului WordPress (FSE).
Poți afla mai multe despre FSE în ghidul nostru complet pentru începători despre Editarea Completă a Site-ului WordPress.
Metoda 3: Crearea unui aspect personalizat al paginii cu text peste o imagine
Blocurile încorporate WordPress sunt o modalitate rapidă și ușoară de a adăuga text peste o imagine în WordPress. Cu toate acestea, dacă doriți libertatea de a crea designuri de pagini complet personalizate, atunci veți avea nevoie de un plugin de creare de pagini.
SeedProd este cel mai bun plugin pentru crearea de pagini WordPress de pe piață. Acesta vă permite să adăugați text peste orice imagine de pe întregul site web.
Notă: Există o versiune gratuită a SeedProd, dar pentru acest ghid vom folosi versiunea Pro, deoarece are mai multe funcționalități.
Puteți citi recenzia noastră completă SeedProd pentru mai multe detalii.
Mai întâi, trebuie să instalați și să activați pluginul SeedProd. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalezi un plugin WordPress.
La activare, va trebui să introduceți cheia de licență SeedProd. Puteți obține această cheie conectându-vă la contul dumneavoastră SeedProd. Apoi, faceți clic pe fila „Descărcări”.
Odată ce ați făcut acest lucru, puteți copia cheia din secțiunea „Cheie de licență”.

Acum puteți lipi această cheie în zona de administrare WordPress accesând pagina SeedProd » Setări.
Odată ce sunteți aici, continuați și lipiți cheia în câmpul „Cheie de licență”.

Apoi, trebuie doar să faceți clic pe „Verificați cheia”.
După aceea, vom merge la SeedProd » Pagini de destinație și vom face clic pe „Adăugare pagină de destinație nouă”.

Acest prim pas este necesar înainte de a putea adăuga text peste imaginile dvs.
Următoarea dvs. sarcină este să alegeți un șablon, care va fi punctul de plecare al paginii dvs.
Indiferent de șablonul SeedProd pe care îl alegeți, puteți personaliza fiecare parte a șablonului pentru a se potrivi perfect site-ului și brandingului dumneavoastră. Dacă preferați să începeți cu o pânză goală, atunci puteți face clic pe „Șablon gol”.

În toate imaginile noastre, folosim șablonul Tasty Squeeze Page, care este perfect pentru campaniile de obținere de mai mulți abonați.
Odată ce ați găsit un șablon pe care ați dori să îl utilizați, plasați cursorul mouse-ului peste el. Puteți apoi face clic pe pictograma „Previzualizare”.

Aceasta va afișa o previzualizare a șablonului.
Dacă sunteți mulțumit de aspectul acestui șablon, faceți clic pe butonul „Alegeți acest șablon”.

În câmpul „Nume pagină”, introduceți un nume pentru pagină.
Implicit, SeedProd va folosi acest nume ca URL al paginii. Dacă doriți să schimbați acest URL creat automat, pur și simplu editați textul din câmpul „Page URL”.

Când sunteți mulțumit de informațiile introduse, faceți clic pe butonul „Salvează și începe editarea paginii”. Aceasta va deschide șablonul în editorul drag-and-drop al SeedProd.
În bara laterală din stânga, veți vedea toate blocurile și secțiunile pe care le puteți trage și plasa pe pagina dvs.

Cu excepția cazului în care utilizați șablonul gol, pagina dvs. SeedProd va avea deja unele blocuri și secțiuni. Pentru a edita oricare dintre aceste conținuturi, faceți clic pur și simplu pentru a selecta blocul sau secțiunea.
Meniul din stânga al SeedProd va afișa acum toate setările pe care le puteți utiliza pentru a personaliza acest bloc sau secțiune. După cum puteți vedea în imaginea următoare, puteți schimba textul care apare în blocul Titlu.

Cel mai simplu mod de a adăuga text deasupra unei imagini este prin utilizarea uneia dintre secțiunile Hero gata făcute de la SeedProd.
Aceste secțiuni au o imagine de fundal de tip placeholder, pe toată lățimea, cu un text placeholder adăugat deasupra. Puteți pur și simplu să înlocuiți imaginea de fundal și textul implicit cu propriul conținut.
Pentru a începe, faceți clic pe fila „Secțiuni” din meniul din stânga SeedProd.
Apoi puteți face clic pe „Erou” pentru a vedea toate secțiunile de erou gata făcute pe care le puteți adăuga la pagina dvs.

Pentru a previzualiza oricare dintre aceste șabloane de secțiuni, pur și simplu treceți cu mouse-ul peste șablon și apoi faceți clic pe pictograma lupă.
Pentru a continua și a adăuga această secțiune eroică la designul dvs., pur și simplu faceți clic pe „Choose This Section”.

Apoi, vei dori să înlocuiești imaginea de stoc a șablonului cu propria ta imagine. Pentru a face acest lucru, pur și simplu dă clic pe imaginea de stoc pentru a o selecta.
Apoi, în meniul din stânga al SeedProd, treceți cu mouse-ul peste previzualizarea „Imagine de fundal” până când apare o pictogramă de coș de gunoi.
Apoi puteți continua și faceți clic pe această pictogramă pentru a șterge imaginea placeholder.

Apoi, faceți clic pe „Utilizați propria imagine”. Puteți apoi fie să alegeți o imagine din biblioteca media WordPress, fie să utilizați o imagine de stoc.
SeedProd îți oferă acces ușor la mii de imagini de stoc fără drepturi de autor. Pentru a răsfoi biblioteca de imagini de stoc SeedProd, dă clic pe „Utilizează o imagine de stoc”.
În bara de căutare, tastați un cuvânt sau o frază care descrie imaginea pe care o căutați și faceți clic pe butonul „Căutare”.

SeedProd va afișa acum toate imaginile stoc care corespund termenului dvs. de căutare.
Când găsiți o imagine pe care doriți să o adăugați la designul dvs., pur și simplu dați clic pe ea.

Odată ce ați adăugat o imagine, sunteți gata să înlocuiți textul placeholder.
Pentru a face acest lucru, faceți clic pentru a selecta blocul de text. Apoi, în zona „Text”, pur și simplu introduceți textul pe care doriți să îl utilizați.

Unele dintre șabloanele de erou SeedProd au conținut suplimentar, cum ar fi butoane de apel la acțiune.
Doriți să schimbați acest conținut? Apoi, pur și simplu faceți clic pentru a selecta blocul și apoi faceți modificările în meniul din stânga al SeedProd.

O altă opțiune este să ștergeți blocul din șablonul de antet.
Pentru a face acest lucru, pur și simplu faceți clic pentru a selecta blocul și apoi faceți clic pe pictograma coșului de gunoi.

Când sunteți mulțumit de designul paginii dvs., puteți face clic pe butonul „Salvare”.
De aici, puteți alege să publicați pagina sau să o salvați ca șablon.

Pentru mai multe detalii despre crearea de layout-uri personalizate de pagini cu SeedProd, puteți consulta ghidul nostru despre cum să creezi o pagină de destinație în WordPress.
Sfaturi bonus pentru gestionarea imaginilor și fișierelor în WordPress
Adăugarea de text la imagini este doar o modalitate de a face site-ul dvs. să arate mai bine. Doriți să faceți mai mult cu imaginile dvs.? Consultați aceste ghiduri ușoare:
- Cum să încarci imagini leneș în WordPress cu ușurință
- Cum să adăugați mai multe galerii în postările și paginile WordPress
- Cum să adăugați corect un slider de conținut recomandat în WordPress
- Cum să adăugați o bordură în jurul unei imagini în WordPress
- Cum să decupați și să editați miniaturi de postări WordPress
- Cum să adaugi cu ușurință imagini interactive la 360 de grade în WordPress
Sperăm că acest articol v-a ajutat să învățați cum să adăugați text peste o imagine în WordPress. De asemenea, ați putea dori să consultați ghidul nostru despre cum să editezi în masă imaginile de prezentare și selecțiile noastre experte pentru cele mai bune plugin-uri de slider WordPress.
Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.

Ben
Tutorial drăguț. Pentru metoda 1, unde putem adăuga un strat de text peste imagine, cum să facem ca atât imaginea, cât și textul stratului să fie un link clicabil. ceea ce înseamnă că atunci când trecem cu mouse-ul peste imagine, aceasta este clicabilă. Până acum, am încercat multe metode, dar putem face clicabil doar textul stratului. Vă rugăm să împărtășiți contribuția dumneavoastră.
Suport WPBeginner
Blocul cover nu este conceput cu această funcționalitate în minte. Pentru a realiza acest lucru, ați folosi un bloc de imagini și ați stiliza imaginea conform designului dorit.
Admin
Jiří Vaněk
Aș dori să întreb despre responsivitatea site-ului web. Când plasez text pe o imagine într-o anumită poziție pe desktop, acesta ajunge într-o poziție complet diferită pe mobil. Cum este gestionată responsivitatea în acest context? Îmi este destul de dificil să mențin același design atât pe desktop, cât și pe mobil, deoarece imaginea se ajustează din cauza dimensiunii mai mici a ecranului. Sau este aceasta mai degrabă o problemă cu tema aleasă?
Suport WPBeginner
Ar depinde de metoda pe care o utilizați și de tema specifică pe care o utilizați pentru acea problemă și cum să o depanați.
Admin
Jiří Vaněk
Vă mulțumesc pentru răspuns. Folosesc tema GeneratePress. Mă gândeam că ar putea exista o soluție, poate folosind CSS sau o altă metodă, pentru a fixa totul la locul lui. Voi urma sfatul dvs. și voi încerca să obțin mai multe informații de la dezvoltatorii temei. Ei răspund foarte repede și sunt foarte de ajutor. Vă mulțumesc pentru timpul acordat.
Viktorija
Salut, încerc să adaug un titlu și când apeși pe el te duce la o imagine.
Suport WPBeginner
Pentru ceea ce pare că doriți, ați dori să utilizați metoda 2 și să adăugați un link la acel bloc.
Admin
Trish
Bună, personal editorial,
Sunt puțin dezamăgit de blocul Copertă din WordPress, deoarece suprapunerea de text NU este responsivă în vizualizarea mobilă, din păcate, făcând textul complet ilizibil.
Credeam că ar trebui să știți despre această problemă.
Suport WPBeginner
Vă mulțumim că ați semnalat că blocul nu este în prezent receptiv.
Admin