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 olika enkla sätt att uppdatera din bakgrundsfärg i WordPress, med början i det mest nybörjarvänliga alternativet och sedan 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-designelemnt ä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 framhäva dina viktiga knappar och öka dina konverteringar. 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 specialmeddelanden.

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

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 Theme Customizer, där du hittar flera alternativ för att ändra ditt tema. Detta inkluderar menyer, färger, startsida, widgets, bakgrundsbild och mer.

De specifika alternativen som finns tillgängliga 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 Redigeraren för hela webbplatsen (Blockteman)

Full Site Editor (FSE) är en WordPress-redigeringsplattform 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

Vill du lägga till en smidig effekt för bakgrundsfärgbyte på din webbplats? Den här effekten övergår automatiskt mellan olika färger, vilket kan vara bra för att markera en specifik sektion eller fånga uppmärksamhet.

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 Inspect-verktyget i din webbläsare. Allt du behöver göra är att föra musen till det område du vill ändra färgen på och högerklicka för att välja Inspect-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 FTP-klient (File Transfer Protocol), 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 behöver 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 du 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 använda 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 du 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

Vill du ge ett specifikt blogginlägg ett unikt utseende? Du kan ändra bakgrundsfärgen på enskilda inlägg med anpassad CSS. Detta gör att du kan markera speciella meddelanden, kategorisera innehåll efter färg eller helt enkelt vara kreativ med din design.

Först måste du hitta den specifika Post ID-klassen i ditt temas CSS. Visa helt enkelt blogginlägget du vill anpassa, högerklicka var som helst på sidan och välj verktyget 'Inspektera'.

Leta efter taggen <article> eller taggen <body> i källkoden. Du kommer att se en klass som ser ut som post-104 eller postid-104.

När du har ditt inläggs-ID kan du använda följande anpassade CSS-utdrag. Se till att ersätta inläggs-ID:t och färgkoden med dina egna uppgifter:

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

För att lägga till denna kod, gå till Utseende » Anpassa och klistra in den i fliken 'Ytterligare CSS'.

När du klickar på 'Publicera' kommer bakgrundsfärgen att ändras endast för det specifika blogginlägget.

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 du 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å reda på 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 skrollar 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 antalet följare, lägga till ett formulär för att samla in leads och mer.

Med hjälp av 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 för 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 om att ä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 du konverterar Figma till WordPress och vår jämförelse av den bästa programvaran för webbdesign.

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