Couleur de fond

Comment obtenir une couleur de fond différente sur chaque page de votre site Divi ?

Mis à jour le 01/06/24

1051 mots

4 minutes de lecture
15 commentaires

Cet article contient des liens d’affiliation reconnaissables grâce à l'icône du pourcentage (%) → je suis un lien d'affiliation

Même si Divi propose de choisir une couleur de fond pour l’ensemble de votre site, vous allez voir qu’il est très simple de modifier cela pour obtenir une couleur différente sur chaque page de votre site.

La couleur de fond est visible uniquement si vous avez choisi un design avec la mise en page emboitée de Divi.

Avez-vous envie de donner une atmosphère différente pour chaque page de votre site ? Une couleur dédiée qui diffère chaque fois que l’internaute navigue au sein de vos pages ?

Le thème Divi ne propose pas cette option de manière native mais c’est très facile d’y remédier, avec seulement quelques lignes de CSS.

Voici le programme :

  1. Activer la mise en page emboitée
  2. Définir une couleur de fond par défaut
  3. Obtenir l’identifiant de chaque page
  4. Modifier le CSS pour obtenir une couleur de fond différente à chaque page
  5. Voici le résultat vidéo !
  6. Déclinaison avec des arrières-plan en dégradé
Couleur de fond différente sur chaque page
Couleur de fond différente sur chaque page de votre site Divi

Annonce : cet article contient des liens d’affiliation que vous reconnaitrez facilement. Les liens classiques sont en violet et les liens sponsorisés sont en rose.

1 – Activer la mise en page emboitée

Pour faire apparaitre la couleur de fond de votre site, la mise en page emboitée de Divi doit être activée. Pour cela, il suffit de vous rendre à l’onglet Apparence > Personnaliser > Paramètres Généraux > Paramètres de mise en page > Activer la mise en page emboitée

Pour en savoir plus sur la mise en page emboitée de Divi, lisez cet article.

2 – Définir une couleur de fond par défaut

Pour définir la couleur de fond de votre site Divi, vous devez être en possession de son code couleur HTML.

Même si cela n’est pas obligatoire, ce sera plus précis d’utiliser la couleur exacte de votre « marque » plutôt que de la définir « à vue d’œil ».

Si vous avez besoin d’idée, il existe de nombreux sites qui proposent des suggestions ou des convertisseurs de couleurs :

Si vous avez besoin d’extraire une couleur depuis une page web, je vous conseille d’utiliser un outil indispensable : une pipette qui récoltera pour vous les codes couleurs des pages web que vous visitez. Il ne se passe pas un seul jour sans que je ne l’utilise…

Choisir la couleur de fond par défaut
Choisir la couleur de fond par défaut dans les options de personnalisation de Divi

Une fois que vous connaissez votre code couleur, vous pourrez aller à :

  1. Apparence > Personnaliser
  2. Cliquez sur Paramètres Généraux
  3. Cliquez sur Fond
  4. Puis sur « Sélectionner une couleur » dans l’option « Couleur d’arrière-plan »
  5. Définissez votre couleur à l’aide du curseur ou du code HEX.
  6. N’oubliez pas de cliquer sur « Publier » pour enregistrer vos modifications.

À présent, la totalité de votre site fera apparaitre la couleur de fond que vous venez de définir (si la mise en page emboitée est activée, je le répète).

Savez-vous que vous pouvez tester Divi gratuitement ? Rendez-vous sur cette page et cliquez sur « TRY IT FOR FREE »

3 – Obtenir l’identifiant de chaque page

Avant de commencer quoi que ce soit et d’utiliser le code CSS que je vous propose après, vous devez lister les pages de votre site qui feront l’objet d’un changement de couleur de fond. Cela vous permettra d’obtenir des valeurs qui sont propres à votre site : l’identifiant de vos pages. Cela pourrait-être la page de contact, la page de service, la page à propos etc.

Obtenir l'identifiant d'une page
Comment trouver l’identifiant de votre page web (ID)

Pour obtenir l’identifiant des pages à modifier :

  1. Rendez-vous sur l’administration de la page en question. Vous pouvez très bien faire cela depuis le front-office en cliquant sur Modifier la page (et non sur activer le visual builder).
  2. Une fois dans votre page en mode « édition », il suffit de regarder la barre d’URL de votre navigateur. Vous verrez une URL de type monsite.com/wp-admin/past.php?post=9&action=edit. Le chiffre après [post=] est l’identifiant de votre page.

Il suffit donc de repérer ces identifiants pour toutes les pages à modifier.

4 – Modifier le CSS pour obtenir une couleur de fond différente à chaque page

Maintenant que vous avez en votre possession les codes couleurs HTML ainsi que les identifiants de vos pages, vous allez pouvoir adapter le code suivant.

Pour cela, il suffit de copier et coller le code ci-dessous dans l’onglet Apparence > Personnaliser > CSS additionnel en changeant les valeurs en rouge par vos propres valeurs.

/* 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;
}

Explications :

  • .page-id-9 : c’est ici que vous devrez changer l’identifiant de votre page. Changez le 9 par les chiffres qui sont propres à vos pages.
  • .custom-background : ne rien changer ici. C’est une classe CSS de Divi. Il ne doit pas y avoir d’espace entre .page-id-9 et .custom-background
  • background-color: #xxxxxx !important; : ici, vous pourrez insérer votre code couleur HTML. Le !important n’est pas obligatoire

5 – Voici le résultat vidéo !

Qu’en dites-vous ? Ça vous donne des idées ?

6 – Déclinaison avec des arrières-plan en dégradé

L’idée d’obtenir une couleur différente sur chaque page est sympa mais vous pouvez également adapter cette technique pour obtenir une couleur de fond en dégradé. Bonne idée ?

Dans ce cas, vous pourrez utiliser le code suivant :

/* 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);
}

Pour en savoir plus sur les gradients en CSS, je vous invite à lire cet article.

Couleur dégradée en arrière-plan
Couleur dégradée en arrière-plan
Couleur de fond différente sur chaque page de son site Divi
couleur

Obtenir Divi

Formation Divi

Ebook Divi PDF

Astuces gratuites

Quiz Divi

Coaching Visio Divi

icon 256x256

Fièrement traduit par wpLingua, l'extension de traduction pour WordPress que je développe ! SEO-Friendly / Automatique / Éditable

15 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 !

  12. jamet JC

    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

  13. Lycia Diaz

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

  14. jamet

    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

  15. Lycia Diaz

    Ah désolée, je ne connais pas de plugin qui pourrait faire cela…

Soumettre un commentaire

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

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