Hur man lägger till en kant runt en bild i WordPress (3 enkla metoder)

Om du lägger till en kant på dina bilder i WordPress kan det göra stor skillnad för utseendet på din blogg.

På WPBeginner använder vi till exempel ofta kanter för att skilja bilder från vår vita bakgrund, vilket gör att de sticker ut.

Lyckligtvis behöver du inte vara en teknisk snilleblixt för att rita snygga ramar runt dina bilder.

I den här guiden kommer vi att visa dig några enkla sätt att lägga till gränser till dina WordPress-bilder.

Varför lägga till en kant runt en bild i WordPress?

Imagely är kraftfulla verktyg för kommunikation. De kan dela information snabbt och göra texttunga sidor mer tilltalande.

Ibland kan dock bilder smälta in i webbplatsens bakgrund. Detta är mer troligt om du använder en bakgrundsbild eller om webbplatsens färger liknar dina bilder.

Personer med nedsatt syn eller färgblindhet kan också uppleva att det är svårt att skilja bilder från bakgrunden. Om du vill veta mer har vi en guide om hur du förbättrar tillgängligheten på WordPress-webbplatser.

Om du lägger till en kant runt en bild i WordPress skiljer sig bilden tydligt från webbplatsens bakgrund. Det är också ett bra sätt att rikta uppmärksamheten mot dina viktigaste bilder.

Med detta i åtanke kommer vi att gå igenom hur du kan lägga till en kant runt en bild i din WordPress-blogg. Här är en snabb översikt över alla metoder som vi kommer att ta upp i den här artikeln:

Är du redo? Låt oss komma igång.

Metod 1: Använda anpassade CSS-klasser för att lägga till en kant runt en bild i WordPress

Att skapa en anpassad CSS-klass är ett smart och enkelt sätt att lägga till kanter på dina bilder. Med den här metoden kan du definiera dina inställningar för bildramar på ett och samma ställe.

När du har skapat klassen kan du enkelt applicera den på valfri bild. Detta är perfekt om du planerar att lägga till kanter på flera bilder på din webbplats.

Det finns några olika sätt att skapa en anpassad CSS-klass. Du kan använda temaanpassaren, den fullständiga webbplatsredigeraren eller plugin-programmet WPCode.

För detaljerade instruktioner kan du se vår guide om hur du lägger till anpassad CSS i WordPress.

När du skapar din CSS-klass måste du ange kantlistans färg och bredd.

Du kan t.ex. ange pixlar (px) för bredden och en hexfärgkod för färgen. Oroa dig inte – det är enklare än det låter!

I följande kodsnutt skapar vi till exempel en svart kant som är 5 pixlar bred:

.border-black {
    border: #000 solid 5px;
}

I exempelkoden ovan är border-black namnet på CSS-klassen.

Du kan använda vilket namn du vill, men du måste skriva in CSS-klassnamnet varje gång du vill skapa en kant. Med det i åtanke vill du skapa ett CSS-klassnamn som är kort och lätt att komma ihåg.

Du kan lägga till så många CSS-klasser du vill. Du kan t.ex. skapa kanter som har olika färger.

Nu är det ganska enkelt att lägga till en kant på en bild.

För att komma igång, gå vidare och klicka på bilden på din WordPress-sida eller inlägg. Därefter ska du titta på fliken ”Block” på höger sida av skärmen och hitta alternativet ”Avancerat” där.

Klicka på den för att expandera sektionen.

I fältet ”ADDITIONAL CSS CLASS(ES)” kan du skriva in namnet på den CSS-klass som du vill lägga till i bilden.

Observera att, som du kan se på följande bild, kommer gränsen inte att visas i WordPress-sidredigeraren.

För att se hur gränsen kommer att se ut för dina besökare, gå vidare och klicka på knappen ”Preview”.

Du kommer nu att se din bild med ramen applicerad.

Om du är nöjd med hur kanten ser ut behöver du bara publicera eller uppdatera sidan.

Metod 2: Använda ett sidobyggprogram för att lägga till en kant runt en bild i WordPress

En annan metod är att använda ett plugin för sidbyggare.

Med drag-och-släpp-sidbyggare kan du enkelt designa och anpassa webbsidor, t.ex. inloggnings- och landningssidor. Du kan lägga till text, bilder och andra element utan att behöva några kodningskunskaper.

Med de här verktygen kan du också enkelt skapa unika kanter för varje bild. Du kan designa dem med hjälp av en visuellt baserad editor, vilket är enklare för många människor.

Vi rekommenderar SeedProd, som är den bästa landningssidesbyggaren för WordPress. Det är användarvänligt och låter dig enkelt skapa professionella sidor.

