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

Bakgrundsfärgen på din webbplats spelar en viktig roll för din design och ditt varumärke. Den gör ditt innehåll mer läsbart och hjälper till att fånga användarens uppmärksamhet så snart någon landar på din webbplats.

På WPBeginner har vi använt WordPress i över 15 år, och vi har sett hur det har utvecklats för att göra det mycket enklare för användare att ändra bakgrundsfärger. Du kan till exempel använda hela webbplatsredigeraren eller temaanpassaren för att ändra temat och välja en annan färg.

I den här artikeln kommer vi att visa dig flera sätt att enkelt ändra bakgrundsfärgen på din WordPress-webbplats.

Varför ändra bakgrundsfärgen i WordPress?

Ett WordPress-tema levereras med en bakgrundsfärg som standard. Om du ändrar bakgrundsfärgen kan du anpassa designen på din website och förbättra läsbarheten.

Till exempel kan du göra en specifik section på en page framträdande genom att använda en annan bakgrundsfärg. Detta hjälper till att markera din call-to-action (CTA) och öka konverteringen.

Du kan använda olika bakgrundsfärger för olika inlägg på din WordPress-blogg baserat på författare, kommentarer eller kategorier. Detta hjälper till att skilja artiklar från annat innehåll på din webbplats.

Det finns också ett sätt att add to videoklipp bakgrunder för att omedelbart genomföra dina besökares uppmärksamhet och öka engagemanget.

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:

Video Tutorial

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

Changed bakgrundsfärg med hjälp av WordPress Theme Customize

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.

Ändra bakgrundsfärg med hjälp av Full Site Editor

Full Site Editor (FSE) är en blockbaserad temaredigerare för WordPress som du kan använda för att redigera bakgrundsfärgen på din webbplats. Den erbjuder olika block för att anpassa webbplatsens design och liknar användningen av WordPress blockredigerare.

Den fullständiga Site Editor är för närvarande available i valda WordPress themes, gillar Twenty Twenty-Two theme. För att utföra en ändring av bakgrundsfärg kan du gå till Appearance ” Editor från din WordPress dashboard.

När du är i hela Site Editor kan du ändra bakgrundsfärgen för varje enskilt block.

Välj först ett block som du gillar att edit. Sedan, från panelen Settings till höger, headar du till section ”Color” och clickar på alternativet ”Background” för att välja en färg.

När du är klar kan du klicka på knappen ”Save”.

Om du å andra sidan gillar att lägga till en bakgrundsfärg som visas bakom alla block, kan du lägga till ett Cover-block.

Först clickar du på + högst upp och add to blocket ”Cover”.

Därefter ser du blocket ”Cover” i temamallen med några bakgrundsfärgalternativ att välja mellan.

Alternativt kan du gå till Overlay section från Settings panel till höger och klicka på alternativet ”Color”.

När du har valt en färg är nästa steg att visa den på hela din page.

För att börja måste du clicka på ikonen List View med 3 streck högst upp. Detta kommer att öppna konturerna av your theme och visa olika sections.

Därefter kan du helt enkelt dra and drop alla temaelement i List View under blocket Cover.

När du gör det kommer färgen på ditt Cover block att visas som bakgrundsfärg på hela website.

Glöm inte att klicka på knappen ”Save” högst upp för att lagra dina ändringar.

Ändra bakgrundsfärg genom att lägga till Custom 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:

body {
 background-color: #FFFFFF;
}

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.

Slumpmässigt ändra bakgrundsfärger 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:

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);
        });
        });

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:

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 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.

Ändra bakgrundsfärg för enskilda poster

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:

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

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.

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

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.

Använd ett videoklipp i bakgrunden

Att använda videoklipp som bakgrund på din website är ett bra sätt att genomföra dina besökares uppmärksamhet och öka användarnas engagement.

Det enklaste sättet att add to ett videoklipp i bakgrunden är att använda ett plugin för WordPress. För denna tutorial använder vi mb.YTPlayer för videoklipp i bakgrunden.

Det är ett gratis plugin som låter dig spela YouTube videoklipp i bakgrunden på din WordPress website. Det finns också en premium version available som låter dig remove mb.YTPlayer vattenstämpeln och det erbjuder fler customomize funktioner, också.

Först måste du installera och aktivera pluginet på din website. För mer detaljer kan du följa vår tutorial om hur du installerar ett WordPress plugin.

Efter aktivering kan du heada över till mb.ideas ” YTPlayer från din WordPress admin area.

På nästa vy måste du enter URL:en till din YouTube-video och aktivera bakgrundsvideon.

Dessutom låter pluginet dig välja den location där du vill visa ditt videoklipp med bakgrund. You can choose a static homepage, blog index homepage, or both. Det finns också ett alternativ att visa videoklippet på hela din site om du väljer ”All”.

När du har enter videons URL och aktiverat bakgrunden kan du gå till din website och se videoklippet i action.

Skapa en Custom Landing Page

Genom att skapa customize landing pages i WordPress allow you to generate leads and boost sales for your business. Du har fullständig control över bakgrundsfärgen och designen av pages.

Det enklaste sättet att skapa en mycket engagerande custom landing page är genom att använda SeedProd. Det är det bästa landning page-pluginet för WordPress och erbjuder en användarvänlig drag and drop page builder för att skapa sidor utan att editera kod.

Det första du behöver göra är att installera och aktivera SeedProd på din website. Du kan läsa vår guide om hur du installerar ett plugin för WordPress.

Note: Vi kommer att använda SeedProd Pro-versionen eftersom den erbjuder mer kraftfulla funktioner, templates och alternativ för customomize. Det finns dock också en gratis version tillgänglig på WordPress.org.

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.

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.