Doriți să adăugați o casetă de caracteristici cu o pictogramă pe pagina dvs. de pornire?

Această caracteristică afișează informații importante despre produsele și serviciile dvs. S-a dovedit a fi o tehnică antrenantă în prezentarea produselor către potențiali clienți.

În acest tutorial, vă voi arăta cum să adăugați această funcție pe dvs WordPress blog.

Dar înainte, dacă nu ați instalat niciodată WordPress, descoperiți Cum se instalează a WordPress blog în 7 pași et Cum de a găsi, a instala și a activa o temă WordPress pe blog-ul dvs. 

Apoi înapoi la motivul pentru care suntem aici.

adăugați o casetă de caracteristici cu o pictogramă

Ce este caseta de caracteristici cu pictograme?

Majoritatea persoanelor care vizitează un site web nu îl citesc pe deplin. Ca oameni, devenim scanere profesionale.

Aceasta înseamnă că, în calitate de proprietar al unei afaceri online, trebuie să prezentați informații importante într-un mod destul de ușor de analizat și într-un mod atrăgător.

De aceea, majoritatea site-urilor web corporative prezintă de obicei o imagine pe glisor cu un buton de îndemn.

Chiar sub aceasta, puteți utiliza o casetă de funcții care vă permite să afișați informații importante despre produsele și serviciile dvs. Fiecare casetă de caracteristici poate avea fiecare propriul buton de îndemn pentru a permite utilizatorilor să afle mai multe.

Iată un exemplu concret:cum să adăugați pictograme cu casetă funcțională

Cum să adăugați o casetă de caracteristici la pagina de pornire a blogului dvs. WordPress

Primul lucru pe care trebuie să-l faceți este să instalați și să activați pluginul Coloane avansate WP. Pentru mai multe detalii, consultați ghidul nostru la Cum se instalează sau se adaugă un plugin pe WordPress

După activarea pluginului, trebuie să navigați la locația „ Setări> Coloane WP avansate Pentru a configura pluginul.

Trebuie doar să derulați în jos până la opțiunea „ Coloana clasă Și introduceți un text ca „mycolumns” (Vom reveni). Nu uitați să faceți clic pe butonul de salvare pentru a salva setările.

colclass

Apoi, tot ce trebuie să faceți este să adăugați pictograme SVG în casetele de caracteristici. Pentru a face acest lucru, vă invit să instalați și să activați pluginul WP SVG Icons.

Acum sunteți gata să vă creați casetele de caracteristici. Puteți începe modificând pagina în care doriți să apară caseta de funcționalitate.

Veți observa două noi opțiuni pe editorul de mesaje. Prima vă permite să adăugați o pictogramă și aceasta se află deasupra barei de instrumente a editorului. Al doilea este situat pe bara de instrumente a editorului vizual.

Dacă nu puteți vedea această opțiune, trebuie să extindeți butoanele barei de instrumente.

newbuttons

Primul lucru pe care trebuie să îl faceți este să faceți clic pe butonul " Coloane avansate WP". Aceasta va afișa un pop-up în care puteți face clic "Gol" și selectați numărul de coloane pe care doriți să le adăugați.

Crearea-coloanePuteți face clic pe fiecare zonă și puteți adăuga orice text doriți. Dacă nu adăugați text acum, nu veți putea vedea diferența dintre coloane mai târziu. După ce ați terminat, faceți clic pe „ Adăugați coloane În partea de jos.

Veți observa că coloanele au fost adăugate în editorul vizual. Următorul pas este să adăugați pictograme deasupra textului.

Luați cursorul și adăugați-l la începutul casetei de text, apoi adăugați o nouă întrerupere de linie. Aceasta va adăuga un spațiu nou în care puteți adăuga pictograma. Acum faceți clic pe butonul „ Adăugați o nouă pictogramă„, Și veți vedea o fereastră nouă în care puteți alege o pictogramă.

addingicons

Din această fereastră, puteți selecta pictograma pe care doriți să o adăugați. Apoi faceți clic pe butonul „span”, astfel încât conținutul dvs. să fie adăugat în elementul „ ”.

În cele din urmă, faceți clic pe buton Introduceți pictograma„, Veți observa că pictograma SVG a fost adăugată în editor. În funcție de numele pictogramei, codul scurt va arăta astfel:

[wp-svg-icons icon = "rachetă" wrap = "span"]

Repetați procesul de fiecare dată pe celelalte casete. Când ați terminat, nu uitați să salvați setările.

Sunteți gata să terminați lucrarea, cu toate acestea, dacă veți observa că pictogramele sunt foarte mici.

featureboxes-SmallIcons

Tot ce trebuie să faceți este să adăugați cod CSS pentru a corecta problema. Iată un exemplu de cod CSS pe care îl puteți adăuga în fișierul de stil al temei copilului dvs.

span.wp-svg-rocket.ro-cheie {font-size: 100px; } span.wp-svg-cloud.cloud {font-size: 100px; } span.wp-svg-căști headphones {font-size: 100px; }. coloane {frontieră: 1px solid #eee; min înălțime: 250px; padding-top: 20px important; }

Nu uitați că clasa de pictograme trebuie să se potrivească cu cea pe care ați adăugat-o. În acest caz, am folosit următoarele pictograme: rachetă, nor, căști.

featureboxesfinal

Amintiți-vă că am scris un tutorial care vă va permite îmbunătățiți-vă abilitățile CSS. De asemenea, puteți utiliza a constructor de pagini mai de succes ca Compozitor Visual pentru care am scris a tutorial destul de detaliat.

Asta e tot pentru acest tutorial. Sper că vă va ajuta să creați casete de funcții bune pe dvs WordPress blog. Nu ezitați să împărtășiți acest tutorial cu prietenii dvs. Aș dori să profit de această ocazie pentru a vă transmite cele mai bune urări din partea întregii echipe BlogPasCher.