Gå till innehållet

Hur man lägger till funktioner Lådor med ikonen på Wordpress

Divi: det enklaste WordPress-temat att använda

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. [Rekommenderas]

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 tutorialen visar jag dig hur du lägger till den här funktionen till din WordPress-blogg.

Men tidigare, om du aldrig har installerat WordPress-upptäckt Hur man installerar en Wordpress-blogg 7 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

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

När du har aktiverat plugin-programmet måste du komma åt " 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-kolonnerDu 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.

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

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; }

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 mer avancerad byggarsida som Visual Composer som vi har skrivit för 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.

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
2 aktier
del
tweet
Enregistrer2