How do you get a different background color on each page of your Divi site?

Published on 24/02/2019 | 11 comments

Even though Divi offers to choose one background color for your entire site, you'll see that it's very easy to change this to a different color on each page of your site.

The background color is only visible if you have chosen a design with Divi's nesting layout.

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

The Divi theme doesn't offer this option natively but it's very easy to fix, with only a few lines of CSS.

Here is the program:

  1. Enable nested layout
  2. Set a default background color
  3. Get the identifier of each page
  4. Modify the CSS to obtain a different background color for 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

Announcement: 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 page layout

To make the background color appear on your site, Divi's nested layout must be enabled. To do this, simply go to the Appearance > Customize > General Settings > Layout Settings > Enable NestingLayout

To find out more about Divi's nested layout, read this article.

 

2 - Set a default background color

To set 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 defining it "at a glance".

If you need ideas, 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 indispensable tool: a dropper that will collect for you the color codes of the web pages you visit. Not a single day goes by without me using it...

Choisir la couleur de fond par défaut

Choose the default background color in Divi's 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 colour" in the "Background colour"option
  5. Define your color using the slider or the HEX code.
  6. Don't forget to click "Publish " to save your changes.

Now your entire site will show the background color you just set (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 identifier of each page

Before starting anything and using the CSS code that I will propose after, you must list the pages of your site that will be subject to a change of background color. This will allow you to get 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

To obtain the identifier of the pages to be modified :

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

You just have to find these identifiers for all the pages to be modified.

 

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

Now that you have the HTML color codes and the identifiers of your pages, you can adapt the following code.

To do this, simply copy and paste the code below into the Appearance > Customize > Additional CSS tab, 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;
}

 

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 : do not change anything here. This is a Divi CSS class. There should be no spaces 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 is the video result!

What do you think? Does it give you 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 gradients in CSS, I invite you to read this article.

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

Graduated 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
Couleur de fond différente sur chaque page de Divi

1,024 words

4

You should like it too:

Comment changer une image au survol de la souris ?

How to change an image on mouseover?

If you are not using the hover options available in Divi, you are missing out! Here's an example of how to use them that you might find useful. In this tutorial and video, I show you how to change an image on mouseover.

Page d’erreur 404 personnalisée : avec et sans le Divi Thème Builder

Custom 404 error page: with and without the Divi Theme Builder

Have you thought about customising your site's 404 error page? No ? Well, you should: not only is it easy to do, but it could also lower your bounce rate! The idea is to keep the user who passes through your site on your site. Discover the step by step tutorial + video.

11 Commentaires

  1. Mathilde

    Bonjour,
    Je n’arrive pas à utiliser une couleur de fond différente comme c’est indiqué.
    Déjà, lorsque j’active la mise en page emboitée, cela créé une sorte de bordure sur toutes les pages de mon site web. Ensuite, malgré l’activation, la couleur de fond des articles de mon blog ne varie pas.
    Merci
    Mathilde

  2. Lycia Diaz

    Bonjour Mathilde, si vous suivez le tuto vous devriez y parvenir. Il faut le faire manuellement sur chaque page/article comme indiqué dans ce tutoriel.

  3. ewa

    Bonjour Mathilde,

    Thanks very much for these code. I love it:)!

    Could You help me to change the background with your code but with animation gradient for all my sites not only for each module? What I have to do?

    * couleurs changeantes */

    .fun-color {
    -webkit-animation: random 20s infinite;
    animation: random 20s infinite;
    }

    @keyframes random {
    15% { background-color:#EBEAE9; }
    30% { background-color: #e0d3d0; }
    45% { background-color: #fbf9f8; }
    60% { background-color: #eae2df; }
    75% { background-color: #f4eeec; }
    }

  4. Lycia Diaz

    Hi Ewa ! What do you want exactly ? « Background changing color » on all your website ?

  5. Sandra

    Bonjour Lycia,

    Je veux que plusieurs pages aient la même couleur de fond. J’ai essayé de regrouper tous les id des pages concernées avec une seule ligne de code (exemple ci-dessous)

    .page-id-28, page-id-29, page-id-13.custom-background {
    background-color: #AC58FA !important;
    }

    Mais cela ne fonctionne pas. Suis-je obligée d’écrire une ligne de code pour chaque page id ? ou bien ai-je fait une erreur dans le code ?

    Merci pour ton aide

  6. Lycia Diaz

    Salut Sandra !
    Effectivement tu peux les regrouper normalement mais ton code ne me parait pas correct. Je ne suis pas devant l’ordinateur, je ne peux donc pas te donner le code exact (je l’ai pas en tête) mais déjà, je note qu’il manque un point devant deux de tes classes. Ensuite, si tu « colles » deux classes ensemble, ça n’aura pas le même sens. Un espace est peut-être nécessaire entre .custom-background et .page-id-xxx . Enfin, l’ordre de tes classes a une importance également… Donc tu n’es pas loin mais il faut tester avec les éléments que je viens de te donner…. 😉

  7. Sandra

    Merci Lycia. Je vais faire des tests.

  8. Petra van der Schoot

    hallo, thanks; this works very well for a page-page, but some how i can’t make it work for a project-page ;the default color stay’s visible on both sides and a small horizontal line just above the bottom menu. I don’t understand. what can i do?

  9. Lycia Diaz

    Hi Petra,
    For a Project Page, you have to change the CSS Classes. You should try « postid-xxx » instead of « page-id-xxx », like this :

    .postid-123.custom-background {
    background-color: #1bb5ea !important;
    }

    instead of

    .page-id-123.custom-background {
    background-color: #1bb5ea !important;
    }

    I think, it would be fine 😉

  10. Petra van der schoot

    thanks very much Lydia!

  11. Lycia Diaz

    You’re Welcome !

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Shares
Share This