De flesta besökare skummar igenom en sida innan de bestämmer sig för om de ska läsa den. Om dina viktigaste fördelar är begravda i textstycken kan många lämna utan att någonsin se dem.
Funktionsrutor löser detta genom att para ihop varje fördel med en liten ikon och en kort beskrivning, så att besökarna förstår vad du erbjuder med en blick. Du kan också lägga till en uppmaning till handling-knapp till varje ruta för att hänvisa läsare till mer information.
I den här guiden visar vi dig hur du lägger till funktionsrutor med ikoner i WordPress med hjälp av den inbyggda blockredigeraren eller en sidbyggarplugin.
Vilken metod ska du använda för att lägga till funktionsrutor?
Om du lägger till en eller två funktionssektioner på en befintlig sida eller inlägg, använd metoden med blockredigeraren. Den är gratis, inbyggd i WordPress 7.0 och senare, och kräver ingen ytterligare plugin.
Om du designar en hel landningssida från grunden är en sidbyggare det bättre valet. Du får färdiga mallar och fler stylingalternativ för varje ikon.
Du kan använda 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 blockredigeraren (Gratis)
WordPress blockredigerare bygger sidor av block, som är enskilda innehållsdelar som ett stycke, en bild eller en knapp.
WordPress 7.0 lade till ett inbyggt ikonblock som låter dig infoga SVG-ikoner utan en plugin. SVG är ett bildformat gjort av kod, så ikoner förblir skarpa i alla storlekar och laddas snabbt.
Om du använder en äldre version av WordPress hittar du inte ikonblocket i redigeraren. Du måste uppdatera WordPress innan du följer den här metoden.
Steg 1: Lägg till ett kolumnblock
Börja med att lägga till ett kolumnblock. Öppna först sidan där du vill lägga till dina funktionsrutor. Klicka sedan på ikonen + Lägg till block, sök efter Kolumner och klicka på blocket Kolumner för att lägga till det.
WordPress visar dig flera kolumnlayouter. Siffrorna anger hur mycket bredd varje kolumn tar upp. Till exempel skapar 50 / 50 två kolumner med lika bredd.
Vi väljer 33 / 33 / 33 för att skapa tre lika kolumner, men du kan välja vilken layout som helst som fungerar för ditt innehåll.
Steg 2: Lägg till ikoner i dina funktionsrutor
Klicka sedan på + -knappen i kolumnen och sök efter Ikon. När ikonblocket visas, klicka på det för att lägga till det.
WordPress lägger automatiskt till en Info-ikon i kolumnen. Klicka på knappen 'Ersätt' för att välja en annan ikon.
Detta öppnar ikonbiblioteket. Du kan skriva ett namn, som foto eller butik, i sökfältet, eller bläddra igenom de tillgängliga ikonerna.
När du hittar ikonen du vill ha, klicka på den för att lägga till den i din kolumn.
Du kan sedan anpassa ikonen med hjälp av blockinställningarna. Beroende på ditt tema och din konfiguration kan du ändra ikonens färg, bakgrundsfärg, dimensioner och kantlinje. Du kan också använda verktygsfältet för att centrera ikonen.
Steg 3: Lägg till text i dina funktionsrutor
När dina ikoner är på plats, klicka på + -knappen under ikonen i den första kolumnen och lägg till ett rubrikblock för funktionsnamnet.
Lägg sedan till ett styckeblock under och skriv en kort beskrivning av funktionen. En eller två meningar räcker vanligtvis.
Upprepa samma process för de andra kolumnerna.
Steg 4: Skapa fler rader med funktionsrutor (valfritt)
Om du vill lägga till mer än en rad med funktionsrutor, välj kolumnblocket och klicka på trepunktsmenyn i verktygsfältet. Välj sedan Duplicera.
Detta skapar en kopia av hela raden. Du kan sedan ersätta ikonerna och texten med nytt innehåll genom att följa samma steg som ovan.
Steg 5: Publicera dina funktionsrutor med ikoner
När du är nöjd med dina funktionsrutor klickar du på knappen Spara eller Publicera för att göra dem live.
Du kan sedan besöka din webbplats för att se funktionsrutorna i aktion:
Metod 2: Lägg till funktionsrutor med ikoner med hjälp av en sidbyggare
Blockredigeraren fungerar bra när du vill lägga till en funktionssektion på en befintlig sida. Men om du designar en hel landningssida och vill ha mer kontroll över layout och stil, kan en dra-och-släpp-sidbyggare ge dig mer flexibilitet.
Vi kommer att använda SeedProd för den här metoden eftersom vi använder det på våra egna webbplatser. De flesta dra-och-släpp-sidbyggare, som Elementor, erbjuder ett ikonrutselement och ett inbyggt ikonbibliotek. För mer information, se vår SeedProd-recension.
Steg 1: Installera och konfigurera sidbyggaren
Först måste du installera och aktivera SeedProd-pluginet. För mer information, se vår guide om hur man installerar ett WordPress-plugin.
Notera: Det finns en gratis version av pluginet, men vi kommer att använda den betalda versionen eftersom Icon Box-blocket och ikonbiblioteket endast är tillgängliga på licensierade planer.
När du har aktiverat pluginet, gå till SeedProd » Inställningar och ange din licensnyckel. Du hittar din nyckel genom att logga in på ditt SeedProd-konto.
Steg 2: Välj en mall för landningssida
Gå sedan till SeedProd » Landningssidor och klicka på ‘+ Lägg till ny landningssida.’
Ange sedan ett namn för din sida. SeedProd kommer också att använda detta namn för att skapa sidans URL, men du kan redigera URL:en om det behövs.
På nästa skärm väljer du en mall. Varje mall kan anpassas med dra och släpp, men att välja en som matchar ditt mål kan spara dig lite tid.
För den här guiden kommer vi att använda den tomma mallen. Håll muspekaren över den och klicka på kryssikonen för att välja den.
Klicka sedan på ‘Spara och börja redigera sidan.’
Steg 3: Skapa dina funktionsrutor med ikoner
Eftersom vi börjar med en tom mall är det första steget att välja en layout. Här väljer vi layouten med en kolumn för att designa rubrikområdet ovanför dina funktionsrutor.
Du kan sedan dra rubrikblocket från menyn till vänster in på sidan. Välj blocket för att redigera dess text och justera dess formatering med alternativen i panelen till vänster.
Upprepa processen med textblocket.
Du kan också anpassa rubriken genom att lägga till en bakgrundsbild eller ändra dess formatering. För fler alternativ, klicka på fliken ‘Avancerat’ för att justera avstånd, lägga till en kantlinje, lägga till animationseffekter och mer.
När du är klar med rubriken kan du skapa funktionsrutorna. Dra kolumnblocket från panelen till vänster in i redigeraren och placera det precis under rubrikområdet.
Därefter kan du välja en layout. I det här exemplet använder vi alternativet med tre lika stora kolumner.
Hitta sedan blocket Ikonruta i menyn till vänster och dra det till den första kolumnen.
Blocket innehåller en standardikon, rubrik och exempeltext som du kan anpassa.
För att ändra ikonen, hitta sektionen Ikon/Bild i panelen till vänster. Håll sedan muspekaren över den aktuella ikonen och klicka på knappen för att ersätta den.
Detta öppnar ikonbiblioteket. Du kan söka efter en specifik ikon eller bläddra bland de tillgängliga alternativen. När du hittar en du gillar, klicka på den för att lägga till den i din funktionsruta.
När du har valt en ikon, klicka på den för att öppna dess inställningar i menyn till vänster. Här kan du ändra dess justering, storlek och färg.
Steg 4: Anpassa innehållet i din funktionsruta
Välj sedan texten i din Ikonruta för att öppna dess inställningar i menyn till vänster.
Du kan ersätta exempelrubriken och beskrivningen med din egen funktions-text. Du kan också lägga till länkar eller ändra textjusteringen och färgen.
Upprepa dessa steg för de andra kolumnerna och lägg till en annan ikon och funktions-text till var och en.
Steg 5: Publicera din landningssida
Om du vill lägga till ytterligare en rad med funktionsrutor, håll muspekaren över sektionen och klicka på knappen Duplicera rad. Ersätt sedan ikonerna och texten med ditt nya innehåll.
Du kan också anpassa resten av din landningssida genom att lägga till bilder, knappar för "call-to-action" eller andra block. Processen är liknande: dra blocket du vill ha till redigeraren och anpassa det från panelen till vänster.
När du är nöjd med din landningssida, klicka på knappen 'Spara' och välj sedan 'Publicera' för att göra den live. Du kan nu se landningssidan i aktion:
Vanliga frågor om funktionsrutor med ikoner
Här är några vanliga frågor om att lägga till funktionsrutor med ikoner i WordPress:
Hur lägger jag till ikoner i WordPress?
Om du använder WordPress 7.0 eller senare kan du använda det inbyggda Ikonblocket, som låter dig söka i WordPress ikonbibliotek efter namn. För större ikonuppsättningar som Font Awesome behöver du ett plugin eller en sidbyggare med eget ikonbibliotek.
Hur lägger jag till egna ikoner i WordPress?
Ikonblocket visar bara ikoner från WordPress-biblioteket, så du kan inte ladda upp egna genom det. Istället kan du ladda upp din ikon som en PNG-fil med hjälp av Bildblocket.
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 man 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 gärna på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.
micahel
Riktigt trevlig artikel och den hjälpte till att lösa mitt problem. Men här är min fråga.
-Hur skapar du de vackra sidofälten som syns i det här inlägget, som hur man startar en blogg, webbplatsplan, jag behöver hjälp med..., användbara WordPress-guider, Erbjudanden & Kuponger
-Jag behöver verkligen hjälp med att skapa dessa sidofält eftersom jag läser om hur man skapar en blogg
Ashutosh Panda
Det var en fantastisk artikel..
Hjälpte mig mycket
Rob
Hej. Mina ikoner centreras inte i själva kolumnen. Finns det en parameter vi kan lägga till för att säkerställa att de centreras? 2 av mina ikoner centreras fint, men 2 kommer bara att justeras till vänster, även om jag justerar dem till mitten med formatering i WordPress formateringsredigerare (med hjälp av ett plugin). Tack.
Hassan NAITALI
Bra artikel, jag älskar den,
så, jag har en fråga, kan jag göra ändringar i dessa ikoner och göra dem större genom att göra ändringar i föräldratemat grafiskt och utan att röra css-koden?
Tack !!
WPBeginner Support
Hej Hassan,
Du skulle fortfarande behöva lite CSS.
Admin
Chris
Jag försökte allt som stod i handledningen men istället för att det sätts i kolumner, sätts allt under en kolumn. Medan ikonerna är placerade bredvid orden. Jag ville skapa tre kolumner och allt under varandra i en kolumn. Varför är det så?
Roshni
Tack. Så användbart!
Paul
Har du en handledning om hur man gör detta med css, html och php utan att behöva använda ett plugin? Jag har letat runt men verkar inte kunna hitta något.
john
Hur får jag ikonen att centreras över innehållet?
Evan herman
För alla som använder WP SVG Icons och inte är bekväma med att skriva CSS, kan du faktiskt justera ikonstorleken genom att skicka in en parameter size=”#px” till kortkoden wp-svg-icons.
Exempel:
[wp-svg-icons icon="rocket" wrap="span" size="100px"]
Det kommer att ställa in ikonen till 100px och undvika steget att skriva anpassad CSS. Du kan fortfarande behöva justera stoppningen.
Andre Page
Det var mycket hjälpsamt Evan, tack!!
Roshni
Tack, Evan. Det fungerade.
Bobby
Bra artikel om en viktig funktion för din webbplats. Pluginet som rekommenderas har dock inte uppdaterats på 2 år. Jag är relativt ny på WordPress och jag fick höra att jag skulle undvika plugins som inte har uppdaterats det senaste året. Jag antar att det beror på att du är mycket kunnig om WordPress och lyfte fram pluginet i den här artikeln. Låt mig veta vad du tycker.
WPBeginner Support
Bobby, pluginet fungerar bra, vi har testat det. Vi har också kontaktat plugin-utvecklaren så att de kan uppdatera pluginet.
Helst bör du installera plugins som nyligen har uppdaterats. Det finns dock gott om WordPress-plugins som inte behöver uppdateringar. Plugin-författare anser att eftersom ett plugin inte är trasigt och fungerar utmärkt, finns det ingen anledning för dem att uppdatera det.
Admin
Bobby
Ok, det är bra att veta. Tack igen.
arun
Bra inlägg, jag driver också en WordPress-blogg. Jag kommer att använda dessa ikoner på min blogg tack för att du delade med dig.
Hemang Rindani
Fin artikel. WordPress är en utmärkt lösning för företagsinnehållshantering som kan tillgodose alla komplexa affärskrav och utveckla kraftfulla webbplatser. Den innehåller tusentals flexibla, anpassningsbara och responsiva teman, moduler och plugins som kan användas för att enkelt designa flera webbplatser. Ökad konkurrens kräver en interaktiv och engagerande webbplats och därför är det viktigt att inkludera en mängd verktyg som uppmuntrar besökare att stanna längre på en sida. Plugins i WordPress tillför värde till webbsidan, särskilt genom att göra den mer intressant. Att använda rätt verktyg som Call to action-knappar och inloggnings- och delningsknappar för sociala medier med innehåll på sidan hjälper till att förbättra användarupplevelsen. Artikeln belyste helt rätt att valet av rätt verktyg och användningen av dess möjligheter ger en CMS-utvecklare bättre kontroll över webbplatsen.