SeedProd har ett speciellt Imagely-block med inbyggda kantalternativ. Du kan också enkelt lägga till skuggor och justera avstånd.

Först måste du installera och aktivera insticksprogrammet. Om du behöver hjälp kan du läsa vår guide om hur du installerar ett WordPress-plugin.

Efter aktivering, låt oss gå till SeedProd ” Landningssidor från din WordPress instrumentpanel.

SeedProd levereras med hundratals professionellt utformade mallar, som är grupperade i kategorier. Längst upp på skärmen ser du kategorier som du kan använda för att:

• Skapa en 404-sida
• Skapa en anpassad inloggningssida
• Utforma en vacker sida som kommer snart
• Och mer därtill.

För att titta på en design, håll muspekaren över en mall och klicka sedan på förstoringsglasikonen när den visas. Då visas en förhandsgranskning av mallen.

Om du är nöjd med hur mallen ser ut kan du klicka på ”Välj den här mallen”.

I fältet ”Sidnamn” skriver du in ett namn för sidan. Som standard kommer SeedProd att använda detta namn som sidans URL.

Om du vill ändra den automatiskt skapade URL:en redigerar du bara texten i fältet ”Page URL”.

När du har fyllt i informationen kan du klicka på knappen ”Spara och börja redigera sidan”. Detta öppnar din valda mall i SeedProds dra-och-släpp-redigerare.

I menyn till vänster ser du alla block som du kan lägga till på din WordPress-sida genom att dra och släppa.

Hitta bara blocket ”Imagely” och dra det sedan till din siddesign.

När du har gjort det är det bara att klicka på blocket ”Imagely” för att se alla inställningar som du kan använda för att anpassa blocket.

I menyn till vänster ska du klicka på ”Use Your Own Image”.

Du kan nu välja vilken bild som helst från WordPress mediebibliotek.

Därefter klickar du på fliken ”Avancerat” i menyn till vänster.

Gå sedan vidare och klicka för att expandera avsnittet ”Image Border”.

Som standard är alla SeedProds inställningar för kantbredd 0, vilket innebär att bilden inte har någon kant.

Det första du bör göra är att öka dessa värden till 1 eller högre. Detta kommer att lägga till en synlig kant på bilden.

För att komma igång klickar du på varje fält för ”Border Width” och skriver sedan antingen in en högre siffra eller använder pilknapparna som visas.

När du är nöjd med kantlistans tjocklek kan du börja utforma den.

Ett alternativ är att ändra kantfärgen genom att klicka på fältet bredvid ”Kantfärg”. Då öppnas ett popup-fönster där du kan välja en ny kantfärg.

SeedProd erbjuder tre enkla kantstilar: solid, prickad och streckad. Du kan välja den som passar din bild bäst.

För att prova dessa olika kantstilar öppnar du bara rullgardinsmenyn ”Kantstil” och väljer sedan ett alternativ från listan.

Så där ja! Och om du vill lägga till en kant på andra bilder följer du bara samma process som beskrivs ovan.

När du är nöjd med din siddesign kan du klicka på knappen ”Spara” och sedan välja ”Publicera” för att göra den live.

Metod 3: Använda HTML och CSS för att lägga till en kant runt en bild i WordPress

Du kan också lägga till kanter med hjälp av HTML och CSS. Den här metoden kräver inget insticksprogram, vilket kan vara praktiskt.

För att anpassa kantlistans utseende krävs dock att man skriver lite kod, så det kanske inte är det bästa valet för nybörjare. Om du är bekväm med lite kodning erbjuder den här metoden dock stor flexibilitet.

Låt oss börja med att lägga till en bild på en sida eller i ett inlägg.

När du har gjort det kan du klicka på den treprickiga ikonen i det övre högra hörnet och sedan klicka på ”Kodredigerare”.

WordPress kommer nu att visa all kod som utgör sidan eller inlägget.

Du kan nu hitta det kodavsnitt som lägger till bilden på din sida. Denna kod kommer att börja med wp:image.

Om sidan har flera bilder kontrollerar du värdet img src=. Detta är bildens URL i ditt WordPress-mediebibliotek, och den kommer att vara olika för varje bild.

När du har hittat rätt kodavsnitt är nästa steg att skriva en kodrad som lägger till kanten och styr hur den ska utformas.

I följande kodavsnitt har till exempel kanten en bredd på 3 pixlar. Vi lägger också till 3 pixlar i utfyllnad och marginal:

style="border:3px solid #000000; padding:3px; margin:3px;" />

I exempelkoden ovan anger solid #000000 kantlinjens färg. Värdet #000000 är hex-koden för färgen svart.

Om du inte vill skapa en svart kant kan du ersätta värdet med någon annan hexkod.

Och om du inte vill skapa en svart kant kan du ersätta värdet med någon annan hexkod.

När du har bestämt dig för gränskoden måste du hitta avsnittet /></figure> och lägga till din kod direkt före det första / tecknet.

Låt oss titta på ett exempel:

<!-- wp:image {"id":1450,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="http://localhost:10003/wp-content/uploads/2022/06/logo.jpeg" alt="" class="wp-image-1450" style="border:3px solid #000000; padding:3px; margin:3px;" /></figure>
<!-- /wp:image -->

När du är nöjd med din kod lämnar du kodredigeraren genom att klicka på ”Avsluta kodredigerare”.

Du bör nu se en kant runt din bild. Oroa dig inte om du får en varning om ogiltig HTML. Detta är normalt och påverkar inte hur din bild visas.

Om du är nöjd med hur det ser ut kan du gå vidare och antingen uppdatera eller publicera din sida som vanligt.

Om du nu besöker din webbplats kommer du att se en ram runt din bild.

Bonus tips: Använda ett grafiskt designverktyg för att lägga till en kant runt en bild

Även om WordPress erbjuder flera metoder för att lägga till gränser, kan dessa alternativ ibland vara begränsade i stil och anpassning. Så varför inte redigera din bild först och sedan ladda upp den till WordPress efteråt?

Det är här som grafiska designverktyg kommer väl till pass.

Adobe Photoshop är den stora spelaren här, med massor av snygga funktioner för proffsen. Om du inte vill spränga banken är Affinity Photo ett bra val – det har liknande knep i ärmen, men du betalar bara en gång.

Och om du håller koll på din plånbok kan GIMP (GNU Image Manipulation Program) vara din go-to. Det är helt gratis, öppen källkod och kan göra mycket av det som de betalda verktygen kan.

GIMP är också ett bra alternativ för både nybörjare och erfarna användare. Du kan använda det på Mac och Windows.

I den här handledningen visar vi hur du kan lägga till en kant runt en bild med hjälp av GIMP.

Efter installationen vill du öppna skrivbordsapplikationen för GIMP. Därefter kan du klicka på Arkiv ” Öppna och välja en bild att redigera från din lokala enhet. Eller så kan du dra och släppa en bild till GIMP:s redigerare.

När bilden har laddats in i GIMP-redigeraren ska vi rita en kant runt bilden med hjälp av ”Rectangle Select Tool”. Du hittar det här verktyget i verktygsfältet längst upp till vänster.

Därefter kanske du vill kontrollera dina inställningar för förgrunds- och bakgrundsfärg.

Detta beror på att GIMP använder förgrundsfärgen för att stryka linjerna. Så om du behöver använda en viss färg för din kant kan du klicka på förgrundsfärgen för att justera den.

Detta öppnar färgväljaren, där du kan flytta musen över färgvalsområdet eller infoga färgens hex-kod.

När du har gjort detta kan du klicka på ”OK”.

Nu när du har ställt in din kantfärg är det dags att applicera den. Du kan navigera till Edit ” Stroke Selection, och detta kommer att öppna popup-fönstret ”Stroke Selection”.

Här kan du justera streckets stil, linjebredd och mycket mer. Vi har till exempel ställt in linjebredden på 5 px.

När du har gjort det går du vidare och klickar på ”Stroke”, och gränsen ska nu läggas till i din bild.

Innan du laddar upp till WordPress kanske du vill optimera bilden för att bibehålla utmärkt hastighet och prestanda på webbplatsen. Raw-bilder är ofta stora, så det här steget kan vara till stor hjälp.

I GIMP kan du optimera din bild genom att ändra storlek på den.

För att komma igång ska du navigera till Image ” Scale Image. Detta kommer att öppna popup-fönstret ”Skala bild”, där du kan justera ”Bildstorlek” så här:

När du har justerat bildstorleken kan du klicka på knappen ”Scale”.

GIMP ändrar sedan storlek på bilden och visar den nya versionen i redigeringsverktyget.

När du är klar kan du spara bilden genom att gå till Arkiv ” Exportera som.

Sedan kan du följa uppmaningen att välja en plats och namnge filen. När allt är klart klickar du på ”Exportera”.

Nu kan du ladda upp din bild till ditt WordPress-inlägg eller din sida. Så här kan det se ut i blockredigeraren:

Nu har du lärt dig hur du lägger till en kant runt en bild med hjälp av ett grafiskt designverktyg!

Du kan använda den här metoden när du vill ladda upp en bild till WordPress.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till en kant runt en bild i WordPress. Du kan också gå igenom vår guide om hur du gör grundläggande bildredigering i WordPress eller vårt expertval av de bästa plugins och verktyg för bilder i WordPress.

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.