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

Majoritatea vizitatorilor scanează o pagină înainte de a decide dacă să o citească. Dacă beneficiile dvs. cheie sunt îngropate în paragrafe de text, mulți oameni ar putea pleca fără să le vadă vreodată.

Casetele de caracteristici rezolvă acest lucru, asociind fiecare beneficiu cu o pictogramă mică și o scurtă descriere, astfel încât vizitatorii să înțeleagă dintr-o privire ce oferiți. Puteți adăuga, de asemenea, un buton de apel la acțiune fiecărei casete pentru a direcționa cititorii către mai multe detalii.

În acest ghid, vă vom arăta cum să adăugați casete de caracteristici cu pictograme în WordPress, utilizând editorul de blocuri încorporat sau un plugin de page builder.

Ce metodă ar trebui să folosiți pentru a adăuga casete de caracteristici?

Dacă adăugați una sau două secțiuni de caracteristici la o pagină sau postare existentă, utilizați metoda editorului de blocuri. Este gratuit, încorporat în WordPress 7.0 și versiuni ulterioare și nu necesită un alt plugin.

Dacă proiectați o pagină de destinație completă de la zero, un page builder este alegerea mai bună. Obțineți șabloane gata făcute și mai multe opțiuni de stilizare pentru fiecare pictogramă.

Puteți utiliza 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 (Gratuit)

Editorul de blocuri WordPress construiește pagini din blocuri, care sunt piese individuale de conținut, cum ar fi un paragraf, o imagine sau un buton.

WordPress 7.0 a adăugat un bloc încorporat pentru pictograme, care vă permite să inserați pictograme SVG fără un plugin. SVG este un format de imagine realizat din cod, astfel încât pictogramele rămân clare la orice dimensiune și se încarcă rapid.

Dacă utilizați o versiune mai veche de WordPress, nu veți găsi blocul pentru pictograme în editor. Va trebui să actualizați WordPress înainte de a urma această metodă.

Pasul 1: Adăugați un bloc Coloane

Începeți prin a adăuga un bloc Coloane. Mai întâi, deschideți pagina unde doriți să adăugați casetele de caracteristici. Apoi, faceți clic pe pictograma + Adăugare bloc, căutați Coloane și faceți clic pe blocul Coloane pentru a-l adăuga.

WordPress vă va afișa mai multe aspecte ale coloanelor. Numerele indică câtă lățime ocupă fiecare coloană. De exemplu, 50 / 50 creează două coloane de lățime egală.

Vom selecta 33 / 33 / 33 pentru a crea trei coloane egale, dar puteți alege orice aspect care funcționează pentru conținutul dvs.

Pasul 2: Adăugați pictograme la casetele dvs. de caracteristici

Apoi, faceți clic pe butonul + din coloană și căutați Pictogramă. Când apare blocul Pictogramă, faceți clic pe el pentru a-l adăuga.

WordPress va adăuga automat o pictogramă Info în coloană. Faceți clic pe butonul „Înlocuire” pentru a alege o altă pictogramă.

Aceasta deschide biblioteca de pictograme. Puteți tasta un nume, cum ar fi foto sau magazin, în bara de căutare sau puteți derula prin pictogramele disponibile.

Când găsiți pictograma dorită, faceți clic pe ea pentru a o adăuga în coloana dvs.

Puteți apoi personaliza pictograma utilizând setările blocului. În funcție de tema și configurația dvs., puteți schimba culoarea pictogramei, culoarea de fundal, dimensiunile și marginea. Puteți folosi, de asemenea, bara de instrumente pentru a centra pictograma.

Pasul 3: Adăugați text în casetele de caracteristici

Odată ce pictogramele dvs. sunt la locul lor, faceți clic pe butonul + de sub pictograma din prima coloană și adăugați un bloc Titlu pentru numele funcției.

Apoi, adăugați un bloc Paragraf dedesubt și adăugați o scurtă descriere a funcției. Unu sau două propoziții sunt de obicei suficiente.

Repetați același proces pentru celelalte coloane.

Pasul 4: Creați mai multe rânduri de casete de caracteristici (Opțional)

Dacă doriți să adăugați mai mult de un rând de casete de funcții, selectați blocul Coloane și faceți clic pe meniul cu trei puncte din bara de instrumente. Apoi, selectați Duplicare.

Acest lucru creează o copie a întregului rând. Puteți apoi înlocui pictogramele și textul cu conținut nou, folosind aceiași pași de mai sus.

Pasul 5: Publicați casetele de caracteristici cu pictograme

Când sunteți mulțumit de casetele dvs. de funcții, faceți clic pe butonul Salvare sau Publicare pentru a le face live.

Puteți apoi vizita site-ul dvs. web pentru a vedea casetele de funcții în acțiune:

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

Editorul de blocuri funcționează bine atunci când doriți să adăugați o secțiune de funcții la o pagină existentă. Dar dacă proiectați o pagină de destinație completă și doriți mai mult control asupra aspectului și stilului, un constructor de pagini drag-and-drop vă poate oferi mai multă flexibilitate.

Vom folosi SeedProd pentru această metodă, deoarece îl folosim pe propriile noastre site-uri. Majoritatea constructorilor de pagini drag-and-drop, cum ar fi Elementor, oferă un element de casetă cu pictograme și o bibliotecă de pictograme încorporată. Pentru mai multe informații, consultați recenzia SeedProd.

