Cum să adăugați casete de caracteristici cu pictograme în WordPress

Uită-te la orice site web de afaceri de succes și probabil vei vedea casete cu funcții și pictograme care evidențiază ofertele lor cheie.

Este un model de design dovedit pe care l-am folosit de nenumărate ori, deoarece funcționează. Ajută vizitatorii să vadă rapid ce face afacerea ta specială, fără a citi blocuri mari de text.

După ce am ghidat mulți utilizatori WordPress prin îmbunătățiri ale site-ului, știm că crearea acestor casete de caracteristici cu aspect profesional poate părea o corvoadă.

Dar iată ce majoritatea oamenilor nu realizează: nu trebuie să fii designer sau dezvoltator pentru a adăuga casete de funcționalități frumoase pe site-ul tău.

În acest ghid, vom împărtăși cele mai simple moduri de a crea casete de funcționalități cu pictograme în WordPress. Eu

Ce sunt casetele de caracteristici cu pictograme?

Majoritatea oamenilor nu vor citi fiecare cuvânt de pe site-ul dvs. WordPress, mai ales dacă o pagină este foarte bogată în text.

În schimb, vizitatorii vor scana pagina pentru a găsi rapid informațiile pe care le caută. Acest lucru înseamnă că trebuie să prezinți informații importante într-un mod scanabil și captivant, motiv pentru care atât de multe site-uri web folosesc casete cu funcții.

În imaginea următoare, puteți vedea cum WPForms folosește casete de caracteristici pentru a evidenția cele mai mari puncte de vânzare ale plugin-ului.

Poți chiar adăuga un buton de apel la acțiune, astfel încât utilizatorii să poată afla mai multe despre o anumită funcționalitate.

Acestea fiind spuse, haideți să vă arătăm cum să adăugați casete de caracteristici cu pictograme în WordPress. Pur și simplu folosiți linkurile rapide de mai jos pentru a sări direct la metoda pe care doriți să o utilizați:

• Metoda 1: Adăugați casete de caracteristici cu pictograme folosind editorul de blocuri WordPress (nu este necesar un plugin)
• Metoda 2: Adăugați casete de caracteristici cu pictograme folosind un plugin de constructor de pagini (Recomandat)

Metoda 1: Adăugați casete de caracteristici cu pictograme folosind editorul de blocuri WordPress (nu este necesar un plugin)

Puteți adăuga casete cu caracteristici și pictograme pe site-ul dvs. WordPress folosind editorul standard de conținut și blocul de coloane. Acest lucru înseamnă că nu trebuie să instalați un nou plugin WordPress, deci este o metodă rapidă și ușoară.

Pentru a începe, deschide pagina unde dorești să adaugi o casetă de funcționalități. Apoi, dă clic pe pictograma de adăugare bloc ‘+’.

Apoi, tastați „Columns” în caseta de căutare.

Când apare blocul corect, faceți clic pentru a-l adăuga pe pagină.

WordPress va afișa acum toate blocurile de coloane diferite. Numerele indică spațiul pe care îl ocupă fiecare coloană în bloc. De exemplu, „50/50” creează două coloane care ocupă fiecare 50% din lățimea disponibilă.

Ca exemplu, vom selecta blocul de coloană '33/33/33', deoarece acesta ne oferă trei coloane cu lățime egală, dar puteți folosi orice aspect doriți.

După aceea, sunteți gata să adăugați pictograme la coloane.

Cel mai ușor mod de a face acest lucru este cu fonturi de pictograme (featured icon fonts), care sunt simboluri redimensionabile care nu vor încetini site-ul dvs. web. Vă recomandăm să utilizați Font Awesome, deoarece au una dintre cele mai mari colecții de pictograme gratuite.

Odată ce ați adăugat fonturi de pictograme în tema dvs. WordPress, este ușor să le afișați în coloanele dvs. folosind shortcode.

Pur și simplu faceți clic pe pictograma „+” a coloanei și tastați „Shortcode”. Când apare blocul corect, faceți clic pentru a-l adăuga la aspectul dvs.

