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

Published on 24/02/2019 | 11 comments

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

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

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

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

Here is the programme:

  1. Activate the nested layout
  2. Set a default background colour
  3. Get the identifier of each page
  4. Modify the CSS to obtain a different background colour for each page
  5. Here is the video result!
  6. Declination with gradient backgrounds
Couleur de fond différente sur chaque page

Different background colour on each page of your Divi site

Announcement: this article contains affiliate links that you will easily recognise. The classic links are in purple and sponsored links are in pink.

 

1 - Activate the nested page layout

To make the background colour 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

For more information on Divi's nested layout, read this article.

 

2 - Set a default background colour

To set the background colour of your Divi site, you must have its HTML colour code.

Although it is not mandatory, it will be more accurate to use the exact colour of your 'brand' rather than defining it 'at a glance'.

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

If you need to extract a colour from a web page, I advise you to use an indispensable tool: an eyedropper that will collect for you the colour codes of the web pages you visit. Not a day goes by that I don't use it...

Choisir la couleur de fond par défaut

Choose the default background colour in Divi's customisation options

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

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

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

Before you start anything and use the CSS code that I will suggest afterwards, you must list the pages of your site that will be subject to a change of background colour. 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

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

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

 

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

Now that you have the HTML colour 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 > Customise > 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 to 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 colour 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 colour on each page is nice but you can also adapt this technique to get a gradient background colour. 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

Gradient colour 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 might 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.

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.

New Divi training!

55 videos to master the Divi Visual Builder like a pro: ⏱ 3h30 of theory + 👩🏻💻 6h00 of practical application + 🤝 30min. of individual coaching in visio.

(CPF eligible training)

Pin It on Pinterest

Shares
Share This