Tutoriale WordPress de încredere, atunci când aveți cea mai mare nevoie.
Ghidul începătorului pentru WordPress
Cupa WPB
25 de milioane+
Site-uri web care folosesc plugin-urile noastre
16+
Ani de experiență WordPress
3000+
Tutoriale WordPress de la experți

Cum să adăugați text peste o imagine în WordPress (3 metode)

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.

Cum să adăugați text peste o imagine în WordPress

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:

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.

Blocul cover WordPress

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”.

Înlocuire copertă WordPress

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.

Copertă înlocuire încărcare

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.

Suprapunere de culoare a copertei

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.

Cum să adăugați text peste o imagine în WordPress

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.

Stilul textului deasupra unei imagini WordPress

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.

Schimbarea culorii textului peste o imagine

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.

Adăugarea textului deasupra unei imagini în WordPress

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.

Bloc imagine WordPress

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”.

Adaugă imagine text

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.

Culoarea blocului de imagini

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.

Text mic mare

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ță”.

Pagina de descărcări SeedProd

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ță”.

Verificarea licenței SeedProd

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ă”.

Șabloanele de design de pagină SeedProd

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”.

SeedProd alege șablonul

Î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”.

Șabloanele proiectate profesional de SeedProd

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”.

Un șablon de generare de lead-uri și de conversie

Î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”.

Crearea unui aspect personalizat al paginii cu SeedProd

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.

Adăugarea de blocuri la designul dvs. SeedProd

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.

Personalizarea unui design de pagină SeedProd gata făcut

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.

Un șablon de secțiune SeedProd

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”.

Un șablon erou SeedProd

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.

Ștergerea unei imagini de fundal în SeedProd

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”.

Alegerea unei imagini de stoc SeedProd

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.

Biblioteca de imagini stoc SeedProd

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.

Adăugați text peste o imagine folosind SeedProd

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.

Editarea textului dvs. 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.

Ștergerea secțiunilor și blocurilor SeedProd

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.

Publicarea unui design SeedProd

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:

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.

Dezvăluire: Conținutul nostru este susținut de cititori. Acest lucru înseamnă că dacă faceți clic pe unele dintre linkurile noastre, este posibil să câștigăm un comision. Vedeți cum este finanțat WPBeginner, de ce contează și cum ne puteți susține. Iată procesul nostru editorial.

Cel mai bun instrumentar WordPress

Obține acces GRATUIT la instrumentarul nostru - o colecție de produse și resurse legate de WordPress pe care fiecare profesionist ar trebui să le aibă!

Interacțiuni cu cititorii

9 CommentsLeave a Reply

  1. 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ă.

    • 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

  2. 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ă?

    • 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

      • 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.

    • 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

  3. 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ă.

Lasă un răspuns

Vă mulțumim că ați ales să lăsați un comentariu. Vă rugăm să rețineți că toate comentariile sunt moderate conform politicii noastre de comentarii, iar adresa dvs. de e-mail NU va fi publicată. Vă rugăm să NU folosiți cuvinte cheie în câmpul nume. Să avem o conversație personală și semnificativă.