Hur man ändrar bakgrundsfärg i WordPress (nybörjarguide)

Din webbplats bakgrundsfärg sätter hela stämningen för dina besökare.

Kanske vill du ha något rent och professionellt, varmt och välkomnande, eller djärvt och kreativt – oavsett vilken känsla du strävar efter kan rätt bakgrundsfärg göra hela skillnaden.

Den goda nyheten är att ändra det inte kräver några tekniska färdigheter eller dyra verktyg. WordPress har inbyggda funktioner som låter dig anpassa färger med bara några få klick.

Efter att ha hjälpt många webbplatsägare att personifiera sina webbplatser, har vi funnit att de flesta blir förvånade över hur enkel och omedelbar processen kan vara.

Vi guidar dig genom tre enkla sätt att uppdatera din bakgrundsfärg i WordPress, med början med det mest nybörjarvänliga alternativet och sedan gå vidare till lite mer avancerade tekniker.

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

Tänk på din webbplats bakgrundsfärg som väggarna i ditt digitala hem. Medan ditt WordPress-tema kommer 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ökare.

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

• De gör ditt innehåll lättare att läsa
• De hjälper viktig information att sticka ut
• De sätter stämningen för din webbplats
• De kan få din webbplats att se mer professionell ut

Rätt bakgrundsfärg kan hjälpa till att lyfta fram dina viktiga knappar och öka dina konverteringar. Du kan också använda olika färger för att organisera ditt innehåll bättre, som att använda specifika färger för olika bloggkategorier eller speciella 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 titta på hur man ändrar bakgrundsfärgen i WordPress. Vi kommer att visa dig olika sätt att anpassa bakgrundsfärgen så att du kan hoppa till den sektion du föredrar:

• Hur man ändrar bakgrundsfärg i WordPress Temaanpassaren
• Hur man ändrar bakgrundsfärg i Full Site Editor (2024 års metod)
• Hur man ändrar bakgrundsfärg i WordPress med CSS
• Hur man slumpmässigt ändrar bakgrundsfärger i WordPress
• Hur man ändrar bakgrundsfärg för enskilda inlägg
• Bonus Tip: Use a Page Builder for More Design Control
• Vanliga frågor: Ändra bakgrundsfärger i WordPress

Hur man ändrar bakgrundsfärg i WordPress Temaanpassaren

Beroende på ditt tema kan du kanske ändra bakgrundsfärgen med hjälp av WordPress Theme Customizer. Det låter dig redigera utseendet på din webbplats i realtid och utan att behöva redigera kod.

För att komma åt WordPress Temamodifieraren kan du logga in på din webbplats och sedan gå till Utseende » Anpassa.

Detta öppnar Temamodifieraren, där du hittar flera alternativ för att ändra ditt tema. Detta inkluderar menyer, färger, startsida, widgets, bakgrundsbild och mer.

De specifika tillgängliga alternativen beror på vilket WordPress-tema din webbplats använder. För den här handledningen använder vi standardtemat Twenty Twenty-One.

För att ändra bakgrundsfärgen på din webbplats, klicka på fliken 'Färger & Mörkt läge' i menyn till vänster.

Klicka sedan på alternativet 'Bakgrundsfärg' och välj en färg för din webbplats.

Du kan använda färgvalsverktyget eller ange en Hex-färgkod för din bakgrund.

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

Du kan nu besöka din WordPress-webbplats för att se den nya bakgrundsfärgen i aktion.

Ditt tema kanske inte har detta alternativ tillgängligt i Temaanpassaren. I så fall kan du prova en av metoderna nedan.

Hur man ändrar bakgrundsfärg i Full Site Editor (2024 års metod)

Den redigeraren för hela webbplatsen (FSE) är en redigeringsplattform i WordPress för att redigera blockteman. Den här redigeraren gör det superenkelt att ändra din webbplats bakgrundsfärg. Låt oss gå igenom processen tillsammans.

Börja med att gå till Utseende » Redigerare i din WordPress-instrumentpanel.

Nu ser du en 'Stilar'-knapp i ett av menyalternativen.

Gå vidare och klicka på den.

Klicka nu på pennikonen för att redigera.

Detta tar dig till redigeringsgränssnittet.

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

För att ändra din bakgrundsfärg klickar du bara på 'Färger' i Stilpanelen.

Klicka sedan på 'Bakgrund'.

Du kan nu välja mellan en enfärgad färg eller skapa en gradient. Välj fritt vad som passar din stil. När du är nöjd med ditt val, tryck på 'Spara' och du är klar!

Hur man ändrar bakgrundsfärg i WordPress med CSS

Undrar du hur du ändrar bakgrundsfärgen med CSS?

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

För att börja, gå till Utseende » Anpassa och gå sedan till fliken 'Ytterligare CSS'.

Därefter kan du ange följande kod:

body {
 background-color: #FFFFFF;
}

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

När du är klar, glöm inte att klicka på knappen 'Publicera'. Du kan nu besöka din webbplats för att se den nya bakgrundsfärgen.

