Hur man ändrar bakgrundsfärg i WordPress (Beginner’s Guide)

Vill du ge din WordPress-webbplats ett nytt utseende utan att lägga timmar på komplexa designändringar?

Vi har skapat WordPress-webbplatser sedan 2008. Och vi kan med säkerhet säga att en ändring av webbplatsens bakgrundsfärg är ett av de snabbaste sätten att förändra webbplatsens utseende.

Men med alla olika WordPress-teman och editorer som finns tillgängliga kan det kännas överväldigande för nybörjare att hitta rätt metod.

I den här enkla guiden visar vi dig exakt hur du ändrar bakgrundsfärgen i WordPress, oavsett vilket tema eller sidbyggare du använder.

Varför din bakgrundsfärg i WordPress verkligen spelar roll 🎨

Tänk på din webbplats bakgrundsfärg som väggarna i ditt digitala hem. Även om ditt WordPress-tema levereras med en standardfärg kan valet av rätt bakgrund göra stor skillnad för hur välkomnande din webbplats känns för besökarna.

Här är varför detta WordPress-designelement är så viktigt:

• De gör ditt innehåll mer lättläst
• De hjälper viktig information att framträda
• De skapar stämningen på din webbplats
• De kan få din webbplats att se mer professionell ut

Rätt bakgrundsfärg kan hjälpa till att framhäva viktiga knappar och öka konverteringen. Du kan också använda olika färger för att organisera ditt innehåll bättre, till exempel genom att använda specifika färger för olika bloggkategorier eller särskilda meddelanden.

Och om du vill göra din webbplats ännu mer engagerande kan du till och med lägga till videobakgrunder för att fånga dina besökares uppmärksamhet.

Med det sagt, låt oss ta en titt på hur du ändrar bakgrundsfärgen i WordPress. Vi kommer att visa dig olika sätt att customize bakgrundsfärgen så att du kan hoppa vidare till den section du föredrar:

Så här ändrar du bakgrundsfärg i WordPress Theme Customizer

Beroende på ditt theme kan du eventuellt ändra bakgrundsfärgen med hjälp av WordPress Theme Customize. Med den kan du editera din sites appearance i realtid och utan att behöva redigera kod.

För att komma åt WordPress Theme Customize kan du logga in på din website och sedan gå till Appearance ” Customize.

Detta kommer att öppna Theme Customize, där du hittar flera alternativ för att ändra ditt theme. Detta inkluderar menyer, färger, homepage, widgets, bakgrundsbild och mycket mer.

Vilka specifika alternativ som är tillgängliga beror på vilket WordPress-tema som används på din site. För denna tutorial använder vi standardtemat Twenty Twenty-One.

För att ändra bakgrundsfärgen på din website, gå vidare och click på “Colors & Dark Mode” settings tabs från menyn till vänster.

Därefter måste du clicka på alternativet “Background Color” och välja en färg för din website.

Du kan använda färgväljarverktyget eller enter en Hex-färgkod för din bakgrund.

När du är klar med ändringarna, glöm inte att klicka på knappen “Publicera”.

Du kan nu besöka din WordPress website för att se den nya bakgrundsfärgen i action.

Ditt theme kanske inte har det här alternativet tillgängligt i Theme Customize. I så fall kan du prova någon av metoderna under.

Hur man ändrar bakgrundsfärg i Full Site Editor (2024-metoden)

Full Site Editor (FSE) är en WordPress-redigeringsplattform för redigering av blockteman. Den här redigeraren gör det superenkelt att ändra webbplatsens bakgrundsfärg. Låt oss gå igenom processen tillsammans.

Börja med att gå till Utseende ” Redaktör i din WordPress-panel.

Nu ser du en “Styles”-knapp i ett av menyalternativen.

Gå vidare och klicka på den.

Klicka nu på knappen för redigering av pennan.

Du kommer då till redigeringsgränssnittet.

Nu kommer du att märka en praktisk panel på höger sida av skärmen. Det här är ditt designkontrollcenter där du kan ändra färger, teckensnitt och mycket mer.

Om du vill ändra bakgrundsfärg klickar du bara på “Färger” i panelen Stilar.

Klicka sedan på “Bakgrund”.

Du kan nu välja mellan en enfärgad färg eller att skapa en gradient. Välj gärna det som passar din stil. När du är nöjd med ditt val trycker du på “Spara” och du är klar!

Så här ändrar du bakgrundsfärg i WordPress med CSS

