Hur man lägger till funktionsrutor med ikoner i WordPress

Titta på någon framgångsrik företagswebbplats, och du kommer troligen att se funktionsrutor med ikoner som lyfter fram deras viktigaste erbjudanden.

Det är ett beprövat designmönster som vi har använt otaliga gånger eftersom det fungerar. Det hjälper besökare att snabbt se vad som gör ditt företag speciellt utan att läsa stora textblock.

Efter att ha väglett många WordPress-användare genom webbplatsförbättringar, vet vi att det kan verka besvärligt att skapa dessa professionellt utseende funktionsrutor.

Men här är vad de flesta inte inser: du behöver inte vara designer eller utvecklare för att lägga till vackra funktionsrutor på din webbplats.

I den här guiden delar vi de enklaste sätten att skapa funktionsrutor med ikoner i WordPress.

Varför lägga till funktionsrutor med ikoner?

Funktionsrutor med ikoner gör viktig information lätt att skanna och visuellt engagerande. De flesta besökare kommer inte att läsa varje ord på en texttung sida eftersom de snabbt skannar för att hitta det som är viktigast.

Funktionsrutor lyfter fram nyckelpunkter, ofta i kombination med ikoner, så att användare kan förstå din produkt eller tjänst med en blick. Du kan också inkludera en call to action-knapp för att uppmuntra användare att lära sig mer om en specifik funktion.

Här är hur WPForms använder funktionsrutor för att visa sina största försäljningsargument:

Med det sagt, låt oss visa dig hur du lägger till funktionsrutor med ikoner i WordPress. Använd helt enkelt snabblänkarna nedan för att hoppa direkt till den metod du vill använda:

Metod 1: Lägg till funktionsrutor med ikoner med hjälp av WordPress Blockredigerare (Gratis metod)

Du kan lägga till funktionsrutor med ikoner på din WordPress-webbplats med hjälp av standardredigeraren för innehåll och kolumnblocket.

Detta är ett utmärkt alternativ om du vill skapa en enkel layout utan att använda en sidbyggare.

Steg 1: Öppna sidan och lägg till kolumnblocket

För att komma igång, öppna sidan där du vill lägga till en funktionsruta. Klicka sedan på ikonen för att lägga till block, ‘+’.

Skriv sedan 'Kolumner' i sökrutan.

När rätt block visas, klicka för att lägga till det på sidan.

WordPress kommer nu att visa alla olika kolumnblock. Siffrorna visar hur mycket utrymme varje kolumn tar upp i blocket. Till exempel skapar '50/50' två kolumner som var och en tar upp 50 % av den tillgängliga bredden.

Som ett exempel väljer vi kolumnblocket '33/33/33' eftersom detta ger oss tre kolumner med lika bredd, men du kan använda vilken layout du vill.

Steg 2: Lägg till ikoner i kolumnerna

Därefter är du redo att lägga till ikoner i kolumnerna.

Det enklaste sättet att göra detta är med utvalda ikonfonter, som är skalbara symboler som inte saktar ner din webbplats. Vi rekommenderar att använda Font Awesome eftersom de har en av de största samlingarna av gratis ikoner.

När du väl har lagt till ikonfonter i ditt WordPress-tema, är det enkelt att visa dem i dina kolumner med en kortkod.

Klicka bara på kolumnens '+' ikon och skriv in 'Shortcode'. När rätt block visas, klicka för att lägga till det i din layout.

Därefter kan du ange följande kortkod, men se till att ersätta 'bus' med namnet på ikonen du vill använda:

[icon name="bus"]

För att se en komplett lista över tillgängliga ikoner, gå helt enkelt till Font Awesome ikonbibliotek.

När du hittar en ikon du gillar, klicka på den för att se ikonens namn.

Till exempel, i följande bild tittar vi på en ikon som kallas 'adressbok'.

Du kan nu lägga till detta namn i kortkoden.

För att lära dig mer om att arbeta med kortkoder, se vår nybörjarguide om hur man lägger till en kortkod i WordPress.

Om du föredrar att använda en bild från WordPress mediebibliotek, kan du lägga till ett bildblock istället för att använda ett ikon-typsnitt.

För att göra detta, klicka helt enkelt på '+' i den första kolumnen och lägg sedan till ett 'Bild'-block istället för ett kortkodblock.

