Vill du add to funktions boxar med beautiful icons till din WordPress site?
Du kan använda utvalda boxar för att lyfta fram en produkts eller tjänsts största säljargument. De är också ett bra sätt att presentera utvalda funktioner för new customers så att de kan avgöra om produkten eller tjänsten är rätt för dem.
I den här artikeln visar vi hur du lägger till utvalda funktioner med icons på din WordPress-webbplats.
Vad är utvalda boxar med icons?
De flesta människor kommer inte att läsa varje ord på din WordPress website, särskilt inte om en page är mycket textintensiv.
Istället kommer besökarna att skanna igenom hela page för att snabbt hitta den information de söker. Det innebär att du måste presentera viktig information på ett sätt som är lätt att skanna och engagerande, vilket är anledningen till att så många webbplatser använder utvalda boxar.
I följande image kan du se hur WPForms använder featured images för att lyfta fram pluginets största försäljningsargument.
Du kan till och med add to en call-to-action knapp så att användare kan lära sig mer om en viss funktion.
Med detta sagt, låt oss visa dig hur du addar utvalda features boxes med icons i WordPress. Använd bara snabblänkarna under för att hoppa direkt till den metod du vill använda:
Metod 1: Add Feature Boxes med Icons med hjälp av WordPress Block Editor (inget plugin obligatoriskt)
Du kan lägga till utvalda boxes med icons på din WordPress site med hjälp av standard content editor och column block. Det innebär att du inte behöver installera ett new plugin för WordPress, så det är en snabb och enkel metod.
För att komma igång öppnar du den page där du vill add to en feature box. Klicka sedan på ikonen ”+” add block icon.
Skriv sedan ”Columns” i sökrutan.
När det högra blocket appear, click to add it to the page.
WordPress kommer nu att visa alla olika block med Column. Siffrorna anger hur mycket utrymme varje Column tar upp i blocket. Till exempel skapar ”50/50” två Column som vardera tar upp 50% av den tillgängliga bredden.
Som ett exempel väljer vi blocket ’33/33/33′ eftersom det ger oss tre kolumner med samma bredd, men du kan använda vilken layout du gillar.
Efter det är du redo att add icons till Column.
Det enklaste sättet att göra detta är med utvalda icon fonts, som är resize-symboler som inte kommer att sakta ner din website. Vi rekommenderar att du använder Font Awesome eftersom de har en av de största samlingarna av gratis icons.
När du har lagt till icon fonts i ditt WordPress theme är det enkelt att visa dem i dina columns med hjälp av shortcode.
Klicka bara på ”columnens” ”+” icon och skriv in ”Shortcode”. När rätt block dyker upp klickar du för att add to den till din layout.
Därefter kan du enter följande shortcode, men se till att ersätta ”bus” med namnet på den icon som du vill använda:
[icon name="buss"]
För att se en komplett lista över tillgängliga icons, gå till Font Awesome icon library.
När du hittar en icon som du gillar, clickar du på den för att se iconens namn.
Till exempel, i följande image, tittar vi på en icon som anropas ”address-book”.
Du kan nu add to detta namn till shortcoden.
För att lära dig mer om hur du arbetar med shortcodes, vänligen se vår guide för nybörjare om hur du lägger till en shortcode i WordPress.
Om du föredrar att använda en image från mediabiblioteket i WordPress kan du add to ett image block istället för att använda ett icon font.
För att göra detta klickar du bara på ”+” i den första colonnen och lägger sedan till ett ”Image”-block istället för ett shortcode-block.
Du kan nu välja en image från mediabiblioteket eller uppladare en new fil från din dator.
När du har lagt till alla dina icons är nästa steg att lägga till text i utvalda funktioner i boxen.
För att göra detta, gå vidare och klicka på ”+” -knappen inuti Columns block. Lägg sedan till ett Paragraph-block.
Därefter skriver du helt enkelt in din text i stycket block.
Du kan add to icons och text till de andra Column genom att upprepa samma process.
Vill du att din utvalda box ska ha flera row?
Klicka bara på blocket Column och välj sedan de tre prickarna i toolbaren. Du kan sedan välja ”Duplicate”.
Detta kommer att skapa en kopia av blocket Column.
Nu följer du bara samma process som beskrivs ovan för att add to content till den andra row.
När du är nöjd med featured image kan du add to annat content på sidan, till exempel en image av produkten eller kategorier och tags.
För att göra den utvalda funktionen live klickar du bara på knappen ”Update” eller ”Publicera”.
You can now visit your website, blogg, or online store to see the feature icon box in action.
Här är ett exempel på vad folk kommer att se när de besöker din WordPress blogg.
Metod 2: Add Feature Boxes med icons med hjälp av ett Page Builder Plugin (rekommenderas)
Om du vill skapa en enkel utvald box är WordPress Block Editor ett bra val. Men om du vill skapa en mer avancerad box med en helt custom design, då behöver du ett page builder plugin.
SeedProd är den bästa WordPress page builder på marknaden som gör att du kan skapa custom pages med hjälp av en drag and drop editor.
SeedProd har över 300+ professionellt utformade templates som du kan använda för att snabbt skapa beautiful pages. Det har också ett helt bibliotek med icons som du kan add to your feature boxes med ett enda click.
Här är ett exempel på en utvald box som skapats med hjälp av SeedProds färdiga block och icons.
Det första du behöver göra är att installera och aktivera pluginet SeedProd. För mer detaljer, se vår guide för nybörjare om hur man installerar ett plugin för WordPress.
Note: Det finns en gratis version av SeedProd, men vi kommer att använda Pro-versionen eftersom den har fler funktioner. Om du använder e-postmarknadsföring för att främja dina produkter, integreras SeedProd Pro också med många av de bästa e-postmarknadsföringstjänsterna.
Efter aktivering, gå till SeedProd ” Settings och enter din license key.
Du kan hitta denna information genom att logga in på ditt SeedProd account.
Välj en professionellt utformad templates
För att komma igång, gå till SeedProd ” Landing Pages och klicka på ’Add New Landing Page’.
På nästa vy kan du välja en template. Du kan customize alla dessa templates med SeedProds drag and drop-byggare, men det är fortfarande en bra idé att välja en template som matchar dina mål.
Alla SeedProds templates är organiserade i olika kampanjtyper, till exempel coming soon och lead squeeze-kampanjer. Du kan även använda SeedProd’s templates för att förbättra din 404 page.
I den här guiden använder vi ”Blank Template”, men du kan använda vilken template du vill.
För att välja en template, hoverar du bara över den och klickar sedan på ikonen ”Checkmark”.
Detta ger en popup där du kan ge sidan ett namn. SeedProd använder sidans namn i URL:en, men du kan ändra den här linken om du vill. Till exempel kanske du vill förbättra din sökmotorsoptimering för WordPress genom att inkludera några relevanta keywords.
Därefter klickar du på knappen ”Save and Start Editing the Page”.
Detta öppnar templates i SeedProd’s drag and drop page editor.
Utforma din utvalda box
Eftersom du använder den tomma templaten är det första steget att välja en layout. För att göra detta klickar du bara på någon av layouterna för Column.
Därefter hittar du blocket ”Icon” i menyn till vänster.
Nu kan du drag and dropa detta block till den första tomma Column.
Detta addar blocket Icon till din layout, med en standard icon som redan är vald.
Om du vill ändra iconen klickar du på den och väljer sedan knappen ”Choose Image”.
Då kommer du till icon-biblioteket med hundratals icons att välja mellan. Du kan använda sökfältet för att leta efter en specifik icon eller bläddra igenom hela listan.
När du hittar en image som du vill använda, hoverar du bara över den och klickar sedan på knappen ”+” för att add to din page.
För att customize ikonen, click för att selecta den.
You can now tweak this icon using the settings in the left-hand menu, including changing its alignment, size, color, and more.
För att se fler alternativ, fortsätt och klicka på tabben ”Advanced”.
Här kan du ändra avståndet, lägga till en kant och till och med lägga till CSS-animeringseffekter.
När du har gjort det går du vidare och lägger till ett ”Text” -block under ikonen.
Leta bara upp blocket ”Text” i menyn till vänster och placera det under din icon med drag and drop.
Om du vill add to text klickar du för att selecta blocket. Du kan sedan skriva i den lilla textredigeraren i menyn till vänster.
Här kan du add to links, ändra textjustering, ändra textfärg med mera.
För att customize de andra Column, följ bara samma steg som ovan.
Om du vill add to ytterligare en row av feature boxes med icons, så hoverar du musen över sectionen och clickar på knappen ”Duplicate Row”.
You can duplicate the section as many times as you want to quickly create more feature boxes with icons.
Du kan sedan lägga till nya icons och text genom att följa samma process som beskrivs ovan.
Du kan fortsätta att arbeta på sidan genom att lägga till fler block och customize dessa block i menyn till vänster.
När du är nöjd med hur sidan ser ut klickar du på knappen ”Save”. You can then select ”Publicera” to make that page live.
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till utvalda funktioner med icons i WordPress. You may also want to see our guide on how to create an email newsletter and our expert pick of the best live chat software for small businesses.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
micahel says
Really nice article and it help solve my problem. But here is my question.
-How to you create the beautiful sidebars in see in this post such as how to start a blog, website blueprint, I need help with …, useful wordpress guides, Deals & Coupons
-I really need help with creating this sidebars since am reading how to create a blog
Ashutosh Panda says
It was an awesome article..
Helped me a lot
Rob says
Hey. My icons won’t centre in the column itself. Is there a parameter we can add to ensure it centres? 2 of my icons centre fine, but 2 will only align left, even if I align it to center using formatting in the WordPress formatting editor (using a plugin).
Thanks.
Hassan NAITALI says
Great article, i love it,
so, i have one question, can i make changes to these icons and set them bigger by making change in the parent theme graphicaly and without touching css code ?
Thank you !!
WPBeginner Support says
Hi Hassan,
You would still need some CSS.
Administratör
Chris says
I tried everything that was said in the tutorial but instead of it being set into columns, everything is set under one column. While the icon are set beside the words. I wanted to create three columns and everything in under one another in one column. Why is that that?
Roshni says
Thank you. So useful!
Paul says
Do you have a tutorial on how to do this with css, html and php without having to use a plugin? I’ve looked around but cannot seem to find anything.
john says
How do I get the icon to center over the content?
Evan herman says
For anyone using WP SVG Icons that isn’t comfortable writing CSS, you can actually adjust the icon size by passing in a size=”#px” parameter to the wp-svg-icons short code.
Example:
[wp-svg-icons icon=”rocket” wrap=”span” size=”100px”]
That will set the icon to 100px and avoid the step of writing custom CSS. You may still need to adjust the padding.
Andre Page says
That was very helpful Evan, thank you!!
Roshni says
Thanks, Evan. That worked.
Bobby says
Good article about an important feature for your site. However, the plugin recommended has not been updated for 2 years. I am relatively new to WordPress and I was told to steer from plugins that have not been updated in the past year. I am guessing that it depends since you are very knowledgeable about WordPress and highlighted the plugin in this article. Let me know your thoughts.
WPBeginner Support says
Bobby, the plugin works fine we tested it. We have also reached out to plugin author so that they can update the plugin.
Ideally you should install plugins that are recently updated. However, there are plenty of WordPress plugins that don’t need updates. Plugin authors feel that since a plugin is not broken and works great, then there is no need for them to update it.
Administratör
Bobby says
Ok, that’s good to know. Thanks again.
arun says
Great post, i am also running wordpress blog. i will apply these icons on my blog thanks for sharing.
Hemang Rindani says
Nice article. WordPress is a great enterprise content management solution that can cater to any complex business requirements and develop powerful websites. It contains thousands of flexible, customizable and responsive themes, modules and plugins that can be utilized to design multiple websites effortlessly. Increasing competition demands an interactive and engaging website and thus it is important to include variety of tools that encourage visitors to stay more on a page. Plugins in WordPress adds value to the web page specially by making it more interesting. Utilizing right tools like Call to action buttons and social media login and sharing buttons with on page content helps to enhance user experience. Article rightly highlighted the point that selecting a right tool and utilizing its powers allows a CMS developer to have better control over the website.