How to get a different background color on each page of your Divi website?

Even if Divi proposes choose a background color for your entire site, you will see that it is very simple to modify this for get a different color on each page of your site.

The background color is visible only if you have chosen a design with the embossed layout of Divi.

Do you want to give a different atmosphere for each page of your site? A dedicated color that differs every time the user navigates within your pages?

The theme Divi does not propose this option natively But it's very easy to fix it, with only a few CSS lines.

Here is the program:

1. Enable embossed layout
2. Set a default background color
3. Getting identifier from each page
4. Edit CSS to get a different background color on each page
5. Here's the video result!
6. Declination with gradient background

Announcement: This article contains affiliate links that you will easily recognize. The classical links are in purple and sponsored links are in pink.

1 – Enable embossed layout

To make the background color of your site appear, the embedded layout of Divi must be enabled. For this, just go to the tab Appearance > Customize > General Settings > Layout Settings > Enable embossed layout

Learn more about the embedded layout of Divi, read this article.

2 - Set a default background color

To define background color of your Divi site, you must be in possession of its HTML color code.

Even if this is not mandatory, it will be more accurate to use the exact color of your "mark" rather than to define it "at sight".

If you need ideas, there are many sites that offer suggestions or color converters:

• Adobe Color
• HTML color code
• HTMLColorCode
• Allcolors.com

If you need to extract a color from a web page, I advise you to use an indispensable tool: a pipette that will collect for you the color codes of the web pages you visit. There isn't a single day without me using it...

• For Firefox: There is ColorZilla but you don't need to install plugin because this feature is native in Firefox.
• For Chrome: you can install Colour pipette or ColorZilla

Once you know your color code, you can go to:

1. Appearance > Customize
2. Click General parameters
3. Click Background
4. Then on Select Color in the option "Background color"
5. Set your color using the cursor or HEX code.
6. Remember to click on « Publish » to save your changes.

Now, the whole of your site make the background color you just set appear (if the embossed layout is enabled, I repeat).

Do you know you can test Divi for free? See you on this page and click on "TRY IT FOR FREE"

3 – Getting identifier from each page

Before you start anything and use the CSS code that I propose after you, you must list the pages of your site that will be subject to a background color change. This will allow you to obtain values that are specific to your site: Identifying your pages. This could be the contact page, the service page, the page about etc.

To obtain the identification of pages to be modified:

1. See the administration of the page in question. You can do this very well from the front office by clicking on Edit Page (not on enable visual builder).
2. Once in your page in "Edit" mode, just look at the your browser's URL bar. You will see a type URL monsite.com/wp-admin/past.php?post=9&action=edit. The number after [post=] is your page identifier.

It is therefore sufficient to identify these identifiers for all pages to be modified.

4 - Edit CSS to get a different background color on each page

Now that you have in your possession HTML color codes as well as your page identifiers, you will be able to adapt the following code.

To do this, just copy and paste the code below into the tab Appearance > Customize > Additional CSS changing values in red by your own values.

/* custom colors for each page */ .page-id-9.custom-background { background-color: #1bb5ea important; Page-id-28.custom-background { background-color: #AC58FA important; Page-id-25.custom-background { background-color: #e2a9f3 important; }

Explanation:

• .page-id-9: This is where you will need to change your page ID. Change the 9 by the numbers that are specific to your pages.
• .custom-background: Don't change anything here. It's a CSS class of Divi. There must be no space between .page-id-9 and .custom-background
• background-color: #xxxxxx!important; : Here you can insert your HTML color code. The Important is not mandatory

5 - Here's the video result!

What do you say? Does that give you any ideas?

6 - Declination with gradient background

The idea of getting a different color on each page is nice but you can also adapt this technique to get a gradient background color. Good idea?

In this case, you can use the following code:

*/ .page-id-9.custom-background { background-image: linear-gradient(to bottom right, #AC58FA, #1bb5ea); Page-id-28.custom-background { background-image: linear-gradient(to bottom right, #1bb5ea, #AC58FA); Page-id-25.custom-background { background-image: linear-gradient(to bottom right, #1bb5ea, #e2a9f3); Page-id-7.custom-background { background-image: linear-gradient(to bottom right, #e2a9f3, #1bb5ea);
}

To learn more about gradients in CSSI invite you to read this Article.