Are you looking for an easy way to change the background color of your WordPress website?
The background color of your website plays an important role in your design and branding, and in making your content more readable.
In this video, we will show you how to easily change the background color of your WordPress site.
0:00 Intro
0:08 Using the Theme controls
4:23 Using the Block Editor
7:03 Using Plugins
Related Links
►Don’t forget to subscribe to the channel and always stay ahead! https://www.youtube.com/user/wpbeginner?sub_confirmation=1
►SeedProd https://www.seedprod.com/
Top Resources
⚡Use Promo Code WPBVIP⚡
►Best WordPress Contact Form Plugin https://wpforms.com/wpbeginner
►Best WordPress Analytics Plugin https://www.monsterinsights.com/
►Best Lead Generation Plugin https://optinmonster.com/
►Best WordPress SEO Plugin
https://aioseo.com/
►Best Theme Builder for WordPress https://www.seedprod.com/
Related Videos
►WordPress Tutorial – How to Make a WordPress Website for Beginners https://www.youtube.com/watch?v=DvbFBxKcORA
►WordPress Gutenberg Tutorial: How to Easily Work With the Block Editor https://www.youtube.com/watch?v=JjfrzGeB5_g
►What is SEO and How Does it Work? https://www.youtube.com/watch?v=JjfrzGeB5_g
►How to Install a WordPress Theme https://www.youtube.com/watch?v=ZIPQRQLAz90
If you liked this video, then please Like and consider subscribing to our channel for more WordPress videos.
https://www.youtube.com/subscription_center?add_user=wpbeginner
Follow us on Twitter:
https://twitter.com/wpbeginner
Check out our website for more WordPress Tutorials
https://www.wpbeginner.com/
#WPBeginner #WordPress #WordPressTutorial
In today's video I'm going to show you How to change the background color Inside WordPress in a variety of ways It's going to be a fun one let's begin So the first method to change background Colors inside WordPress is to check your Theme controls mostly you're using or You'll be using not a block based theme Because those are not not really popular Right now so in most cases you'll be Using the customizer to make changes on Your website right here so I'm using the Astra theme which is not a Blog based Theme so it offers the customization Options right here you can go to the Customize and find the color options so If I go to the global I go to colors I Find a lot of color options and I also Can see the site background color option Available and this Astro theme gives me A lot of options to change my background Color so I can click here and instantly I have few options I have color gradient And image so I can choose any of these Options if I go to color I'll have the Color controls or Color Picker right Here using which I can just instantly Click or select a background color let's Find the shade of blue that I like and I'll just add that as a background color Beautiful right I can also change the Transparency if I like so that's also Some additional controls here if I go to The gradient I have the choice of
Creating a gradient or is already Created for me I can add more colors to The gradient if I like so I click here I'll add another color here maybe let's Add a shade of green here And instantly you see that gradient is Now alive on the background of my image Or background of my site and also just Moved around change the angle switch Between linear and a radial gradient as Well and if I go to the image options I Have the option of uploading a Background image which will be used as My background so I have plenty of Controls inside the Astra theme to Customize map background color you can Do the same thing in your theme but your Theme might offer different controls Maybe it's just a linear background or Maybe just a regular color you can have All these controls but what if if your Theme does not offer these controls or You have let's say a custom theme design Or you just don't have any controls so Then you can use something called CSS it Sounds scary but it's very simple so we Can go back and once you're inside the Customizer you'll see the additional CSS Option here on every single website Which using or which supports the Customizer so going here you have the Option of writing some piece of code now It can be scary or but it's not what is The basis of writing the code well we
Have to first find what is the Background that we are targeting and the Way to do that is by using the inspector In your browser so since I'm using the Chrome browser I'll right click anywhere On the screen and I'll choose inspect And once I have the inspector open I'll Click this button here which lets me Select the area that I want to Target With my piece of code so let's say I Click here and I just select the entire Site here And instantly see this div is selected So div ID is content and this is the Most important part what's the class Class is site content now class is Something that's you reused multiple Times throughout your website to Represent what will be the properties of A particular piece of content in this Case site content is the actual class That we need to Target to change the Background color so I'll just type the Simple code it's very simple remember Site content we'll just type a DOT first Because that's how you add the or Reference classes in CSS site Content and just open the curly brackets And aside we just Define a property so The property will be background Color And I'll just choose the color powder Blue very simple so I'll just type in Pow and it's suggesting black color
Already and instantly you see the powder Blue color has been uh applied to this Background now CSS can be a big rabbit Hole it can be easy or complex if you Understand if we want to explore it it Can actually be actually a lot of fun to Customize your website with CSS using CSS just to give you an idea you can Create gradients you can create all Sorts of fun stuff you can Target Specific posts for example this a Setting that I just added or this site Content code will apply to the entirety Of your site but if you just want to Target a specific post you have that Ability as well so CSS is a wonderful Wonderful thing to learn it's not very Complex but if you really want to have Complete control or there's an edge case That your team cannot provide to you Then you'll have to figure out some sort Of CSS and just giving it um or I'm just Giving you an introduction here on what Is possible so this is these are the two Or I say obvious methods to change the Background color but what if you want to Change the background color of the Content itself something that appears Here inside the content let's go and Talk about that I'll clear this and go Back to the site So I'm editing a post right now on my Website and let's say for example I have Written this piece of text here and I
Want to change the background color of This text how do you go about doing that Well if you're using the recent version Of WordPress which is 6.1 or something Then you already have the controls right Inside your WordPress editor where you Can make those changes all you have to Do is select the above block first so This is a paragraph block I'll just Select it and automatically you'll see Inside the block settings just make sure The block settings are enabled you see Block settings text and background color And also the link so if I want to change The background color here I can go into Settings here and let's say the theme Color says dark Loop I'll select dark Blue and of course the text doesn't have Much contrast so I'll change the text Color to white and beautiful instantly By not doing anything special inside Using or controls provided inside WordPress I'm able to change the Background color automatically let's say I want to have more pieces of content Just like this I'll just duplicate this Block Ctrl shift d Ctrl shift d Ctrl Shift d Ctrl shift d or command shift d On a Mac IFC or you can duplicate this Block and add the background dollars for All these blocks as well when you see There's a simple problem here right There's a big gap between each of these Blocks now this is not something that's
A problem because this is how WordPress Works if you have multiple blocks there Will be typically a gap between them so How do you ensure that the background Color goes all the way and covers Everything well you have to convert all Of your blocks or set of blocks into a Group block how do you do that just Click here and hold your mouse and drag Across all the blocks you want to select First so I'll just go here and drag Across all of these blocks you see all Of them are selected I'll go to the Three dollar menu and just click group And this will create a group block and All these blocks inside the group block Are the regular blocks it's just a Collection of consolidation of blocks And the group block has settings of its Own so for example you see I'm inside The group block you see the group here And this has the layout options you can Change the content weight pixel margins And all that good stuff but you can also Change the Styles so if I go to Styles Option I can change the typography I can Change the background color and text Once again so let's say if I mention is The background color of the entire block And just go here select dark blue and Boom it's done and of course if you just Type the content regularly didn't change The background color for the text inside The paragraph that's going to work as
Well right now if I go here and change The background color of the text from This to let's say something transparent Or I'll just delete it or reset it I Don't know how to reset it but if it was The regular color no color at least Specifically to this block the Background color of the entire group Block will still affect those blocks so You don't have to start by first adding Background colors to individual Paragraphs and then apply it to the Group block you can just group them all Together and apply all the changes of The background color the text color Directly to the group block and apply All the well So that's how you change the background Color inside WordPress without using any External plugins or messing with any Other functionality right inside the Blocket you have entire or entire set of Controls you need to change the Background Colors Let's talk about the Last scenario where you need to change Background colors inside WordPress So the last scenario that you can run Into where you need to change the Background color of any of your posts is If you're using a page builder for Example I'm using page builder seed plot Right now and this is a beautiful Landing page I've just imported using The free version of seed product you can
Check out sheet plot from the links in The description and if I want to change The let's say the background color of This section this is how you do it first Of all uh of all we have to figure out Where the section is and sometimes if You are new to page Builders it can be a Little difficult so if you click any of These sections you might not be able to Figure out instantly where the section Is but there's an easier way just go Here on the menu here and from this Section just type in or click on this Layout navigation and this will open up The Navigator as you see I selected this Heading and use this setting is here and This gives you a visual cue of how the Page is structured and since I want to Change the background color of the Entire section I'll just look for the Section here and click on it and Instantly this section is selected you Can see or the purple color here and This will also represent the purple Color on the screen which means that the Section is actually highlighted and Instantly you'll see the purple color Also here so color psychology being used Here just to make it a connection easier And also the settings for the section Are now open here you have the content Settings which is where the background Color or background options are you also Have the advanced options where you have
Tons of options so you can have Animations border shape dividers all That good stuff but in this video we're Going to stick with background color the Background color options are here so you Have the same options that I showed you In the beginning of the video the solid Color option the gradient color option And also the background image upload I'm Going to demonstrate the solid color and The gradient so if I have the solid Color selected I can choose the Background color here I'll click and the Color pickle will appear seat plot does Support Global color so if you have a Global color palette already just feed That into seed plot and you'll be able To use those colors throughout your Website instantly without having to Rework but if you want to Define custom Colors that's possible too so let's say I select this U here let's go for this Nice blue shade I'm not a great designer So don't mind my color skills but let's Say this is the shade of color I want to Add I'll just do this and I'll close Another background color has been Applied instantly and I can save the Post and it will be live if I go to the Gradient I can use the same options I Have the radial option and the leaner Option I have the angle option right Here for example I set 189 first and Then I'll choose the colors so I'll go
Here and I'll choose a shade of green Once again let's say I choose This I'll just add this color here and For the second color I just close this Second color I'll use a shade of Turquoise And I'll just go here And add that or just to create some Contrast I'll just go a little darker Select a shade of blue And now you see the gradient appear on The screen and I can just change the uh The angle here and instantly you see the Gradient will change effect or change Shape and you can customize it however You like you also have the location Option so if you want to just make sure The transition happens at a particular Position instead from 0 to 100 then you Have the first color location and the Cell Second Color location as well so You have complete control on how to Create the gradients here and you can Also upload a use a stock image or just Upload a background image and that will Be used as a background so this is how You change background colors when you're Using seed plot but this also applies to Other page Builders as well most page Builders on the market support this Functionality the interface might be a Little different so if you're using any Mentor or any other page builder you'll Have similar controls or where you can
Go inside any of the sections or even I Say individual elements and just change The background color all right that's it For this video This is how to change Background colors in WordPress if you Want to continue your WordPress Education I would recommend a couple of Videos on the screen for you so you can Watch and educate yourself further if You like this video like it if you have Questions comment on it if you enjoyed This tutorial subscribe to our Channel You're watching yuvraj from WP camera I'll catch you in the next video take Care Thank you