După aceea, puteți introduce următorul shortcode, dar asigurați-vă că înlocuiți „bus” cu numele pictogramei pe care doriți să o utilizați:

[icon name="bus"]

Pentru a vedea o listă completă a pictogramelor disponibile, accesați pur și simplu biblioteca de pictograme Font Awesome.

Când găsești o pictogramă care îți place, dă clic pe ea pentru a vedea numele acelei pictograme.

De exemplu, în imaginea următoare, ne uităm la o pictogramă numită „agendă”.

Acum poți adăuga acest nume la shortcode.

Pentru a afla mai multe despre lucrul cu shortcode-uri, vă rugăm să consultați ghidul nostru pentru începători despre cum să adăugați un shortcode în WordPress.

Dacă preferi să folosești o imagine din biblioteca media WordPress, atunci poți adăuga un bloc de imagini în loc să folosești o pictogramă de font.

Pentru a face acest lucru, pur și simplu faceți clic pe „+” în prima coloană și apoi adăugați un bloc „Imagine” în loc de un bloc shortcode.

Acum puteți alege o imagine din biblioteca media sau puteți încărca un fișier nou de pe computer.

După ce ai adăugat toate pictogramele, următorul pas este să adaugi text în caseta de caracteristici.

Pentru a face acest lucru, faceți clic pe butonul „+” din interiorul blocului Coloane. Apoi, adăugați un bloc Paragraf.

După aceea, pur și simplu introduceți textul în blocul de paragraf.

Puteți adăuga pictograme și text în celelalte coloane repetând același proces.

Doriți ca fereastra de funcționalități să aibă mai multe rânduri?

Pur și simplu faceți clic pe blocul Coloane, apoi selectați cele trei puncte din bara de instrumente. Puteți apoi selecta „Duplicare”.

Aceasta va crea o copie a blocului Coloane.

Acum, pur și simplu urmați același proces descris mai sus pentru a adăuga conținut la al doilea rând.

Când ești mulțumit de caseta de funcționalități, poți adăuga alt conținut pe pagină, cum ar fi o imagine a produsului sau categorii și etichete.

Pentru a face ca secțiunea de caracteristici să fie activă, faceți clic pe butonul „Actualizare” sau „Publicare”.

Acum poți vizita site-ul tău web, blogul sau magazinul online pentru a vedea cutia cu pictograme de funcționalitate în acțiune.

Iată un exemplu despre cum vor vedea oamenii când vizitează blogul dvs. WordPress.

Metoda 2: Adăugați casete de caracteristici cu pictograme folosind un plugin de constructor de pagini (Recomandat)

Dacă doriți să creați o casetă de caracteristici simplă, atunci editorul de blocuri WordPress este o alegere bună. Cu toate acestea, dacă doriți să creați o casetă mai avansată cu un design complet personalizat, atunci veți avea nevoie de un plugin de page builder.

SeedProd este cel mai bun constructor de pagini WordPress de pe piață, care vă permite să creați pagini personalizate folosind un editor drag-and-drop.

Are peste 300 de șabloane proiectate profesional pe care le puteți folosi pentru a crea rapid pagini frumoase. De asemenea, are o bibliotecă întreagă de pictograme pe care le puteți adăuga la casetele dvs. cu caracteristici cu un singur clic.

Iată un exemplu de casetă de caracteristici creată folosind blocurile și pictogramele gata făcute ale SeedProd.

Am văzut cum mărcile noastre partenere folosesc acest instrument pentru a-și crea site-ul web și au avut o experiență excelentă. Pentru detalii, consultați recenzia noastră SeedProd.

Primul lucru pe care trebuie să îl faceți este să instalați și să activați pluginul SeedProd. Pentru mai multe detalii, consultați ghidul nostru pentru începători despre cum să instalați un plugin WordPress.

La activare, accesați SeedProd » Setări și introduceți cheia de licență.

Puteți găsi aceste informații conectându-vă la contul dvs. SeedProd.

Alegeți un șablon proiectat profesional

Pentru a începe, accesați SeedProd » Pagini de destinație și faceți clic pe „Adăugați o pagină de destinație nouă”.