Du kan nu välja en bild från mediabiblioteket eller ladda upp en ny fil från din dator. Glöm inte att lägga till lämplig Alt-text för att beskriva ikonen för sökmotorer och skärmläsare.

Steg 3: Lägg till text i funktionsrutan

När du har lagt till alla dina ikoner är nästa steg att lägga till text i funktionsrutan.

För att göra detta, klicka på knappen '+' inuti Kolumnblocket. Lägg sedan till ett Styckeblock.

Skriv sedan helt enkelt din text i styckesblocket.

Du kan lägga till ikoner och text i de andra kolumnerna genom att upprepa samma process.

Steg 4: Skapa flera rader (valfritt)

Vill du att din funktionsruta ska ha flera rader?

Klicka helt enkelt på kolumnblocket och välj sedan de tre prickarna i verktygsfältet. Du kan sedan välja 'Duplicera'.

Detta skapar en kopia av Kolumnblock.

Följ nu bara samma process som beskrivs ovan för att lägga till innehåll i den andra raden.

Steg 5: Publicera din funktionsruta

När du är nöjd med funktionsrutan kan du lägga till annat innehåll på sidan, som en bild av produkten eller kategorier och taggar.

För att göra funktionsrutan live, klicka bara på knappen 'Uppdatera' eller 'Publicera'.

Du kan nu besöka din webbplats, blogg eller webbutik för att se funktionen med ikonrutan i aktion.

Här är ett exempel på vad folk kommer att se när de besöker din WordPress-blogg.

Metod 2: Lägg till funktionsrutor med ikoner med hjälp av en sidbyggarplugin (rekommenderas)

Om du vill skapa en enkel funktionsruta är WordPress blockredigerare ett bra val. Men om du vill skapa en mer avancerad ruta med en helt anpassad design, behöver du ett sidbyggarplugin.

SeedProd är den bästa WordPress sidbyggaren på marknaden som låter dig skapa anpassade sidor med en dra-och-släpp-redigerare.

Den har över 300+ professionellt utformade mallar som du kan använda för att snabbt skapa vackra sidor. Den har också ett helt bibliotek med ikoner som du kan lägga till i dina funktionsrutor med ett enda klick.

Här är ett exempel på en funktionsruta skapad med SeedProds färdiga block och ikoner.

Vi har sett våra partnervarumärken använda detta verktyg för att skapa sina webbplatser, och de har haft en utmärkt upplevelse. För detaljer, se vår SeedProd-recension.

Steg 1: Installera och aktivera SeedProd

Det första du behöver göra är att installera och aktivera SeedProd-pluginet. För mer information, se vår nybörjarguide om hur man installerar ett WordPress-plugin.

Efter aktivering, gå till SeedProd » Inställningar och ange din licensnyckel.

Du kan hitta denna information genom att logga in på ditt SeedProd-konto.

Steg 2: Välj en professionellt utformad mall

För att komma igång, gå till SeedProd » Landningssidor och klicka på ‘Lägg till ny landningssida.’

På nästa skärm kan du välja en mall. Du kan anpassa alla dessa mallar med SeedProds dra-och-släpp-byggare, men det är ändå en bra idé att välja en mall som matchar dina mål.

Alla SeedProds mallar är organiserade i olika kampanxtyper, såsom kommande snart och lead squeeze-kampanjer. Du kan till och med använda SeedProds mallar för att förbättra din 404-sida.

För den här guiden kommer vi att använda 'Tom mall', men du kan använda vilken mall du vill.

För att välja en mall, hovra helt enkelt över den och klicka sedan på 'Kryss'-ikonen.

Detta öppnar ett popup-fönster 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 till exempel vill förbättra din WordPress SEO genom att inkludera några relevanta nyckelord.

Klicka sedan på knappen 'Spara och börja redigera sidan'.

Detta öppnar mallen i SeedProds dra-och-släpp-sidredigerare.

Steg 3: Designa layouten för din funktionsruta

Eftersom du använder den tomma mallen är det första steget att välja en layout. För att göra detta, klicka helt enkelt på någon av kolumnlayouterna.

Hitta sedan 'Ikon'-blocket i menyn till vänster.

Du kan nu dra och släppa detta block i den första tomma kolumnen.

Detta lägger till ikonblocket i din layout, med en standardikon redan vald.

