Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar.

Vill du lägga till en funktionsruta med en ikon på din startsida?

Den här funktionen visar viktig information om dina produkter och tjänster. Det har visat sig vara en engagerande teknik för att presentera produkter för potentiella kunder.

I den här handledningen kommer jag att visa dig hur du lägger till den här funktionen på din Wordpress blogg.

Men tidigare, om du aldrig har installerat WordPress-upptäckt Hur man installerar en Wordpress blogg i fyra steg et Hur man hittar, installera och aktivera en Wordpress tema på din blogg 

Tillbaka till varför vi är här.

lägg till en funktionsruta med en ikon

Vad är funktionsrutan med ikoner?

De flesta människor läser inte den när de besöker en webbplats. Som människor blir vi professionella skannrar.

Det betyder att du som ägare till ett onlineföretag måste presentera viktig information på ett sätt som är ganska lätt att analysera och på ett engagerande sätt.

Därför har de flesta företagswebbplatser vanligtvis en bild på skjutreglaget med en uppmaningsknapp.

Precis nedanför kan du använda en funktionsruta som låter dig visa viktig information om dina produkter och tjänster. Varje funktionsruta kan ha sin egen uppmaningsknapp för att låta användarna lära sig mer.

Här är ett konkret exempel:hur man lägger till wordpress ikonrutor

Så här lägger du till en funktionsruta till startsidan för din WordPress-blogg

Det första du behöver göra är att installera och aktivera plugin Advanced WP Kolumner. För mer information se vår guide på Hur man installerar eller lägger till ett plugin på WordPress

Skapa enkelt din webbplats med Elementor

Elementor låter dig skapa Enkelt och gratis vilken webb- eller bloggdesign som helst med ett professionellt utseende. Sluta betala mycket för en webbplats du kan göra själv.

Efter att ha aktiverat plugin-programmet måste du navigera till platsen " Inställningar> Avancerade WP-kolumner För att konfigurera plugin.

Du måste bara bläddra ner till alternativet " kolonn klass Och skriv in en text som "minkolumner" (Vi återkommer). Glöm inte att klicka på spara-knappen för att spara dina inställningar.

colclass

Allt du behöver göra är att lägga till SVG-ikoner i dina funktionsrutor. För att göra detta uppmanar jag dig att installera och aktivera plugin WP SVG Ikoner.

Du är nu redo att skapa dina funktionsrutor. Du kan börja med att ändra sidan där du vill att funktionalitetsrutan ska visas.

Du kommer att märka två nya alternativ i postredigeraren. Den första låter dig lägga till en ikon och den ligger ovanför redigeringsverktygsfältet. Den andra finns i verktygsfältet för visuell redigerare.

Om du inte kan se det här alternativet måste du expandera knapparna i verktygsfältet.

newbuttons

Det första du behöver göra är att klicka på knappen " Advanced WP Kolumner". Detta visar en popup där du kan klicka "Tömma" och välj antalet kolumner du vill lägga till.

Skapa-kolonner

Du kan klicka på varje område och lägga till vilken text du vill. Om du inte lägger till text nu kan du inte se skillnaden mellan kolumnerna senare. När du är klar klickar du på " Lägg kolumner Längst ner.

Du kommer att märka att kolumnerna har lagts till i den visuella redigeraren. Nästa steg är att lägga till ikoner ovanför texten.

Ta markören och lägg till den i början av textrutan och lägg sedan till en ny radbrytning. Detta lägger till ett nytt utrymme där du kan lägga till ikonen. Klicka nu på knappen " Lägg till ny ikon“, Och du kommer att se ett nytt fönster där du kan välja en ikon.

addingicons

Från det här fönstret kan du välja ikonen du vill lägga till. Klicka sedan på "span" -knappen så att ditt innehåll läggs till i elementet .

Klicka till slut på knappen insatsen ikon“, Du kommer att märka att SVG-ikonen har lagts till i redigeraren. Beroende på namnet på ikonen kommer kortkoden att se ut så här:

[wp-svg-icons icon = "raket" wrap = "span"]

Upprepa processen varje gång i de andra rutorna. Glöm inte att spara dina inställningar när du är klar.

Du är redo att slutföra jobbet, men om du märker att ikonerna är mycket små.

featureboxes-SmallIcons

Allt du behöver göra är att lägga till CSS-kod för att åtgärda problemet. Här är ett exempel på CSS-kod som du kan lägga till i ditt barns temat stilfil.

span.wp-svg-rocket.rocket {font-size: 100px; Span.wp-svg-cloud.cloud} {font-size: 100px; } Span.wp-svg-headphones.headphones {font-size: 100px; .mycolumns} {kant: fast 1px #eee; min-höjd: 250px; padding-top: 20px viktigt; }

Över 11 miljoner verktyg att ladda ner

Envato Elements erbjuder de bästa resurserna för att skapa och utveckla alla aspekter av din webbplats. Du hittar miljontals WordPress-mallar, grafik, ljudresurser och mycket mer. Perfekt för nybörjare.

Kom ihåg att ikonklassen måste matcha den du lade till. I det här fallet använde jag följande ikoner: raket, moln, hörlurar.

featureboxesfinal

Kom ihåg att vi har skrivit en handledning som gör det möjligt för dig förbättra dina CSS-färdigheter. Du kan också använda en sidkonstruktör mer framgångsrik som Visual Composer som vi skrev en ganska detaljerad handledning.

Det är det för denna handledning. hoppas att det hjälper dig att skapa bra funktionsrutor på din WordPress-blogg. Dela gärna den här handledningen med dina vänner. Jag tar tillfället i akt och skickar de bästa önskningarna från hela BlogPasCher-teamet.

%d bloggare gillar denna sida: