Så här ändrar du färgen på Links i WordPress (Beginner’s Guide)

Vill du lära dig hur du ändrar färgen på länkar i WordPress?

Om du ändrar färgen på links kan det bli lättare för besökarna att hitta runt på din website. Att skapa ett unikt färgschema kan också hjälpa din site att sticka ut.

I den här artikeln visar vi dig hur du ändrar färgen på länkar i WordPress, steg för steg.

Varför ändra färgen på Links i WordPress?

När du addar en link i WordPress kommer ditt theme automatiskt att bestämma färgen på den länken. Ibland kommer ditt WordPress-temas standardfärger att vara exakt vad du vill, men du kan behöva mer control över hur länkarna ser ut.

Du kanske till exempel vill ändra färgen på länken så att den matchar ditt varumärke eller din customize logga. Eller så kanske du vill öka färgkontrasten för att göra din site mer tillgänglig för läsare med begränsad syn.

Med vissa teman kan du ändra länkfärgen i temats options panel eller WordPress theme customize, så se till att du kontrollerar dessa platser först. Det är också värt att titta på ditt temas documentation.

Med detta sagt, låt oss se hur du ändrar länkfärgen på din WordPress website, oavsett vilket theme du använder. Använd bara snabblänkarna under för att hoppa direkt till den metod du vill använda:

Video Tutorial

Om du föredrar skriftliga instruktioner är det bara att fortsätta läsa.

Metod 1: Ändra färg på enskilda Links

Ibland kanske du vill ändra färg på enskilda links. Du kanske till exempel vill rikta besökarens uppmärksamhet mot call-to-action på en landing page.

För att göra detta markerar du helt enkelt den link du vill customize. Klicka sedan på pilen icon i mini toolbar och välj ”Highlight”.

Du kan nu antingen selecta ”Background” eller ”Text” beroende på vilken ändring du vill göra.

När det är gjort kan du gå vidare och välja den färg du vill använda.

För att customize fler links upprepar du bara dessa steg.

När du är nöjd med hur länkarna ser ut klickar du på antingen ”Update” eller ”Publicera” för att göra your changes live.

Metod 2: Ändra färg på Link i WordPress med hjälp av WPCode (rekommenderas)

Det enklaste sättet att ändra länkfärgen är genom att lägga till customize CSS på din WordPress site.

Ofta hittar du code snippets i WordPress tutorials med instruktioner för att add dem till ditt temas functions.php-fil.

Det största problemet är att även ett litet misstag i det anpassade code snippet kan förstöra din WordPress site och göra den otillgänglig. Du kommer också att förlora alla dina customizes nästa gång du uppdaterar ditt WordPress theme.

Det är där WPCode kommer in i bilden.

Detta gratis plugin gör det enkelt att add to custom CSS utan att riskera din site.

Det första du behöver göra är att installera och aktivera det gratis pluginet WPCode. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett WordPress plugin.

Efter aktivering, head över till Code Snippets ” Add Snippet.

Här hoverar du helt enkelt musen över ”Add Your Custom Code”.

När det visas klickar du på ”Use snippet”.

Till att börja med skriver du in en titel för det anpassade code snippet. Det kan vara vad som helst som hjälper dig att identifiera snippet i WordPress dashboard.

Efter det öppnar du dropdown ’Code Type’ och väljer ’CSS Snippet’.

Du kan nu gå vidare och lägga till ett custom CSS snippet till code snippet. Låt oss titta på några av de olika snipporna du kan använda.

Ändra färgen på Links på din website i WordPress

Till att börja med kanske du vill customize den övergripande länkfärgen. Det här är den färg som besökarna ser innan de klickar på en link.

För att göra detta, lägg bara till följande snippet i WPCode-kodboxen:

a {
     color: #FFA500;
}

I exemplet ovan kommer hex-koden # att ändra färgen på linken till orange, så du måste ändra#FFA500 till den färg du vill använda.

Om du ej är säker på vilken hex-kod du ska använda, kan du utforska olika färger och få deras koder på HTML Color Codes website.

