Trebuie să aflați cum să adăugați o imagine într-un text în Elementor ?

Elementor a făcut posibil ca toată lumea să devină un designer web fără a avea nevoie de abilități CSS avansate. Editorul său vizual vă permite să creați o pagină web frumoasă fără a scrie o singură linie de cod CSS. Puteți adăuga elementele de design (widget-uri) dorite și le puteți personaliza în panoul de setări.

Chiar și așa, a avea unele abilități CSS ar fi un mare bonus în utilizareElementor. Veți putea aplica stiluri unice paginii dvs. web folosind funcția CSS personalizat d 'Elementor. În acest articol, vă vom arăta cum să adăugați o imagine la text în Elementor folosind funcția CSS personalizată a Elementor.

În unele OUTILS modele precum GIMP și Photoshop, de obicei trebuie să adăugați un marcator de strat pentru a adăuga o imagine în text. În Elementor, puteți realiza același lucru adăugând cod CSS că widgetul Elementor Titlu și widgetul Text nu au opțiune de setare pentru a adăuga imaginea ca fundal.

Adăugați o imagine la un text Elementor

Înainte de a începe, asigurați-vă că ați actualizat versiunea dvs. Elementor la versiunea pro, dacă nu ați făcut-o, deoarece funcționalitatea CSS personalizată este disponibilă numai pe Elementor Pro. După ce sunteți gata, creați o nouă pagină sau șablon și editați-o cu Elementor. Desigur, puteți edita și o pagină sau un șablon existent.

Vezi și: Elementor: Cum să adăugați un cuprins

Adăugați widgetul Titlu în caseta de editare.

Cum se adaugă o imagine textului în Elementor

Accesați panoul de setări pentru a înlocui textul implicit de sub filă Conținut.

Citiți și ghidul nostru despre: Elementor: Cum se folosește selectorul de culori

Accesați fila Stil pentru a personaliza textul. Puteți seta dimensiunea textului, stilul fontului, etc ... făcând clic pe pictograma creion din Opțiunea de tipografie sub bloc Titlu. Deoarece doriți să utilizați o imagine ca fundal pentru textul dvs., nu este nevoie să setați culoarea textului.

Apoi accesați fila avansat și deschideți blocul pachet personalizat CSS și lipiți următorul cod CSS. Înlocuiți adresa URL a imaginii cu propria adresă URL a imaginii.

selector .elementor-heading-title
{
     background: url("https://www.wppagebuilders.com/wp-content/uploads/2020/05/gradient-progress-bar-elementor.jpg") green repeat 30% 70%  ;
     -webkit-background-clip:text;
     -webkit-text-fill-color:transparent;
}

Iată exemplul.

Cum se adaugă o imagine textului în Elementor

Obțineți Elementor Pro acum!

Concluzie

Aici ! Asta este pentru acest articol care vă arată cum să adăugați o imagine la text în Elementor. Dacă aveți nelămuriri cu privire la modul de a ajunge acolo fanunțați-ne în comentarii.

Cu toate acestea, puteți consulta și resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.

Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.

...