För mer information, se vår guide om hur du enkelt lägger till anpassad CSS på din WordPress-webbplats.

Hur man slumpmässigt ändrar bakgrundsfärger i WordPress

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

Du kan lägga till en mjuk effekt för ändring av bakgrundsfärg för att automatiskt övergå mellan olika bakgrundsfärger. Effekten går igenom flera färger tills den når slutlig färg.

För att lägga till effekten behöver du lägga till kod på din WordPress-webbplats. Vi guidar dig genom processen nedan.

Det första du behöver göra är att ta reda på CSS-klassen för det område där du vill lägga till effekten av en jämn bakgrundsfärgförändring.

Du kan göra detta genom att använda Inspektera-verktyget i din webbläsare. Allt du behöver göra är att föra musen över området där du vill ändra färgen och högerklicka för att välja Inspektera-verktyget.

Därefter behöver du skriva ner CSS-klassen du vill rikta in dig på. Till exempel, i skärmdumpen ovan vill vi rikta in oss på området med CSS-klassen 'page-header'.

Därefter måste du öppna en vanlig textredigerare på din dator, som Anteckningar, och skapa en ny fil. Du måste spara filen som 'wpb-background-tutorial.js' på ditt skrivbord.

När det är klart kan du lägga till följande kod i JS-filen du just skapade:

jQuery(function($){
        $('.page-header').each(function(){
            var $this = $(this),
            colors = ['#ec008c', '#00bcc3', '#5fb26a', '#fc7331'];

            setInterval(function(){
                var color = colors.shift();
                colors.push(color);
                $this.animate({backgroundColor: color}, 2000);
            },4000);
        });
        });

Om du studerar koden kommer du att märka att vi använde CSS-klassen 'page-header' eftersom det är det område vi vill rikta in oss på på vår webbplats.

Du kommer också att se att vi använde fyra färger med hjälp av hex-färgkoden. Du kan lägga till så många färger du vill för din bakgrund. Allt du behöver göra är att ange färgkoderna i utdraget och separera dem med ett kommatecken och enkla citattecken, liksom de andra färgerna.

Nu när din JS-fil är klar behöver du ladda upp den till din WordPress-temas JS-mapp. Det enklaste sättet att göra detta är med en filöverföringsprotokoll (FTP) klient, som låter dig hantera filer direkt på din webbserver.

För den här handledningen använder vi FileZilla. Det är en gratis och enkel FTP-klient för Windows, Mac och Linux. Faktum är att det är ett vanligt verktyg som vi själva har testat för att hantera webbplatsfiler.

För att börja måste du logga in på din webbplats FTP-server. Du hittar inloggningsuppgifterna i e-postmeddelandet från din värdleverantör eller i din värdkontos cPanel-instrumentpanel.

När du har loggat in ser du en lista över mappar och filer på din webbplats under kolumnen 'Fjärrplats'. Navigera till JS-mappen i din webbplats tema.

Om ditt tema inte har en js-mapp kan du skapa en.

Högerklicka helt enkelt på din temas mapp i FTP-klienten och klicka på alternativet 'Skapa katalog'.

Därefter behöver du öppna platsen för din JS-fil under kolumnen 'Lokal webbplats'.

Högerklicka sedan på filen och klicka på alternativet 'Ladda upp' för att lägga till filen i ditt tema.

För mer information kan du följa vår handledning om hur man använder FTP för att ladda upp filer till WordPress.

Därefter behöver du ange följande kod i din temas funtions.php-fil. Denna kod laddar korrekt JavaScript-filen och det beroende jQuery-skriptet som du behöver för att denna kod ska fungera:

function wpb_bg_color_scripts() {
wp_enqueue_script( 'wpb-background-tutorial',  get_stylesheet_directory_uri() . '/js/wpb-background-tutorial.js', array( 'jquery-color' ), '1.0.0', true );
 }
add_action( 'wp_enqueue_scripts', 'wpb_bg_color_scripts' );

Vi rekommenderar att du använder det kostnadsfria WPCode-pluginet för att säkert lägga till koden på din webbplats. För mer information, se vår guide om hur man klistrar in kodavsnitt från webben i WordPress.

Du kan nu besöka din webbplats för att se de slumpmässigt ändrade färgerna i aktion i det område du riktade in dig på.

Hur man ändrar 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 en enda färg på hela din webbplats med anpassad CSS.

Det låter dig ändra utseendet på specifika inlägg och anpassa deras bakgrunder. Du kan till exempel anpassa stilen för varje inlägg baserat på författare eller visa en annan bakgrundsfärg för ditt mest kommenterade inlägg.

Du kan till och med ändra bakgrundsfärgen för inlägg i en viss kategori. Till exempel kan nyhetsinlägg ha olika bakgrundsfärger jämfört med handledningar.

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

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

<article id="post-104" class="post-104 post type-post status-publish format-standard hentry category-uncategorized">

När du har ditt inläggs-ID kan du ändra bakgrundsfärgen på ett enskilt inlägg genom att använda följande anpassade CSS. Byt bara ut inläggs-ID:t för att matcha ditt eget och bakgrundsfärgkoden som du vill ha.