Om du behöver hjälp med att välja en färg för en link, vänligen se vår guide om hur du väljer ett perfekt färgschema.

När du är nöjd med hur din kod ser ut klickar du på ”Inaktiverad”-togglet så att det visar ”Aktiv” istället. Slutligen klickar du på ”Save Snippet” för att göra CSS-snippet live.

Om du nu besöker din WordPress website kommer du att se den nya link-färgen i action.

Ändra färg på Länkhovring i WordPress

Ett annat alternativ är att ändra färgen på länkhovringen. Detta är den färg som visas när en visitor hoverar musen över en länk, så det är ett bra sätt att fånga deras uppmärksamhet och förbättra din click through rate.

För att göra denna ändring klistrar du helt enkelt in följande snippet i WPCodes editor:

a:hover {
     color: #FF0000;
     text-decoration: underline;
}

Koden ovan ändrar länkfärgen till röd och understryker texten när besökarna hoverar över den. Precis som tidigare kan du ändra hex-koden #FF0000 till vilken färg du vill använda.

När du är redo att gå live kan du publicera code snippet genom att följa samma process som beskrivs ovan.

Ändra färgen på Links efter besök i WordPress

Därefter kanske du vill ändra färgen på länken efter att en användare har klickat på länken. Detta kan hjälpa besökarna att hitta runt i din WordPress blogg genom att visa vilka links de redan har klickat på.

Du kan använda CSS-koden under för att ändra färgen på den besökta länken:

a:visited {
     color: #0000FF;
}

Som alltid, se till att du ändrar den blå #0000FFhex-kodentill den färg du vill använda i dina links.

När det är gjort klickar du på ”Inaktiverad” toggle så att den ändras till ”Aktiv”. Sedan klickar du bara på ”Save Snippet” för att göra koden live på din webbplats, blogg eller online store.

Ändra färgen på dina links i navigationen i WordPress

Slutligen kanske du också vill customize länkarna i din navigation menu.

För mer detaljer, se vår guide om hur du stylar WordPress navigations menyer.

Metod 3: Ändra färgen på Link utan att editera CSS

Istället för att lägga till CSS-kod direkt på din website kan du använda ett plugin för CSS Styling för att visuellt editera din site.

Vi rekommenderar att du använder CSS Hero plugin. Det är mycket nybörjarvänligt och låter dig visuellt customize din website, liknande en drag and drop page builder.

När du har installerat pluginet klickar du på knappen ”Proceed to Product Activation” för att aktivera det och ansluta ditt konto.

Du kommer då till en vy där du kan enter ditt användarnamn och password.

Följ sedan instruktionerna på skärmen för att kontrollera ditt account. Efter det kommer CSS Hero att ta dig tillbaka till WordPress dashboard automatiskt.

Klicka sedan på knappen ”Customize with CSS Hero” högst upp i admin-verktygsfältet i WordPress.

Detta kommer att öppna din website med CSS Hero som körs högst upp på den.

CSS Hero använder en WYSIWYG-editor (What You See is What You Get). Detta innebär att du kan clicka på vilket content som helst för att öppna en toolbar som låter dig customize det innehållet.

För att komma igång klickar du på ett exempel på den link som du vill edit. I den här guiden kommer vi att customize länkar till blogginlägg.

När du har valt en länk klickar du på menu-item ”Typography” och väljer en new färg för dina links.

Du kan antingen välja en färg från listan eller add to en hex-kod.

Ändra färgen på din navigation menu i WordPress

Därefter kan du använda CSS Hero för att skapa en custom navigation menu genom att ändra länkfärgen.

Håll bara hovern över din navigation menu och click på något av menu items.

Välj sedan alternativet ”Typografi”.

Du kan nu välja den färg som du vill använda i stället.

När du har slutfört ändringarna av färgerna på länkarna klickar du bara på knappen ”Save and Publicera” för att göra dina ändringar.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du ändrar färgen på links i WordPress. Du kanske också vill se vår guide om hur du ändrar textfärgen i WordPress eller vårt expertval av de bästa WordPress-designexemplen som du bör kontrollera.

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.