Cum să folosești fonturi cu pictograme în editorul de postări WordPress (fără cod)

Doriți să folosiți fonturi cu iconițe în editorul de postări WordPress?

Fonturile icon permit utilizarea ușoară a imaginilor și simbolurilor în text. Sunt ușoare și nu vor încetini site-ul tău, iar ele pot fi scalate cu ușurință la orice dimensiune și stilizate ca orice alt font de text.

În acest articol, îți vom arăta cum să folosești cu ușurință fonturi icon în editorul de postări WordPress, fără a scrie niciun cod HTML.

Vă vom arăta mai multe metode, fiecare folosind o abordare ușor diferită față de cealaltă. Puteți alege una care funcționează cel mai bine pentru dvs.

Metoda 1. Adăugarea fonturilor iconițelor în editorul de postări WordPress folosind iconițe text bogat JVM

Această metodă este recomandată pentru orice fel de site web WordPress. Este ușor de utilizat și funcționează perfect cu editorul de blocuri.

Mai întâi, trebuie să instalați și să activați pluginul JVM Rich Text Icons. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

După activare, puteți pur și simplu să editați o postare sau pagină WordPress sau să creați una nouă. În interiorul editorului de postări, adăugați un nou bloc de paragraf și veți vedea o nouă pictogramă Steag în bara de instrumente a blocului.

Făcând clic pe el va apărea o fereastră pop-up cu pictograme din care să alegi. Implicit, folosește popularele fonturi de pictograme Font Awesome.

Puteți folosi căutarea pentru a căuta o pictogramă sau pur și simplu derulați în jos pentru a găsi pictograma dorită, apoi faceți clic pentru a o adăuga.

Un avantaj al utilizării fonturilor iconițe este că puteți utiliza CSS pentru a le stiliza.

Cu toate acestea, deoarece utilizați deja editorul de blocuri, puteți utiliza pur și simplu instrumentele de culoare încorporate pentru a stiliza pictogramele.

Pluginul vă permite să utilizați fonturi de pictograme în majoritatea blocurilor de text, cum ar fi Paragraf, Listă, Buton, Coloane, Copertă și multe altele.

Iată un exemplu de utilizare a fonturilor de pictograme și a opțiunilor de bloc pentru a stiliza trei coloane.

Un alt exemplu util de utilizare a fonturilor cu pictograme este cu butoanele.

De data aceasta folosim fonturi icon inline alături de text pentru cele două butoane.

Nu ezitați să utilizați instrumentele editorului de blocuri, cum ar fi alinierea textului, culorile, spațierea și multe altele, pentru a profita la maximum de fonturile iconițelor.

Metoda 2. Adăugați fonturi icon în editorul de postări WordPress cu Font Awesome

Această metodă necesită adăugarea de shortcode-uri în editorul de postări pentru a afișa fonturi de pictograme. Poți folosi această metodă dacă nu ai nevoie să folosești în mod regulat fonturi de pictograme în postările și paginile tale WordPress.

Mai întâi, trebuie să instalați și să activați pluginul Font Awesome. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

După activare, poți edita o postare sau o pagină în WordPress și poți folosi următorul scurtcod pentru a adăuga o pictogramă de font.

[icon name="home"]

Parametrul name aici este numele fontului utilizat de Font Awesome. Puteți găsi întreaga listă pe pagina Font Awesome cheatsheet.

Odată adăugată, puteți previzualiza postarea sau pagina pentru a vedea cum va arăta pictograma pe site-ul live, deoarece nu va fi afișată ca o pictogramă în editorul de blocuri.

Așa arăta pe site-ul nostru de test.

Puteți folosi shortcode-ul într-un paragraf și inline cu alt text. Îl puteți adăuga și pe cont propriu folosind blocul „Shortcode”.

Cu toate acestea, utilizarea blocului „Shortcode” nu vă va oferi opțiunile de stil pe care le veți obține cu alte blocuri de text.

Puteți, de asemenea, adăuga shortcode-ul în coloane pentru a crea o linie de caracteristici.

Ar fi puțin mai complicat, deoarece nu veți putea vedea imaginile reale, iar înălțimea coloanelor se va schimba constant în editor.