Undrar du hur du ändrar bakgrundsfärgen med hjälp av CSS?

Ett annat sätt du kan ändra bakgrundsfärgen på din WordPress website är genom att lägga till anpassad CSS i WordPress Theme Customize.

För att börja, heada över till Appearance ” Customize och gå sedan till tabben ‘Ytterligare CSS’.

Följaktligen kan du enter följande kod:

Allt du behöver göra är att ersätta koden för bakgrundsfärg med den färgkod som du vill använda på din website. Gå sedan vidare och enter koden i fliken Ytterligare CSS.

När du är klar, glöm inte att klicka på knappen “Publicera”. Nu kan du besöka din website och viewa den nya bakgrundsfärgen.

För mer details, vänligen se vår guide om hur du enkelt lägger till custom CSS på din WordPress site.

Så här ändrar du bakgrundsfärger slumpmässigt i WordPress

Letar du nu efter ett sätt att slumpmässigt ändra bakgrundsfärgen i WordPress?

Du kan add to en jämn bakgrundsfärgförändringseffekt för att automatiskt övergå mellan olika bakgrundsfärger. Effekten går igenom flera färger tills den når den slutliga färgen.

För att lägga till effekten måste du lägga till kod på din website i WordPress. Vi guidar dig genom processen under.

Det första du behöver göra är att ta reda på CSS-klassen för det område där du gillar att add till den smidiga bakgrundsfärgförändringseffekten.

Du kan göra det genom att använda Inspect tool i din webbläsare. Allt du behöver göra är att föra musen till det area du vill ändra färg på och högerklicka för att välja Inspect tool.

Efter det måste du skriva ner CSS-klassen du vill rikta in dig på. Till exempel, i screenshot ovan, vill vi rikta in oss på området med en CSS-klass ‘page-header’.

Därefter måste du öppna en plain text editor på din dator, gillar en anteckningsblock, och skapa en new fil. Du måste spara filen som “wpb-background-tutorial.js” på ditt skrivbord.

När det är gjort kan du add to följande kod till filen JS som du just skapat:

If you study the code, then you’ll notice that we used the ‘page-header’ CSS class as it’s the area we want to target on our website.

Du ser också att vi använde fyra färger med hjälp av hexfärgkoden. Du kan add to så många färger som du vill för din bakgrund. Allt du behöver göra är att enter färgkoderna i snippet och separera dem med ett kommatecken och enkla citattecken, gillar de andra färgerna.

Nu när din JS-fil är klar måste du uploada den till ditt WordPress temas JS folder med hjälp av en FTP-tjänst (File Transfer Protocol).

För denna tutorial använder vi FileZilla. Det är en gratis FTP-klient för Windows, Mac och Linux, och den är mycket användarvänlig.

Till att börja med måste du logga in på din websites FTP-server. Du hittar credentials för inloggning i emailet från din hosting provider eller i ditt hostingkontos cPanel dashboard.

När du har loggat in ser du en lista över foldrar och filer på din website under kolumnen “Remote site”. Gå vidare och navigera till JS folder i din sites theme.

Om your theme inte har en js folder, så kan du skapa en.

Högerklicka bara på ditt temas folder i FTP-klienten och klicka på alternativet “Create directory”.

Därefter måste du öppna lokationen för din JS-fil under kolumnen “Local site”.

Högerklicka sedan på filen och klicka på alternativet “Upload” för att lägga till filen i your theme.

För mer detaljer kan du följa vår tutorial om hur du använder FTP för att uppladare filer till WordPress.

Följaktligen måste du enter följande kod i ditt temas funtions.php-fil. Den här koden hämtar JavaScript-filen och det beroende jQuery-skriptet som du behöver för att den här koden ska fungera:

Vi rekommenderar att du använder det gratis pluginet WPCode för att på ett säkert sätt add to koden till din site. För mer detaljer, se vår guide om hur du klistrar in snippor från webben i WordPress.

You can now visit your website to see the randomly changing colors in action in the area you targeted.

Så här ändrar du bakgrundsfärg för enskilda inlägg

Du kan också ändra bakgrundsfärgen för varje enskilt blogginlägg i WordPress istället för att använda ett enskilt inlägg på hela din website med hjälp av custom CSS.

It allow you to change the appearance of specific posts and personalize their backgrounds. Du kan till exempel customize stilen för varje post baserat på auktorisering eller visa en annan bakgrundsfärg för din mest kommenterade post.

Du kan även ändra bakgrundsfärgen för posts i en viss kategori. Till exempel kan posts i new ha olika bakgrundsfärg jämfört med tutorials.

