Gusto mo bang magdagdag ng isang tampok na kahon na may mga magagandang icon sa homepage ng iyong WordPress site? Ang mga tampok na kahon ay nagpapakita ng mahalagang mga punto sa pagbebenta ng iyong mga produkto at serbisyo. Ito ay napatunayan na isang nakakaengganyong pamamaraan sa pagpapakita ng mga tampok sa mga bagong customer. Sa artikulong ito, ipapakita namin sa iyo kung paano madaling magdagdag ng mga feature box na may mga icon sa iyong WordPress site.
Ano ang mga Tampok na Mga Kahon sa Mga Icon?
Karamihan sa mga tao kapag bumisita sila sa mga website ay hindi talaga bumabasa ng mga ito. Bilang mga tao, kami ay nagiging mga propesyonal na scanner.
Nangangahulugan ito na bilang may-ari ng negosyo, kailangan mong magpakita ng mahalagang impormasyon sa madaling ma-scan at nakaka-engganyong format.
Iyon ang dahilan kung bakit ang pinaka-popular na mga website ng negosyo ay karaniwang may isang malaking imahe o isang slider sa tuktok na may isang tawag sa pindutan ng pagkilos.
Sa ibaba lamang nito, maaari mong gamitin ang isang tampok na kahon na nagbibigay-daan sa iyo upang maipakita ang mga mahahalagang tampok ng iyong produkto o serbisyo. Ang bawat tampok na kahon ay maaaring magkaroon ng sariling tawag sa pagkilos na maaaring humantong sa mga gumagamit upang matuto nang higit pa.
Narito ang isang halimbawa mula sa aming website ng OptinMonster:
Pagdaragdag ng Mga Tampok na Mga Kahon na may Mga Icon sa iyong WordPress Homepage
Ang unang bagay na kailangan mong gawin ay i-install at i-activate ang Advanced WP Columns plugin. Sa pag-activate kailangan mong bisitahin Mga Setting »Mga Advanced na Mga Haligi ng WP upang i-configure ang plugin.
I-scroll lang sa opsyon na ‘Column class’ at ipasok mycolumns sa tabi nito. Huwag kalimutan na mag-click sa pindutang save save upang mai-imbak ang iyong mga setting.
Susunod, kakailanganin mo ng isang plugin upang maipasok ang mga magagandang icon ng SVG sa iyong mga kahon ng tampok. I-install at i-activate ang WP SVG Icon plugin.
Handa ka na ngayong likhain ang iyong mga kahon ng tampok.
Magsimula sa pamamagitan ng pag-edit ng pahina kung saan mo gustong idagdag ang mga kahon ng tampok.
Mapapansin mo ang dalawang bagong mga pindutan sa screen editor ng post. Ang una ay ang button na Magdagdag ng Icon na nasa itaas lamang ng editor. Ang pangalawang pindutan ay matatagpuan bilang huling item sa visual na menu ng editor.
Kung ang iyong visual na editor ay nagpapakita lamang ng isang hilera ng mga pindutan, pagkatapos ay kailangan mong mag-click sa pindutan ng toggle toolbar upang palawakin ito.
Una, kailangan mong mag-click sa pindutan ng Advanced WP Columns. Dadalhin nito ang isang popup kung saan kailangan mong mag-click sa Walang laman at pagkatapos ay piliin ang bilang ng mga haligi na nais mong idagdag.
Pagkatapos nito, kailangan mong mag-click sa bawat hanay upang magdagdag ng ilang teksto. Kung hindi ka magdagdag ng ilang mga teksto ngayon, pagkatapos ito ay magiging mahirap na makita ang mga hanay sa editor ng post. Sa sandaling tapos ka na mag-click sa pindutang magdagdag ng mga haligi sa ibaba.
Makikita mo ang mga haligi sa iyong post editor ngayon. Ang susunod na hakbang ay upang magdagdag ng mga icon sa itaas ng teksto.
Dalhin mo ang iyong mouse sa simula ng lugar ng teksto sa unang hanay at mag-click sa pindutang ipasok. Ililipat nito ang teksto pababa at magbigay ng espasyo upang maipasok ang iyong mga icon.
Ngayon ay kailangan mong mag-click sa pindutan ng Magdagdag ng icon, na kung saan ay magdala ng isang magandang popup tulad nito:
Mula doon, maaari mong piliin ang icon na nais mong gamitin sa pamamagitan ng pag-click dito. Susunod, kailangan mong mag-click sa pindutan ng span, kaya ang iyong icon ay nakabalot sa loob elemento.
Panghuli, mag-click sa pindutang insert. Makikita mo na ngayon ang shortcode para sa icon ng SVG sa iyong editor ng post. Depende sa pangalan ng icon na iyong pinili, magiging ganito ang ganito:
[wp-svg-icons icon = "rocket" wrap = "span"]
Ulitin ang proseso upang magdagdag ng mga icon sa iba pang mga kahon ng tampok pati na rin.
Sa sandaling tapos ka na, i-click lamang ang pindutan ng I-update upang i-save ang iyong pahina.
Halos tapos ka na, ngunit kung iyong i-preview ang iyong pahina, mapapansin mo na ang mga icon ay masyadong maliit at ang iyong mga kahon ng tampok ay bahagyang nakakakita.
Kakailanganin mong magdagdag ng isang maliit na CSS upang malutas ang problemang ito. Idagdag lamang ang CSS snippet sa iyong tema o stylesheet ng tema ng bata.
span.wp-svg-rocket.rocket {
laki ng font: 100px;
}
span.wp-svg-cloud.cloud {
laki ng font: 100px;
}
span.wp-svg-headphones.headphones {
laki ng font: 100px;
}
.mycolumns {
border: 1px solid #eee;
min-taas: 250px;
padding-top: 20px! important;
}
Huwag kalimutan na ayusin ang CSS upang tumugma sa mga pangalan ng mga icon na iyong ginagamit.
Umaasa kami na ang artikulong ito ay nakatulong sa iyo na magdagdag ng magagandang mga tampok na seksyon ng mga kahon sa iyong homepage