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:
- Activate the nested layout
- Set a default background colour
- Get the identifier of each page
- Modify the CSS to obtain a different background colour for each page
- Here is the video result!
- Declination with gradient backgrounds
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...
- For Firefox: there is ColorZilla but you don't need to install a plugin because this feature is native in Firefox.
- For Chrome: you can install Colour pipette or ColorZilla
Choose the default background colour in Divi's customisation options
Once you know your colour code, you can go to :
- Appearance > Customise
- Click on General Settings
- Click on Background
- Then click on "Select a colour" in the "Background colour"option
- Define your colour using the slider or the HEX code.
- 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...
How to find the ID of your web page
To obtain the identifier of the pages to be modified :
- 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).
- 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=<strong>9</strong>&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.
Gradient colour in the background
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
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.
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; }
}
Hi Ewa ! What do you want exactly ? « Background changing color » on all your website ?
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
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…. 😉
Merci Lycia. Je vais faire des tests.
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?
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 😉
thanks very much Lydia!
You’re Welcome !
Bonjour Lycia
Merci pour tous tes conseils.
Je suis en train de me familiariser avec Divi et je voudrais comprendre pourquoi je n’arrive pas à faire prolonger le fond dégradé dans la vue sur tablette et téléphone, en fonction des modules. Ainsi quand il s’agit d’un texte, le fond passe très bien mais dès qu’il y a un lecteur vidéo, le fond n’englobe pas totalement le lecteur, ce qui fait que je me retrouve avec un fond blanc sous le lecteur. As-tu une idée pour me sortir de ce pétrin ?
Cordialement
Salut JC, il faut que tu regarde le fond des modules où tu as ce problème : tu dois « jeter » la couleur d’arrière-plan afin d’avoir un fond transparent et ainsi rendre visible ton dégradé.
Bonjour
Encore merci Lucia pour ta réponse.
Une autre demande me vient à ce jour. Je souhaiterai donner aux visiteurs des articles de mon site la possibilité de lire « plus » ou « moins » le texte, surtout quand il peut être assez long. Je cherche depuis longtemps un module ou une possibilité de réaliser cela à partir d’un bouton ou d’une page qui se déroulerait, mais je ne trouve pas véritablement ou alors les infos sur le web sont trop compliquées pour mes neurones.
Aurais-tu une idée ?
D’avance merci
Ah désolée, je ne connais pas de plugin qui pourrait faire cela…