Det första du behöver göra är att hitta klassen ID:n för post i ditt temas CSS. Du kan göra det genom att viewa ett blogginlägg och sedan högerklicka för att använda Inspect tool i din webbläsare.

Här är ett exempel på hur det skulle gilla att se ut:

När du har ditt post-ID kan du ändra bakgrundsfärgen för en enskild post med hjälp av följande custom CSS. Byt bara ut post ID:n så att den matchar din egen och koden för bakgrundsfärgen som du vill ha.

För att add to den custom CSS kan du använda WordPress Theme Customize. Se först till att du är inloggad på din WordPress website. Gå sedan till ditt blogginlägg och klicka på alternativet “Customize” högst upp.

Efter det, heada över till Additional CSS tabs från menyn till vänster.

Därefter enter du den customize CSS.

När det är gjort klickar du på knappen “Publicera”.

Du kan nu besöka ditt blogginlägg för att se den nya bakgrundsfärgen.

Om du vill ändra bakgrundsfärgen baserat på författare, comments eller category, kontrollera då vår detaljerade tutorial om hur du stylar varje WordPress post på olika sätt.

Bonus tips: Använd en sidbyggare för mer designkontroll

Att ändra bakgrundsfärger är bara början. Om du vill ta full kontroll över designen av din webbplats kan en sidbyggare öppna upp så många fler möjligheter.

Vi gillar att använda SeedProd, den mest populära sidbyggaren för WordPress, eftersom den låter dig:

• Designa valfri sida utan kodning
• Anpassa färger, layouter och mellanrum
• Skapa professionella sidor på bara några minuter
• Få dina sidor att se bra ut på alla enheter

Det är enkelt att komma igång – installera och aktivera SeedProd med hjälp av vår enkla installationsguide för WordPress-plugin.

Obs: Du kan börja med gratisversionen, men SeedProd Free Version ger dig tillgång till fler mallar och designalternativ om du behöver dem.

När pluginet är aktivt kommer du att bli ombedd att enter din license key. Du kan hitta nyckeln i ditt SeedProd account area. När du har enter nyckeln klickar du på knappen “Verify Key”.

Därefter kan du heada över till SeedProd ” Pages.

Härifrån klickar du på knappen “Add New Landing Page”.

Efter det måste du välja ett theme för din landing page. SeedProd erbjuder massor av beautiful landing page templates för att komma igång.

Du kan också använda en tom template för att börja från scratch. Vi föreslår dock att du använder en template eftersom det är ett enklare och snabbare sätt att skapa en landing page.

När du selectar en template blir du ombedd att enter ett Page Name och välja en URL.

Efter det klickar du bara på knappen “Save and Start Editing the Page”.

På nästa vy ser du SeedProd page builder. Här kan du använda drag and drop-byggaren för att lägga till block från menyn till vänster. You can add a headline, video, image, button, etc.

När du rullar ner finns det fler block under Advanced section. Du kan till exempel lägga till en nedräkningstimer för att skapa brådska, visa sociala profiler för att öka antalet följare, lägga till ett alternativformulär för att samla in leads och mer.

Med hjälp av drag and drop-byggaren är det enkelt att ändra positionen för varje block på din landing page. Du kan även ändra layout, storlek, färg och font för texten.

Om du vill ändra bakgrundsfärgen på din landing page väljer du helt enkelt vilken section som helst på sidan. Du kommer nu att se alternativ i menyn till vänster för att editera bakgrundsstil, bakgrundsfärg och add to en image.

När du har redigerat din landing page, glöm inte att klicka på knappen “Save” högst upp.

Därefter kan du heada över till “Connect” tabs och integrera sidan med olika e-postmarknadsföringstjänster. Du kan till exempel ansluta till Constant Contact, Brevo (tidigare Sendinblue) och andra.

Därefter går du vidare och klickar på fliken “Page Settings”.

Här kan du ändra sidans status från Draft till Publicera för att ta din sida live.

Utöver det kan du också ändra sökmotorsoptimeringen för page, view the analytics, add to custom code under Scripts och enter a custom domain.

När du är klar kan du gå ur SeedProd page builder och besöka din custom landing page.

Video Tutorial

Subscribe to WPBeginner

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du ändrar bakgrundsfärgen i WordPress. Du kanske också vill kolla in vår guide om hur du konverterar Figma till WordPress och vår jämförelse av de bästa programvarorna för webbdesign.

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.