För att ändra ikonen, klicka på den och välj sedan knappen 'Välj bild'.

Detta öppnar ikonbiblioteket med hundratals ikoner att välja mellan. Du kan använda sökfältet för att leta efter en specifik ikon eller bläddra igenom hela listan.

När du hittar en bild du vill använda, hovra helt enkelt över den och klicka sedan på '+' -knappen för att lägga till den på din sida.

För att anpassa ikonen, klicka för att markera den.

Du kan nu finjustera denna ikon med hjälp av inställningarna i menyn till vänster, inklusive att ändra dess justering, storlek, färg och mer.

För att se fler alternativ, klicka på fliken 'Avancerat'.

Här kan du ändra marginaler, lägga till en kantlinje och till och med lägga till CSS-animationseffekter.

Steg 4: Lägg till funktionsruta-text

När du har gjort det, fortsätt och lägg till ett 'Text'-block under ikonen.

Hitta helt enkelt blocket 'Text' i menyn till vänster och placera det sedan under din ikon med dra-och-släpp.

För att lägga till text, klicka för att välja blocket. Du kan sedan skriva i den lilla textredigeraren i menyn till vänster.

Här kan du lägga till länkar, ändra textjusteringen, ändra textfärgen och mer.

Steg 5: Duplicera rader och publicera

För att anpassa de andra kolumnerna följer du helt enkelt samma steg som ovan.

Om du vill lägga till en annan rad med funktionsrutor med ikoner, för sedan muspekaren över sektionen och klicka sedan på knappen 'Duplicera rad'.

Du kan duplicera sektionen så många gånger du vill för att snabbt skapa fler funktionsrutor med ikoner.

Du kan sedan lägga till nya ikoner och text genom att följa samma process som beskrivs ovan.

Du kan fortsätta arbeta på sidan genom att lägga till fler block och anpassa dessa block i menyn till vänster.

När du är nöjd med hur sidan ser ut klickar du på knappen 'Spara'. Du kan sedan välja 'Publicera' för att göra sidan live.

Vanliga frågor om att lägga till en funktionsruta med ikoner

Här är några frågor som våra läsare ofta ställer om att lägga till en funktionsruta med ikoner i WordPress:

Hur infogar jag ikoner i WordPress?

För att infoga ikoner är den enklaste metoden att installera ett plugin som Font Awesome eller använda en sidbyggare som SeedProd. Om du inte vill använda ett plugin kan du ladda upp SVG-ikonfiler direkt med hjälp av standardblock för bilder.

Hur infogar jag symboler i WordPress?

För att infoga symboler måste du installera och aktivera pluginet Infoga specialtecken
. Efter aktivering lägger verktyget till en 'Ω' (omega)-knapp i verktygsfältet för WordPress-block.

Du kan använda det för att komma åt menyn för specialtecken. För mer information, se vår handledning om hur man lägger till specialtecken i WordPress-inlägg.

Hur man lägger till menyikoner i WordPress utan plugin?

För att lägga till menyikoner utan ett plugin, aktivera 'CSS-klasser' i fliken Skärmalternativ högst upp på sidan Utseende » Menyer. Lägg sedan till en specifik CSS-klass till ditt menyobjekt och använd anpassad CSS-kod i Anpassaren för att visa ikonens bakgrundsbild.

Hur lägger man till egna sociala ikoner i WordPress?

För att lägga till sociala ikoner, använd helt enkelt det inbyggda blocket 'Sociala ikoner' inuti WordPress-redigeraren. Klicka på '+' -knappen inuti blocket för att välja nätverk som Facebook eller Twitter, och klistra sedan in dina profilänkar direkt i fälten.

Hur lägger jag till en ikon för sociala medier i en WordPress-meny?

För att lägga till sociala ikoner i en navigeringsmeny, föreslår vi att du använder ett plugin som Menu Image för att ladda upp ikoner direkt till menyobjekt. Alternativt, lägg till en 'Anpassad länk' till menyn och klistra in HTML-koden för teckensnittikonen i fältet Navigationsetikett.

Om du är intresserad, ta en titt på vår guide om hur man lägger till ikoner för sociala medier i WordPress-menyer.

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 guide om hur du anpassar färger på din WordPress-webbplats och sätt att skapa en mobilvänlig WordPress-webbplats.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.