.post-104 {
background-color: #D7DEB5;
color:#FFFFFF;
}

För att lägga till anpassad CSS kan du använda WordPress temaanpassare. Se först till att du är inloggad på din WordPress-webbplats. Besök sedan ditt blogginlägg och klicka på alternativet 'Anpassa' högst upp.

Därefter går du till fliken Ytterligare CSS från menyn till vänster.

Ange sedan den anpassade CSS:en.

När det är klart, klicka 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, kommentarer eller kategori, ta en titt på vår detaljerade handledning om hur man stylar varje WordPress-inlägg olika.

Bonustips: Använd en sidbyggare för mer designkontroll

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

På WPBeginner rekommenderar vi SeedProd eftersom det är den mest populära och användarvänliga sidbyggaren för WordPress. Våra partner varumärken har också använt den för att designa sina webbplatser, inklusive WPForms, Duplicator och Charitable.

Det ger dig fullständig designkontroll och låter dig:

• Designa vilken sida som helst utan kodning
• Anpassa färger, layouter och avstånd
• Skapa professionellt utseende sidor på några minuter
• Få dina sidor att se bra ut på alla enheter

Vi har grundligt testat verktyget i vår demo-miljö och funnit det vara mycket intuitivt och lätt att använda. För att få veta mer om vår erfarenhet kan du se vår SeedProd-recension.

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

Notera: Du kan börja med den kostnadsfria versionen, men SeedProd Pro 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 ange din licensnyckel. Du hittar nyckeln i ditt SeedProd-kontoområde. Efter att ha angett nyckeln klickar du på knappen "Verifiera nyckel".

Därefter kan du gå till SeedProd » Sidor.

Härifrån klickar du på knappen 'Lägg till ny landningssida'.

Därefter behöver du välja ett tema för din landningssida. SeedProd erbjuder många vackra mallar för landningssidor att komma igång med.

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

När du väljer en mall kommer du att bli ombedd att ange ett sidnamn och välja en URL.

Därefter klickar du helt enkelt på knappen 'Spara och börja redigera sidan'.

På nästa skärm ser du SeedProd-sidbyggaren. Här kan du använda dra-och-släpp-byggaren för att lägga till block från menyn till vänster. Du kan lägga till en rubrik, video, bild, knapp, etc.

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

Med dra-och-släpp-byggaren är det enkelt att ändra positionen för varje block på din landningssida. Du kan till och med ändra layout, storlek, färg och teckensnitt på texten.

För att ändra bakgrundsfärgen på din landningssida, välj helt enkelt en sektion av sidan. Du kommer nu att se alternativ i menyn till vänster för att redigera bakgrundsstilen, färgen och lägga till en bild.

När du är klar med att redigera din landningssida, glöm inte att klicka på knappen 'Spara' högst upp.

Därefter kan du gå till fliken 'Anslut' och integrera sidan med olika e-postmarknadsföringstjänster. Du kan till exempel ansluta till Constant Contact, Brevo (tidigare Sendinblue) och andra.

Klicka sedan på fliken 'Sidinställningar'.

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

Utöver det kan du också ändra sidans SEO-inställningar, visa analyserna, lägga till anpassad kod under Skript och ange en anpassad domän.

När du är klar kan du avsluta SeedProd-sidbyggaren och besöka din anpassade landningssida.

Videohandledning

Vanliga frågor: Ändra bakgrundsfärger i WordPress

Här är några frågor som ofta ställs av våra läsare om att ändra bakgrundsfärger i WordPress:

Kan jag använda en bild som bakgrund istället för en färg?

Ja, det kan du absolut. De flesta WordPress-teman som låter dig ändra bakgrundsfärgen har också ett alternativ för att ladda upp en bakgrundsbild.

Du hittar vanligtvis den här inställningen i Temanpassaren (Utseende » Anpassa) under en flik som "Bakgrundsbild". Därifrån kan du ladda upp en fil från din dator.

Kommer ändring av min bakgrundsfärg att påverka min webbplatshastighet?

En solid bakgrundsfärg har praktiskt taget ingen inverkan på din webbplats hastighet, vilket gör det till en säker och enkel prestandavinst.

Att använda en stor, ooptimerad bakgrundsbild kan dock avsevärt sakta ner laddningstiderna för din sida. Om du använder en bild rekommenderar vi alltid att komprimera den först.

För fler tips, se vår guide om hur du optimerar bilder för webben utan att förlora kvalitet.

Hur hittar jag rätt hexkod för min varumärkesfärg?

En hexkod är en sexsiffrig kod som representerar en specifik färg (t.ex. #FFFFFF för rent vitt). Bästa stället att hitta ditt varumärkes hexkod är i ditt företags officiella stilguide.

Om du inte har en kan du använda ett gratis onlineverktyg som HTML Color Codes. Deras färgväljare låter dig hitta den exakta hexkoden för vilken nyans du vill ha.

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 man konverterar Figma till WordPress och vår jämförelse av den bästa webbdesignprogramvaran.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.