Pasul 1: Instalați și configurați Page Builder

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

După ce activați pluginul, accesați SeedProd » Setări și introduceți cheia de licență. Puteți găsi cheia dvs. conectându-vă la contul dvs. SeedProd.

Pasul 2: Alegeți un șablon de pagină de destinație

Apoi, accesați SeedProd » Pagini de destinație și faceți clic pe „+ Adăugați o pagină de destinație nouă”.

Apoi, introduceți un nume pentru pagina dvs. SeedProd va folosi, de asemenea, acest nume pentru a crea URL-ul paginii, dar puteți edita URL-ul dacă este necesar.

Pe ecranul următor, veți alege un șablon. Fiecare șablon poate fi personalizat cu drag and drop, dar alegerea unuia care se potrivește obiectivului dvs. vă poate economisi timp.

Pentru acest ghid, vom folosi Șablonul gol. Plutiți deasupra lui și faceți clic pe pictograma de bifă pentru a-l selecta.

Apoi, faceți clic pe „Salvare și începerea editării paginii”.

Pasul 3: Creați casetele de caracteristici cu pictograme

Deoarece începem cu un șablon gol, primul pas este să alegem un aspect. Aici, să alegem aspectul cu o singură coloană pentru a proiecta zona antetului deasupra casetelor dvs. de funcții.

Puteți apoi să trageți blocul Titlu din meniul din stânga pe pagină. Selectați blocul pentru a edita textul acestuia și a ajusta formatarea folosind opțiunile din panoul din stânga.

Repetați procesul cu blocul Text.

Puteți, de asemenea, să personalizați antetul adăugând o imagine de fundal sau schimbând formatarea acestuia. Pentru mai multe opțiuni, faceți clic pe fila „Avansat” pentru a ajusta spațierea, a adăuga o bordură, a adăuga efecte de animație și multe altele.

Odată ce ați terminat cu antetul, puteți crea casetele de funcții. Trageți blocul Coloană din panoul din stânga în editor și plasați-l chiar sub zona antetului.

După aceea, puteți alege un aspect. Pentru acest exemplu, vom folosi opțiunea cu trei coloane egale.

Apoi, găsiți blocul Icon Box în meniul din stânga și trageți-l în prima coloană.

Blocul include o pictogramă implicită, un titlu și un text exemplu pe care îl puteți personaliza.

Pentru a schimba pictograma, găsiți secțiunea Icon/Image în panoul din stânga. Apoi, treceți cu mouse-ul peste pictograma curentă și faceți clic pe butonul pentru a o înlocui.

Aceasta deschide biblioteca de pictograme. Puteți căuta o pictogramă specifică sau puteți răsfoi opțiunile disponibile. Când găsiți una care vă place, faceți clic pe ea pentru a o adăuga în caseta de caracteristici.

Odată ce ați selectat o pictogramă, faceți clic pe ea pentru a deschide setările acesteia în meniul din stânga. Aici, puteți schimba alinierea, dimensiunea și culoarea acesteia.

Pasul 4: Personalizați conținutul casetei de caracteristici

Apoi, selectați textul din Icon Box pentru a deschide setările acestuia în meniul din stânga.

Puteți înlocui titlul și descrierea exemplu cu propriul text al caracteristicii. De asemenea, puteți adăuga linkuri sau schimba alinierea și culoarea textului.

Repetați acești pași pentru celelalte coloane, adăugând o pictogramă și un text al caracteristicii diferit pentru fiecare.

Pasul 5: Publicați pagina de destinație

Dacă doriți să adăugați un alt rând de casete de caracteristici, treceți cu mouse-ul peste secțiune și faceți clic pe butonul Duplicate Row. Apoi, înlocuiți pictogramele și textul cu conținutul dvs. nou.

Puteți personaliza restul paginii de destinație adăugând imagini, butoane de apel la acțiune sau alte blocuri. Procesul este similar: trageți blocul dorit în editor și personalizați-l din panoul din stânga.

Când sunteți mulțumit de pagina dvs. de destinație, faceți clic pe butonul ‘Save’ și apoi selectați ‘Publish’ pentru a o publica. Acum puteți vedea pagina de destinație în acțiune:

Întrebări frecvente despre casetele de caracteristici cu pictograme

Iată câteva întrebări frecvente despre adăugarea de casete de caracteristici cu pictograme în WordPress:

Cum adaug pictograme în WordPress?

Dacă utilizați WordPress 7.0 sau o versiune ulterioară, puteți folosi blocul Icon încorporat, care vă permite să căutați biblioteca de pictograme WordPress după nume. Pentru seturi mai mari de pictograme, cum ar fi Font Awesome, veți avea nevoie de un plugin sau de un constructor de pagini cu propria bibliotecă de pictograme.

Cum adaug pictograme personalizate în WordPress?

Blocul Icon afișează doar pictograme din biblioteca WordPress, deci nu puteți încărca propriile pictograme prin intermediul acestuia. În schimb, puteți încărca pictograma dvs. ca fișier PNG folosind blocul Image.

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 optimizat pentru mobil.

Dacă v-a plăcut acest articol, atunci vă rugăm să vă abonați la Canalul nostru de YouTube pentru tutoriale video despre WordPress. Ne puteți găsi, de asemenea, pe Twitter și Facebook.