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

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

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

The Divi theme does not offer this option natively but it is very easy to fix it, with only a few lines of CSS.

Here is the program:

  1. Enable nested layout
  2. Set a default background color
  3. Get the ID of each page
  4. Modify the CSS to get a different background color on each page
  5. Here is the video result!
  6. Declination with gradient backgrounds
Couleur de fond différente sur chaque page

Different background color on each page of your Divi site

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

 

1 - Activate the nested layout

To display the background color of your site, the nested layout of Divi must be enabled. To do this, simply go to the Appearance tab > Customize > General Settings > Layout Settings > Enable nested layout

For more information on the nested layout of Divi, read this article.

 

2 - Define a default background color

To define the background color of your Divi site, you must have its HTML color code.

Although it is not mandatory, it will be more accurate to use the exact color of your "brand" rather than define it "visually".

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

If you need to extract a color from a web page, I advise you to use an essential tool: a pipette that will collect for you the color codes of the web pages you visit. There is not a single day that goes by that I don't use it....

Choisir la couleur de fond par défaut

Choose the default background color in the Divi customization options

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

  1. Appearance > Customize
  2. Click on General Settings
  3. Click on Background
  4. Then click on "Select a color" in the "Background color" option
  5. Define your color using the cursor or the HEX code.
  6. Don't forget to click on "Publish" to save your changes.

Now, your entire site will display the background color you just defined (if the nested layout is enabled, I repeat).

Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE"

 

3 - Get the ID of each page

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

Obtenir l'identifiant d'une page

How to find the ID of your web page (ID)

To obtain the identifier of the pages to be modified:

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

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

 

4 - Modify the CSS to obtain a different background color on each page

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

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

/* couleurs personnalisées pour chaque 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;
}

 

Explanations :

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

 

5 - Here is the video result!

What do you think of that? Does that give you any ideas?

 

6 - Declination with gradient backgrounds

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:

/* dégradé de couleurs personnalisées pour chaque page */

.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 CSS gradients, I invite you to read this article.

Couleur dégradée en arrière-plan

Gradient color in the background

Couleur de fond différente sur chaque page de son site Divi
Couleur différente sur chaque page de son site Divi

Pin It on Pinterest

Shares
Share This