Så här addar du utvalda boxar med icons i WordPress

Feature boxes lyfter fram en produkts eller tjänsts största säljargument. De är också ett bra sätt att presentera funktioner för nya klienter så att de kan avgöra om produkten eller tjänsten är rätt för dem.

Under årens lopp har många av våra partnervarumärken använt featured boxes för att lyfta fram funktionerna i sina produkter. Du hittar dem till exempel på WPForms och MonsterInsights webbplatser.

Enligt vår erfarenhet finns det två sätt att lägga till dem i WordPress. Du kan använda blockredigeraren och lista funktioner i olika kolumner. Eller, om du letar efter något mer tilltalande och attraktivt, kan du använda en sidbyggare för att designa sidor med anpassade funktionsrutor.

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 kommer inte att läsa varje ord på din WordPress-webbplats, särskilt inte om en sida ä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 funktionsrutor med ikoner på din WordPress-webbplats med hjälp av den vanliga innehållsredigeraren och kolumnblocket. Det innebär att du inte behöver installera ett nytt WordPress-plugin, 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.

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 mallar är organiserade i olika kampanjtyper, till exempel coming soon- och lead squeeze-kampanjer. Du kan även använda SeedProds mallar för att förbättra din 404-sida.

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”.

Du får då upp 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 länken om du vill. Du kanske t.ex. vill förbättra din SEO för WordPress genom att inkludera några relevanta nyckelord.

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 lägga till länkar, ändra textjustering, ändra textfärg och mycket mer.

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 funktionsrutor med ikoner i WordPress. Du kanske också vill se vår przewodnik om hur du anpassar färger på din WordPress-webbplats och sätt att skapa en mobilvänlig WordPress-webbplats.

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.