Pe ecranul următor, puteți alege un șablon. Puteți personaliza toate aceste șabloane folosind constructorul drag-and-drop al SeedProd, dar este totuși o idee bună să alegeți un șablon care se potrivește obiectivelor dumneavoastră.

Toate șabloanele SeedProd sunt organizate pe diferite tipuri de campanii, cum ar fi cele de tip în curând și campaniile de colectare de lead-uri. Puteți chiar folosi șabloanele SeedProd pentru a îmbunătăți pagina dvs. 404.

Pentru acest ghid, vom folosi „Șablon gol”, dar puteți folosi orice șablon doriți.

Pentru a alege un șablon, pur și simplu treceți cursorul peste el, apoi faceți clic pe pictograma „Bifă”.

Aceasta deschide o fereastră pop-up unde poți da un nume paginii. SeedProd folosește numele paginii în URL, dar poți schimba acest link dacă dorești. De exemplu, ai putea dori să-ți îmbunătățești SEO-ul WordPress incluzând câteva cuvinte cheie relevante.

După aceea, faceți clic pe butonul „Salvează și începe editarea paginii”.

Aceasta deschide șablonul în editorul de pagini drag-and-drop SeedProd.

Proiectează-ți caseta de funcționalități

Deoarece folosiți șablonul gol, primul pas este alegerea unui layout. Pentru a face acest lucru, pur și simplu faceți clic pe oricare dintre layout-urile de coloane.

După aceea, găsiți blocul „Icon” în meniul din stânga.

Acum puteți trage și plasa acest bloc pe prima coloană goală.

Acest lucru adaugă blocul Icon la layout-ul dvs., cu o pictogramă implicită deja selectată.

Pentru a schimba pictograma, faceți clic pe ea și apoi selectați butonul „Alege imagine”.

Aceasta deschide biblioteca de pictograme cu sute de pictograme din care puteți alege. Puteți folosi bara de căutare pentru a căuta o anumită pictogramă sau pentru a răsfoi întreaga listă.

Când găsiți o imagine pe care doriți să o utilizați, pur și simplu treceți cursorul peste ea și apoi faceți clic pe butonul „+” pentru a o adăuga pe pagina dvs.

Pentru a personaliza pictograma, dă clic pentru a o selecta.

Acum poți ajusta această pictogramă folosind setările din meniul din stânga, inclusiv schimbarea alinierii, dimensiunii, culorii și multe altele.

Pentru a vedea mai multe opțiuni, faceți clic pe fila „Avansat”.

Aici puteți modifica spațierea, adăuga o bordură și chiar adăuga efecte de animație CSS.

Odată ce ați făcut acest lucru, continuați și adăugați un bloc „Text” sub pictogramă.

Pur și simplu găsește blocul „Text” în meniul din stânga, apoi plasează-l sub pictograma ta folosind glisare și fixare.

Pentru a adăuga text, faceți clic pentru a selecta blocul. Puteți apoi să tastați în mica editor de text din meniul din stânga.

Aici puteți adăuga linkuri, schimba alinierea textului, schimba culoarea textului și multe altele.

Pentru a personaliza celelalte coloane, urmați pur și simplu aceiași pași ca mai sus.

Dacă dorești să adaugi un alt rând de casete de caracteristici cu pictograme, atunci plasează cursorul mouse-ului peste secțiune și apoi apasă butonul „Duplicare rând”.

Puteți duplica secțiunea de câte ori doriți pentru a crea rapid mai multe casete de funcționalități cu pictograme.

Puteți apoi adăuga noi pictograme și text urmând același proces descris mai sus.

Puteți continua să lucrați la pagină adăugând mai multe blocuri și personalizând acele blocuri în meniul din stânga.

Când sunteți mulțumit de aspectul paginii, faceți clic pe butonul „Salvare”. Apoi puteți selecta „Publicare” pentru a face pagina live.

Sperăm că acest articol v-a ajutat să învățați cum să adăugați casete de caracteristici cu pictograme în WordPress. De asemenea, ați putea dori să consultați ghidul nostru despre cum să personalizați culorile pe site-ul dvs. WordPress și modalități de a crea un site WordPress prietenos cu dispozitivele mobile.

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.