Iată cum arăta pe site-ul nostru de test. Coloanele au aceeași înălțime, chiar dacă nu sunt în editor.

Probabil va trebui să vă previzualizați munca într-o nouă filă de browser de multe ori pentru a vedea cum va arăta utilizatorilor.

Metoda 3. Utilizarea fonturilor de pictograme cu constructori de pagini WordPress

Această metodă este excelentă dacă creați o pagină de destinație sau vă proiectați site-ul web folosind un constructor de pagini WordPress precum SeedProd.

SeedProd este cel mai bun constructor de pagini WordPress de pe piață. Îți permite să creezi cu ușurință pagini de destinație uimitoare sau să proiectezi o temă completă de site web.

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ă instalați un plugin WordPress.

La activare, vi se va cere să introduceți cheia de licență a pluginului. Puteți găsi aceste informații în contul dvs. de pe site-ul SeedProd.

După ce ați introdus cheia de licență și ați făcut clic pe „Verifică cheia”, puteți începe să lucrați la pagina dvs. de destinație.

Pur și simplu accesează pagina SeedProd » Pagini de destinație și dă clic pe butonul „Adaugă o pagină de destinație nouă”.

După aceea, vi se va cere să alegeți un șablon pentru pagina dvs. de destinație.

SeedProd vine cu o mulțime de designuri de pagini de destinație frumoase pe care le puteți folosi ca punct de plecare, sau puteți începe cu un șablon gol și puteți proiecta totul singur.

Pentru acest tutorial, vom folosi un șablon pre-proiectat. Pur și simplu faceți clic pe un șablon pentru a-l selecta și a continua.

Apoi, vi se va cere să furnizați un titlu pentru pagina dvs. de destinație și să alegeți un URL.

După ce le-ai introdus, fă clic pe butonul „Salvează și începe editarea paginii” pentru a continua.

SeedProd va lansa acum interfața de builder de pagini. Este un instrument de design drag-and-drop unde poți pur și simplu să indici și să faci clic pe orice element pentru a-l edita.

De asemenea, poți trage și plasa blocuri din coloana din stânga pentru a adăuga noi elemente designului tău.

În scopul acestui tutorial, vom adăuga blocul Icon.

După ce adăugați blocul, puteți face clic pur și simplu pentru a edita proprietățile acestuia.

Coloana din stânga se va schimba pentru a afișa opțiunile pentru blocul Iconiță. Puteți face clic pe secțiunea „Iconiță” din stânga și alege o altă imagine de iconiță sau schimba culoarea și stilul.

O altă modalitate de a folosi pictograme în SeedProd este prin adăugarea blocului „Cutie cu pictograme”.

Diferența dintre acesta și blocul „Icon” pe care l-am folosit anterior este că „Icon Box” vă permite să adăugați text împreună cu pictograma aleasă.

Aceasta este una dintre cele mai comune modalități de a utiliza pictogramele atunci când afișați caracteristicile produselor, serviciile și alte elemente.

Puteți plasa caseta cu pictograme în coloane, alege culorile și ajusta dimensiunea pictogramei după preferințe.

În plus, puteți formata și textul însoțitor folosind bara de instrumente de formatare SeedProd.

După ce ați terminat de editat pagina, nu uitați să faceți clic pe butonul „Salvare” din colțul din dreapta sus al ecranului.

Dacă ești gata, poți face clic pe „Publicare” pentru ca pagina să devină live, sau poți face clic pe „Previzualizare” pentru a te asigura că arată așa cum dorești.

Puteți, de asemenea, să faceți clic pe „Salvare ca șablon” pentru a reutiliza acest design cu SeedProd pe alte părți ale site-ului dvs. web.

Iată cum arătau fonturile cu pictograme pe site-ul nostru de test.

Sperăm că acest articol v-a ajutat să învățați cum să utilizați fonturile cu pictograme în editorul de postări WordPress fără a scrie cod HTML. De asemenea, ați putea dori să consultați ghidul nostru despre performanța WordPress pentru a optimiza viteza site-ului dvs. web sau cele mai bune plugin-uri pentru pagini de destinație pentru 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.